Accesso degli utenti con OIDC

Questo documento mostra come utilizzare Identity Platform per eseguire l'accesso degli utenti con un Provider OpenID Connect (OIDC).

Prima di iniziare

1. Sign in to your Google Cloud account. If you're new to Google Cloud, create an account to evaluate how our products perform in real-world scenarios. New customers also get $300 in free credits to run, test, and deploy workloads.

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. Make sure that billing is enabled for your Google Cloud project.

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. Make sure that billing is enabled for your Google Cloud project.

6. Abilita Identity Platform e aggiungi l'SDK del client alla tua app. Consulta le Guida rapida per scopri 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 Aggiungi un fornitore 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 fornitore o un nome personalizzato. Se inserisci un nome personalizzato, fai clic su Modifica accanto a ID fornitore per specificare l'ID (che deve iniziare con oidc.).

   3. L'ID client del fornitore.

   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 (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 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 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 un nome personalizzato. Se inserisci un nome personalizzato, fai clic su Modifica accanto a ID fornitore per specificare l'ID (che deve iniziare con oidc.).

   3. L'ID client del fornitore.

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

      Nota: se il tuo provider OIDC non è conforme alle 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 accedere agli utenti con OIDC:

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

• Utilizzo del token ID del provider OIDC. Questo metodo presuppone che tu abbia già un token OIDC disponibile.

Accesso degli utenti con OAuth

Per accedere utilizzando OAuth:

1. Crea una 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 tree-shakeable e sull'upgrade dall'API con nome.

   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

   Impara Scopri di più sull'API web modulare con gestione ad albero e eseguire 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 signInWithRedirect():

   Versione web 9

   Impara Scopri di più sull'API web modulare con gestione ad albero e eseguire 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

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

   Versione web 9

   Impara Scopri di più sull'API web modulare con gestione ad albero e eseguire 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 token 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 signInWithCredential() per far accedere l'utente.

   Versione web 9

   Impara Scopri di più sull'API web modulare con gestione ad albero e eseguire 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 collegarci a un Account Google:

Versione web 9

Scopri di più sull'API web modulare tree-shakeable e sull'upgrade dall'API con nome.

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