Questa pagina è stata tradotta dall'API Cloud Translation.

Autenticati utilizzando Microsoft con JavaScript

Puoi consentire ai tuoi utenti di eseguire l'autenticazione 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 accedere agli utenti utilizzando account Microsoft (Azure Active Directory e account Microsoft personali), devi prima abilitare 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 abilitare il provider Microsoft .
Aggiungi l' ID client e il segreto client dalla console per sviluppatori di quel provider alla configurazione del provider:
1. Per registrare un client Microsoft OAuth, seguire le istruzioni in Avvio rapido: registrare un'app con l'endpoint di Azure Active Directory v2.0 . Tieni presente che questo endpoint supporta l'accesso con account personali Microsoft e account di Azure Active Directory. Scopri di più su Azure Active Directory v2.0.
2. Quando registri app con questi provider, assicurati di registrare il dominio *.firebaseapp.com per il tuo progetto come dominio di reindirizzamento per la tua app.
Fare clic su Salva .

Gestisci 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 Firebase JavaScript SDK.

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 microsoft.com .
Web modular API
Ulteriori informazioni sull'API Web modulare tree-shakeable e sull'aggiornamento dall'API con spazio dei nomi.
```
import { OAuthProvider } from "firebase/auth";

const provider = new OAuthProvider('microsoft.com');auth_msft_create_provider.js
```
Web namespaced API
```
var provider = new firebase.auth.OAuthProvider('microsoft.com');microsoft-oauth.js
```

Facoltativo : specificare parametri OAuth personalizzati aggiuntivi che si desidera inviare con la richiesta OAuth.

Web modular API

provider.setCustomParameters({
  // Force re-consent.
  prompt: 'consent',
  // Target specific email with login hint.
  login_hint: 'user@firstadd.onmicrosoft.com'
});auth_msft_provider_params.js

Web namespaced API

provider.setCustomParameters({
  // Force re-consent.
  prompt: 'consent',
  // Target specific email with login hint.
  login_hint: 'user@firstadd.onmicrosoft.com'
});microsoft-oauth.js

Per i parametri supportati da Microsoft, consulta la documentazione di Microsoft OAuth . 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 di Azure AD di accedere all'applicazione, è possibile usare il nome di dominio descrittivo del tenant di Azure AD o l'identificatore GUID del tenant. Questo può essere fatto specificando il campo "tenant" nell'oggetto parametri personalizzati.

Web modular API

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'
});auth_msft_provider_params_tenant.js

Web namespaced API

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'
});microsoft-oauth.js

Facoltativo : specificare ulteriori ambiti OAuth 2.0 oltre al profilo di base che si desidera richiedere al provider di autenticazione.
```
provider.addScope('mail.read');
provider.addScope('calendars.read');
```
Per saperne di più, fai riferimento alla documentazione relativa alle autorizzazioni e ai consensi di Microsoft .

Esegui l'autenticazione con Firebase utilizzando l'oggetto provider OAuth. Puoi chiedere agli utenti di accedere con i propri account Microsoft aprendo una finestra popup o reindirizzando alla pagina di accesso. Il metodo di reindirizzamento è preferito sui dispositivi mobili.

Per accedere con una finestra pop-up, chiama signInWithPopup :

Web modular API

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.
  });auth_msft_signin_popup.js

Web namespaced API

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.
  });microsoft-oauth.js

Per accedere reindirizzando alla pagina di accesso, chiama signInWithRedirect :

Segui le best practice quando utilizzi signInWithRedirect , linkWithRedirect o reauthenticateWithRedirect .

Web modular API

import { getAuth, signInWithRedirect } from "firebase/auth";

const auth = getAuth();
signInWithRedirect(auth, provider);auth_msft_signin_redirect.js

Web namespaced API

firebase.auth().signInWithRedirect(provider);microsoft-oauth.js

Dopo che l'utente ha completato l'accesso ed è tornato alla pagina, puoi ottenere il risultato dell'accesso chiamando getRedirectResult .

Web modular API

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.
  });auth_msft_signin_redirect_result.js

Web namespaced API

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.
  });microsoft-oauth.js

Al termine, il token di accesso OAuth associato al provider può essere recuperato dall'oggetto firebase.auth.UserCredential restituito.

Usando il token di accesso OAuth, puoi chiamare l' API Microsoft Graph .

Ad esempio, per ottenere le informazioni di base sul 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 della foto e, invece, i dati binari per una foto del profilo devono essere richiesti tramite Microsoft Graph API .

Oltre al token di accesso OAuth, è possibile recuperare anche il token ID OAuth dell'utente dall'oggetto firebase.auth.UserCredential . L'attestazione sub nel token ID è specifica dell'app e non corrisponderà all'identificatore utente federato utilizzato da Firebase Auth e accessibile tramite user.providerData[0].uid . Al suo posto dovrebbe essere utilizzato il campo oid claim. Quando si usa un tenant di Azure AD per l'accesso, l'attestazione oid sarà una corrispondenza esatta. Tuttavia, per il caso non tenant, il campo oid è riempito. Per un ID federato 4b2eabcdefghijkl , l' oid avrà un formato 00000000-0000-0000-4b2e-abcdefghijkl .

