Mit OpenID Connect in Web-Apps authentifizieren

Wenn Sie ein Upgrade auf Firebase Authentication with Identity Platform durchgeführt haben, können Sie Ihre Nutzer mit Firebase authentifizieren. Dazu verwenden Sie den OIDC-kompatiblen Anbieter Ihrer Wahl. So können Sie Identitätsanbieter verwenden, die von Firebase nicht nativ unterstützt werden.

Hinweis

Wenn Sie Nutzer über einen OIDC-Anbieter anmelden möchten, müssen Sie zuerst einige Informationen vom Anbieter abrufen:

  • Client-ID: Ein für den Anbieter eindeutiger String, der Ihre App identifiziert. Ihr Anbieter weist Ihnen möglicherweise für jede unterstützte Plattform eine andere Client-ID zu. Dies ist einer der Werte des aud-Claims in ID-Tokens, die von Ihrem Anbieter ausgestellt werden.

  • Clientschlüssel: Ein geheimer String, mit dem der Anbieter die Inhaberschaft einer Client-ID bestätigt. Für jede Client-ID benötigen Sie einen passenden Clientschlüssel. Dieser Wert ist nur erforderlich, wenn Sie den Autorisierungs-Code-Prozess verwenden, was dringend empfohlen wird.

  • Aussteller: Ein String, der Ihren Anbieter identifiziert. Dieser Wert muss eine URL sein, die, wenn sie mit /.well-known/openid-configuration ergänzt wird, den Speicherort des OIDC-Discovery-Dokuments des Anbieters angibt. Wenn der Aussteller beispielsweise https://auth.example.com ist, muss das Discovery-Dokument unter https://auth.example.com/.well-known/openid-configuration verfügbar sein.

Wenn Sie die oben genannten Informationen haben, aktivieren Sie OpenID Connect als Anmeldeanbieter für Ihr Firebase-Projekt:

  1. Firebase zu Ihrem JavaScript-Projekt hinzufügen

  2. Wenn Sie noch nicht auf Firebase Authentication with Identity Platform aktualisiert haben, holen Sie das bitte nach. Die OpenID Connect-Authentifizierung ist nur in aktualisierten Projekten verfügbar.

  3. Klicken Sie in der Firebase-Konsole auf der Seite Anbieter für Anmeldungen auf Neuen Anbieter hinzufügen und dann auf OpenID Connect.

  4. Wählen Sie aus, ob Sie den Autorisierungscode-Vorgang oder den impliziten Berechtigungsvorgang verwenden möchten.

    Sie sollten immer den Code-Ablauf verwenden, wenn Ihr Anbieter ihn unterstützt. Der implizite Ablauf ist weniger sicher und seine Verwendung wird dringend abgeraten.

  5. Geben Sie einen Namen für diesen Anbieter ein. Notieren Sie sich die generierte Anbieter-ID, z. B. oidc.example-provider. Sie benötigen diese ID, wenn Sie Ihrer App Anmeldecode hinzufügen.

  6. Geben Sie Ihre Client-ID und Ihren Clientschlüssel sowie den Ausstellerstring Ihres Anbieters an. Diese Werte müssen genau mit den Werten übereinstimmen, die Ihr Anbieter Ihnen zugewiesen hat.

  7. Speichern Sie die Änderungen.

Anmeldevorgang mit dem Firebase SDK verarbeiten

Die einfachste Möglichkeit, Ihre Nutzer mit Firebase über Ihren OIDC-Anbieter zu authentifizieren, besteht darin, den gesamten Anmeldevorgang mit dem Firebase SDK abzuwickeln.

So verarbeiten Sie den Anmeldevorgang mit dem Firebase JavaScript SDK:

  1. Erstellen Sie eine Instanz von OAuthProvider mit der Anbieter-ID, die Sie in der Firebase Console erhalten haben.

    Web 

    import { OAuthProvider } from "firebase/auth";

const provider = new OAuthProvider('oidc.example-provider');

    Web 

    var provider = new firebase.auth.OAuthProvider('oidc.example-provider');

  2. Optional: Geben Sie zusätzliche benutzerdefinierte OAuth-Parameter an, die Sie mit der OAuth-Anfrage senden möchten.

    Web 

    provider.setCustomParameters({
  // Target specific email with login hint.
  login_hint: 'user@example.com'
});

    Web 

    provider.setCustomParameters({
  // Target specific email with login hint.
  login_hint: 'user@example.com'
});

    Erkundigen Sie sich bei Ihrem Anbieter, welche Parameter unterstützt werden. Hinweis: Firebase-Parameter können nicht mit setCustomParameters übergeben werden. Diese Parameter sind client_id, response_type, redirect_uri, state, scope und response_mode.

  3. Optional: Geben Sie zusätzliche OAuth 2.0-Bereiche an, die Sie vom Authentifizierungsanbieter anfordern möchten.

    Web 

    provider.addScope('mail.read');
