Nutzer mit OIDC anmelden

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

Hinweis

Melden Sie sich in Ihrem Google Cloud Konto an. Wenn Sie noch kein Konto bei Google Cloudhaben, erstellen Sie ein Konto, um die Leistung 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.

In the Google Cloud console, on the project selector page, select or create a Google Cloud project.

Roles required to select or create a project

• Select a project: Selecting a project doesn't require a specific IAM role—you can select any project that you've been granted a role on.
• Create a project: To create a project, you need the Project Creator role (roles/resourcemanager.projectCreator), which contains the resourcemanager.projects.create permission. Learn how to grant roles.

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

Verify that billing is enabled for your Google Cloud project.

In the Google Cloud console, on the project selector page, select or create a Google Cloud project.

Roles required to select or create a project

• Select a project: Selecting a project doesn't require a specific IAM role—you can select any project that you've been granted a role on.
• Create a project: To create a project, you need the Project Creator role (roles/resourcemanager.projectCreator), which contains the resourcemanager.projects.create permission. Learn how to grant roles.

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

Verify that billing is enabled for your Google Cloud project.

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

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.

   Web version 9

   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

   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

   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 abzurufen, wenn der Nutzer zu Ihrer Anwendung zurückgeleitet wird:

   Web version 9

   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 OAuthCredential und rufen Sie signInWithCredential() auf, um den Nutzer anzumelden.

   Web version 9

   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/Passwort) in Ihrer App angemeldet hat, können Sie sein vorhandenes Konto über linkWithPopup() oder linkWithRedirect() mit dem OIDC-Anbieter verknüpfen: Beispiel: Verknüpfen mit einem Google-Konto:

Web version 9

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