Criar uma página de início de sessão com o FirebaseUI

Para usar identidades externas com o Identity-Aware Proxy (IAP), a sua app precisa de uma página de início de sessão. O IAP vai redirecionar os utilizadores para esta página para autenticação antes de poderem aceder a recursos seguros.

Este artigo mostra-lhe como criar uma página de autenticação com o FirebaseUI, uma biblioteca de JavaScript de código aberto. A FirebaseUI oferece elementos personalizáveis que ajudam a reduzir o código repetitivo e processa os fluxos para iniciar a sessão dos utilizadores com uma vasta gama de fornecedores de identidade.

Para começar mais rapidamente, deixe que a IAP hospede a IU por si. Isto permite-lhe experimentar identidades externas sem escrever código adicional. Para cenários mais avançados, também pode criar a sua própria página de início de sessão de raiz. Esta opção é mais complexa, mas dá-lhe controlo total sobre o fluxo de autenticação e a experiência do utilizador.

Antes de começar

Ative as identidades externas e selecione a opção Vou fornecer a minha própria IU durante a configuração.

Instalar as bibliotecas

Instale as bibliotecas gcip-iap, firebase e firebaseui. O módulo gcip-iap abstrai as comunicações entre a sua app, a IAP e a Identity Platform. As bibliotecas firebase e firebaseui fornecem os componentes fundamentais para a IU de autenticação.

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

Tenha em atenção que o módulo gcip-iap não está disponível através da CDN.

Em seguida, pode import os módulos nos ficheiros de origem. Use as importações corretas para a versão do seu 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.

Para ver opções de instalação adicionais, incluindo a utilização de versões localizadas das bibliotecas, consulte as instruções no GitHub.

Configurar a sua aplicação

A FirebaseUI usa um objeto de configuração que especifica os inquilinos e os fornecedores a usar para autenticação. Uma configuração completa pode ser muito longa e ter um aspeto semelhante a este:

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