Autenticazione utilizzando Microsoft con JavaScript,Autenticazione utilizzando Microsoft con JavaScript

Puoi consentire ai tuoi 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 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:

  1. Aggiungi Firebase al tuo progetto JavaScript .
  2. Nella console Firebase , apri la sezione Autenticazione .
  3. Nella scheda Metodo di accesso abilitare il provider Microsoft .
  4. 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 Azure Active Directory v2.0 . Tieni presente che questo endpoint supporta l'accesso tramite account personali Microsoft e account Azure Active Directory. Ulteriori informazioni 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.
  5. 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:

  1. Crea un'istanza di OAuthProvider utilizzando l'ID provider microsoft.com .

    Web modular API

    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

  2. Facoltativo : specifica parametri OAuth personalizzati aggiuntivi che desideri 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 , risposta_tipo , reindirizzamento_uri , stato , ambito e risposta_modalità .

    Per consentire solo agli utenti di un determinato tenant di Azure AD di accedere all'applicazione, è possibile utilizzare 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

  3. Facoltativo : specifica ulteriori ambiti OAuth 2.0 oltre al profilo di base che desideri richiedere al provider di autenticazione.

    provider.addScope('mail.read');
provider.addScope('calendars.read');

    Per saperne di più, fai riferimento alla documentazione sulle autorizzazioni e consensi Microsoft .

  4. Autenticarsi 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 :

    Seguire le procedure consigliate quando si utilizza 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, è possibile 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

    Una volta completato con successo, 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 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 foto e invece i dati binari per una foto del profilo devono essere richiesti tramite Microsoft Graph API .

    Oltre al token di accesso OAuth, è anche possibile recuperare 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 . Quando si usa un tenant di Azure AD per l'accesso, l'attestazione oid corrisponderà esattamente. Tuttavia, nel caso del non tenant, il campo oid è riempito. Per un ID federato 4b2eabcdefghijkl , l' oid avrà il formato 00000000-0000-0000-4b2e-abcdefghijkl .

  5. 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ù 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

  6. 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

Autenticati con Firebase in un'estensione di Chrome

Se stai creando un'app di estensione per Chrome, consulta la guida Offscreen Documents .

Prossimi passi

Dopo che un utente accede 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 effettuato 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 del profilo dell'utente dall'oggetto User . Vedi Gestisci utenti .

  • Nel tuo Firebase Realtime Database e Cloud Storage Security Rules , puoi ottenere l'ID utente univoco dell'utente che ha effettuato 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, chiamare 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