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

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

Klicken Sie auf Anleitung, um die Schritt-für-Schritt-Anleitung für diese Aufgabe direkt in der Google Cloud Console auszuführen:

Anleitung

Hinweise

  1. Melden Sie sich bei Ihrem Google Cloud-Konto an. Wenn Sie mit Google Cloud noch nicht vertraut sind, erstellen Sie ein Konto, um die Leistungsfähigkeit unserer Produkte in der Praxis sehen und bewerten zu können. Neukunden erhalten außerdem ein Guthaben von 300 $, um Arbeitslasten auszuführen, zu testen und bereitzustellen.

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

    Go to project selector

  3. Die Abrechnung für das Google Cloud-Projekt muss aktiviert sein.

  4. Prüfen Sie, ob Sie die folgenden Rollen für das Projekt haben: Identity Platform Admin, Service Usage Admin

    Auf Rollen prüfen

    1. Öffnen Sie in der Google Cloud Console die Seite IAM.

      IAM aufrufen
    2. Wählen Sie das Projekt aus.

    3. Suchen Sie in der Spalte Hauptkonto die Zeile mit Ihrer E-Mail-Adresse.

      Ist Ihre E-Mail-Adresse nicht in dieser Spalte enthalten, haben Sie keine Rollen.

    4. Prüfen Sie in der Spalte Rolle der Zeile mit Ihrer E-Mail-Adresse, ob die Liste der Rollen die erforderlichen Rollen enthält.

    Rollen zuweisen

    1. Öffnen Sie in der Google Cloud Console die Seite IAM.

      IAM aufrufen
    2. Wählen Sie das Projekt aus.
    3. Klicken Sie auf Zugriff erlauben.
    4. Geben Sie in das Feld Neue Hauptkonten Ihre E-Mail-Adresse ein.
    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. Die Abrechnung für das Google Cloud-Projekt muss aktiviert sein.

  7. Prüfen Sie, ob Sie die folgenden Rollen für das Projekt haben: Identity Platform Admin, Service Usage Admin

    Auf Rollen prüfen

    1. Öffnen Sie in der Google Cloud Console die Seite IAM.

      IAM aufrufen
    2. Wählen Sie das Projekt aus.

    3. Suchen Sie in der Spalte Hauptkonto die Zeile mit Ihrer E-Mail-Adresse.

      Ist Ihre E-Mail-Adresse nicht in dieser Spalte enthalten, haben Sie keine Rollen.

    4. Prüfen Sie in der Spalte Rolle der Zeile mit Ihrer E-Mail-Adresse, ob die Liste der Rollen die erforderlichen Rollen enthält.

    Rollen zuweisen

    1. Öffnen Sie in der Google Cloud Console die Seite IAM.

      IAM aufrufen
    2. Wählen Sie das Projekt aus.
    3. Klicken Sie auf Zugriff erlauben.
    4. Geben Sie in das Feld Neue Hauptkonten Ihre E-Mail-Adresse ein.
    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.

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.

    Zur Seite „Identitätsplattformanbieter“

  2. Klicken Sie auf der Seite Identity Providers (Identitätsanbieter) auf Add a Provider (Anbieter hinzufügen).

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

  4. Klicken Sie auf die Ein/Aus-Schaltfläche Aktiviert, um die Option zu aktivieren.

  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 aufgeführt.

Nutzer anmelden

Die Schritte zum Anmelden des Nutzers variieren je nach SDK-Version, die in Ihrer App verwendet wird. Achten Sie darauf, die richtigen Schritte für Ihre Anwendung auszuführen.

SDK Version 9 (modular)

SDK installieren und Firebase initialisieren

In Version 9 des Firebase JS SDK wird ein JavaScript-Modulformat verwendet.

Dieser Workflow verwendet npm und erfordert Modul-Bundler oder JavaScript-Framework-Tools, da das SDK v9 für die Verwendung mit Modul-Bundlers optimiert ist, um nicht verwendeten Code (Tree Shaking) zu entfernen und die SDK-Größe zu verringern.

Führen Sie die folgenden Schritte aus, um das SDK v9 zu verwenden:

  1. Installieren Sie Firebase aus dem Projektverzeichnis mit npm:

    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, das eine gemeinsame Konfiguration speichert und die Authentifizierung für alle Firebase-Dienste teilt. Nachdem Sie ein Firebase App-Objekt in Ihrem Code initialisiert haben, können Sie Firebase-Dienste hinzufügen und verwenden.

Identity Platform mit JavaScript aufrufen

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 hartcodierten 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 E-Mail-Adresse des Nutzers, die Sie zuvor in diesem Leitfaden erstellt haben.
  • PASSWORD: Das Nutzerpasswort, das Sie zuvor in diesem Leitfaden erstellt haben.

Module Bundler zur Größenreduzierung verwenden

Das Firebase Web SDK ist so konzipiert, dass es mit Modul-Bundlers zusammenarbeitet, um nicht verwendeten Code zu entfernen (Baumwackeln). Wir empfehlen dringend, diesen Ansatz für Produktionsanwendungen zu verwenden. Tools wie die Angular CLI, Next.js, Vue CLI oder Create React App verarbeiten die Modulbündelung für Bibliotheken, die über npm installiert und in Ihre Codebasis importiert wurden.

Sie können beispielsweise Webpack verwenden, um einen dist-Ordner zu generieren, der die gebündelte Anwendung und den Abhängigkeitscode enthält. 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 Version 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ätsanbietern

  2. Klicken Sie auf Details zur Einrichtung der Anwendung.

  3. Kopieren Sie den Initialisierungscode in index.html.

Nutzer anmelden

  1. Kopieren Sie den folgenden Code in index.html, um den Nutzer anzumelden:

    <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>

    Dieser Code ruft signInWithEmailAndPassword() auf und verarbeitet dann das Ergebnis mit dem onAuthStateChanged()-Callback.

    Ersetzen Sie Folgendes:

    • EMAIL_ID: die E-Mail-Adresse des Nutzers, den Sie zuvor erstellt haben
    • PASSWORD: das Passwort des zuvor erstellten Nutzers

  2. Öffne index.html in deinem 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ätsanbietern

  2. Klicken Sie neben dem Namen des Anbieters auf Löschen, um den Anbieter zu 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. Klicken Sie neben dem Namen des Nutzers auf Löschen, um den von Ihnen erstellten Nutzer zu 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. Wechseln Sie in der Google Cloud Console zur Seite Ressourcen verwalten.

    Zur Seite „Ressourcen verwalten“

  2. Wählen Sie in der Projektliste das Projekt aus, das Sie löschen möchten, und klicken Sie dann auf Löschen.
  3. Geben Sie im Dialogfeld die Projekt-ID ein und klicken Sie auf Shut down (Beenden), um das Projekt zu löschen.

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: