Créer une page de connexion avec FirebaseUI

Pour utiliser des identités externes avec Identity-Aware Proxy (IAP), votre application doit disposer d'une page de connexion. IAP redirige les utilisateurs vers cette page afin qu'ils puissent s'authentifier et ainsi accéder à des ressources sécurisées.

Cet article explique comment créer une page d'authentification à l'aide de FirebaseUI, une bibliothèque JavaScript Open Source. FirebaseUI fournit des éléments personnalisables qui permettent de réduire le code récurrent et gère les flux de connexion des utilisateurs avec un large éventail de fournisseurs d'identité.

Pour gagner du temps, laissez IAP héberger l'interface utilisateur à votre place. Cela vous permet d'essayer les identités externes sans avoir à écrire de code supplémentaire. Pour les scénarios plus avancés, vous pouvez choisir de créer votre propre page de connexion à partir de zéro. Cette solution est plus complexe, mais vous donne un contrôle total sur le flux d'authentification et l'expérience utilisateur.

Avant de commencer

Activez les identités externes, puis sélectionnez l' option Je fournirai ma propre interface utilisateur lors de la configuration.

Installer les bibliothèques

Installez les bibliothèques gcip-iap, firebase et firebaseui. Le module gcip-iap fait abstraction des communications entre votre application, IAP et Identity Platform. Les bibliothèques firebase et firebaseui fournissent les principaux composants de votre UI d'authentification.

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

Notez que le module gcip-iap n'est pas disponible avec CDN.

Vous pouvez ensuite import les modules dans vos fichiers source. Utilisez les importations appropriées pour votre version du 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.

Pour obtenir des options d'installation supplémentaires, par exemple en utilisant les versions localisées des bibliothèques, consultez les instructions sur GitHub.

Configurer votre application

FirebaseUI utilise un objet de configuration qui spécifie les locataires et les fournisseurs à utiliser pour l'authentification. L'exécution d'une configuration complète peut être très longue, et elle peut ressembler à ceci :

// 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