Creazione di una pagina di accesso con FirebaseUI

Per utilizzare le identità esterne con Identity-Aware Proxy (IAP), la tua app ha bisogno di una pagina di accesso. IAP reindirizzerà gli utenti a questa pagina per l'autenticazione prima che possano accedere alle risorse protette.

Questo articolo mostra come creare una pagina di autenticazione utilizzando FirebaseUI, una libreria JavaScript open source. FirebaseUI fornisce elementi personalizzabili che aiutano a ridurre il codice boilerplate e gestisce i flussi per l'accesso degli utenti con un'ampia gamma di provider di identità.

Per iniziare più rapidamente, lascia che IAP ospiti l'interfaccia utente per te. In questo modo puoi provare le identità esterne senza scrivere codice aggiuntivo. Per scenari più avanzati, puoi anche creare la tua pagina di accesso da zero. Questa opzione è più complessa, ma ti offre il pieno controllo del flusso di autenticazione e dell'esperienza utente.

Prima di iniziare

Attiva le identità esterne e seleziona l'opzione Fornirò la mia UI durante la configurazione.

Installazione delle librerie

Installa le librerie gcip-iap, firebase e firebaseui. Il modulo gcip-iap astrae le comunicazioni tra l&#IAP e Identity Platform. Le librerie firebase e firebaseui forniscono i componenti di base per la tua UI di autenticazione.

npm install firebase --save
npm install firebaseui --save
npm install gcip-iap --save

Tieni presente che il modulo gcip-iap non è disponibile tramite CDN.

A questo punto puoi import i moduli nei file di origine. Utilizza le importazioni corrette per la tua versione dell'SDK:

// Import firebase modules.
import * as firebase from "firebase/app";
import "firebase/auth";
// Import firebaseui module.
import * as firebaseui from 'firebaseui'
// Import gcip-iap module.
import * as ciap from 'gcip-iap';

// Import firebase modules.
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
// Import firebaseui module.
import * as firebaseui from 'firebaseui'
// Import gcip-iap module.

Per altre opzioni di installazione, incluso l'utilizzo di versioni localizzate delle librerie, consulta le istruzioni su GitHub.

Configurazione dell'applicazione

FirebaseUI utilizza un oggetto di configurazione che specifica i tenant e i provider da utilizzare per l'autenticazione. Una configurazione completa può essere molto lunga e potrebbe avere un aspetto simile a questo:

// The project configuration.
const configs = {
  // Configuration for project identified by API key API_KEY1.
  API_KEY1: {
    authDomain: 'project-id1.firebaseapp.com',
    // Decide whether to ask user for identifier to figure out
    // what tenant to select or whether to present all the tenants to select from.
    displayMode: 'optionFirst', // Or identifierFirst
    // The terms of service URL and privacy policy URL for the page
    // where the user select tenant or enter email for tenant/provider
    // matching.
    tosUrl: 'http://localhost/tos',
    privacyPolicyUrl: 'http://localhost/privacypolicy',
    callbacks: {
      // The callback to trigger when the selection tenant page
      // or enter email for tenant matching page is shown.
      selectTenantUiShown: () => {
        // Show title and additional display info.
      },
      // The callback to trigger when the sign-in page
      // is shown.
      signInUiShown: (tenantId) => {
        // Show tenant title and additional display info.
      },
      beforeSignInSuccess: (user) => {
        // Do additional processing on user before sign-in is
        // complete.
        return Promise.resolve(user);
      }
    },
    tenants: {
      // Tenant configuration for tenant ID tenantId1.
      tenantId1: {
        // Full label, display name, button color and icon URL of the
        // tenant