Nutzer mit einer E-Mail-Adresse über die Identity Platform anmelden

Hier erfahren Sie, wie Sie mit Identity Platform einen Nutzer mit einer E-Mail-Adresse und einem Passwort anmelden.

Eine detaillierte Anleitung dazu finden Sie direkt in der Google Cloud Console. Klicken Sie dazu einfach auf Anleitung:

Anleitung

Hinweise

  1. Sign in to your Google Cloud account. If you're new to Google Cloud, create an account to evaluate how our products perform in real-world scenarios. New customers also get $300 in free credits to run, test, and deploy workloads.

  2. In the Google Cloud console, on the project selector page, select or create a Google Cloud project.

    Go to project selector

  3. Make sure that billing is enabled for your Google Cloud project.

  4. Make sure that you have the following role or roles on the project: Identity Platform Admin, Service Usage Admin

    Check for the roles

    1. In the Google Cloud console, go to the IAM page.

      Go to IAM
    2. Select the project.

    3. In the Principal column, find all rows that identify you or a group that you're included in. To learn which groups you're included in, contact your administrator.

    4. For all rows that specify or include you, check the Role column to see whether the list of roles includes the required roles.

    Grant the roles

    1. In the Google Cloud console, go to the IAM page.

      Zu IAM
    2. Wählen Sie das Projekt aus.
    3. Klicken Sie auf Zugriff erlauben.

    4. Geben Sie im Feld Neue Hauptkonten Ihre Nutzer-ID ein. Dies ist in der Regel die E-Mail-Adresse eines Google-Kontos.

    5. Wählen Sie in der Liste Rolle auswählen eine Rolle aus.
    6. Wenn Sie weitere Rollen hinzufügen möchten, klicken Sie auf Weitere Rolle hinzufügen und fügen Sie weitere Rollen hinzu.
    7. Klicken Sie auf Speichern.

  5. In the Google Cloud console, on the project selector page, select or create a Google Cloud project.

    Go to project selector

  6. Make sure that billing is enabled for your Google Cloud project.

  7. Make sure that you have the following role or roles on the project: Identity Platform Admin, Service Usage Admin

    Check for the roles

    1. In the Google Cloud console, go to the IAM page.

      Go to IAM
    2. Select the project.

    3. In the Principal column, find all rows that identify you or a group that you're included in. To learn which groups you're included in, contact your administrator.

    4. For all rows that specify or include you, check the Role column to see whether the list of roles includes the required roles.

    Grant the roles

    1. In the Google Cloud console, go to the IAM page.

      Zu IAM
    2. Wählen Sie das Projekt aus.
    3. Klicken Sie auf Zugriff erlauben.

    4. Geben Sie im Feld Neue Hauptkonten Ihre Nutzer-ID ein. Dies ist in der Regel die E-Mail-Adresse eines Google-Kontos.

    5. Wählen Sie in der Liste Rolle auswählen eine Rolle aus.
    6. Wenn Sie weitere Rollen hinzufügen möchten, klicken Sie auf Weitere Rolle hinzufügen und fügen Sie weitere Rollen hinzu.
    7. Klicken Sie auf Speichern.

    8. Identity Platform aktivieren

    1. Rufen Sie in der Google Cloud Console im Cloud Marketplace die Seite Identity Platform auf.

      Zur Identity Platform

    2. Klicken Sie auf Identity Platform aktivieren.

E-Mail-Anmeldung konfigurieren

  1. Rufen Sie die Seite Identitätsanbieter auf.

    Zu „Identitätsanbieter“

  2. Klicken Sie auf der Seite Identitätsanbieter auf Anbieter hinzufügen.

  3. Wählen Sie in der Liste Anbieter auswählen die Option E-Mail/Passwort aus.

  4. Klicken Sie auf den Schalter Aktiviert, um ihn auf „Ein“ zu stellen.

  5. Klicken Sie auf Speichern, um die Anbietereinstellungen zu speichern.

Nutzer erstellen

  1. Rufen Sie in der Google Cloud Console die Seite Nutzer auf.

    Zu „Nutzer“

  2. Klicken Sie auf Nutzer hinzufügen.

  3. Geben Sie im Feld E-Mail eine E-Mail-Adresse und ein Passwort ein. Notieren Sie sich diese Werte, da Sie sie in einem späteren Schritt benötigen.

  4. Klicken Sie auf Hinzufügen, um den Nutzer hinzuzufügen. Der neue Nutzer wird auf der Seite Nutzer aufgelistet.

Nutzer anmelden

