Google 致力于为黑人社区推动种族平等。查看具体举措

Autenticati utilizzando Microsoft con JavaScript

Puoi consentire ai tuoi utenti di autenticarsi con Firebase utilizzando provider OAuth come Microsoft Azure Active Directory integrando un accesso OAuth generico nella tua app usando Firebase SDK 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 Auth .
  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 Guida introduttiva: registrare un'app con l'endpoint di Azure Active Directory v2.0 . Tieni presente che questo endpoint supporta l'accesso tramite account personali Microsoft e account Azure Active Directory. Altre informazioni su Azure Active Directory v2.0.
    2. 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.
  5. Fare clic su Salva .

Gestisci il flusso di accesso con Firebase SDK

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 Firebase JavaScript SDK, procedi nel seguente modo:

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

    Web version 9

    import { OAuthProvider } from "firebase/auth";
    
    const provider = new OAuthProvider('microsoft.com');

    Web version 8

    var provider = new firebase.auth.OAuthProvider('microsoft.com');
  2. Facoltativo : specifica parametri OAuth personalizzati aggiuntivi che desideri inviare con la richiesta OAuth.

    Web version 9

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

    Web version 8

    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, vedere la documentazione di Microsoft OAuth . Nota 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 version 9

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

    Web version 8

    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'
    });
  3. 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 ulteriori informazioni, fare riferimento alla documentazione relativa alle autorizzazioni e al consenso Microsoft .

  4. Autenticarsi con Firebase utilizzando l'oggetto provider OAuth. Puoi richiedere ai tuoi utenti di accedere con i loro account Microsoft aprendo una finestra pop-up o reindirizzando alla pagina di accesso. Il metodo di reindirizzamento è preferito sui dispositivi mobili.

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

    Web version 9

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

    Web version 8

    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 reindirizzando alla pagina di accesso, chiama signInWithRedirect :

    Web version 9

    import { getAuth, signInWithRedirect } from "firebase/auth";
    
    const auth = getAuth();
    signInWithRedirect(auth, provider);

    Web version 8

    firebase.auth().signInWithRedirect(provider);

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

    Web version 9

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

    Web version 8

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

    In caso di completamento, 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 per la foto e invece i dati binari per una foto del profilo devono essere richiesti tramite l'API Microsoft Graph .

    Oltre al token di accesso OAuth, è anche possibile recuperare il token ID OAuth dell'utente dall'oggetto firebase.auth.UserCredential . L' 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 di richiesta oid . Quando si usa un tenant di Azure AD per l'accesso, l' oid sarà una corrispondenza esatta. Tuttavia, per il caso non inquilino, il campo oid è riempito. Per un ID federato 4b2eabcdefghijkl , l' oid avrà una forma 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 usando linkWithPopup / linkWithRedirect . Ad esempio, puoi collegare più provider allo stesso utente consentendo loro di accedere con entrambi.

    Web version 9

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

    Web version 8

    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.
        });
  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 version 9

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

    Web version 8

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

Autenticati con Firebase in un'estensione di Chrome

Se stai creando un'app per l'estensione di Chrome, devi aggiungere l'ID dell'estensione di Chrome:

  1. Apri il tuo progetto nella console di Firebase .
  2. Nella sezione Autenticazione , apri la pagina Metodo di accesso.
  3. Aggiungi 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 pagina in background anziché da un popup di azione del browser, poiché il popup di autenticazione cancellerà 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 operatori di servizio, che non possono eseguire affatto le operazioni di popup.

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

Prossimi passi

Dopo che un utente accede per la prima volta, un nuovo account utente viene creato e collegato alle credenziali, ovvero il nome utente e la password, il numero di telefono o le 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 da come l'utente effettua l'accesso.

  • 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 sul profilo di base User dall'oggetto Utente. Vedere Gestisci utenti .

  • Nelle regole di sicurezza del database in tempo reale e dell'archiviazione cloud di Firebase, 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 version 9

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

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

Web version 8

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