provider.addScope('calendars.read');

    Web 

    provider.addScope('mail.read');
provider.addScope('calendars.read');

    Erkundigen Sie sich bei Ihrem Anbieter, welche Bereiche er unterstützt.

  4. Mit Firebase über das OAuth-Anbieterobjekt authentifizieren.

    Sie können den Nutzer entweder zur Anmeldeseite des Anbieters weiterleiten oder die Anmeldeseite in einem Pop-up-Browserfenster öffnen.

    Weiterleitungsvorgang

    Rufen Sie signInWithRedirect() auf, um zur Anmeldeseite des Anbieters weiterzuleiten:

    Web 

    import { getAuth, signInWithRedirect } from "firebase/auth";

const auth = getAuth();
signInWithRedirect(auth, provider);

    Web 

    firebase.auth().signInWithRedirect(provider);

    Nachdem der Nutzer die Anmeldung abgeschlossen hat und zu Ihrer App zurückgekehrt ist, können Sie das Anmeldeergebnis durch Aufrufen von getRedirectResult() abrufen.

    Web 

    import { getAuth, getRedirectResult, OAuthProvider } from "firebase/auth";

const auth = getAuth();
getRedirectResult(auth)
  .then((result) => {
    // User is signed in.
    // IdP data available in result.additionalUserInfo.profile.

    // Get the OAuth access token and ID Token
    const credential = OAuthProvider.credentialFromResult(result);
    const accessToken = credential.accessToken;
    const idToken = credential.idToken;
  })
  .catch((error) => {
    // Handle error.
  });

    Web 

    firebase.auth().getRedirectResult()
  .then((result) => {
    // IdP data available in result.additionalUserInfo.profile.
    // ...

    /** @type {firebase.auth.OAuthCredential} */
    var credential = result.credential;

    // OAuth access and id tokens can also be retrieved:
    var accessToken = credential.accessToken;
    var idToken = credential.idToken;
  })
  .catch((error) => {
    // Handle error.
  });

    Pop-up-Ablauf

    Web 

    import { getAuth, signInWithPopup, OAuthProvider } from "firebase/auth";

const auth = getAuth();
signInWithPopup(auth, provider)
  .then((result) => {
    // User is signed in.
    // IdP data available using getAdditionalUserInfo(result)

    // Get the OAuth access token and ID Token
    const credential = OAuthProvider.credentialFromResult(result);
    const accessToken = credential.accessToken;
    const idToken = credential.idToken;
  })
  .catch((error) => {
    // Handle error.
  });

    Web 

    firebase.auth().signInWithPopup(provider)
  .then((result) => {
    // IdP data available in result.additionalUserInfo.profile.
    // ...

    /** @type {firebase.auth.OAuthCredential} */
    var credential = result.credential;

    // OAuth access and id tokens can also be retrieved:
    var accessToken = credential.accessToken;
    var idToken = credential.idToken;
  })
  .catch((error) => {
    // Handle error.
  });

  5. In den obigen Beispielen geht es zwar um Anmeldeabläufe, Sie können aber dasselbe Muster verwenden, um einen OIDC-Anbieter mit einem vorhandenen Nutzer über linkWithRedirect() und linkWithPopup() zu verknüpfen und einen Nutzer mit reauthenticateWithRedirect() und reauthenticateWithPopup() neu zu authentifizieren. So lassen sich aktuelle Anmeldedaten für vertrauliche Vorgänge abrufen, die eine aktuelle Anmeldung erfordern.

Anmeldevorgang manuell verarbeiten

Wenn Sie den OpenID Connect-Anmeldevorgang bereits in Ihrer App implementiert haben, können Sie das ID-Token direkt zur Authentifizierung bei Firebase verwenden:

Web 

import { getAuth, signInWithCredential, OAuthProvider } from "firebase/auth";

const provider = new OAuthProvider("oidc.example-provider");
const credential = provider.credential({
    idToken: idToken,
});
signInWithCredential(getAuth(), credential)
    .then((result) => {
        // User is signed in.
        // IdP data available in result.additionalUserInfo.profile.

        // Get the OAuth access token and ID Token
        const credential = OAuthProvider.credentialFromResult(result);
        const accessToken = credential.accessToken;
        const idToken = credential.idToken;
    })
    .catch((error) => {
        // Handle error.
    });

Web 

const provider = new OAuthProvider("oidc.example-provider");
const credential = provider.credential({
    idToken: idToken,
});
firebase.auth().signInWithCredential(credential)
    .then((result) => {
        // User is signed in.
        // IdP data available in result.additionalUserInfo.profile.

        // Get the OAuth access token and ID Token
        const credential = OAuthProvider.credentialFromResult(result);
        const accessToken = credential.accessToken;
        const idToken = credential.idToken;
    })
    .catch((error) => {
        // Handle error.
    });