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. Wählen Sie in der Google Cloud Console auf der Seite der Projektauswahl ein Google Cloud-Projekt aus oder erstellen Sie eines.

    Zur Projektauswahl

  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. Wählen Sie in der Google Cloud Console auf der Seite der Projektauswahl ein Google Cloud-Projekt aus oder erstellen Sie eines.

    Zur Projektauswahl

  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.

  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-Adresse/Passwort aus.

  4. Stellen Sie den Schalter Aktiviert auf „Ein“.

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

Nutzer erstellen

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

    Zur Seite „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 nachdem, welche SDK-Version Ihre App verwendet. Führen Sie die richtigen Schritte für Ihre Anwendung aus.

SDK Version 9 (modular)

SDK installieren und Firebase initialisieren

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

Dieser Workflow verwendet npm und erfordert Modul-Bundler oder JavaScript-Framework-Tools, da das SDK v9 für die Arbeit mit Modul-Bundlern optimiert ist, um nicht verwendeten Code (Baumwackeln) zu beseitigen 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: apiKey Ihres Firebase-Projekts.
    • AUTH_DOMAIN: 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.

Über JavaScript auf die Identity Platform zugreifen

Nachdem Sie das Firebase SDK initialisiert haben, können Sie es überall in Ihrer Anwendung 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: apiKey Ihres Firebase-Projekts.
  • AUTH_DOMAIN: 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.

Modul-Bundler zur Größenreduzierung verwenden

Das Firebase Web SDK ist so konzipiert, dass es mit Modul-Bundlern verwendet werden kann, 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 übernehmen automatisch die Modulbündelung für Bibliotheken, die über npm installiert und in die Codebasis importiert wurden.

Sie können beispielsweise mit Webpack einen dist-Ordner erstellen, 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 (alte Version)

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 den Identitätsanbietern

  2. Klicken Sie auf Details zur Einrichtung der Anwendung.

  3. Kopieren Sie den Initialisierungscode in index.html.

Nutzer anmelden

  1. Um den Nutzer anzumelden, 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 wird dann mit dem onAuthStateChanged()-Callback verarbeitet.

    Ersetzen Sie Folgendes:

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

  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 den Identitätsanbietern

  2. Klicken Sie zum Löschen des Anbieters 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.

    Zur Seite „Nutzer“

  4. Um den von Ihnen erstellten Nutzer zu löschen, klicken Sie neben dem Namen des Nutzers 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. 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: