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

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

Informationen zum Anmelden eines Nutzers mit einer E-Mail-Adresse und einem Passwort über die Identity Platform

---

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

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.

   Note: If you don't plan to keep the resources that you create in this procedure, create a project instead of selecting an existing project. After you finish these steps, you can delete the project, removing all resources associated with the 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 colunn 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. In the Google Cloud console, on the project selector page, select or create a Google Cloud project.

      Note: If you don't plan to keep the resources that you create in this procedure, create a project instead of selecting an existing project. After you finish these steps, you can delete the project, removing all resources associated with the project.

      Go to project selector

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

   10. 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 colunn 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.

       Identity Platform aktivieren

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

          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 den Schalter Aktiviert, um die Funktion 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 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 der verwendeten SDK-Version Ihrer App. Achten Sie darauf, dass Sie die richtigen Schritte für Ihre Anwendung ausführen.

Hinweis: Die Verwendung des SDK v9 wird dringend empfohlen, insbesondere für Produktions-Apps. Support für andere SDK-Verwaltungsoptionen wie window.firebase findest du unter Upgrade von Version 8 auf das modulare Web SDK oder Alternative Möglichkeiten zum Hinzufügen von Firebase.

SDK Version 9 (modular)

SDK installieren und Firebase initialisieren

In Version 9 des Firebase JS SDK wird ein JavaScript-Modul Format.

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

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

1. Installieren Sie Firebase mit npm im Projektverzeichnis:

   npm install firebase

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

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

   Wenn Sie ESM und Browsermodule Ersetzen Sie alle import-Zeilen durch Folgendes: Muster:
   import { } from 'https://www.gstatic.com/firebasejs/11.0.0/firebase-SERVICE.js',
   wobei SERVICE ein SDK-Name wie firebase-firestore

   Für den Einstieg können Sie Browsermodule verwenden, wir empfehlen jedoch, mit einem Module Bundler für die Produktion.

Identity Platform mit JavaScript aufrufen

Nachdem Sie das Firebase SDK initialisiert haben, können Sie es überall in Ihrer App verwenden. Hier ist 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

Hinweis: Sie können diesen Schritt überspringen, wenn Sie ein CLI-Tool für ein JavaScript-Framework verwenden, z. B. die Angular CLI, Next.js, Vue CLI oder Create React App. Weitere Informationen finden Sie in unserem Leitfaden zum Binden von Modulen.

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 automatisch das Modul-Bündeln 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. 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.

   „Identity Providers“ (Identitätsanbieter) aufrufen

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>
   

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

   „Identity Providers“ (Identitätsanbieter) aufrufen

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.

   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:

Achtung: Das Löschen von Projekten hat folgende Auswirkungen:

• Alle Inhalte des Projekts werden gelöscht. Wenn Sie für die Aufgaben in diesem Dokument ein bereits bestehendes Projekt verwendet haben und dieses löschen, werden auch alle anderen im Rahmen des Projekts erstellten Daten gelöscht.
• Benutzerdefinierte Projekt-IDs gehen verloren. Beim Erstellen dieses Projekts haben Sie möglicherweise eine benutzerdefinierte Projekt-ID erstellt, die Sie weiterhin verwenden möchten. Damit die URLs, die die Projekt-ID nutzen, z. B. eine appspot.com-URL, erhalten bleiben, sollten Sie ausgewählte Ressourcen innerhalb des Projekts löschen, statt das gesamte Projekt.

Wenn Sie mehrere Architekturen, Anleitungen und Kurzanleitungen durcharbeiten möchten, können Sie die Überschreitung von Projektkontingenten verhindern, indem Sie Projekte wiederverwenden.

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:

• Nutzer mit JavaScript, Android-Geräten, iOS-Geräten, C ++ oder Unity anmelden

• Nutzer mit OIDC oder SAML anmelden

• Nutzer aus Ihrer vorhandenen App migrieren auf die Identity Platform.