Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

Esegui l'autenticazione utilizzando Microsoft con JavaScript

Puoi consentire agli 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 consentire agli utenti di accedere utilizzando gli 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, vai a Sicurezza > Autenticazione.
Nella scheda Metodo di accesso, abilita il provider di accesso Microsoft.
Aggiungi l'ID client e il client secret dalla console per sviluppatori di quel provider alla configurazione del provider:
1. Per registrare un client OAuth Microsoft, segui le istruzioni riportate in Guida rapida: registrare un'app con l'endpoint Azure Active Directory v2.0. Tieni presente che questo endpoint supporta l'accesso utilizzando sia gli account Microsoft personali sia gli account Azure Active Directory. Scopri di più su Azure Active Directory v2.0.
2. Quando registri le app con questi provider, assicurati di registrare il *.firebaseapp.com dominio 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 gli 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 un OAuthProvider utilizzando l'ID provider microsoft.com.

Web

import { OAuthProvider } from "firebase/auth";

const provider = new OAuthProvider('microsoft.com');auth_msft_create_provider.js

Web

var provider = new firebase.auth.OAuthProvider('microsoft.com');microsoft-oauth.js

Facoltativo: specifica altri parametri OAuth personalizzati che vuoi inviare con la richiesta OAuth.

Web

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

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 l'accesso all'applicazione solo agli utenti di un tenant Azure AD specifico, puoi utilizzare il nome di dominio descrittivo del tenant Azure AD o l'identificatore GUID del tenant. Per farlo, specifica il campo "tenant" nell'oggetto dei parametri personalizzati.

Web

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

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: specifica altri ambiti OAuth 2.0 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 del provider OAuth. Puoi chiedere agli utenti di accedere con i loro account Microsoft aprendo una finestra popup o reindirizzando alla pagina di accesso. Il metodo di reindirizzamento è preferibile sui dispositivi mobili.

Per accedere con una finestra popup, chiama signInWithPopup:

Web

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

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

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

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

Web

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

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

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 dell'operazione, il token di accesso OAuth associato al provider può essere recuperato dall'oggetto firebase.auth.UserCredential restituito.

Utilizzando il token di accesso OAuth, puoi chiamare la Microsoft Graph API.

Ad esempio, per ottenere le informazioni di base del profilo, puoi 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. I dati binari di una foto del profilo devono essere richiesti tramite l'API Microsoft Graph.

Oltre al token di accesso OAuth, puoi recuperare anche il token ID OAuth dell'utente dall'oggetto firebase.auth.UserCredential. L'attestazione sub nel token ID è specifica dell'app e non corrisponde all'identificatore utente federato utilizzato da Firebase Auth e accessibile tramite user.providerData[0].uid. Devi utilizzare invece il campo dell'attestazione oid. Quando utilizzi un tenant Azure AD per l'accesso, l'attestazione oid corrisponde esattamente. Tuttavia, nel caso di non tenant, il campo oid viene riempito. Per un ID federato 4b2eabcdefghijkl, l'attestazione oid avrà il formato 00000000-0000-0000-4b2e-abcdefghijkl.

Sebbene gli esempi precedenti si concentrino sui flussi di accesso, puoi anche 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.

Web

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

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 pattern può essere utilizzato con reauthenticateWithPopup/reauthenticateWithRedirect, che può essere utilizzato per recuperare nuove credenziali per le operazioni sensibili che richiedono un accesso recente.

Web

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

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

Gestire gli errori account-exists-with-different-credential

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

Se utilizzi signInWithPopup, puoi gestire gli errori auth/account-exists-with-different-credential con un codice simile all'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 le credenziali in attesa devono essere memorizzate nella cache tra i reindirizzamenti delle pagine (ad esempio, utilizzando l'archiviazione della sessione).

A differenza di altri provider OAuth supportati da Firebase, come Google, Facebook, e Twitter, in cui l'accesso può essere eseguito direttamente con le credenziali basate sul token di accesso OAuth, Firebase Auth non supporta la stessa funzionalità per provider come Microsoft a causa dell'impossibilità del server Firebase Auth di verificare il pubblico dei token di accesso OAuth di Microsoft. Si tratta di un requisito di sicurezza fondamentale che potrebbe esporre applicazioni e siti web ad attacchi di riproduzione 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 di codici di autorizzazione utilizzando l'ID client OAuth e il client secret configurati nella console Firebase. Poiché il codice di autorizzazione può essere utilizzato in combinazione con un ID client/client secret specifico, un codice di autorizzazione ottenuto per un progetto non può essere utilizzato con un altro.

Se questi provider devono essere utilizzati in ambienti non supportati, è necessario utilizzare una libreria OAuth di terze parti e l'autenticazione personalizzata di Firebase La prima è necessaria per l'autenticazione con il provider mentre la seconda per scambiare le credenziali del provider 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 offscreen.

Al momento della creazione del progetto, Firebase eseguirà il provisioning di 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. Questo dominio deve essere consentito per tutti i provider OAuth supportati. Tuttavia, ciò significa che gli utenti potrebbero visualizzare questo dominio durante l'accesso a Microsoft prima di essere reindirizzati all'applicazione: Continua a: https://my-app-12345.firebaseapp.com.

Per evitare di visualizzare il 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 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 Firebase console: auth.custom.domain.com.
Nella console per sviluppatori Microsoft o nella pagina di configurazione di OAuth, inserisci nella lista consentita 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 authDomain campo:

var config = {
  apiKey: '...',
  // Changed from 'PROJECT_ID.firebaseapp.com'.
  authDomain: 'auth.custom.domain.com',
  databaseURL: 'https://PROJECT_ID.firebaseio.com',
  projectId: 'PROJECT_ID',
  storageBucket: 'PROJECT_ID.firebasestorage.app',
  messagingSenderId: 'SENDER_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 con cui ha eseguito l'accesso, ovvero nome utente e password, numero di telefono o informazioni del provider di autenticazione. Questo nuovo account viene memorizzato 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.

Nelle tue app, il modo consigliato per conoscere lo stato di autenticazione dell'utente è impostare un observer sull'oggetto Auth. Puoi quindi ottenere le informazioni di base del profilo dell'utente dall'oggetto User. Consulta Gestire gli utenti.
Nelle regole di sicurezza di Firebase Realtime Database e Cloud Storage , puoi ottenere l'ID utente univoco dell'utente che ha eseguito l'accesso dalla variabile auth, e utilizzarlo per controllare i dati a cui un utente può accedere.

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

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

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

Esegui l'autenticazione utilizzando Microsoft con JavaScript Mantieni tutto organizzato con le raccolte Salva e classifica i contenuti in base alle tue preferenze.