Mit OpenID Connect in Web-Apps authentifizieren

Wenn Sie ein Upgrade auf Firebase Authentication with Identity Platform ausgeführt haben, können Sie Ihre Nutzer mit Firebase mit dem OIDC-konformen Anbieter Ihrer Wahl (OpenID Connect). Dieses ermöglicht die Verwendung von Identitätsanbietern, die von Firebase nicht nativ unterstützt werden.

Hinweis

Zum Anmelden von Nutzern über einen OIDC-Anbieter müssen Sie zuerst einige Informationen erheben vom Anbieter:

  • Client-ID: Ein eindeutiger String für den Anbieter, der Ihre App identifiziert. Ihr kann Ihnen der Anbieter für jede von Ihnen unterstützte Plattform eine andere Client-ID zuweisen. Dies ist einer der Werte des Anspruchs aud in ID-Tokens, die von Ihrem Anbieter ausgestellt wurden.

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

  • Issuer (Aussteller): Ein String, der Ihren Anbieter identifiziert. Dieser Wert muss eine URL sein dass, wenn /.well-known/openid-configuration angehängt wird, der Standort ist, des OIDC-Discovery-Dokuments des Anbieters. 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 Anmeldung. für Ihr Firebase-Projekt erstellen:

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

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

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

  4. Wähle aus, ob du den Vorgang mit Autorisierungscode oder den impliziten Ablauf der Gewährung.

    Sie sollten immer den Codeablauf verwenden, wenn Ihr Anbieter ihn unterstützt. Die Der Implicit Flow ist weniger sicher und von einer Verwendung wird dringend abgeraten.

  5. Geben Sie diesem Anbieter einen Namen. Notieren Sie sich die generierte Anbieter-ID: etwa oidc.example-provider. Sie benötigen diese ID, wenn Sie den Anmeldecode in deiner App.

  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 durchführen

Die einfachste Möglichkeit, Ihre Nutzer über Ihr OIDC bei Firebase zu authentifizieren ist der gesamte Anmeldevorgang über das Firebase SDK.

Gehen Sie wie folgt vor, um den Anmeldevorgang mit dem Firebase JavaScript SDK durchzuführen: Schritte:

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

    WebWeb
    import { OAuthProvider } from "firebase/auth";

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

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

  2. Optional: Geben Sie zusätzliche benutzerdefinierte OAuth-Parameter an, die mit der OAuth-Anfrage gesendet werden sollen.

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

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

    Erkundigen Sie sich bei Ihrem Anbieter, welche Parameter er unterstützt. Beachten Sie, dass Sie keine für Firebase erforderlichen Parameter mit setCustomParameters 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, den Sie beim Authentifizierungsanbieter anfordern möchten.

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

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

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

  4. Authentifizierung mit Firebase über das OAuth-Anbieterobjekt

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

    Weiterleitungsablauf

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

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

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

    firebase.auth().signInWithRedirect(provider);

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

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

    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-Navigation

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

    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. Die obigen Beispiele konzentrieren sich auf Anmeldeabläufe. Sie können dieselben Muster zum Verknüpfen eines OIDC-Anbieters mit einem vorhandenen Nutzer mithilfe von linkWithRedirect() und linkWithPopup() und authentifizieren Sie einen Nutzer noch einmal mit reauthenticateWithRedirect() und reauthenticateWithPopup(), die auf werden zum Abrufen neuer Anmeldedaten für vertrauliche Vorgänge verwendet, die Letzte Anmeldung

Anmeldevorgang manuell ausführen

Wenn Sie den Anmeldevorgang von OpenID Connect bereits in Ihrer App implementiert haben, kann sich mit dem ID-Token direkt bei Firebase authentifizieren:

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

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