Authentifizieren Sie sich mit OpenID Connect in Web-Apps

Wenn Sie ein Upgrade auf Firebase-Authentifizierung mit Identity Platform durchgeführt haben, können Sie Ihre Benutzer mit Firebase authentifizieren, indem Sie den OpenID Connect (OIDC)-kompatiblen Anbieter Ihrer Wahl verwenden. Dadurch ist es möglich, Identitätsanbieter zu verwenden, die nicht nativ von Firebase unterstützt werden.

Bevor Sie beginnen

Um Benutzer über einen OIDC-Anbieter anzumelden, müssen Sie zunächst einige Informationen vom Anbieter erfassen:

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

  • Clientgeheimnis : Eine geheime Zeichenfolge, die der Anbieter verwendet, um den Besitz einer Client-ID zu bestätigen. Für jede Client-ID benötigen Sie ein passendes Client-Geheimnis. (Dieser Wert ist nur erforderlich, wenn Sie den Authentifizierungscode-Flow verwenden , was dringend empfohlen wird.)

  • Issuer : Eine Zeichenfolge, die Ihren Anbieter identifiziert. Dieser Wert muss eine URL sein, die, wenn sie mit /.well-known/openid-configuration angehängt wird, der Speicherort des OIDC-Discovery-Dokuments des Anbieters ist. Wenn der Aussteller beispielsweise https://auth.example.com ist, muss das Erkennungsdokument unter https://auth.example.com/.well-known/openid-configuration verfügbar sein.

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

  1. Fügen Sie Ihrem JavaScript-Projekt Firebase hinzu .

  2. Wenn Sie noch kein Upgrade auf Firebase Authentication mit Identity Platform durchgeführt haben, tun Sie dies. OpenID Connect-Authentifizierung ist nur in aktualisierten Projekten verfügbar.

  3. Klicken Sie auf der Seite Anmeldeanbieter der Firebase- Konsole auf Neuen Anbieter hinzufügen und dann auf OpenID Connect .

  4. Wählen Sie aus, ob Sie den Autorisierungscode-Flow oder den impliziten Grant-Flow verwenden.

    Sie sollten immer den Codeflow verwenden, wenn Ihr Provider dies unterstützt . Der implizite Fluss ist weniger sicher und es wird dringend davon abgeraten, ihn zu verwenden.

  5. Geben Sie diesem Anbieter einen Namen. Beachten Sie die generierte Anbieter-ID: etwas wie oidc.example-provider . Sie benötigen diese ID, wenn Sie Ihrer App einen Anmeldecode hinzufügen.

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

  7. Speichern Sie Ihre Änderungen.

Behandeln Sie den Anmeldevorgang mit dem Firebase SDK

Die einfachste Möglichkeit, Ihre Benutzer bei Firebase mithilfe Ihres OIDC-Anbieters zu authentifizieren, besteht darin, den gesamten Anmeldevorgang mit dem Firebase SDK abzuwickeln.

Führen Sie die folgenden Schritte aus, um den Anmeldevorgang mit dem Firebase JavaScript SDK zu verarbeiten:

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

    Web version 9

    import { OAuthProvider } from "firebase/auth";

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

    Web version 8

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

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

    Web version 9

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

    Web version 8

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

    Erkundigen Sie sich bei Ihrem Anbieter nach den unterstützten Parametern. Beachten Sie, dass Sie für Firebase erforderliche Parameter nicht mit setCustomParameters . Diese Parameter sind client_id , response_type , redirect_uri , state , scope und response_mode .

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

    Web version 9

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

    Web version 8

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

    Erkundigen Sie sich bei Ihrem Anbieter nach den unterstützten Bereichen.

  4. Authentifizieren Sie sich bei Firebase mithilfe des OAuth-Anbieterobjekts.

    Sie können den Benutzer entweder auf die Anmeldeseite des Anbieters umleiten oder die Anmeldeseite in einem Popup-Browserfenster öffnen.

    Fluss umleiten

    Leiten Sie zur Anmeldeseite des Anbieters um, indem signInWithRedirect() aufrufen:

    Web version 9

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

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

    Web version 8

    firebase.auth().signInWithRedirect(provider);

    Nachdem der Benutzer die Anmeldung abgeschlossen hat und zu Ihrer App zurückgekehrt ist, können Sie das Anmeldeergebnis abrufen, indem getRedirectResult() aufrufen.

    Web version 9

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

    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.
  });

    Popup-Flow

    Web version 9

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

    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. Während sich die obigen Beispiele auf Anmeldeabläufe konzentrieren, können Sie dasselbe Muster verwenden, um einen OIDC-Anbieter mit linkWithRedirect() und linkWithPopup() mit einem vorhandenen Benutzer zu verknüpfen und einen Benutzer mit reauthenticateWithRedirect() linkWithRedirect() und linkWithPopup() reauthenticateWithPopup() zu authentifizieren. die verwendet werden können, um neue Anmeldeinformationen für vertrauliche Vorgänge abzurufen, die eine kürzlich erfolgte Anmeldung erfordern.

Behandeln Sie den Anmeldefluss manuell

Wenn Sie den OpenID Connect-Anmeldeablauf bereits in Ihrer App implementiert haben, können Sie das ID-Token direkt verwenden, um sich bei Firebase zu authentifizieren:

Web version 9

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

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.
    });