Accesso degli utenti con OIDC

Questo documento mostra come utilizzare Identity Platform per accedere agli utenti con un provider OpenID Connect (OIDC).

Prima di iniziare

1. Accedi al tuo account Google Cloud. Se non conosci Google Cloud, crea un account per valutare le prestazioni dei nostri prodotti in scenari reali. I nuovi clienti ricevono anche 300 $di crediti gratuiti per l'esecuzione, il test e il deployment dei carichi di lavoro.

2. Nella pagina del selettore di progetti della console Google Cloud, seleziona o crea un progetto Google Cloud.

   Nota: se non prevedi di conservare le risorse create in questa procedura, crea un progetto anziché selezionarne uno esistente. Dopo aver completato questi passaggi, puoi eliminare il progetto, rimuovendo tutte le risorse associate.

   Vai al selettore progetti

3. Assicurati che la fatturazione sia attivata per il tuo progetto Google Cloud.

4. Nella pagina del selettore di progetti della console Google Cloud, seleziona o crea un progetto Google Cloud.

   Nota: se non prevedi di conservare le risorse create in questa procedura, crea un progetto anziché selezionarne uno esistente. Dopo aver completato questi passaggi, puoi eliminare il progetto, rimuovendo tutte le risorse associate.

   Vai al selettore progetti

5. Assicurati che la fatturazione sia attivata per il tuo progetto Google Cloud.

6. Abilita Identity Platform e aggiungi l'SDK del client alla tua app. Consulta la guida rapida per scoprire come fare.

Configurazione del provider

1. Vai alla pagina Provider di identità nella console Google Cloud.
   Vai alla pagina Provider di identità
   

2. Fai clic su Add a Provider (Aggiungi un provider) e seleziona OpenID Connect dall'elenco.

Flusso del codice di autorizzazione

1. Inserisci i seguenti dettagli per attivare il flusso del codice di autorizzazione:

   1. Seleziona Flusso di codice nella sezione Scegli il tipo di autorizzazione.

   2. Il nome del fornitore. Può essere uguale all'ID provider o a un nome personalizzato. Se inserisci un nome personalizzato, fai clic su Modifica accanto a ID provider per specificare l'ID (che deve iniziare con oidc.).

   3. L'ID client del provider.

   4. L'emittente del fornitore. Dovrebbe avere il seguente aspetto: https://example.com. Identity Platform utilizza questo URL per individuare il documento di rilevamento OIDC (in genere disponibile in /.well-known/openid-configuration), che specifica gli endpoint OAuth e le chiavi pubbliche del provider.

      Nota: se il tuo provider OIDC non è conforme alla specifica OIDC per il rilevamento, non funziona con Identity Platform.

   5. Il client secret del provider.

2. Aggiungi la tua app all'elenco dei Domini autorizzati. Ad esempio, se l'URL di accesso della tua app è https://example.com/login, aggiungi example.com.

3. Configura l'URL di callback di Identity Platform come URL di reindirizzamento con il tuo provider OIDC. L'URL dovrebbe essere simile a https://[PROJECT-ID].firebaseapp.com/__/auth/handler.

4. Fai clic su Salva.

Flusso implicito

1. Inserisci i seguenti dettagli per attivare il flusso implicito:

   1. Seleziona Flusso implicito nella sezione Scegli il tipo di autorizzazione.

   2. Il nome del fornitore. Può essere uguale all'ID provider o a un nome personalizzato. Se inserisci un nome personalizzato, fai clic su Modifica accanto a ID provider per specificare l'ID (che deve iniziare con oidc.).

   3. L'ID client del provider.

   4. L'emittente del fornitore. Dovrebbe avere un aspetto simile a questo: https://example.com. Identity Platform utilizza questo URL per individuare il documento di rilevamento OIDC (che si trova in genere all'indirizzo /.well-known/openid-configuration), che specifica gli endpoint OAuth e le chiavi pubbliche del provider.

      Nota: se il tuo provider OIDC non è conforme alla specifica OIDC per il rilevamento, non funziona con Identity Platform.

