Diese Seite wurde von der Cloud Translation API übersetzt.

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 des Anbieters, der Ihre App identifiziert. Ihr Anbieter kann Ihnen für jede 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 einer Client-ID bestätigt. 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.)
Aussteller: Ein String, der Ihren Anbieter identifiziert. Dieser Wert muss eine URL sein, die mit /.well-known/openid-configuration angehängt 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 Anmeldung für Ihr Firebase-Projekt erstellen:

Fügen Sie Ihrem JavaScript-Projekt Firebase hinzu.
Wenn Sie noch nicht auf Firebase Authentication with Identity Platform umgestellt haben, tun Sie dies. Die OpenID Connect-Authentifizierung ist nur in Projekten verfügbar, die auf die neue Version umgestellt wurden.
Klicken Sie auf der Seite Anbieter für Anmeldungen der Firebase-Konsole auf Neuen Anbieter hinzufügen und dann auf OpenID Connect.
Wählen Sie aus, ob Sie den Autorisierungscode-Vorgang oder den Vorgang für die implizite Berechtigung verwenden möchten.

Sie sollten immer den Codeablauf verwenden, wenn Ihr Anbieter dies unterstützt. Die Der Implicit Flow ist weniger sicher und von einer Verwendung wird dringend abgeraten.
Geben Sie diesem Anbieter einen Namen. Notieren Sie sich die generierte Anbieter-ID, z. B. oidc.example-provider. Sie benötigen diese ID, wenn Sie den Anmeldecode in deiner App.
Geben Sie Ihre Client-ID und Ihr Client-Secret sowie den Aussteller-String Ihres Anbieters an. Diese Werte müssen genau mit den Werten übereinstimmen, die Ihr Anbieter Ihnen zugewiesen hat.
Speichern Sie die Änderungen.

Anmeldevorgang mit dem Firebase SDK abwickeln

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

So verarbeiten Sie den Anmeldevorgang mit dem Firebase JavaScript SDK:

Instanz von OAuthProvider mit der Anbieter-ID erstellen, die Sie erhalten haben mit der Firebase Console.

Web

import { OAuthProvider } from "firebase/auth";

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

Web

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

Optional: Geben Sie zusätzliche benutzerdefinierte OAuth-Parameter an, die Sie mit der OAuth-Anfrage senden.
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 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
Optional: Geben Sie zusätzliche OAuth 2.0-Bereiche an, die über das Basisprofil hinausgehen und 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 nach den unterstützten Bereichen.

Authentifizieren Sie sich bei Firebase mithilfe des OAuth-Anbieterobjekts.

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

Weiterleitungsablauf

Rufe signInWithRedirect() auf, um zur Anmeldeseite des Anbieters weitergeleitet zu werden:

Web

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

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

Web

firebase.auth().signInWithRedirect(provider);

Nachdem der Nutzer sich angemeldet und zu Ihrer App zurückgekehrt ist, können Sie die indem du getRedirectResult() aufrufst.

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

In den obigen Beispielen liegt der Schwerpunkt auf den Anmeldeabläufen. Mit demselben Muster können Sie jedoch einen OIDC-Anbieter mit einem vorhandenen Nutzer über linkWithRedirect() und linkWithPopup() verknüpfen und einen Nutzer mit reauthenticateWithRedirect() und reauthenticateWithPopup() neu authentifizieren. So können Sie neue Anmeldedaten für vertrauliche Vorgänge abrufen, für die eine aktuelle Anmeldung erforderlich ist.

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:

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