Puoi consentire agli utenti di autenticarsi con Firebase utilizzando provider OAuth come Microsoft Azure Active Directory integrando l'accesso OAuth generico nella tua app utilizzando l'SDK Firebase per eseguire il flusso di accesso end-to-end.
Prima di iniziare
Per consentire agli utenti di accedere utilizzando account Microsoft (Azure Active Directory e account Microsoft personali), devi prima attivare Microsoft come provider di accesso per il tuo progetto Firebase:
- Aggiungi Firebase al tuo progetto JavaScript.
- Nella console Firebase, apri la sezione Auth.
- Nella scheda Metodo di accesso, attiva il provider Microsoft.
- Aggiungi l'ID cliente e il client secret della console per sviluppatori del provider alla configurazione del provider:
- Per registrare un client OAuth di Microsoft, segui le istruzioni riportate in Guida rapida: registrazione di un'app con l'endpoint Azure Active Directory v2.0. Tieni presente che questo endpoint supporta l'accesso con gli account personali Microsoft e gli account Azure Active Directory. Scopri di più su Azure Active Directory v2.0.
- Quando registri le app con questi provider, assicurati di registrare il dominio
*.firebaseapp.com
per il tuo progetto come dominio di reindirizzamento per la tua app.
- Fai clic su Salva.
Gestire il flusso di accesso con l'SDK Firebase
Se stai creando un'app web, il modo più semplice per autenticare i tuoi utenti con Firebase utilizzando i loro account Microsoft è gestire l'intero flusso di accesso con l'SDK Firebase JavaScript.
Per gestire il flusso di accesso con l'SDK Firebase JavaScript:
Crea un'istanza di OAuthProvider utilizzando l'ID provider microsoft.com.
import { OAuthProvider } from "firebase/auth"; const provider = new OAuthProvider('microsoft.com');
var provider = new firebase.auth.OAuthProvider('microsoft.com');
Facoltativo: specifica ulteriori parametri OAuth personalizzati da inviare con la richiesta OAuth.
provider.setCustomParameters({ // Force re-consent. prompt: 'consent', // Target specific email with login hint. login_hint: 'user@firstadd.onmicrosoft.com' });
provider.setCustomParameters({ // Force re-consent. prompt: 'consent', // Target specific email with login hint. login_hint: 'user@firstadd.onmicrosoft.com' });
Per i parametri supportati da Microsoft, consulta la documentazione di OAuth di Microsoft. Tieni presente che non puoi passare i parametri richiesti da Firebase con
setCustomParameters()
. Questi parametri sono client_id, response_type, redirect_uri, state, scope e response_mode.Per consentire solo agli utenti di un determinato tenant Azure AD di accedere all'applicazione, puoi utilizzare il nome descrittivo del dominio del tenant Azure AD o l'identificatore GUID del tenant. Per farlo, specifica il campo "tenant" nell'oggetto dei parametri personalizzati.
provider.setCustomParameters({ // Optional "tenant" parameter in case you are using an Azure AD tenant. // eg. '8eaef023-2b34-4da1-9baa-8bc8c9d6a490' or 'contoso.onmicrosoft.com' // or "common" for tenant-independent tokens. // The default value is "common". tenant: 'TENANT_ID' });
provider.setCustomParameters({ // Optional "tenant" parameter in case you are using an Azure AD tenant. // eg. '8eaef023-2b34-4da1-9baa-8bc8c9d6a490' or 'contoso.onmicrosoft.com' // or "common" for tenant-independent tokens. // The default value is "common". tenant: 'TENANT_ID' });
Facoltativo: specifica gli ambiti OAuth 2.0 aggiuntivi oltre al profilo di base che vuoi richiedere al provider di autenticazione.
provider.addScope('mail.read'); provider.addScope('calendars.read');
Per saperne di più, consulta la documentazione relativa alle autorizzazioni e al consenso di Microsoft.
Esegui l'autenticazione con Firebase utilizzando l'oggetto provider OAuth. Puoi chiedere ai tuoi utenti di accedere con i propri Account Microsoft aprendo una finestra popup o reindirizzandoli alla pagina di accesso. Il metodo di reindirizzamento è preferito sui dispositivi mobili.
- Per accedere con una finestra popup, chiama
signInWithPopup
:
import { getAuth, signInWithPopup, OAuthProvider } from "firebase/auth"; const auth = getAuth(); signInWithPopup(auth, provider) .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. });
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. });
- Per accedere tramite il reindirizzamento alla pagina di accesso, chiama
signInWithRedirect
:
Segui le best practice quando utilizzi
signInWithRedirect
,linkWithRedirect
oreauthenticateWithRedirect
.import { getAuth, signInWithRedirect } from "firebase/auth"; const auth = getAuth(); signInWithRedirect(auth, provider);
firebase.auth().signInWithRedirect(provider);
Dopo che l'utente ha completato l'accesso e torna alla pagina, puoi ottenere il risultato dell'accesso chiamando
getRedirectResult
.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. });
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. });
Al termine dell'operazione, il token di accesso OAuth associato al fornitore può essere recuperato dall'oggetto
firebase.auth.UserCredential
restituito.Utilizzando il token di accesso OAuth, puoi chiamare l'API Microsoft Graph.
Ad esempio, per ottenere le informazioni di base del profilo, è possibile chiamare la seguente API REST:
curl -i -H "Authorization: Bearer ACCESS_TOKEN" https://graph.microsoft.com/v1.0/me
A differenza di altri provider supportati da Firebase Auth, Microsoft non fornisce un URL di una foto, ma i dati binari di una foto del profilo devono essere richiesti tramite l'API Microsoft Graph.
Oltre al token di accesso OAuth, anche il token ID OAuth dell'utente può essere recuperato dall'oggetto
firebase.auth.UserCredential
. Il claimsub
nel token di identità è specifico per l'app e non corrisponde all'identificatore dell'utente federato utilizzato da Firebase Auth e accessibile tramiteuser.providerData[0].uid
. È invece necessario utilizzare il campo della rivendicazioneoid
. Quando utilizzi un tenant Azure AD per accedere, la rivendicazioneoid
sarà una corrispondenza esatta. Tuttavia, per il caso non tenant, il campooid
è riempito. Per un ID federato4b2eabcdefghijkl
,oid
avrà un formato00000000-0000-0000-4b2e-abcdefghijkl
.- Per accedere con una finestra popup, chiama
Sebbene gli esempi precedenti si concentrino sui flussi di accesso, hai anche la possibilità di collegare un provider Microsoft a un utente esistente utilizzando
linkWithPopup
/linkWithRedirect
. Ad esempio, puoi collegare più provider allo stesso utente consentendogli di accedere con uno dei due.import { getAuth, linkWithPopup, OAuthProvider } from "firebase/auth"; const provider = new OAuthProvider('microsoft.com'); const auth = getAuth(); linkWithPopup(auth.currentUser, provider) .then((result) => { // Microsoft credential is linked to the current user. // 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. });
var provider = new firebase.auth.OAuthProvider('microsoft.com'); firebase.auth().currentUser.linkWithPopup(provider) .then((result) => { // Microsoft credential is linked to the current user. // IdP data available in result.additionalUserInfo.profile. // OAuth access token can also be retrieved: // result.credential.accessToken // OAuth ID token can also be retrieved: // result.credential.idToken }) .catch((error) => { // Handle error. });
Lo stesso pattern può essere utilizzato con
reauthenticateWithPopup
/reauthenticateWithRedirect
, che può essere utilizzato per recuperare le credenziali aggiornate per operazioni sensibili che richiedono un accesso recente.import { getAuth, reauthenticateWithPopup, OAuthProvider } from "firebase/auth"; const provider = new OAuthProvider('microsoft.com'); const auth = getAuth(); reauthenticateWithPopup(auth.currentUser, provider) .then((result) => { // User is re-authenticated with fresh tokens minted and // should be able to perform sensitive operations like account // deletion and email or password update. // 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. });
var provider = new firebase.auth.OAuthProvider('microsoft.com'); firebase.auth().currentUser.reauthenticateWithPopup(provider) .then((result) => { // User is re-authenticated with fresh tokens minted and // should be able to perform sensitive operations like account // deletion and email or password update. // IdP data available in result.additionalUserInfo.profile. // OAuth access token can also be retrieved: // result.credential.accessToken // OAuth ID token can also be retrieved: // result.credential.idToken }) .catch((error) => { // Handle error. });
Gestione degli errori account-exists-with-different-credential
Se hai attivato l'impostazione Un account per indirizzo email nella console Firebase,
quando un utente tenta di accedere a un provider (ad esempio Microsoft) con un indirizzo email che esiste già per il provider di un altro utente Firebase (ad esempio Google), viene generato l'errore
auth/account-exists-with-different-credential
insieme a un
oggetto AuthCredential
(credenziale Microsoft). Per completare l'accesso al fornitore scelto, l'utente deve prima accedere al fornitore esistente (Google) e poi eseguire il collegamento all'AuthCredential
precedente (credenziale Microsoft).
Modalità popup
Se utilizzi signInWithPopup
, puoi gestire gli errori auth/account-exists-with-different-credential
con un codice come nell'esempio seguente:
import { getAuth, linkWithCredential, signInWithPopup, OAuthProvider, } from "firebase/auth"; try { // Step 1: User tries to sign in using Microsoft. let result = await signInWithPopup(getAuth(), new OAuthProvider()); } catch (error) { // Step 2: User's email already exists. if (error.code === "auth/account-exists-with-different-credential") { // The pending Microsoft credential. let pendingCred = error.credential; // Step 3: Save the pending credential in temporary storage, // Step 4: Let the user know that they already have an account // but with a different provider, and let them choose another // sign-in method. } } // ... try { // Step 5: Sign the user in using their chosen method. let result = await signInWithPopup(getAuth(), userSelectedProvider); // Step 6: Link to the Microsoft credential. // TODO: implement `retrievePendingCred` for your app. let pendingCred = retrievePendingCred(); if (pendingCred !== null) { // As you have access to the pending credential, you can directly call the // link method. let user = await linkWithCredential(result.user, pendingCred); } // Step 7: Continue to app. } catch (error) { // ... }
Modalità di reindirizzamento
Questo errore viene gestito in modo simile nella modalità di reindirizzamento, con la differenza che la credenziale in attesa deve essere memorizzata nella cache tra i reindirizzamenti di pagina (ad esempio utilizzando lo spazio di archiviazione della sessione).
Avanzate: gestisci manualmente il flusso di accesso
A differenza di altri provider OAuth supportati da Firebase, come Google, Facebook e Twitter, dove l'accesso può essere ottenuto direttamente con le credenziali basate su token di accesso OAuth, Firebase Auth non supporta la stessa funzionalità per provider come Microsoft a causa dell'incapacità del server Firebase Auth di verificare il pubblico dei token di accesso OAuth di Microsoft. Si tratta di un requisito di sicurezza fondamentale e potrebbe esporre applicazioni e siti web ad attacchi di replay in cui un token di accesso OAuth di Microsoft ottenuto per un progetto (aggressore) può essere utilizzato per accedere a un altro progetto (vittima). Firebase Auth offre invece la possibilità di gestire l'intero flusso OAuth e lo scambio del codice di autorizzazione utilizzando l'ID client e il segreto OAuth configurati nella Console Firebase. Poiché il codice di autorizzazione può essere utilizzato solo in combinazione con un ID client/una secret specifici, un codice di autorizzazione ottenuto per un progetto non può essere utilizzato con un altro.
Se è necessario utilizzare questi provider in ambienti non supportati, è necessario utilizzare una biblioteca OAuth di terze parti e l'autenticazione personalizzata di Firebase. Il primo è necessario per l'autenticazione con il fornitore e il secondo per scambiare la credenziale del fornitore con un token personalizzato.
Eseguire l'autenticazione con Firebase in un'estensione di Chrome
Se stai creando un'app di estensione di Chrome, consulta la guida Documenti fuori schermo.
Personalizzare il dominio di reindirizzamento per l'accesso a Microsoft
Al momento della creazione del progetto, Firebase eseguirà il provisioning di un sottodominio univoco per il progetto:
https://my-app-12345.firebaseapp.com
.
Verrà utilizzato anche come meccanismo di reindirizzamento per l'accesso OAuth. Questo dominio deve essere consentito per tutti i fornitori OAuth supportati. Tuttavia, ciò significa che gli utenti potrebbero visualizzare questo dominio durante l'accesso a Microsoft prima del reindirizzamento all'applicazione: Continua su: https://my-app-12345.firebaseapp.com.
Per evitare la visualizzazione del sottodominio, puoi configurare un dominio personalizzato con Firebase Hosting:
- Segui i passaggi da 1 a 3 in Configurare il dominio per Hosting. Quando verifichi la proprietà del tuo dominio, Hosting esegue il provisioning di un certificato SSL per il tuo dominio personalizzato.
- Aggiungi il tuo dominio personalizzato all'elenco dei domini autorizzati nella
console Firebase:
auth.custom.domain.com
. - Nella pagina di configurazione di OAuth o nella console per sviluppatori Microsoft, aggiungi alla lista consentita l'URL della pagina di reindirizzamento,
che sarà accessibile nel tuo dominio personalizzato:
https://auth.custom.domain.com/__/auth/handler
. - Quando inizili la libreria JavaScript, specifica il tuo dominio personalizzato con il campo
authDomain
:var config = { apiKey: '...', // Changed from '
PROJECT_ID .firebaseapp.com'. authDomain: 'auth.custom.domain.com', databaseURL: 'https://PROJECT_ID .firebaseio.com', projectId: 'PROJECT_ID ', storageBucket: ' ', messagingSenderId: 'PROJECT_ID .firebasestorage.appSENDER_ID ' }; firebase.initializeApp(config);
Passaggi successivi
Dopo che un utente ha eseguito l'accesso per la prima volta, viene creato un nuovo account utente e collegato alle credenziali, ovvero nome utente e password, numero di telefono o informazioni del fornitore di autenticazione, con cui l'utente ha eseguito l'accesso. Questo nuovo account viene archiviato nel tuo progetto Firebase e può essere utilizzato per identificare un utente in tutte le app del progetto, indipendentemente da come accede.
-
Nelle tue app, il modo consigliato per conoscere lo stato di autenticazione dell'utente è impostare un osservatore sull'oggetto
Auth
. Puoi quindi recuperare le informazioni di base del profilo dell'utente dall'oggettoUser
. Vedi Gestire gli utenti. Nelle Regole di sicurezza Firebase Realtime Database e Cloud Storage, puoi recuperare l'ID utente univoco dell'utente che ha eseguito l'accesso dalla variabile
auth
e utilizzarlo per controllare a quali dati può accedere un utente.
Puoi consentire agli utenti di accedere alla tua app utilizzando più provider di autenticazione collegando le credenziali del provider di autenticazione a un account utente esistente.
Per scollegare un utente, chiama
signOut
:
import { getAuth, signOut } from "firebase/auth"; const auth = getAuth(); signOut(auth).then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });
firebase.auth().signOut().then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });