Nutzer mit OIDC anmelden

In diesem Artikel erfahren Sie, wie Sie Nutzer mit Identity Platform bei einem OIDC-Anbieter (OpenID Connect) anmelden.

Hinweis

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. Die Abrechnung für das Google Cloud-Projekt muss aktiviert sein.

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

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

6. Aktivieren Sie Identity Platform und fügen Sie das Client SDK zu Ihrer Anwendung hinzu. Weitere Informationen finden Sie in der Kurzanleitung.

Anbieter konfigurieren

1. Rufen Sie in der Google Cloud Console die Seite Identitätsanbieter auf.
   Zur Seite "Identitätsanbieter"
   

2. Klicken Sie auf Anbieter hinzufügen und wählen Sie OpenID Connect aus der Liste aus.

Autorisierungscode-Ablauf

1. Geben Sie die folgenden Details ein, um den Autorisierungscode-Ablauf zu aktivieren:

   1. Wählen Sie im Abschnitt Berechtigungstyp auswählen die Option Codeablauf aus.

   2. Name des Anbieters. Dieser kann die Anbieter-ID oder ein benutzerdefinierter Name sein. Wenn Sie einen benutzerdefinierten Namen eingeben, klicken Sie neben Anbieter-ID auf Bearbeiten, um die ID anzugeben. Diese muss mit oidc. beginnen.

   3. Client-ID des Anbieters.

   4. Aussteller des Anbieters. Dieser sollte in etwa so aussehen: https://example.com. Identity Platform verwendet diese URL zum Ermitteln des OIDC-Discovery-Dokuments. Dies finden Sie normalerweise unter /.well-known/openid-configuration. Der Wert gibt die OAuth-Endpunkte und öffentlichen Schlüssel des Anbieters an.

      Hinweis: :Wenn Ihr OIDC-Anbieter nicht der OIDC-Spezifikation für die Erkennung entspricht, kann er nicht mit Identity. Plattform verwendet werden.

   5. Den Clientschlüssel des Anbieters.

2. Fügen Sie Ihre Anwendung zur Liste der autorisierten Domains hinzu. Wenn die Anmelde-URL Ihrer Anwendung beispielsweise https://example.com/login lautet, fügen Sie example.com hinzu.

3. Konfigurieren Sie die Callback-URL der Identity Platform als Weiterleitungs-URL mit Ihrem OIDC-Anbieter. Die URL sollte in etwa so aussehen: https://[PROJECT-ID].firebaseapp.com/__/auth/handler.

4. Klicken Sie auf Speichern.

Impliziter Ablauf

1. Geben Sie die folgenden Details ein, um den impliziten Ablauf zu aktivieren:

   1. Wählen Sie im Abschnitt Grant-Typ auswählen die Option Impliziter Ablauf aus.

   2. Name des Anbieters. Dieser kann die Anbieter-ID oder ein benutzerdefinierter Name sein. Wenn Sie einen benutzerdefinierten Namen eingeben, klicken Sie neben Anbieter-ID auf Bearbeiten, um die ID anzugeben. Diese muss mit oidc. beginnen.

   3. Client-ID des Anbieters.

   4. Aussteller des Anbieters. Dies sollte in etwa so aussehen wie https://example.com., also jene URL, die Identity Platform verwendet, um das OIDC-Discovery-Dokument zu finden. Das Dokument gibt die OAuth-Endpunkte und den öffentlichen Schlüssel des Anbieters an und ist in der Regel unter /.well-known/openid-configuration zu finden.

      Hinweis: :Wenn Ihr OIDC-Anbieter nicht der OIDC-Spezifikation für die Erkennung entspricht, kann er nicht mit Identity. Plattform verwendet werden.

2. Fügen Sie Ihre Anwendung zur Liste der autorisierten Domains hinzu. Wenn die Anmelde-URL Ihrer Anwendung beispielsweise https://example.com/login lautet, fügen Sie example.com hinzu.

3. Konfigurieren Sie die Callback-URL der Identity Platform als Weiterleitungs-URL mit Ihrem OIDC-Anbieter. Die URL sollte in etwa so aussehen: https://[PROJECT-ID].firebaseapp.com/__/auth/handler.