2. Aggiungi la tua app all'elenco dei Domini autorizzati. Ad esempio, se l'URL di accesso della tua app è https://example.com/login, aggiungi example.com.

3. Configura l'URL di callback di Identity Platform come URL di reindirizzamento con il tuo provider OIDC. L'URL dovrebbe essere simile a https://[PROJECT-ID].firebaseapp.com/__/auth/handler.

4. Fai clic su Salva.

Accesso degli utenti

Esistono due modi per accedere agli utenti con OIDC:

• Utilizzo del flusso OAuth. In questo modo l'handshake OAuth viene completato. In base alla selezione del flusso del codice di autorizzazione/flusso implicito nel passaggio della configurazione del provider, il server GCIP sceglie il flusso desiderato per comunicare con il provider di identità.

• Utilizzare il token ID del provider OIDC. In questo modo si presuppone che tu abbia già disponibile un token OIDC.

Accesso degli utenti con OAuth

Per accedere con OAuth:

1. Crea un'istanza OAuthProvider con l'ID provider configurato nella sezione precedente. L'ID provider deve iniziare con oidc..

   Versione web 9

   Scopri di più sull'API Web modulare con struttura ad albero ed esegui l'upgrade dall'API con spazio dei nomi.

   import { OAuthProvider } from "firebase/auth";
   
   const provider = new OAuthProvider("oidc.myProvider");
   auth_oidc_provider_create.js

   Versione web 8

   const provider = new firebase.auth.OAuthProvider('oidc.myProvider');
   oidc.js

2. Avvia il flusso di accesso. Puoi scegliere se utilizzare un popup o un reindirizzamento.

   Popup

   Versione web 9

   Scopri di più sull'API Web modulare con struttura ad albero ed esegui l'upgrade dall'API con spazio dei nomi.

   import { getAuth, signInWithPopup, OAuthProvider } from "firebase/auth";
   
   const auth = getAuth();
   signInWithPopup(auth, provider)
     .then((result) => {
       // User is signed in.
       const credential = OAuthProvider.credentialFromResult(result);
       // This gives you an access token for the OIDC provider. You can use it to directly interact with that provider
     }).catch((error) => {
       // Handle Errors here.
       const errorCode = error.code;
       const errorMessage = error.message;
       // The email of the user's account used.
       const email = error.customData.email;
       // The AuthCredential type that was used.
       const credential = OAuthProvider.credentialFromError(error);
       // Handle / display error.
       // ...
     });
   auth_oidc_signin_popup.js

   Versione web 8

   firebase.auth().signInWithPopup(provider)
     .then((result) => {
       // User is signed in.
       // result.credential is a firebase.auth().OAuthCredential object.
       // result.credential.providerId is equal to 'oidc.myProvider'.
       // result.credential.idToken is the OIDC provider's ID token.
     })
     .catch((error) => {
       // Handle error.
     });
   oidc.js

   Reindirizzamento

   Per reindirizzare a una pagina di accesso, chiama il numero signInWithRedirect():

   Versione web 9

   Scopri di più sull'API Web modulare con struttura ad albero ed esegui l'upgrade dall'API con spazio dei nomi.

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

   Versione web 8

   firebase.auth().signInWithRedirect(provider).catch((error) => {
     // Handle error.
   });
   oidc.js

   Dopodiché chiama getRedirectResult() per ricevere i risultati quando l'utente torna nella tua app:

   Versione web 9

   Scopri di più sull'API Web modulare con struttura ad albero ed esegui l'upgrade dall'API con spazio dei nomi.

   import { getAuth, getRedirectResult, OAuthProvider } from "firebase/auth";
   
   const auth = getAuth();
   getRedirectResult(auth)
     .then((result) => {
       // User is signed in.
       const credential = OAuthProvider.credentialFromResult(result);
       // This gives you an access token for the OIDC provider. You can use it to directly interact with that provider
     })
     .catch((error) => {
       // Handle Errors here.
       const errorCode = error.code;
       const errorMessage = error.message;
       // The email of the user's account used.
       const email = error.customData.email;
       // The AuthCredential type that was used.
       const credential = OAuthProvider.credentialFromError(error);
       // Handle / display error.
       // ...
     });
   auth_oidc_signin_redirect_result.js

   Versione web 8

   // On return.
   firebase.auth().getRedirectResult()
     .then((result) => {
       // User is signed in.
       // result.credential is a firebase.auth().OAuthCredential object.
       // result.credential.providerId is equal to 'oidc.myProvider'.
       // result.credential.idToken is the OIDC provider's ID token.
     })
     .catch((error) => {
       // Handle / display error.
       // ...
     });
   oidc.js

