Autentica con OpenID Connect nelle app web

Se hai eseguito l'upgrade a Firebase Authentication with Identity Platform, puoi autenticare i tuoi utenti con Firebase utilizzando il provider conforme a OpenID Connect (OIDC) che preferisci. In questo modo è possibile 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 del fornitore:

  • ID client: una stringa univoca del provider che identifica la tua app. Il fornitore potrebbe assegnare un ID client diverso per ogni piattaforma supportata. Si tratta di uno dei valori dell'affermazione aud nei token ID emessi dal tuo fornitore.

  • Client secret: una stringa segreta utilizzata dal provider 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 è caldamente consigliato.

  • Issuer (Emittente): una stringa che identifica il fornitore. Questo valore deve essere un URL che, se 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 scoperta deve essere disponibile all'indirizzo https://auth.example.com/.well-known/openid-configuration.

Dopo aver ottenuto le informazioni riportate sopra, abilita OpenID Connect come fornitore 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. Autenticazione OpenID Connect è disponibile solo nei progetti di cui è stato eseguito l'upgrade.

  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 autorizzazione implicita.

    Se il tuo fornitore lo supporta, devi sempre utilizzare il flusso di codice. La il flusso implicito è meno sicuro e ne è vivamente sconsigliato utilizzarlo.

  5. Assegna un nome a questo fornitore. Prendi nota dell'ID provider generato: ad esempio oidc.example-provider. Avrai bisogno di questo ID quando aggiungi 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 che ti sono stati assegnati dal fornitore.

  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 tuo 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: passaggi:

  1. Crea un'istanza di OAuthProvider utilizzando l'ID provider che hai ricevuto la 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 i parametri OAuth aggiuntivi che vuoi personalizzare. da 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 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: specifica altri ambiti OAuth 2.0 oltre al profilo di base che che desideri 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 supportati.

  4. Esegui l'autenticazione con Firebase utilizzando l'oggetto provider OAuth.

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

    Flusso di reindirizzamento

    Vai alla pagina di accesso del fornitore chiamando il numero signInWithRedirect():

    Web 

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

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

    Web 

    firebase.auth().signInWithRedirect(provider);

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

Gestire 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 

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