4. Klicken Sie auf Speichern.

Nutzer anmelden

Nutzer haben zwei Möglichkeiten, sich mit OIDC anzumelden:

• OAuth-Ablauf verwenden. Dieser Ansatz schließt den OAuth-Handshake für Sie ab. Basierend auf der Auswahl des Autorisierungscode-Ablaufs/impliziten Ablaufs im Schritt zum Konfigurieren des Anbieters wählt der GCIP-Server den gewünschten Ablauf für die Kommunikation mit dem Identitätsanbieter aus.

• ID-Token des OIDC-Anbieters verwenden Bei dieser Methode wird davon ausgegangen, dass Sie bereits ein OIDC-Token haben.

Nutzer mit OAuth anmelden

So melden Sie sich mit OAuth an:

1. Erstellen Sie eine OAuthProvider-Instanz mit der Anbieter-ID, die Sie im vorherigen Abschnitt konfiguriert haben. Die Anbieter-ID muss mit oidc. beginnen.

   Webversion 9

   Weitere Informationen zur modularen Web API, die durch Tree Shaking optimiert werden kann, und zum Upgrade von der API mit Namensraum.

   import { OAuthProvider } from "firebase/auth";
   
   const provider = new OAuthProvider("oidc.myProvider");
   auth_oidc_provider_create.js

   Web version 8

   const provider = new firebase.auth.OAuthProvider('oidc.myProvider');
   oidc.js

2. Starten Sie den Anmeldevorgang. Sie können entweder ein Pop-up-Fenster oder eine Weiterleitung verwenden.

   Pop-up

   Webversion 9

   Weitere Informationen zur modularen Web API, die durch Tree Shaking optimiert werden kann, und zum Upgrade von der API mit Namensraum.

   import { getAuth, signInWithPopup, OAuthProvider } from "firebase/auth";
   
   const auth = getAuth();
   signInWithPopup(auth, provider)
     .then((result) => {
       // User is signed in.
       const credential = OAuthProvider.credentialFromResult(result);
       // This gives you an access token for the OIDC provider. You can use it to directly interact with that provider
     }).catch((error) => {
       // Handle Errors here.
       const errorCode = error.code;
       const errorMessage = error.message;
       // The email of the user's account used.
       const email = error.customData.email;
       // The AuthCredential type that was used.
       const credential = OAuthProvider.credentialFromError(error);
       // Handle / display error.
       // ...
     });
   auth_oidc_signin_popup.js

   Web version 8

   firebase.auth().signInWithPopup(provider)
     .then((result) => {
       // User is signed in.
       // result.credential is a firebase.auth().OAuthCredential object.
       // result.credential.providerId is equal to 'oidc.myProvider'.
       // result.credential.idToken is the OIDC provider's ID token.
     })
     .catch((error) => {
       // Handle error.
     });
   oidc.js

   Weiterleiten

   Rufen Sie signInWithRedirect() auf, um auf eine Anmeldeseite weiterzuleiten:

   Web version 9

   Weitere Informationen zur modularen Web API, die durch Tree Shaking optimiert werden kann, und zum Upgrade von der API mit Namensraum.

   import { getAuth, signInWithRedirect } from "firebase/auth";
   
   const auth = getAuth();
   signInWithRedirect(auth, provider);
   auth_oidc_signin_redirect.js

   Webversion 8

   firebase.auth().signInWithRedirect(provider).catch((error) => {
     // Handle error.
   });
   oidc.js

   Rufen Sie dann getRedirectResult() auf, um die Ergebnisse abzurufen, wenn der Nutzer zu Ihrer Anwendung zurückgeleitet wird:

   Web version 9

   Informationen zur baumrüttbaren modularen Web API und Upgrade ausführen aus der Namespace-API.

   import { getAuth, getRedirectResult, OAuthProvider } from "firebase/auth";
   
   const auth = getAuth();
   getRedirectResult(auth)
     .then((result) => {
       // User is signed in.
       const credential = OAuthProvider.credentialFromResult(result);
       // This gives you an access token for the OIDC provider. You can use it to directly interact with that provider
     })
     .catch((error) => {
       // Handle Errors here.
       const errorCode = error.code;
       const errorMessage = error.message;
       // The email of the user's account used.
       const email = error.customData.email;
       // The AuthCredential type that was used.
       const credential = OAuthProvider.credentialFromError(error);
       // Handle / display error.
       // ...
     });
   auth_oidc_signin_redirect_result.js

   Web version 8

   // On return.
   firebase.auth().getRedirectResult()
     .then((result) => {
       // User is signed in.
       // result.credential is a firebase.auth().OAuthCredential object.
       // result.credential.providerId is equal to 'oidc.myProvider'.
       // result.credential.idToken is the OIDC provider's ID token.
     })
     .catch((error) => {
       // Handle / display error.
       // ...
     });
   oidc.js

