Se hai eseguito l'upgrade a Firebase Authentication with Identity Platform, puoi autenticare i tuoi utenti con Firebase utilizzando il provider conforme a OpenID Connect (OIDC) di tua scelta. Ciò consente di utilizzare provider di identità non supportati nativamente da Firebase.
Prima di iniziare
Per accedere agli utenti utilizzando un provider OIDC, devi prima raccogliere alcune informazioni dal provider:
ID client : una stringa univoca per il provider che identifica la tua app. Il tuo provider potrebbe assegnarti un ID cliente diverso per ogni piattaforma supportata. Questo è uno dei valori dell'attestazione
aud
nei token ID emessi dal provider.Segreto client : una stringa segreta utilizzata dal provider per confermare la proprietà di un ID client. Per ogni ID client, avrai bisogno di un segreto client corrispondente. (Questo valore è obbligatorio solo se utilizzi auth code flow , che è fortemente consigliato).
Emittente : una stringa che identifica il tuo provider. Questo valore deve essere un URL che, se aggiunto a
/.well-known/openid-configuration
, è la posizione del documento di rilevamento OIDC del provider. Ad esempio, se l'emittente èhttps://auth.example.com
, il documento di rilevamento deve essere disponibile suhttps://auth.example.com/.well-known/openid-configuration
.
Dopo aver ottenuto le informazioni di cui sopra, abilita OpenID Connect come provider di accesso per il tuo progetto Firebase:
Se non hai eseguito l'upgrade a Firebase Authentication with Identity Platform, fallo. L'autenticazione OpenID Connect è disponibile solo nei progetti aggiornati.
Nella pagina Provider di accesso della console Firebase, fai clic su Aggiungi nuovo provider , quindi fai clic su OpenID Connect .
Seleziona se utilizzerai il flusso del codice di autorizzazione o il flusso di concessione implicita .
Dovresti usare sempre il flusso di codice se il tuo provider lo supporta . Il flusso implicito è meno sicuro e il suo utilizzo è fortemente sconsigliato.
Assegna un nome a questo provider. Prendi nota dell'ID provider generato: qualcosa di simile
oidc.example-provider
. Avrai bisogno di questo ID quando aggiungi il codice di accesso alla tua app.Specifica l'ID client e il segreto client e la stringa dell'emittente del tuo provider. Questi valori devono corrispondere esattamente ai valori assegnati dal provider.
Salva le modifiche.
Gestisci il flusso di accesso con l'SDK Firebase
Il modo più semplice per autenticare i tuoi utenti con Firebase utilizzando il tuo provider OIDC è gestire l'intero flusso di accesso con l'SDK Firebase.
Per gestire il flusso di accesso con l'SDK JavaScript di Firebase, procedi nel seguente modo:
Crea un'istanza di un
OAuthProvider
utilizzando l'ID provider ottenuto nella console Firebase.API modulare Web
import { OAuthProvider } from "firebase/auth"; const provider = new OAuthProvider('oidc.example-provider');
API con spazio dei nomi Web
var provider = new firebase.auth.OAuthProvider('oidc.example-provider');
Facoltativo : specificare parametri OAuth personalizzati aggiuntivi che si desidera inviare con la richiesta OAuth.
API modulare Web
provider.setCustomParameters({ // Target specific email with login hint. login_hint: 'user@example.com' });
API con spazio dei nomi Web
provider.setCustomParameters({ // Target specific email with login hint. login_hint: 'user@example.com' });
Verifica con il tuo provider i parametri che supporta. Tieni presente che non puoi passare i parametri richiesti da Firebase con
setCustomParameters
. Questi parametri sonoclient_id
,response_type
,redirect_uri
,state
,scope
eresponse_mode
.Facoltativo : specificare ulteriori ambiti OAuth 2.0 oltre al profilo di base che si desidera richiedere al provider di autenticazione.
API modulare Web
provider.addScope('mail.read'); provider.addScope('calendars.read');
API con spazio dei nomi Web
provider.addScope('mail.read'); provider.addScope('calendars.read');
Verificare con il proprio provider gli ambiti che supporta.
Esegui l'autenticazione con Firebase utilizzando l'oggetto provider OAuth.
Puoi reindirizzare l'utente alla pagina di accesso del provider o aprire la pagina di accesso in una finestra popup del browser.
Flusso di reindirizzamento
Reindirizza alla pagina di accesso del provider chiamando
signInWithRedirect()
:API modulare Web
import { getAuth, signInWithRedirect } from "firebase/auth"; const auth = getAuth(); signInWithRedirect(auth, provider);
API con spazio dei nomi Web
firebase.auth().signInWithRedirect(provider);
Dopo che l'utente ha completato l'accesso ed è tornato alla tua app, puoi ottenere il risultato dell'accesso chiamando
getRedirectResult()
.API modulare 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. });
API con spazio dei nomi 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. });
Flusso a comparsa
API modulare 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. });
API con spazio dei nomi 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. });
Sebbene gli esempi precedenti si concentrino sui flussi di accesso, puoi utilizzare lo stesso modello per collegare un provider OIDC a un utente esistente utilizzando
linkWithRedirect()
elinkWithPopup()
e autenticare nuovamente un utente conreauthenticateWithRedirect()
ereauthenticateWithPopup()
, che può essere utilizzato per recuperare nuove credenziali per operazioni sensibili che richiedono un accesso recente.
Gestisci il flusso di accesso manualmente
Se hai già implementato il flusso di accesso OpenID Connect nella tua app, puoi utilizzare direttamente il token ID per eseguire l'autenticazione con Firebase:
API modulare 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.
});
API con spazio dei nomi 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.
});