Creazione di una pagina di accesso personalizzata

Questo articolo spiega come creare una pagina di autenticazione personalizzata utilizzando le identità esterne e IAP. La creazione di questa pagina ti consente di avere il controllo completo sul flusso di autenticazione e sull'esperienza utente.

Se non hai bisogno di personalizzare completamente l'interfaccia utente, puoi lasciare che IAP ospiti una pagina di accesso per te, o utilizzare FirebaseUI per un'esperienza più semplificata.

Panoramica

Per creare la tua pagina di autenticazione, segui questi passaggi:

1. Attiva le identità esterne. Seleziona l'opzione Fornirò la mia UI durante la configurazione.
2. Installa la libreria gcip-iap.
3. Configura l'interfaccia utente implementando l'interfaccia AuthenticationHandler. La pagina di autenticazione deve gestire i seguenti scenari:
   • Selezione del tenant
   • Autorizzazione utente
   • Accesso utente
   • Gestione degli errori
4. (Facoltativo) Personalizza la pagina di autenticazione con funzionalità aggiuntive, come barre di avanzamento, pagine di disconnessione ed elaborazione degli utenti.
5. Testa l'interfaccia utente.

Installare la libreria gcip-iap

Per installare la libreria gcip-iap, esegui il seguente comando:

npm install gcip-iap --save

Il modulo NPM gcip-iap astrae le comunicazioni tra l'applicazione, IAP e Identity Platform. In questo modo, puoi personalizzare l'intero flusso di autenticazione senza dover gestire gli scambi sottostanti tra l'interfaccia utente e IAP.

Utilizza le importazioni corrette per la tua versione dell'SDK:

// Import Firebase/GCIP dependencies. These are installed on npm install.
import * as firebase from 'firebase/app';
import 'firebase/auth';
// Import GCIP/IAP module.
import * as ciap from 'gcip-iap';

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

  // Import Firebase modules.
  import { initializeApp } from 'firebase/app';
  import { getAuth, GoogleAuthProvider } 'firebase/auth';
  // Import the gcip-iap module.
  import * as ciap from 'gcip-iap';

Configurare l'interfaccia utente

Per configurare l'interfaccia utente, crea una classe personalizzata che implementi l'interfaccia AuthenticationHandler:

interface AuthenticationHandler {
  languageCode?: string | null;
  getAuth(apiKey: string, tenantId: string | null): FirebaseAuth;
  startSignIn(auth: FirebaseAuth, match?: SelectedTenantInfo): Promise<UserCredential>;
  selectTenant?(projectConfig: ProjectConfig, tenantIds: string[]): Promise<SelectedTenantInfo>;
  completeSignOut(): Promise<void>;
  processUser?(user: User): Promise<User>;
  showProgressBar?(): void;
  hideProgressBar?(): void;
  handleError?(error: Error | CIAPError): void;
}

Durante l'autenticazione, la libreria chiama automaticamente i metodi di AuthenticationHandler.

Selezionare i tenant

Per selezionare un tenant, implementa selectTenant(). Puoi implementare questo metodo per scegliere un tenant in modo programmatico o visualizzare un'interfaccia utente in modo che l'utente possa selezionarne uno.

In entrambi i casi, la libreria utilizza l'oggetto SelectedTenantInfo restituito per completare il flusso di autenticazione. Contiene l'ID del tenant selezionato, gli ID dei provider e l'indirizzo email inserito dall'utente.

Se hai più tenant nel tuo progetto, devi selezionarne uno prima di poter autenticare un utente. Se hai un solo tenant o utilizzi l'autenticazione a livello di progetto, non devi implementare selectTenant().

IAP supporta gli stessi provider di Identity Platform, ad esempio:

• Email e password
• OAuth (Google, Facebook, Twitter, GitHub, Microsoft e così via)
• SAML
• OIDC
• Numero di telefono
• Personalizzato
• Anonimo

I tipi di autenticazione con numero di telefono, personalizzati e anonimi non sono supportati per la multi-tenancy.

Selezionare i tenant in modo programmatico

Per selezionare un tenant in modo programmatico, utilizza il contesto corrente. La classe Authentication contiene getOriginalURL() che restituisce l'URL a cui l'utente stava accedendo prima dell'autenticazione.

Utilizza questo metodo per individuare una corrispondenza da un elenco di tenant associati:

// Select provider programmatically.
selectTenant(projectConfig, tenantIds) {
  return new Promise((resolve, reject) => {
    // Show UI to select the tenant.
    auth.getOriginalURL()
      .then((originalUrl) => {
        resolve({
          tenantId: getMatchingTenantBasedOnVisitedUrl(originalUrl),
          // If associated provider IDs can also be determined,
          // populate this list.
          providerIds: [],
        });
      })
      .catch(reject);
  });
}

Consentire agli utenti di selezionare i tenant

Per consentire all'utente di selezionare un tenant, mostra un elenco di tenant e chiedi all'utente di sceglierne uno oppure chiedigli di inserire il suo indirizzo email e poi individua una corrispondenza in base al dominio:

// Select provider by showing UI.
selectTenant(projectConfig, tenantIds) {
  return new Promise((resolve, reject) => {
    // Show UI to select the tenant.
    renderSelectTenant(
        tenantIds,
        // On tenant selection.
        (selectedTenantId) => {
          resolve({
            tenantId: selectedTenantId,
            // If associated provider IDs can also be determined,
            // populate this list.
            providerIds: [],
            // If email is available, populate this field too.
            email: undefined,
          });
        });
  });
}

Autenticare gli utenti

Dopo aver configurato un provider, implementa getAuth() per restituire un'istanza Auth, corrispondente alla chiave API e all'ID tenant forniti. Se non viene fornito alcun ID tenant, utilizza i provider di identità a livello di progetto.

getAuth() tiene traccia della posizione in cui è memorizzato l'utente corrispondente alla configurazione fornita. Consente inoltre di aggiornare silenziosamente il token ID di Identity Platform di un utente autenticato in precedenza senza richiedere all'utente di reinserire le proprie credenziali.

Se utilizzi più risorse IAP con tenant diversi, ti consigliamo di utilizzare un'istanza di autenticazione univoca per ogni risorsa. In questo modo, più risorse con configurazioni diverse possono utilizzare la stessa pagina di autenticazione. Consente inoltre a più utenti di accedere contemporaneamente senza disconnettere l'utente precedente.

Di seguito è riportato un esempio di come implementare getAuth():

getAuth(apiKey, tenantId) {
  let auth = null;
  // Make sure the expected API key is being used.
  if (apiKey !== expectedApiKey) {
    throw new Error('Invalid project!');
  }
  try {
    auth = firebase.app(tenantId || undefined).auth();
    // Tenant ID should be already set on initialization below.
  } catch (e) {
    // Use different App names for every tenant so that
    // multiple users can be signed in at the same time (one per tenant).
    const app = firebase.initializeApp(this.config, tenantId || '[DEFAULT]');
    auth = app.auth();
    // Set the tenant ID on the Auth instance.
    auth.tenantId = tenantId || null;
  }
  return auth;
}

import {initializeApp, getApp} from