Am Ende jedes dieser Abläufe können Sie das OIDC-ID-Token mit dem Feld result.credential.idToken abrufen.

Nutzer direkt anmelden

So melden Sie einen Nutzer direkt mit einem OIDC-ID-Token an:

1. Initialisieren Sie eine OAuthProvider-Instanz mit der Anbieter-ID, die Sie im vorherigen Abschnitt konfiguriert haben. Die Anbieter-ID muss mit oidc. beginnen. Erstelle dann eine OAuthCredential und rufe signInWithCredential() auf, um den Nutzer anzumelden.

   Webversion 9

   Weitere Informationen zur modularen Web API, die durch Tree Shaking optimiert werden kann, und zum Upgrade von der API mit Namensraum.

   import { getAuth, OAuthProvider, signInWithCredential } from "firebase/auth";
   
   const auth = getAuth();
   const credential = provider.credential({
     idToken: oidcIdToken,
   });
   signInWithCredential(auth, credential)
     .then((result) => {
       // User is signed in.
       const newCredential = OAuthProvider.credentialFromResult(result);
       // This gives you a new access token for the OIDC provider. You can use it to directly interact with that provider.
     })
     .catch((error) => {
       // Handle Errors here.
       const errorCode = error.code;
       const errorMessage = error.message;
       // The email of the user's account used.
       const email = error.customData.email;
       // The AuthCredential type that was used.
       const credential = OAuthProvider.credentialFromError(error);
       // Handle / display error.
       // ...
     });
   auth_oidc_direct_sign_in.js

   Webversion 8

   const credential = provider.credential(oidcIdToken, null);
   
   firebase.auth().signInWithCredential(credential)
     .then((result) => {
       // User is signed in.
       // User now has a odic.myProvider UserInfo in providerData.
     })
     .catch((error) => {
       // Handle / display error.
       // ...
     });
   oidc.js

Nutzerkonten verknüpfen

Wenn sich ein Nutzer bereits mit einer anderen Methode (z. B. E-Mail-Adresse/Passwort) bei Ihrer Anwendung angemeldet hat, können Sie sein vorhandenes Konto über linkWithPopup() oder linkWithRedirect() mit dem OIDC-Anbieter verknüpfen: Beispielsweise können wir eine Verknüpfung mit einem Google-Konto herstellen:

Webversion 9

Weitere Informationen zur modularen Web API, die durch Tree Shaking optimiert werden kann, und zum Upgrade von der API mit Namensraum.

import { getAuth, linkWithPopup, GoogleAuthProvider } from "firebase/auth";
const provider = new GoogleAuthProvider();

const auth = getAuth();
linkWithPopup(auth.currentUser, provider).then((result) => {
  // Accounts successfully linked.
  const credential = GoogleAuthProvider.credentialFromResult(result);
  const user = result.user;
  // ...
}).catch((error) => {
  // Handle Errors here.
  // ...
});
auth_link_with_popup.js

Webversion 8

auth.currentUser.linkWithPopup(provider).then((result) => {
  // Accounts successfully linked.
  var credential = result.credential;
  var user = result.user;
  // ...
}).catch((error) => {
  // Handle Errors here.
  // ...
});
link-multiple-accounts.js

Nächste Schritte

• Nutzer mit SAML anmelden
• Bei der Anmeldung eine benutzerdefinierte Domain anzeigen
• OIDC- und SAML-Anbieter programmatisch verwalten