Eseguire l'autenticazione utilizzando SAML nelle app web

Se hai eseguito l'upgrade a Firebase Authentication with Identity Platform, puoi autenticare gli utenti con Firebase utilizzando il provider di identità SAML che preferisci. In questo modo è possibile utilizzare la soluzione SSO basata su SAML per consentire agli utenti di accedere alla tua app Firebase.

Firebase Authentication supporta solo il flusso SAML avviato dal fornitore di servizi.

Prima di iniziare

Per consentire l'accesso degli utenti utilizzando un provider di identità SAML, devi prima raccogliere alcune informazioni dal provider:

• ID entità del fornitore: un URI che identifica il provider di identità.
• L'URL SSO SAML del provider: l'URL della pagina di accesso del provider di identità.
• Il certificato di chiave pubblica del fornitore: il certificato utilizzato per convalidare i token firmati dal provider di identità.
• ID entità della tua app: un URI che identifica la tua app, il "service provider".

Dopo aver ottenuto le informazioni sopra indicate, abilita SAML come provider di accesso per il tuo progetto Firebase:

1. Aggiungi Firebase al tuo progetto JavaScript.

2. Se non l'hai ancora fatto, assicurati che il progetto sia stato eseguito l'upgrade a Firebase Authentication with Identity Platform. L'autenticazione SAML è disponibile solo nei progetti di cui è stato eseguito l'upgrade.

3. Nella console Firebase, vai a Sicurezza > Autenticazione.

4. Nella scheda Metodo di accesso, fai clic su Aggiungi nuovo provider, quindi su SAML.

5. Assegna un nome a questo fornitore. Prendi nota dell'ID provider generato: ad esempio saml.example-provider. Ti servirà questo ID quando aggiungi il codice di accesso alla tua app.

6. Specifica l'ID entità, l'URL SSO e il certificato della chiave pubblica del tuo provider di identità. Specifica anche l'ID entità della tua app (il fornitore di servizi). Questi valori devono corrispondere esattamente a quelli assegnati dal tuo fornitore.

7. Salva le modifiche.

8. Se non l'hai ancora fatto, autorizza il dominio della tua app:

   1. Nella console Firebase, vai alla scheda Sicurezza > Autenticazione > Impostazioni.

   2. Nella sezione Domini autorizzati, fai clic su Aggiungi dominio e aggiungi il tuo dominio.

Gestire il flusso di accesso con l'SDK Firebase

Per gestire il flusso di accesso con l'SDK Firebase JavaScript, segui questi passaggi:

1. Crea un'istanza di un SAMLAuthProvider utilizzando l'ID fornitore ottenuto nella console Firebase.

   Web

   import { SAMLAuthProvider } from "firebase/auth";
   
   const provider = new SAMLAuthProvider('saml.example-provider');
   

   Web

   var provider = new firebase.auth.SAMLAuthProvider('saml.example-provider');
   ``
   

1. Esegui l'autenticazione con Firebase utilizzando l'oggetto provider SAML.

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

   Flusso di reindirizzamento

   Reindirizza alla pagina di accesso del fornitore chiamando 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, SAMLAuthProvider } from "firebase/auth";
   
   const auth = getAuth();
   getRedirectResult(auth)
     .then((result) => {
       // User is signed in.
   
       // Provider data available using getAdditionalUserInfo()
     })
     .catch((error) => {
       // Handle error.
     });
   

   Web

   firebase.auth().getRedirectResult()
     .then((result) => {
       // User is signed in.
   
       // Provider data available in result.additionalUserInfo.profile,
       // or from the user's ID token obtained from result.user.getIdToken()
       // as an object in the firebase.sign_in_attributes custom claim.
     })
     .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.
   
       // Provider data available in result.additionalUserInfo.profile,
       // or from the user's ID token obtained from result.user.getIdToken()
       // as an object in the firebase.sign_in_attributes custom claim.
     })
     .catch((error) => {
       // Handle error.
     });
   

   Web

   firebase.auth().signInWithPopup(provider)
     .then((result) => {
       // User is signed in.
   
       // Provider data available in result.additionalUserInfo.profile,
       // or from the user's ID token obtained from result.user.getIdToken()
       // as an object in the firebase.sign_in_attributes custom claim.
     })
     .catch((error) => {
       // Handle error.
     });
   

   Il token ID e l'oggetto UserInfo contengono l'indirizzo email dell'utente solo se è fornito nell'attributo NameID dell'asserzione SAML del provider di identità:

   <Subject>
     <NameID Format="urn:oasis:names:tc:SAML:1.1:nameid-format:emailAddress">test@email.com</NameID>
   </Subject>
   

2. Sebbene gli esempi precedenti si concentrino sui flussi di accesso, puoi utilizzare lo stesso pattern per collegare un provider SAML a un utente esistente utilizzando linkWithRedirect() e linkWithPopup() e autenticare nuovamente un utente con reauthenticateWithRedirect() e reauthenticateWithPopup(), che possono essere utilizzati per recuperare nuove credenziali per operazioni sensibili che richiedono un accesso recente.