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. In the Google Cloud console, on the project selector page, select or create a Google Cloud project.

   Note: If you don't plan to keep the resources that you create in this procedure, create a project instead of selecting an existing project. After you finish these steps, you can delete the project, removing all resources associated with the project.

   Go to project selector

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

4. In the Google Cloud console, on the project selector page, select or create a Google Cloud project.

   Note: If you don't plan to keep the resources that you create in this procedure, create a project instead of selecting an existing project. After you finish these steps, you can delete the project, removing all resources associated with the project.

   Go to project selector

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

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

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 abilitare 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 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 funzionerà 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 dell'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 abilitare 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 https://example.com. Identity Platform utilizza questo URL per individuare il documento di rilevamento OIDC (in genere disponibile 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 funzionerà con Identity Platform.

2. Aggiungi la tua app all'elenco dei domini autorizzati. Ad esempio, se l'URL di accesso dell'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 automaticamente. In base alla selezione Flusso del codice di autorizzazione/Flusso implicito nella fase di configurazione del provider, il server GCIP sceglie il flusso desiderato per comunicare con il provider di identità.

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

Accesso degli utenti con OAuth

Per accedere utilizzando OAuth:

1. Crea un'istanza OAuthProvider con l'ID provider che hai 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 e sull'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 di usare un popup o un reindirizzamento.

   Popup

   Versione web 9

   Scopri di più sull'API Web modulare con struttura ad albero e sull'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 gli utenti a una pagina di accesso, chiama signInWithRedirect():

   Versione web 9

   Scopri di più sull'API Web modulare con struttura ad albero e sull'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

   Quindi, chiama getRedirectResult() per visualizzare i risultati quando l'utente torna alla tua app:

   Versione web 9

   Scopri di più sull'API Web modulare con struttura ad albero e sull'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 eseguire l'accesso di un utente direttamente con un token ID OIDC, segui questi passaggi:

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 e sull'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 effettuare il collegamento a un Account Google:

Versione web 9

Scopri di più sull'API Web modulare con struttura ad albero e sull'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