Autenticati utilizzando OpenID Connect nelle app Web

Mantieni tutto organizzato con le raccolte Salva e classifica i contenuti in base alle tue preferenze.

Se hai eseguito l'aggiornamento all'autenticazione Firebase con Identity Platform, puoi autenticare i tuoi utenti con Firebase utilizzando il provider conforme a OpenID Connect (OIDC) di tua scelta. Ciò consente di utilizzare provider di identità non supportati in modo nativo da Firebase.

Prima di iniziare

Per accedere agli utenti utilizzando un provider OIDC, devi prima raccogliere alcune informazioni dal provider:

  • ID client : una stringa univoca per il provider che identifica la tua app. Il tuo provider potrebbe assegnarti un ID cliente diverso per ciascuna piattaforma supportata. Questo è uno dei valori dell'attestazione aud nei token ID emessi dal tuo provider.

  • Segreto client : una stringa segreta utilizzata dal provider per confermare la proprietà di un ID client. Per ogni ID cliente, avrai bisogno di un segreto client corrispondente. (Questo valore è obbligatorio solo se stai usando auth code flow , che è fortemente consigliato.)

  • Emittente : una stringa che identifica il tuo provider. Questo valore deve essere un URL che, quando aggiunto con /.well-known/openid-configuration , è la posizione del documento di rilevamento OIDC del provider. Ad esempio, se l'emittente è https://auth.example.com , il documento di rilevamento deve essere disponibile all'indirizzo https://auth.example.com/.well-known/openid-configuration .

Dopo aver ottenuto le informazioni di cui sopra, abilita OpenID Connect come provider di accesso per il tuo progetto Firebase:

  1. Aggiungi Firebase al tuo progetto JavaScript .

  2. Se non hai eseguito l'aggiornamento all'autenticazione Firebase con Identity Platform, fallo. L'autenticazione OpenID Connect è disponibile solo nei progetti aggiornati.

  3. Nella pagina Provider di accesso della console Firebase, fai clic su Aggiungi nuovo provider e quindi su OpenID Connect .

  4. Seleziona se utilizzerai il flusso del codice di autorizzazione o il flusso di concessione implicita .

    Dovresti usare sempre il flusso di codice se il tuo provider lo supporta . Il flusso implicito è meno sicuro e il suo utilizzo è fortemente sconsigliato.

  5. Dai un nome a questo provider. Nota l'ID del provider che viene generato: qualcosa come oidc.example-provider . Avrai bisogno di questo ID quando aggiungi il codice di accesso alla tua app.

  6. Specificare l'ID cliente e il segreto client e la stringa dell'emittente del provider. Questi valori devono corrispondere esattamente ai valori che il tuo provider ti ha assegnato.

  7. Salva le modifiche.

Gestisci il flusso di accesso con Firebase SDK

Il modo più semplice per autenticare i tuoi utenti con Firebase utilizzando il tuo provider OIDC è gestire l'intero flusso di accesso con Firebase SDK.

Per gestire il flusso di accesso con Firebase JavaScript SDK, procedi nel seguente modo:

  1. Crea un'istanza di un OAuthProvider utilizzando l'ID provider che hai ottenuto nella console Firebase.

    Web version 9

    import { OAuthProvider } from "firebase/auth";
    
    const provider = new OAuthProvider('oidc.example-provider');
    

    Web version 8

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

    Web version 9

    provider.setCustomParameters({
      // Target specific email with login hint.
      login_hint: 'user@example.com'
    });
    

    Web version 8

    provider.setCustomParameters({
      // Target specific email with login hint.
      login_hint: 'user@example.com'
    });
    

    Verificare con il proprio provider i parametri supportati. 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 .

  3. Facoltativo : specificare ulteriori ambiti OAuth 2.0 oltre al profilo di base che si desidera richiedere al provider di autenticazione.

    Web version 9

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

    Web version 8

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

    Verificare con il proprio provider gli ambiti che supporta.

  4. Autenticarsi con Firebase utilizzando l'oggetto provider OAuth.

    Puoi reindirizzare l'utente alla pagina di accesso del provider o aprire la pagina di accesso in una finestra popup del browser.

    Reindirizzare il flusso

    Reindirizzamento alla pagina di accesso del provider chiamando 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 all'app, 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.
      });
    

    Flusso pop-up

    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 using getAdditionalUserInfo(result)
    
        // 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.
      });
    
  5. Sebbene gli esempi precedenti si concentrino sui flussi di accesso, puoi utilizzare lo stesso modello per collegare un provider OIDC a un utente esistente utilizzando linkWithRedirect() e linkWithPopup() e autenticare nuovamente un utente con reauthenticateWithRedirect() () e reauthenticateWithPopup( reauthenticateWithPopup() , che può essere utilizzato per recuperare nuove credenziali per operazioni sensibili che richiedono un accesso recente.

Gestisci manualmente il flusso di accesso

Se hai già implementato il flusso di accesso OpenID Connect nella tua app, puoi utilizzare il token ID direttamente per autenticarti con Firebase:

Web version 9

import { getAuth, signInWithCredential, OAuthProvider } from "firebase/auth";

const provider = new OAuthProvider("oidc.example-provider");
const credential = provider.credential({
    idToken: idToken,
});
signInWithCredential(getAuth(), credential)
    .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

const provider = new OAuthProvider("oidc.example-provider");
const credential = provider.credential({
    idToken: idToken,
});
firebase.auth().signInWithCredential(credential)
    .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.
    });