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

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

Klicken Sie auf Anleitung, um eine detaillierte Anleitung für diese Aufgabe direkt in der Google Cloud Console aufzurufen.

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 die Seite Identity Platform auf Cloud Marketplace

    <ph type="x-smartling-placeholder"></ph> 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/Passwort.

  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.

    <ph type="x-smartling-placeholder"></ph> Zu den Nutzern

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

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-Modul Format.

Dieser Workflow verwendet npm und erfordert Modul-Bundler oder JavaScript-Framework da das SDK v9 für die Arbeit mit Modul-Bundler zu Entfernen Sie nicht verwendeten Code (Baumwackeln) und verringern Sie die SDK-Größe.

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 gängige Konfigurationen und ermöglicht die Authentifizierung für alle Firebase-Dienste. Nach der Initialisierung Firebase-App-Objekt in Ihren Code einfügen, können Sie Firebase hinzufügen und verwenden. .

Identity Platform mit JavaScript aufrufen

Nachdem Sie das Firebase SDK initialisiert haben, können Sie es überall in Ihrem Hier sehen Sie beispielsweise eine App, die versucht, sich mit einem hartcodierten und das Ergebnis auf einer Webseite anzeigen.

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 Modul-Bundler verwendet, um jegliche nicht verwendetem Code (Baumschütteln). Wir empfehlen diesen Ansatz für Produktions-Apps. Tools wie die Angular CLI, Next.js, Vue CLI, oder React-App erstellen Modulbundling für Bibliotheken, die über npm installiert wurden, in Ihre Codebasis importiert.

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

    <ph type="x-smartling-placeholder"></ph> Zur Seite „Identitätsanbieter“

  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 in dieser Anleitung 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.

    <ph type="x-smartling-placeholder"></ph> Zur Seite „Identitätsanbieter“

  2. Um den Anbieter zu löschen, klicken Sie auf Löschen neben dem Namen der Dienstanbieter. Klicken Sie zur Bestätigung auf Löschen.

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

    <ph type="x-smartling-placeholder"></ph> Zu den Nutzern

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