Jeśli korzystasz z uwierzytelniania Firebase za pomocą Identity Platform, możesz uwierzytelniać swoich użytkowników w Firebase, korzystając z wybranego dostawcy zgodnego z OpenID Connect (OIDC). Umożliwia to korzystanie z dostawców tożsamości nieobsługiwanych natywnie przez Firebase.
Zanim zaczniesz
Aby zalogować użytkowników za pomocą dostawcy OIDC, musisz najpierw zebrać pewne informacje od dostawcy:
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 identyfikatorów wystawionych przez Twojego dostawcę.Sekret klienta : tajny ciąg znaków używany przez dostawcę do potwierdzania własności identyfikatora klienta. Dla każdego identyfikatora klienta będziesz potrzebować pasującego klucza tajnego klienta. (Ta wartość jest wymagana tylko wtedy, gdy używasz przepływu kodu uwierzytelniania , 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
, jest lokalizacją dokumentu odnajdywania OIDC dostawcy. Jeśli na przykład wystawcą jesthttps://auth.example.com
, dokument wykrywania musi być dostępny podhttps://auth.example.com/.well-known/openid-configuration
.
Po uzyskaniu powyższych informacji włącz OpenID Connect jako dostawcę logowania do projektu Firebase:
Jeśli nie uaktualniono do Uwierzytelniania Firebase za pomocą 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ę , a następnie kliknij OpenID Connect Connect .
Wybierz, czy będziesz używać przepływu kodu autoryzacji, czy niejawnego przepływu przyznania .
Powinieneś zawsze używać przepływu kodu, jeśli Twój dostawca go obsługuje . Przepływ niejawny jest mniej bezpieczny i zdecydowanie odradza się korzystanie z niego.
Podaj nazwę temu dostawcy. Zanotuj wygenerowany identyfikator dostawcy: coś takiego jak
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. Te wartości muszą dokładnie odpowiadać wartościom, które przypisał Ci Twój dostawca.
Zapisz zmiany.
Obsługuj proces logowania za pomocą pakietu Firebase SDK
Najłatwiejszym sposobem uwierzytelnienia użytkowników w Firebase przy użyciu dostawcy OIDC jest obsługa całego procesu logowania za pomocą pakietu Firebase SDK.
Aby obsłużyć proces logowania za pomocą pakietu Firebase JavaScript SDK, wykonaj te czynności:
Utwórz wystąpienie
OAuthProvider
przy użyciu identyfikatora dostawcy otrzymanego w konsoli Firebase.Web version 9
import { OAuthProvider } from "firebase/auth"; const provider = new OAuthProvider('oidc.example-provider');
Web version 8
var provider = new firebase.auth.OAuthProvider('oidc.example-provider');
Opcjonalnie : określ dodatkowe niestandardowe parametry OAuth, które chcesz wysłać z żądaniem OAuth.
Web version 9
provider.setCustomParameters({ // Target specific email with login hint. login_hint: 'user@example.com' });
Web version 8
provider.setCustomParameters({ // Target specific email with login hint. login_hint: 'user@example.com' });
Sprawdź u swojego dostawcy, jakie parametry obsługuje. Pamiętaj, że za pomocą setCustomParameters nie możesz przekazać parametrów wymaganych przez
setCustomParameters
. Te parametry toclient_id
,response_type
,redirect_uri
,state
,scope
iresponse_mode
.Opcjonalnie : określ dodatkowe zakresy OAuth 2,0 poza profilem podstawowym, których chcesz zażądać od dostawcy uwierzytelniania.
Web version 9
provider.addScope('mail.read'); provider.addScope('calendars.read');
Web version 8
provider.addScope('mail.read'); provider.addScope('calendars.read');
Skontaktuj się z dostawcą, aby uzyskać informacje o obsługiwanych przez niego zakresach.
Uwierzytelnij się w Firebase przy użyciu obiektu dostawcy OAuth.
Możesz przekierować użytkownika do strony logowania dostawcy lub otworzyć stronę logowania w wyskakującym oknie przeglądarki.
Przekieruj przepływ
Przekieruj do strony logowania dostawcy, wywołując
signInWithRedirect()
:Web version 9
import { getAuth, signInWithRedirect } from "firebase/auth"; const auth = getAuth(); signInWithRedirect(auth, provider);
Web version 8
firebase.auth().signInWithRedirect(provider);
Gdy użytkownik zakończy logowanie i wróci do aplikacji, możesz uzyskać wynik logowania, wywołując
getRedirectResult()
.Web version 9
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 version 8
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ący przepływ
Web version 9
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 version 8
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 koncentrują 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()
i ponownie uwierzytelnić użytkownika za pomocą reauthenticateWithRedirect(reauthenticateWithRedirect()
i reauthenticateWithPopup(reauthenticateWithPopup()
, które mogą służyć do pobierania nowych poświadczeń dla poufnych operacji, które wymagają niedawnego logowania.
Ręczna obsługa procesu logowania
Jeśli w swojej aplikacji masz już zaimplementowany proces logowania OpenID Connect, możesz użyć tokena ID bezpośrednio do uwierzytelniania w Firebase:
Web version 9
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 version 8
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.
});