Die Schritte zum Anmelden des Nutzers variieren je nach der SDK-Version, die Ihre App verwendet. Achten Sie darauf, dass Sie die richtigen Schritte für Ihre Anwendung ausführen.

SDK v9 (modular)

SDK installieren und Firebase initialisieren

In Version 9 des Firebase JS SDK wird das Format JavaScript Module verwendet.

Bei diesem Workflow wird npm verwendet und es sind Module Bundler oder JavaScript-Framework-Tools erforderlich, da das v9-SDK für die Verwendung mit Module Bundlern optimiert ist, um ungenutzten Code zu entfernen (Tree Shaking) und die SDK-Größe zu verringern.

So verwenden Sie das v9-SDK:

  1. Installieren Sie Firebase über npm im Projektverzeichnis:

    npm install firebase

  2. Initialisieren Sie Firebase in Ihrer App und erstellen Sie ein Firebase-App-Objekt:

    import { initializeApp } from 'firebase/app';

const firebaseConfig = {
    apiKey: "API_KEY",
    authDomain: "AUTH_DOMAIN"
};

const app = initializeApp(firebaseConfig);

    Ersetzen Sie Folgendes:

    • API_KEY: die apiKey Ihres Firebase-Projekts.
    • AUTH_DOMAIN: die authDomain Ihres Firebase-Projekts.

    Sie finden diese Werte in der Firebase-Projektkonfiguration Ihrer App.

    Eine Firebase-App ist ein containerähnliches Objekt, in dem die gemeinsame Konfiguration gespeichert wird und die Authentifizierung für alle Firebase-Dienste erfolgt. Nachdem Sie ein Firebase-App-Objekt in Ihrem Code initialisiert haben, können Sie Firebase-Dienste hinzufügen und verwenden.

Über JavaScript auf Identity Platform zugreifen

Nachdem Sie das Firebase SDK initialisiert haben, können Sie es überall in Ihrer App verwenden. Hier sehen Sie beispielsweise eine App, die versucht, einen fest codierten Nutzer anzumelden und das Ergebnis auf einer Webseite anzuzeigen.

import { initializeApp } from 'firebase/app';
import {
  onAuthStateChanged,
  signInWithEmailAndPassword,
  getAuth
} from 'firebase/auth';

const firebaseConfig = {
  apiKey: "API_KEY",
  authDomain: "AUTH_DOMAIN"
};
const app = initializeApp(firebaseConfig);
const auth = getAuth(app, {/* extra options */ });

document.addEventListener("DOMContentLoaded", () => {
  onAuthStateChanged(auth, (user) => {
      if (user) {
          document.getElementById("message").innerHTML = "Welcome, " + user.email;
      }
      else {
          document.getElementById("message").innerHTML = "No user signed in.";
      }
  });
  signIn();
});

function signIn() {
  const email = "EMAIL_ID";
  const password = "PASSWORD";
  signInWithEmailAndPassword(auth, email, password)
      .catch((error) => {
          document.getElementById("message").innerHTML = error.message;
      });
}

Ersetzen Sie Folgendes:

  • API_KEY: die apiKey Ihres Firebase-Projekts.
  • AUTH_DOMAIN: die authDomain Ihres Firebase-Projekts.
  • EMAIL_ID: die Nutzer-E-Mail-Adresse, die Sie zuvor in diesem Leitfaden erstellt haben.
  • PASSWORD: das Nutzerpasswort, das Sie zuvor in dieser Anleitung erstellt haben.

Modul-Bundler zur Größenreduzierung verwenden

Das Firebase Web SDK ist für die Verwendung mit Modul-Bundlern konzipiert, um nicht verwendeten Code zu entfernen (Tree Shaking). Wir empfehlen dringend, diesen Ansatz für Produktions-Apps zu verwenden. Tools wie die Angular CLI, Next.js, Vue CLI oder Create React App übernehmen das Modul-Bundling für Bibliotheken, die über npm installiert und in Ihren Code importiert werden.

Sie können beispielsweise Webpack verwenden, um einen dist-Ordner mit dem gebündelten Anwendungs- und Abhängigkeitscode zu erstellen. Weitere Informationen finden Sie unter Modul-Bundler mit Firebase verwenden.

JavaScript in Ihre Seite importieren

  1. Erstellen Sie eine neue Datei mit dem Namen index.html.

  2. Fügen Sie zwei einfache HTML-Container hinzu und importieren Sie das gebündelte JS.

    <script defer src="js/bundled.js"></script>
