Nutzer mit OIDC anmelden

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

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.

   Hinweis: Wenn Sie die Ressourcen, die Sie in diesem Verfahren erstellen, nicht behalten möchten, erstellen Sie ein Projekt, anstatt ein vorhandenes Projekt auszuwählen. Wenn Sie fertig sind, können Sie das Projekt löschen und dadurch alle mit dem Projekt verknüpften Ressourcen entfernen.

   Zur Projektauswahl

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

4. Wählen Sie in der Google Cloud Console auf der Seite der Projektauswahl ein Google Cloud-Projekt aus oder erstellen Sie eines.

   Hinweis: Wenn Sie die Ressourcen, die Sie in diesem Verfahren erstellen, nicht behalten möchten, erstellen Sie ein Projekt, anstatt ein vorhandenes Projekt auszuwählen. Wenn Sie fertig sind, können Sie das Projekt löschen und dadurch alle mit dem Projekt verknüpften Ressourcen entfernen.

   Zur Projektauswahl

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

6. Aktivieren Sie Identity Platform und fügen Sie Ihrer Anwendung das Client SDK 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, funktioniert er nicht mit der Identity Platform.

   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, funktioniert er nicht mit der Identity Platform.

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.

   Web version 9

   Hier finden Sie weitere Informationen über die modulare Web API, die durch Baumwackler erschüttert werden kann, und ein Upgrade von der Namespace API.

   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

   Web version 9

   Hier finden Sie weitere Informationen über die modulare Web API, die durch Baumwackler erschüttert werden kann, und ein Upgrade von der Namespace API.

   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 zu einer Anmeldeseite weiterzuleiten:

   Web version 9

   Hier finden Sie weitere Informationen über die modulare Web API, die durch Baumwackler erschüttert werden kann, und ein Upgrade von der Namespace API.

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

   Web version 8

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

   Rufen Sie dann getRedirectResult() auf, um die Ergebnisse zu erhalten, wenn der Nutzer zu Ihrer App zurückkehrt:

   Web version 9

   Hier finden Sie weitere Informationen über die modulare Web API, die durch Baumwackler erschüttert werden kann, und ein Upgrade von 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. Erstellen Sie dann ein OAuthCredential und rufen Sie signInWithCredential() auf, um den Nutzer anzumelden.

   Web version 9

   Hier finden Sie weitere Informationen über die modulare Web API, die durch Baumwackler erschüttert werden kann, und ein Upgrade von der Namespace API.

   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

   Web version 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) in Ihrer Anwendung angemeldet hat, können Sie sein vorhandenes Konto über linkWithPopup() oder linkWithRedirect() mit dem OIDC-Anbieter verknüpfen. Wir können beispielsweise eine Verknüpfung mit einem Google-Konto herstellen:

Web version 9

Hier finden Sie weitere Informationen über die modulare Web API, die durch Baumwackler erschüttert werden kann, und ein Upgrade von der Namespace API.

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

Web version 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