Al termine di entrambi i flussi, puoi ottenere il token ID OIDC utilizzando il campo result.credential.idToken.

Accesso diretto degli utenti

Per far accedere un utente direttamente con un token ID OIDC:

1. Inizializza un'istanza OAuthProvider con l'ID provider configurato nella sezione precedente. L'ID provider deve iniziare con oidc.. Quindi, crea un OAuthCredential e chiama il numero signInWithCredential() per far accedere l'utente.

   Versione web 9

   Scopri di più sull'API Web modulare con struttura ad albero ed esegui l'upgrade dall'API con spazio dei nomi.

   import { getAuth, OAuthProvider, signInWithCredential } from "firebase/auth";
   
   const auth = getAuth();
   const credential = provider.credential({
     idToken: oidcIdToken,
   });
   signInWithCredential(auth, credential)
     .then((result) => {
       // User is signed in.
       const newCredential = OAuthProvider.credentialFromResult(result);
       // This gives you a new access token for the OIDC provider. You can use it to directly interact with that provider.
     })
     .catch((error) => {
       // Handle Errors here.
       const errorCode = error.code;
       const errorMessage = error.message;
       // The email of the user's account used.
       const email = error.customData.email;
       // The AuthCredential type that was used.
       const credential = OAuthProvider.credentialFromError(error);
       // Handle / display error.
       // ...
     });
   auth_oidc_direct_sign_in.js

   Versione web 8

   const credential = provider.credential(oidcIdToken, null);
   
   firebase.auth().signInWithCredential(credential)
     .then((result) => {
       // User is signed in.
       // User now has a odic.myProvider UserInfo in providerData.
     })
     .catch((error) => {
       // Handle / display error.
       // ...
     });
   oidc.js

Collegamento degli account utente

Se un utente ha già eseguito l'accesso alla tua app utilizzando un metodo diverso (ad esempio email/password), puoi collegare il suo account esistente al provider OIDC utilizzando linkWithPopup() o linkWithRedirect(). Ad esempio, possiamo collegarti a un Account Google:

Versione web 9

Scopri di più sull'API Web modulare con struttura ad albero ed esegui l'upgrade dall'API con spazio dei nomi.

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

const auth = getAuth();
linkWithPopup(auth.currentUser, provider).then((result) => {
  // Accounts successfully linked.
  const credential = GoogleAuthProvider.credentialFromResult(result);
  const user = result.user;
  // ...
}).catch((error) => {
  // Handle Errors here.
  // ...
});
auth_link_with_popup.js

Versione web 8

auth.currentUser.linkWithPopup(provider).then((result) => {
  // Accounts successfully linked.
  var credential = result.credential;
  var user = result.user;
  // ...
}).catch((error) => {
  // Handle Errors here.
  // ...
});
link-multiple-accounts.js

Passaggi successivi

• Accesso degli utenti con SAML
• Visualizzare un dominio personalizzato durante l'accesso
• Gestione programmatica dei provider OIDC e SAML