<div>Identity Platform Quickstart</div>
<div id="message">Loading...</div>

  3. Starten Sie index.html in Ihrem Webbrowser. Daraufhin wird eine Willkommensnachricht mit der E-Mail-Adresse des Nutzers angezeigt.

SDK 8 (alt)

Webseite erstellen

  1. Erstellen Sie auf Ihrem lokalen Computer eine neue Datei mit dem Namen index.html.

  2. Fügen Sie der HTML-Datei zwei HTML-Container hinzu:

    <div>Identity Platform Quickstart</div>
<div id="message">Loading...</div>

Identity Platform Client SDK mit Ihrem API-Schlüssel initialisieren

  1. Rufen Sie in der Google Cloud Console die Seite Identitätsanbieter auf.

    Zu „Identitätsanbieter“

  2. Klicken Sie auf Details zur Einrichtung der Anwendung.

  3. Kopieren Sie den Initialisierungscode in index.html.

Nutzer anmelden

  1. Zum Anmelden des Nutzers kopieren Sie den folgenden Code in index.html:

    <script>
  var email = "EMAIL_ID";
  var password = "PASSWORD";

  firebase.auth().onAuthStateChanged(function(user) {
    if (user) {
      document.getElementById("message").innerHTML = "Welcome, " + user.email;
    } else {
      document.getElementById("message").innerHTML = "No user signed in.";
    }
  });

  firebase.auth().signInWithEmailAndPassword(email, password).catch(function(error) {
    document.getElementById("message").innerHTML = error.message;
  });
</script>

    Mit diesem Code wird signInWithEmailAndPassword() aufgerufen und das Ergebnis dann mit dem onAuthStateChanged()-Callback verarbeitet.

    Ersetzen Sie Folgendes:

    • EMAIL_ID: die E-Mail-Adresse des Nutzers, den Sie zuvor erstellt haben
    • PASSWORD: das Passwort für den Nutzer, den Sie zuvor erstellt haben

  2. Öffnen Sie index.html in Ihrem Webbrowser. Daraufhin wird eine Willkommensnachricht mit der E-Mail-Adresse des Nutzers angezeigt.

Die Anzahl fehlgeschlagener Anmeldeversuche ist begrenzt. Bei mehreren schnellen, fehlgeschlagenen Anmeldeversuchen wird der Nutzer vorübergehend aus seinem Konto ausgesperrt.

Weitere Informationen zu anderen Identity Platform-Limits finden Sie unter Kontingente und Limits.

Bereinigen

Mit den folgenden Schritten vermeiden Sie, dass Ihrem Google Cloud -Konto die auf dieser Seite verwendeten Ressourcen in Rechnung gestellt werden:

Anbieter und Nutzer löschen

Wenn Sie ein vorhandenes Google Cloud -Projekt verwendet haben, löschen Sie den Anbieter und den Nutzer, den Sie erstellt haben, um Gebühren für Ihr Konto zu vermeiden:

  1. Rufen Sie in der Google Cloud Console die Seite Identitätsanbieter auf.

    Zu „Identitätsanbieter“

  2. Wenn Sie den Anbieter löschen möchten, klicken Sie neben seinem Namen auf Löschen. Klicken Sie zur Bestätigung auf Löschen.

  3. Rufen Sie in der Google Cloud Console die Seite Nutzer auf.

    Zu „Nutzer“

  4. Wenn Sie den von Ihnen erstellten Nutzer löschen möchten, klicken Sie neben seinem Namen auf Löschen. Klicken Sie zur Bestätigung auf Löschen.

Projekt löschen

Am einfachsten vermeiden Sie weitere Kosten durch Löschen des für die Anleitung erstellten Projekts.

So löschen Sie das Projekt:

  1. In the Google Cloud console, go to the Manage resources page.

    Go to Manage resources

  2. In the project list, select the project that you want to delete, and then click Delete.
  3. In the dialog, type the project ID, and then click Shut down to delete the project.

Nächste Schritte

In einer echten Anwendung würden sich Ihre Nutzer über eine eigene Registrierungsseite registrieren und sich mit ihrer E-Mail-Adresse und einem Passwort anmelden. Identity Platform bietet eine vordefinierte UI für die Authentifizierung, die Sie für diese Seiten verwenden können. Sie können auch eine eigene Authentifizierung erstellen. Möglicherweise möchten Sie auch zusätzliche Anmeldemethoden wie Anbieter sozialer Netzwerke (z. B. Facebook oder Google), Telefonnummern, OIDC oder SAML unterstützen.

Informieren Sie sich über folgende Themen: