Nutzer mit OIDC anmelden

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

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.

    Go to project selector

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

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

    Go to project selector

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

  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.

    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.

  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

    import { OAuthProvider } from "firebase/auth";

const provider = new OAuthProvider("oidc.myProvider");
    auth_oidc_provider_create.js

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

    Webversion 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

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

    Webversion 9

    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:

    Webversion 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

    Webversion 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

    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/Passwort) in Ihrer App 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:

Webversion 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

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