Mentre gli esempi precedenti si concentrano sui flussi di accesso, hai anche la possibilità di collegare un provider Microsoft a un utente esistente usando linkWithPopup / linkWithRedirect . Ad esempio, puoi collegare più fornitori allo stesso utente consentendo loro di accedere con entrambi.

Web modular API

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.
    });auth_msft_link_popup.js

Web namespaced API

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.
    });microsoft-oauth.js

Lo stesso modello può essere utilizzato con reauthenticateWithPopup / reauthenticateWithRedirect che può essere utilizzato per recuperare nuove credenziali per operazioni sensibili che richiedono un accesso recente.

Web modular API

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.
    });auth_msft_reauth_popup.js

Web namespaced API

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.
    });microsoft-oauth.js

Gestione degli errori di account esistenti con credenziali diverse

Se hai abilitato l'impostazione Un account per indirizzo email nella console Firebase , quando un utente tenta di accedere a un provider (come Microsoft) con un indirizzo email già esistente per il provider di un altro utente Firebase (come Google), l'errore auth/account-exists-with-different-credential viene generato insieme a un oggetto AuthCredential (credenziale Microsoft). Per completare l'accesso al provider previsto, l'utente deve prima accedere al provider esistente (Google) e quindi collegarsi all'ex AuthCredential (credenziale Microsoft).

Se utilizzi signInWithPopup , puoi gestire gli errori auth/account-exists-with-different-credential con codice come nell'esempio seguente:


// Step 1.
// User tries to sign in to Microsoft.
auth.signInWithPopup(new firebase.auth.OAuthProvider('microsoft.com')).catch(function(error) {
  // An error happened.
  if (error.code === 'auth/account-exists-with-different-credential') {
    // Step 2.
    // User's email already exists.
    // The pending Microsoft credential.
    var pendingCred = error.credential;
    // The provider account's email address.
    var email = error.email;
    // Get sign-in methods for this email.
    auth.fetchSignInMethodsForEmail(email).then(function(methods) {
      // Step 3.
      // If the user has several sign-in methods,
      // the first method in the list will be the "recommended" method to use.
      if (methods[0] === 'password') {
        // Asks the user their password.
        // In real scenario, you should handle this asynchronously.
        var password = promptUserForPassword(); // TODO: implement promptUserForPassword.
        auth.signInWithEmailAndPassword(email, password).then(function(result) {
          // Step 4a.
          return result.user.linkWithCredential(pendingCred);
        }).then(function() {
          // Microsoft account successfully linked to the existing Firebase user.
          goToApp();
        });
        return;
      }
      // All the other cases are external providers.
      // Construct provider object for that provider.
      // TODO: implement getProviderForProviderId.
      var provider = getProviderForProviderId(methods[0]);
      // At this point, you should let the user know that they already have an account
      // but with a different provider, and let them validate the fact they want to
      // sign in with this provider.
      // Sign in to provider. Note: browsers usually block popup triggered asynchronously,
      // so in real scenario you should ask the user to click on a "continue" button
      // that will trigger the signInWithPopup.
      auth.signInWithPopup(provider).then(function(result) {
        // Remember that the user may have signed in with an account that has a different email
        // address than the first one. This can happen as Firebase doesn't control the provider's
        // sign in flow and the user is free to login using whichever account they own.
        // Step 4b.
        // Link to Microsoft credential.
        // As we have access to the pending credential, we can directly call the link method.
        result.user.linkAndRetrieveDataWithCredential(pendingCred).then(function(usercred) {
          // Microsoft account successfully linked to the existing Firebase user.
          goToApp();
        });
      });
    });
  }
});

Modalità reindirizzamento

