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.

      IAM aufrufen
   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.

          IAM aufrufen
       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 im Cloud Marketplace die Seite Identity Platform auf.

          Identity Platform aufrufen

       2. Klicken Sie auf Identity Platform aktivieren.

E-Mail-Anmeldung konfigurieren

1. Zur Seite „Identitätsanbieter“

   „Identity Providers“ (Identitätsanbieter) aufrufen

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

Hinweis: Die Verwendung des SDKs der Version 9 wird dringend empfohlen, insbesondere für Produktions-Apps. Wenn Sie Unterstützung bei anderen SDK-Verwaltungsoptionen wie window.firebase benötigen, lesen Sie den Hilfeartikel Auf das modulare Web SDK umstellen oder Alternative Möglichkeiten zum Hinzufügen von Firebase.

SDK Version 9 (modular)

SDK installieren und Firebase initialisieren

Version 9 des Firebase JS SDK verwendet das Format „JavaScript-Modul“.

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 nicht verwendeten Code zu entfernen (Tree Shaking) und die SDK-Größe zu verringern.

So verwenden Sie das v9 SDK:

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 verwenden und Browsermodule verwenden möchten, ersetzen Sie alle import-Zeilen durch das folgende Muster:
   import { } from 'https://www.gstatic.com/firebasejs/11.0.2/firebase-SERVICE.js',
   wobei SERVICE ein SDK-Name wie firebase-firestore ist.

   Browsermodule sind eine schnelle Möglichkeit, loszulegen. Wir empfehlen jedoch, für die Produktion einen Modul-Bundler zu verwenden.

In JavaScript auf Identity Platform zugreifen

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 dieser Anleitung erstellt haben.

Modul-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 verwalten das Modul-Bündeln für Bibliotheken, die über npm installiert und in Ihre Codebasis importiert wurden, automatisch.

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

JavaScript-Code in die 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 kompilierte 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. 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>
   

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

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 Anwendung zur Identity Platform migrieren