Accesso degli utenti con OIDC

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

Prima di iniziare

Accedi al tuo Google Cloud account. 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 senza costi per l'esecuzione, il test e il deployment dei workload.

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

Roles required to select or create a project

• Select a project: Selecting a project doesn't require a specific IAM role—you can select any project that you've been granted a role on.
• Create a project: To create a project, you need the Project Creator role (roles/resourcemanager.projectCreator), which contains the resourcemanager.projects.create permission. Learn how to grant roles.

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

Verify that billing is enabled for your Google Cloud project.

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

Roles required to select or create a project

• Select a project: Selecting a project doesn't require a specific IAM role—you can select any project that you've been granted a role on.
• Create a project: To create a project, you need the Project Creator role (roles/resourcemanager.projectCreator), which contains the resourcemanager.projects.create permission. Learn how to grant roles.

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

Verify that billing is enabled for your Google Cloud project.

1. Attiva Identity Platform e aggiungi l'SDK client alla tua app. Per scoprire come fare, consulta la guida rapida.

Configurazione del provider

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

2. Fai clic su 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 del codice nella sezione Scegli il tipo di autorizzazione.

   2. Il nome del provider. Può essere uguale all'ID provider o 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 provider. Dovrebbe essere simile a https://example.com. Identity Platform utilizza questo URL per individuare il documento di rilevamento OIDC (in genere si trova 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 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 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 provider. Può essere uguale all'ID provider o 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 provider. Dovrebbe essere simile a https://example.com. Identity Platform utilizza questo URL per individuare il documento di rilevamento OIDC (in genere si trova 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 funzionerà 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 consentire agli utenti di accedere con OIDC:

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

• Utilizzando il 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'OAuthProvider istanza con l'ID provider che hai configurato in la sezione precedente. L'ID provider deve iniziare con oidc..

   Versione web 9

   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 utilizzare un popup o un reindirizzamento.

   Popup

   Versione web 9

   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 signInWithRedirect():

   Versione web 9

   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

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

   Versione web 9

   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 uno dei due flussi, puoi ottenere il token ID OIDC utilizzando il campo result.credential.idToken.

Accesso diretto degli utenti

Per consentire l'accesso diretto di un utente con un token ID OIDC:

1. Inizializza un'istanza OAuthProvider con l'ID provider che hai configurato nella sezione precedente. L'ID provider deve iniziare con oidc.. Poi, crea un OAuthCredential e chiama signInWithCredential() per consentire l'accesso all'utente.

   Versione web 9

   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 collegare un Account Google:

Versione web 9

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
• Visualizzazione di un dominio personalizzato durante l'accesso
• Gestione programmatica dei provider OIDC e SAML