Autentica con OpenID Connect nelle app web

Se hai eseguito l'upgrade a Firebase Authentication with Identity Platform, puoi autenticare gli utenti con Firebase utilizzando il provider conforme a OpenID Connect (OIDC) di tua scelta. In questo modo è possibile utilizzare i provider di identità non supportati in modo nativo da Firebase.

Prima di iniziare

Per consentire agli utenti di accedere 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 client diverso per ogni piattaforma che supporti. Questo è uno dei valori dell'attestazione aud nei token ID emessi dal provider.

  • Client secret: una stringa segreta che il provider utilizza per confermare la proprietà di un ID client. Per ogni ID client, avrai bisogno di un client secret corrispondente. (Questo valore è obbligatorio solo se utilizzi il flusso di codice di autorizzazione, che è vivamente consigliato.)

  • Emittente: una stringa che identifica il provider. Questo valore deve essere un URL che, se aggiunto a /.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.

Una volta ottenute le informazioni sopra riportate, 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'upgrade a Firebase Authentication with Identity Platform, fallo ora. 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 poi su OpenID Connect.

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

    Se il tuo provider lo supporta, devi sempre utilizzare il flusso di codice. Il flusso implicito è meno sicuro e il suo utilizzo è vivamente sconsigliato.

  5. Assegna un nome a questo provider. Prendi nota dell'ID provider generato, ad esempio oidc.example-provider. Avrai bisogno di questo ID quando aggiungi il codice di accesso alla tua app.

  6. Specifica l'ID client, il client secret e la stringa dell'emittente del provider. Questi valori devono corrispondere esattamente a quelli assegnati dal provider.

  7. Salva le modifiche.

Gestire il flusso di accesso con l'SDK Firebase

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

Per gestire il flusso di accesso con l'SDK Firebase JavaScript, segui questi passaggi:

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

    Web 

    import { OAuthProvider } from "firebase/auth";

const provider = new OAuthProvider('oidc.example-provider');

    Web 

    var provider = new firebase.auth.OAuthProvider('oidc.example-provider');

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

    Web 

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

    Web 

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

    Rivolgiti al tuo provider per conoscere i parametri che supporta. 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: specifica altri ambiti OAuth 2.0 oltre al profilo di base che vuoi richiedere al provider di autenticazione.

    Web 

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

    Web 

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

    Rivolgiti al tuo provider per conoscere gli ambiti che supporta.

  4. Esegui l'autenticazione 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 del browser popup.

    Flusso di reindirizzamento

    Reindirizza alla pagina di accesso del provider chiamando signInWithRedirect():

    Web 

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

const auth = getAuth();
signInWithRedirect(auth, provider);

    Web 

    firebase.auth().signInWithRedirect(provider);

    Una volta che l'utente ha completato l'accesso e torna alla tua app, 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.
  });

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

    Flusso popup

    Web 

    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 

    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 sopra riportati si concentrino sui flussi di accesso, puoi utilizzare lo stesso pattern per collegare un provider OIDC a un utente esistente utilizzando linkWithRedirect() e linkWithPopup() e per eseguire nuovamente l'autenticazione di un utente con reauthenticateWithRedirect() e reauthenticateWithPopup(), che possono essere utilizzati per recuperare credenziali aggiornate per le operazioni sensibili che richiedono un accesso recente.

Gestire manualmente il flusso di accesso

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

Web 

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 

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