Po przejściu na Uwierzytelnianie Firebase z Identity Platform możesz uwierzytelniać użytkowników w Firebase za pomocą wybranego dostawcy zgodnego z OpenID Connect (OIDC). Umożliwia to 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 uzyskać od niego pewne informacje:
Identyfikator klienta: unikalny ciąg znaków identyfikujący Twoją aplikację. Dostawca może przypisać Ci inny identyfikator klienta dla każdej obsługiwanej platformy. To jedna z wartości deklaracji
aud
w tokenach identyfikatorów wystawionych przez Twojego dostawcę.Tajny klucz klienta: ciąg tajny 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 korzystania z przepływu kodu uwierzytelniającego, co jest zdecydowanie zalecane).
Wystawca: ciąg znaków identyfikujący dostawcę. Ta wartość musi być adresem URL, który po dodaniu do
/.well-known/openid-configuration
jest lokalizacją dokumentu wykrywania OIDC dostawcy. Jeśli na przykład wydawcą jesthttps://auth.example.com
, dokument opisujący musi być dostępny na stroniehttps://auth.example.com/.well-known/openid-configuration
.
Po otrzymaniu tych informacji włącz OpenID Connect jako dostawcę logowania w projekcie Firebase:
Jeśli nie korzystasz jeszcze z Uwierzytelniania Firebase z Identity Platform, zrób to. Uwierzytelnianie OpenID Connect jest dostępne tylko w uaktualnionych projektach.
Na stronie Sign-in provider (Dostawcy logowania) w konsoli Firebase kliknij Dodaj nowego dostawcę, a następnie kliknij OpenID Connect.
Wybierz, czy będziesz korzystać z przepływu kodu autoryzacji czy przepływu niejawnego uwierzytelnienia.
Należy zawsze używać przepływu kodu, jeśli dostawca go obsługuje. Ten przepływ pośredni jest mniej bezpieczny i zdecydowanie odradzamy jego używanie.
Nazwij tego dostawcę. Zanotuj wygenerowany identyfikator dostawcy, np.
oidc.example-provider
. Będzie Ci potrzebny podczas dodawania kodu 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
Najprostszym sposobem uwierzytelniania użytkowników w Firebase za pomocą dostawcy OIDC jest obsługa całego procesu logowania za pomocą pakietu SDK Firebase.
Aby zalogować się za pomocą pakietu SDK Firebase JavaScript, wykonaj te czynności:
Utwórz instancję
OAuthProvider
, używając identyfikatora dostawcy uzyskanego 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 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 za pomocą
setCustomParameters
nie możesz przekazywać parametrów wymaganych przez Firebase. Te parametry toclient_id
,response_type
,redirect_uri
,state
,scope
iresponse_mode
.Opcjonalnie: określ dodatkowe zakresy OAuth 2.0 poza podstawowym profilem, o które chcesz poprosić dostawcę 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ć stronę 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ć wynik 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 koncentrują się na procesach logowania, ale możesz wykorzystać ten sam wzorzec, aby połączyć dostawcę OIDC z dotychczasowym użytkownikiem za pomocą
linkWithRedirect()
ilinkWithPopup()
oraz ponownie uwierzytelnić użytkownika za pomocąreauthenticateWithRedirect()
ireauthenticateWithPopup()
, których można użyć do pobierania nowych danych logowania w przypadku operacji związanych z poufnymi danymi, które wymagają ostatniego logowania.
Zarejestruj się ręcznie
Jeśli masz już wdrożony w aplikacji proces logowania OpenID Connect, możesz użyć tokena identyfikatora bezpośrednio, by uwierzytelnić się 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.
});