Jeśli dokonałeś aktualizacji do uwierzytelniania Firebase z platformą tożsamości, możesz uwierzytelniać swoich użytkowników w Firebase przy użyciu wybranego dostawcy zgodnego z OpenID Connect (OIDC). Umożliwia to korzystanie z dostawców tożsamości, którzy nie są natywnie obsługiwani przez Firebase.
Zanim zaczniesz
Aby zalogować użytkowników za pomocą dostawcy OIDC, musisz najpierw zebrać od dostawcy pewne informacje:
Identyfikator klienta : ciąg znaków unikalny dla dostawcy, który identyfikuje Twoją aplikację. Twój dostawca może przypisać Ci inny identyfikator klienta dla każdej obsługiwanej platformy. Jest to jedna z wartości żądania
aud
w tokenach identyfikacyjnych wydanych przez Twojego dostawcę.Sekret klienta : tajny ciąg znaków używany przez dostawcę do potwierdzenia własności identyfikatora klienta. Dla każdego identyfikatora klienta będziesz potrzebować pasującego sekretu 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 Twojego dostawcę. Ta wartość musi być adresem URL, który po dołączeniu do
/.well-known/openid-configuration
oznacza lokalizację dokumentu wykrywania OIDC dostawcy. Na przykład, jeśli wystawcą jesthttps://auth.example.com
, dokument wykrywający musi być dostępny podhttps://auth.example.com/.well-known/openid-configuration
.
Po uzyskaniu powyższych informacji włącz OpenID Connect jako dostawcę logowania dla swojego projektu Firebase:
Jeśli nie dokonałeś aktualizacji do uwierzytelniania Firebase z platformą tożsamości, zrób to. Uwierzytelnianie OpenID Connect jest dostępne tylko w zaktualizowanych projektach.
Na stronie Dostawcy logowania w konsoli Firebase kliknij Dodaj nowego dostawcę , a następnie kliknij OpenID Connect Connect .
Wybierz, czy będziesz używać przepływu kodu autoryzacyjnego , czy ukrytego przepływu dotacji .
Powinieneś zawsze używać przepływu kodu, jeśli Twój dostawca to obsługuje . Niejawny przepływ jest mniej bezpieczny i zdecydowanie odradza się jego używanie.
Podaj nazwę tego dostawcy. Zanotuj wygenerowany identyfikator dostawcy: coś w rodzaju
oidc.example-provider
. Będziesz potrzebować tego identyfikatora, gdy dodasz kod logowania do swojej aplikacji.Podaj swój identyfikator klienta i klucz tajny klienta oraz ciąg wystawcy dostawcy. Wartości te muszą dokładnie odpowiadać wartościom przypisanym przez dostawcę.
Zapisz zmiany.
Obsługuj proces logowania za pomocą pakietu SDK Firebase
Najłatwiejszym sposobem uwierzytelnienia użytkowników w Firebase przy użyciu dostawcy OIDC jest obsługa całego procesu logowania za pomocą pakietu SDK Firebase.
Aby obsłużyć proces logowania za pomocą pakietu SDK JavaScript Firebase, wykonaj następujące kroki:
Utwórz instancję
OAuthProvider
, korzystając z identyfikatora dostawcy otrzymanego w konsoli Firebase.Modułowe API sieciowe
import { OAuthProvider } from "firebase/auth"; const provider = new OAuthProvider('oidc.example-provider');
Internetowy interfejs API z przestrzenią nazw
var provider = new firebase.auth.OAuthProvider('oidc.example-provider');
Opcjonalnie : określ dodatkowe niestandardowe parametry OAuth, które chcesz wysłać z żądaniem OAuth.
Modułowe API sieciowe
provider.setCustomParameters({ // Target specific email with login hint. login_hint: 'user@example.com' });
Internetowy interfejs API z przestrzenią nazw
provider.setCustomParameters({ // Target specific email with login hint. login_hint: 'user@example.com' });
Sprawdź u swojego dostawcy parametry, które obsługuje. Pamiętaj, że nie możesz przekazywać parametrów wymaganych przez Firebase za pomocą
setCustomParameters
. Te parametry toclient_id
,response_type
,redirect_uri
,state
,scope
iresponse_mode
.Opcjonalnie : określ dodatkowe zakresy protokołu OAuth 2.0 poza profilem podstawowym, o które chcesz poprosić dostawcę uwierzytelniania.
Modułowe API sieciowe
provider.addScope('mail.read'); provider.addScope('calendars.read');
Internetowy interfejs API z przestrzenią nazw
provider.addScope('mail.read'); provider.addScope('calendars.read');
Sprawdź u swojego dostawcy zakresy, które obsługuje.
Uwierzytelnij się w Firebase przy użyciu obiektu dostawcy OAuth.
Możesz przekierować użytkownika na stronę logowania dostawcy lub otworzyć stronę logowania w wyskakującym oknie przeglądarki.
Przekieruj przepływ
Przekieruj do strony logowania dostawcy, wywołując metodę
signInWithRedirect()
:Modułowe API sieciowe
import { getAuth, signInWithRedirect } from "firebase/auth"; const auth = getAuth(); signInWithRedirect(auth, provider);
Internetowy interfejs API z przestrzenią nazw
firebase.auth().signInWithRedirect(provider);
Gdy użytkownik zakończy logowanie i wróci do aplikacji, możesz uzyskać wynik logowania, wywołując funkcję
getRedirectResult()
.Modułowe API sieciowe
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. });
Internetowy interfejs API z przestrzenią nazw
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. });
Przepływ wyskakujących okienek
Modułowe API sieciowe
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. });
Internetowy interfejs API z przestrzenią nazw
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. });
Chociaż powyższe przykłady skupiają się na przepływach logowania, możesz użyć tego samego wzorca, aby połączyć dostawcę OIDC z istniejącym użytkownikiem za pomocą
linkWithRedirect()
ilinkWithPopup()
oraz ponownie uwierzytelnić użytkownika za pomocąreauthenticateWithRedirect()
ireauthenticateWithPopup()
, które można wykorzystać do pobrania nowych danych uwierzytelniających dla wrażliwych operacji wymagających niedawnego logowania.
Obsługuj proces logowania ręcznie
Jeśli w swojej aplikacji zaimplementowałeś już proces logowania OpenID Connect, możesz użyć tokena identyfikacyjnego bezpośrednio do uwierzytelnienia w Firebase:
Modułowe API sieciowe
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.
});
Internetowy interfejs API z przestrzenią nazw
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.
});