Uwierzytelniaj przy użyciu OpenID Connect w aplikacjach internetowych
Zadbaj o dobrą organizację dzięki kolekcji
Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.
Jeśli korzystasz z usługi Firebase Authentication with Identity Platform, możesz uwierzytelniać użytkowników przy użyciu
Firebase za pomocą wybranego przez Ciebie dostawcy zgodnego z OpenID Connect (OIDC). Ten
pozwala na korzystanie z dostawców tożsamości, które nie są natywnie obsługiwane przez Firebase.
Zanim zaczniesz
Aby zalogować użytkowników przy użyciu dostawcy OIDC, musisz najpierw zebrać pewne informacje
od dostawcy:
Identyfikator klienta: unikalny ciąg znaków identyfikujący aplikację. Twoje
dostawca może przypisać Ci inny identyfikator klienta dla każdej obsługiwanej platformy.
To jest jedna z wartości roszczenia aud w tokenach tożsamości wystawionych przez
dostawcy usług.
Tajny klucz klienta: tajny ciąg znaków używany przez dostawcę do potwierdzania własności.
identyfikatora klienta. Do każdego identyfikatora klienta musi być dopasowany tajny klucz klienta.
(Ta wartość jest wymagana tylko w przypadku przepływu kodu uwierzytelniającego, który jest
zdecydowanie zalecane).
Wystawca: ciąg znaków identyfikujący dostawcę. Ta wartość musi być adresem URL
że po dodaniu ciągu /.well-known/openid-configuration będzie to lokalizacja
dokumentu wykrywania OIDC dostawcy. Jeśli na przykład wystawcą jest
https://auth.example.com, dokument opisujący musi być dostępny na
https://auth.example.com/.well-known/openid-configuration
Po uzyskaniu tych informacji włącz OpenID Connect, aby się zalogować.
dla swojego projektu Firebase:
Dodaj Firebase do projektu JavaScript.
Jeśli nie korzystasz jeszcze z wersji Firebase Authentication with Identity Platform, zrób to. Uwierzytelnianie OpenID Connect
jest dostępne tylko w uaktualnionych projektach.
Na stronie Dostawcy logowania.
w konsoli Firebase, kliknij Dodaj nowego dostawcę i wybierz
OpenID Connect.
Wybierz, czy będziesz korzystać z przepływu kodu autoryzacji czy
przepływ niejawny.
Należy zawsze używać przepływu kodu, jeśli dostawca go obsługuje.
Przepływ niejawny jest mniej bezpieczny i zdecydowanie odradzamy jego używanie.
Nazwij tego dostawcę. Zanotuj wygenerowany identyfikator dostawcy:
np. oidc.example-provider. Ten identyfikator będzie potrzebny podczas dodawania
kod logowania do aplikacji.
Podaj swój identyfikator klienta i tajny klucz klienta oraz ciąg znaków wydawcy dostawcy.
Te wartości muszą dokładnie odpowiadać wartościom przypisanym przez dostawcę.
Zapisz zmiany.
Zarejestruj się za pomocą pakietu SDK Firebase
Najłatwiejszy sposób uwierzytelniania użytkowników w Firebase przy użyciu OIDC
jest do obsługi całej procedury logowania za pomocą pakietu SDK Firebase.
Aby zalogować się za pomocą pakietu SDK Firebase JavaScript, postępuj zgodnie z tymi wskazówkami
kroki:
Utwórz instancję OAuthProvider, używając otrzymanego identyfikatora dostawcy
w konsoli Firebase.
Web
import { OAuthProvider } from "firebase/auth";
const provider = new OAuthProvider('oidc.example-provider');
Web
var provider = new firebase.auth.OAuthProvider('oidc.example-provider');
Opcjonalnie: określ dodatkowe niestandardowe parametry OAuth, które chcesz stosować
wysyłać z żądaniem OAuth.
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'
});
Skontaktuj się z dostawcą, aby poznać obsługiwane parametry.
Pamiętaj, że parametrów wymaganych przez Firebase nie można przekazywać za pomocą funkcji
setCustomParameters Te parametry to: client_id,
response_type, redirect_uri, state, scope i
response_mode.
Opcjonalnie: określ dodatkowe zakresy OAuth 2.0 poza podstawowym profilem, które
których chcesz żądać od dostawcy uwierzytelniania.
Web
provider.addScope('mail.read');
provider.addScope('calendars.read');
Web
provider.addScope('mail.read');
provider.addScope('calendars.read');
Skontaktuj się z dostawcą, aby uzyskać informacje o obsługiwanych zakresach.
Uwierzytelniaj w Firebase za pomocą obiektu dostawcy OAuth.
Możesz przekierować użytkownika na stronę logowania dostawcy lub otworzyć
stronie logowania
w wyskakującym okienku przeglądarki.
Proces przekierowania
Przekieruj na stronę logowania dostawcy, dzwoniąc pod numer signInWithRedirect():
Web
import { getAuth, signInWithRedirect } from "firebase/auth";
const auth = getAuth();
signInWithRedirect(auth, provider);
Web
firebase.auth().signInWithRedirect(provider);
Gdy użytkownik się zaloguje i wróci do aplikacji, możesz uzyskać
wyniku logowania, dzwoniąc pod numer getRedirectResult().
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.
});
Wyskakująca instrukcja
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.
});
Powyższe przykłady dotyczą procesu logowania, ale możesz użyć tego samego
do połączenia dostawcy OIDC z istniejącym użytkownikiem za pomocą
linkWithRedirect() i linkWithPopup(), a następnie ponownie uwierzytelnij użytkownika przy użyciu
reauthenticateWithRedirect() i reauthenticateWithPopup(), które mogą być
służy do pobierania nowych danych logowania na potrzeby operacji poufnych, które wymagają
ostatniego logowania.
Zarejestruj się ręcznie
Jeśli masz już wdrożony w aplikacji proces logowania OpenID Connect,
mogą używać tokena identyfikatora bezpośrednio do uwierzytelniania w Firebase:
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.
});
O ile nie stwierdzono inaczej, treść tej strony jest objęta licencją Creative Commons – uznanie autorstwa 4.0, a fragmenty kodu są dostępne na licencji Apache 2.0. Szczegółowe informacje na ten temat zawierają zasady dotyczące witryny Google Developers. Java jest zastrzeżonym znakiem towarowym firmy Oracle i jej podmiotów stowarzyszonych.
Ostatnia aktualizacja: 2025-08-08 UTC.
[null,null,["Ostatnia aktualizacja: 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 });"]]
