Authentifizieren Sie sich mit OpenID Connect in Web-Apps

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

Bevor Sie beginnen

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

  • 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-Tokens, die von Ihrem Anbieter ausgegeben werden.

  • Client-Geheimnis : 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.)

  • Aussteller : Eine Zeichenfolge, die Ihren Anbieter identifiziert. Dieser Wert muss eine URL sein, die, wenn sie mit /.well-known/openid-configuration angehängt wird, den Speicherort des OIDC-Erkennungsdokuments des Anbieters angibt. 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 über die oben genannten Informationen verfügen, aktivieren Sie OpenID Connect als Anmeldeanbieter für Ihr Firebase-Projekt:

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

  2. Wenn Sie noch kein Upgrade auf Firebase Authentication mit Identity Platform durchgeführt haben, tun Sie dies. Die 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 möchten.

    Sie sollten immer den Codefluss verwenden, wenn Ihr Anbieter dies unterstützt . Der implizite Fluss ist weniger sicher und von seiner Verwendung wird dringend abgeraten.

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

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

  7. Speichern Sie Ihre Änderungen.

Behandeln Sie den Anmeldevorgang mit dem Firebase SDK

Der einfachste Weg, 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 abzuwickeln:

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

    Modulare Web-API

    import { OAuthProvider } from "firebase/auth";

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

    Web-Namespace-API

    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.

    Modulare Web-API

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

    Web-Namespace-API

    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 mit setCustomParameters keine für Firebase erforderlichen Parameter übergeben können. Diese Parameter sind client_id , response_type , redirect_uri , state , scope und response_mode .

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

    Modulare Web-API

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

    Web-Namespace-API

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

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

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

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

    Fluss umleiten

    Leiten Sie durch Aufrufen von signInWithRedirect() zur Anmeldeseite des Anbieters um:

    Modulare Web-API

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

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

    Web-Namespace-API

    firebase.auth().signInWithRedirect(provider);

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

    Modulare Web-API

    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-Namespace-API

    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

    Modulare Web-API

    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-Namespace-API

    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 Anmeldeflüsse 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() und reauthenticateWithPopup() erneut zu authentifizieren. Dies kann verwendet werden, um neue Anmeldeinformationen für vertrauliche Vorgänge abzurufen, die eine kürzliche Anmeldung erfordern.

Behandeln Sie den Anmeldevorgang manuell

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

Modulare Web-API

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-Namespace-API

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