Questo errore viene gestito in modo simile nella modalità di reindirizzamento, con la differenza che la credenziale in sospeso deve essere memorizzata nella cache tra i reindirizzamenti di pagina (ad esempio, utilizzando l'archiviazione della sessione).

A differenza di altri provider OAuth supportati da Firebase come Google, Facebook e Twitter, dove l'accesso può essere ottenuto direttamente con credenziali basate su token di accesso OAuth, Firebase Auth non supporta la stessa funzionalità per provider come Microsoft a causa dell'impossibilità del Server Firebase Auth per verificare il pubblico dei token di accesso Microsoft OAuth. Questo è un requisito di sicurezza critico e potrebbe esporre applicazioni e siti Web a ripetere gli attacchi in cui un token di accesso Microsoft OAuth ottenuto per un progetto (aggressore) può essere utilizzato per accedere a un altro progetto (vittima). Invece, Firebase Auth offre 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 uno specifico ID cliente/segreto, 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 libreria OAuth di terze parti e un'autenticazione personalizzata Firebase . Il primo è necessario per l'autenticazione con il provider e il secondo per scambiare le credenziali del provider con un token personalizzato.

Esegui l'autenticazione con Firebase in un'estensione di Chrome

Se stai creando un'app di estensione di Chrome, devi aggiungere il tuo ID estensione di Chrome:

Apri il tuo progetto nella console Firebase .
Nella sezione Autenticazione , apri la pagina Metodo di accesso .
Aggiungere un URI come il seguente all'elenco dei domini autorizzati:
```
chrome-extension://CHROME_EXTENSION_ID
```

Solo le operazioni popup ( signInWithPopup , linkWithPopup e reauthenticateWithPopup ) sono disponibili per le estensioni di Chrome, poiché le estensioni di Chrome non possono utilizzare i reindirizzamenti HTTP. Dovresti chiamare questi metodi da uno script di una pagina in background piuttosto che da un popup di azione del browser, poiché il popup di autenticazione annullerà il popup di azione del browser. I metodi popup possono essere utilizzati solo nelle estensioni che utilizzano Manifest V2 . Il più recente Manifest V3 consente solo script in background sotto forma di service worker, che non possono eseguire affatto le operazioni popup.

Nel file manifest dell'estensione di Chrome assicurati di aggiungere l'URL https://apis.google.com alla lista consentita content_security_policy .

Alla creazione del progetto, Firebase fornirà un sottodominio univoco per il tuo progetto: https://my-app-12345.firebaseapp.com .

Questo verrà utilizzato anche come meccanismo di reindirizzamento per l'accesso OAuth. Tale dominio dovrebbe essere consentito per tutti i provider OAuth supportati. Tuttavia, ciò significa che gli utenti potrebbero vedere quel dominio durante l'accesso a Microsoft prima di reindirizzare nuovamente all'applicazione: Continua su: https://my-app-12345.firebaseapp.com .

Per evitare di visualizzare il tuo sottodominio, puoi configurare un dominio personalizzato con Firebase Hosting:

Segui i passaggi da 1 a 3 in Configurare il tuo dominio per l'hosting . Quando verifichi la proprietà del tuo dominio, Hosting fornisce un certificato SSL per il tuo dominio personalizzato.
Aggiungi il tuo dominio personalizzato all'elenco dei domini autorizzati nella console di Firebase : auth.custom.domain.com .
Nella console per sviluppatori Microsoft o nella pagina di configurazione di OAuth, autorizza l'URL della pagina di reindirizzamento, che sarà accessibile sul tuo dominio personalizzato: https://auth.custom.domain.com/__/auth/handler .

Quando inizializzi la libreria JavaScript, specifica il tuo dominio personalizzato con il campo authDomain :

var config = {
  apiKey: '...',
  // Changed from 'my-app-12345.firebaseapp.com'.
  authDomain: 'auth.custom.domain.com',
  databaseURL: 'https://my-app-12345.firebaseio.com',
  projectId: 'my-app-12345',
  storageBucket: 'my-app-12345.appspot.com',
  messagingSenderId: '1234567890'
};
firebase.initializeApp(config);

Prossimi passi

Dopo che un utente ha effettuato 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 sul provider di autenticazione, con cui l'utente ha eseguito l'accesso. Questo nuovo account viene archiviato come parte del tuo progetto Firebase e può essere utilizzato per identificare un utente in ogni app del tuo progetto, indipendentemente dalla modalità di accesso dell'utente.

Nelle tue app, il modo consigliato per conoscere lo stato di autenticazione del tuo utente è impostare un osservatore sull'oggetto Auth . È quindi possibile ottenere le informazioni di base sul profilo dell'utente dall'oggetto User . Vedere Gestire gli utenti .
In Firebase Realtime Database and Cloud Storage Security Rules , puoi ottenere 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 disconnettere un utente, chiama signOut :

Web modular API

import { getAuth, signOut } from "firebase/auth";

const auth = getAuth();
signOut(auth).then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});auth_sign_out.js

Web namespaced API

firebase.auth().signOut().then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});index.js

Autenticati utilizzando Microsoft con JavaScript

Prima di iniziare

Gestisci il flusso di accesso con l'SDK Firebase

Web modular API

Web namespaced API

Web modular API

Web namespaced API

Web modular API

Web namespaced API

Web modular API

Web namespaced API

Web modular API

Web namespaced API

Web modular API

Web namespaced API

Web modular API

Web namespaced API

Web modular API

Web namespaced API

Gestione degli errori di account esistenti con credenziali diverse

Modalità pop-up

Modalità reindirizzamento

Avanzate: gestisci il flusso di accesso manualmente

Esegui l'autenticazione con Firebase in un'estensione di Chrome

Personalizzazione del dominio di reindirizzamento per l'accesso Microsoft

Prossimi passi

Web modular API

Web namespaced API