Mit OpenID Connect in Web-Apps authentifizieren
Mit Sammlungen den Überblick behalten
Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.
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:
Fügen Sie Ihrem JavaScript-Projekt Firebase hinzu.
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.
Klicken Sie auf der Seite Anbieter für Anmeldungen der Firebase-Konsole auf Neuen Anbieter hinzufügen und dann auf OpenID Connect.
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.
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.
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.
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:
Erstellen Sie eine Instanz eines 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');
Optional: Geben Sie zusätzliche benutzerdefinierte OAuth-Parameter an, die mit der OAuth-Anfrage gesendet werden sollen.
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 über das Basisprofil hinaus zusätzliche OAuth 2.0-Bereiche an,
den Sie beim 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.
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:
Web
import { getAuth, signInWithRedirect } from "firebase/auth";
const auth = getAuth();
signInWithRedirect(auth, provider);
Web
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.
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-Navigation
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.
});
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:
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.
});
Sofern nicht anders angegeben, sind die Inhalte dieser Seite unter der Creative Commons Attribution 4.0 License und Codebeispiele unter der Apache 2.0 License lizenziert. Weitere Informationen finden Sie in den Websiterichtlinien von Google Developers. Java ist eine eingetragene Marke von Oracle und/oder seinen Partnern.
Zuletzt aktualisiert: 2025-08-08 (UTC).
[null,null,["Zuletzt aktualisiert: 2025-08-08 (UTC)."],[],[],null,["If you've upgraded to Firebase Authentication with Identity Platform, you can authenticate your users with\nFirebase using the OpenID Connect (OIDC) compliant provider of your choice. This\nmakes it possible to use identity providers not natively supported by Firebase.\n\nBefore you begin\n\nTo sign in users using an OIDC provider, you must first collect some information\nfrom the provider:\n\n- **Client ID** : A string unique to the provider that identifies your app. Your\n provider might assign you a different client ID for each platform you support.\n This is one of the values of the `aud` claim in ID tokens issued by your\n provider.\n\n- **Client secret** : A secret string that the provider uses to confirm ownership\n of a client ID. For every client ID, you will need a matching client secret.\n (This value is required only if you're using the *auth code flow*, which is\n strongly recommended.)\n\n- **Issuer** : A string that identifies your provider. This value must be a URL\n that, when appended with `/.well-known/openid-configuration`, is the location\n of the provider's OIDC discovery document. For example, if the issuer is\n `https://auth.example.com`, the discovery document must be available at\n `https://auth.example.com/.well-known/openid-configuration`.\n\nAfter you have the above information, enable OpenID Connect as a sign-in\nprovider for your Firebase project:\n\n1. [Add Firebase to your JavaScript project](/docs/web/setup).\n\n2. If you haven't upgraded to Firebase Authentication with Identity Platform, do so. OpenID Connect authentication\n is only available in upgraded projects.\n\n3. On the [**Sign-in providers**](//console.firebase.google.com/project/_/authentication/providers)\n page of the Firebase console, click **Add new provider** , and then click\n **OpenID Connect**.\n\n4. Select whether you will be using the *authorization code flow* or the\n *implicit grant flow*.\n\n **You should use always the code flow if your provider supports it**. The\n implicit flow is less secure and using it is strongly discouraged.\n5. Give a name to this provider. Note the provider ID that's generated:\n something like `oidc.example-provider`. You'll need this ID when you add\n sign-in code to your app.\n\n6. Specify your client ID and client secret, and your provider's issuer string.\n These values must exactly match the values your provider assigned to you.\n\n7. Save your changes.\n\nHandle the sign-in flow with the Firebase SDK\n\nThe easiest way to authenticate your users with Firebase using your OIDC\nprovider is to handle the entire sign-in flow with the Firebase SDK.\n\nTo handle the sign-in flow with the Firebase JavaScript SDK, follow these\nsteps:\n\n1. Create an instance of an `OAuthProvider` using the provider ID you got in\n the Firebase console.\n\n Web \n\n import { OAuthProvider } from \"firebase/auth\";\n\n const provider = new OAuthProvider('oidc.example-provider');\n\n Web \n\n var provider = new firebase.auth.OAuthProvider('oidc.example-provider');\n\n2. **Optional**: Specify additional custom OAuth parameters that you want to\n send with the OAuth request.\n\n Web \n\n provider.setCustomParameters({\n // Target specific email with login hint.\n login_hint: 'user@example.com'\n });\n\n Web \n\n provider.setCustomParameters({\n // Target specific email with login hint.\n login_hint: 'user@example.com'\n });\n\n Check with your provider for the parameters it supports.\n Note that you can't pass Firebase-required parameters with\n `setCustomParameters`. These parameters are `client_id`,\n `response_type`, `redirect_uri`, `state`, `scope` and\n `response_mode`.\n3. **Optional**: Specify additional OAuth 2.0 scopes beyond basic profile that\n you want to request from the authentication provider.\n\n Web \n\n provider.addScope('mail.read');\n provider.addScope('calendars.read');\n\n Web \n\n provider.addScope('mail.read');\n provider.addScope('calendars.read');\n\n Check with your provider for the scopes it supports.\n4. Authenticate with Firebase using the OAuth provider object.\n\n You can either redirect the user to the provider's sign-in page or open the\n sign-in page in a pop-up browser window.\n\n **Redirect flow**\n\n Redirect to the provider sign-in page by calling `signInWithRedirect()`: \n\n Web \n\n import { getAuth, signInWithRedirect } from \"firebase/auth\";\n\n const auth = getAuth();\n signInWithRedirect(auth, provider);\n\n Web \n\n firebase.auth().signInWithRedirect(provider);\n\n After the user completes sign-in and returns to your app, you can obtain the\n sign-in result by calling `getRedirectResult()`. \n\n Web \n\n import { getAuth, getRedirectResult, OAuthProvider } from \"firebase/auth\";\n\n const auth = getAuth();\n getRedirectResult(auth)\n .then((result) =\u003e {\n // User is signed in.\n // IdP data available in result.additionalUserInfo.profile.\n\n // Get the OAuth access token and ID Token\n const credential = OAuthProvider.credentialFromResult(result);\n const accessToken = credential.accessToken;\n const idToken = credential.idToken;\n })\n .catch((error) =\u003e {\n // Handle error.\n });\n\n Web \n\n firebase.auth().getRedirectResult()\n .then((result) =\u003e {\n // IdP data available in result.additionalUserInfo.profile.\n // ...\n\n /** @type {firebase.auth.OAuthCredential} */\n var credential = result.credential;\n\n // OAuth access and id tokens can also be retrieved:\n var accessToken = credential.accessToken;\n var idToken = credential.idToken;\n })\n .catch((error) =\u003e {\n // Handle error.\n });\n\n **Pop-up flow** \n\n Web \n\n import { getAuth, signInWithPopup, OAuthProvider } from \"firebase/auth\";\n\n const auth = getAuth();\n signInWithPopup(auth, provider)\n .then((result) =\u003e {\n // User is signed in.\n // IdP data available using getAdditionalUserInfo(result)\n\n // Get the OAuth access token and ID Token\n const credential = OAuthProvider.credentialFromResult(result);\n const accessToken = credential.accessToken;\n const idToken = credential.idToken;\n })\n .catch((error) =\u003e {\n // Handle error.\n });\n\n Web \n\n firebase.auth().signInWithPopup(provider)\n .then((result) =\u003e {\n // IdP data available in result.additionalUserInfo.profile.\n // ...\n\n /** @type {firebase.auth.OAuthCredential} */\n var credential = result.credential;\n\n // OAuth access and id tokens can also be retrieved:\n var accessToken = credential.accessToken;\n var idToken = credential.idToken;\n })\n .catch((error) =\u003e {\n // Handle error.\n });\n\n5. While the above examples focus on sign-in flows, you can use the same\n pattern to link an OIDC provider to an existing user using\n `linkWithRedirect()` and `linkWithPopup()`, and re-authenticate a user with\n `reauthenticateWithRedirect()` and `reauthenticateWithPopup()`, which can be\n used to retrieve fresh credentials for sensitive operations that require\n recent login.\n\nHandle the sign-in flow manually\n\nIf you've already implemented the OpenID Connect sign-in flow in your app, you\ncan use the ID token directly to authenticate with Firebase: \n\nWeb \n\n import { getAuth, signInWithCredential, OAuthProvider } from \"firebase/auth\";\n\n const provider = new OAuthProvider(\"oidc.example-provider\");\n const credential = provider.credential({\n idToken: idToken,\n });\n signInWithCredential(getAuth(), credential)\n .then((result) =\u003e {\n // User is signed in.\n // IdP data available in result.additionalUserInfo.profile.\n\n // Get the OAuth access token and ID Token\n const credential = OAuthProvider.credentialFromResult(result);\n const accessToken = credential.accessToken;\n const idToken = credential.idToken;\n })\n .catch((error) =\u003e {\n // Handle error.\n });\n\nWeb \n\n const provider = new OAuthProvider(\"oidc.example-provider\");\n const credential = provider.credential({\n idToken: idToken,\n });\n firebase.auth().signInWithCredential(credential)\n .then((result) =\u003e {\n // User is signed in.\n // IdP data available in result.additionalUserInfo.profile.\n\n // Get the OAuth access token and ID Token\n const credential = OAuthProvider.credentialFromResult(result);\n const accessToken = credential.accessToken;\n const idToken = credential.idToken;\n })\n .catch((error) =\u003e {\n // Handle error.\n });"]]
