Anmeldeseite mit FirebaseUI erstellen

Damit externe Identitäten mit Identity-Aware Proxy (IAP) verwendet werden können, benötigt Ihre Anwendung eine Anmeldeseite. IAP leitet Nutzer auf diese Seite weiter, damit sie sich authentifizieren, bevor sie auf sichere Ressourcen zugreifen können.

In diesem Artikel wird gezeigt, wie Sie mithilfe von FirebaseUI, einer Open-Source-JavaScript-Bibliothek, eine Authentifizierungsseite erstellen. FirebaseUI bietet anpassbare Elemente, die helfen, den Boilerplate-Code zu reduzieren, und handhabt die Abläufe für die Anmeldung von Nutzern mit einer Vielzahl von Identitätsanbietern.

Zum schnellen Einstieg können Sie IAP die UI für Sie hosten lassen. Dadurch können Sie externe Identitäten ausprobieren, ohne zusätzlichen Code schreiben zu müssen. In komplexeren Szenarien können Sie auch Ihre eigene Anmeldeseite erstellen. Diese Option ist komplexer, bietet jedoch vollständige Kontrolle über den Authentifizierungsablauf und die Nutzererfahrung.

Hinweis

Aktivieren Sie externe Identitäten, und wählen Sie bei der Einrichtung die Option I'll provide my own UI aus.

Bibliotheken installieren

Installieren Sie die gcip-iap-, firebase- und firebaseui-Bibliotheken. Das Modul gcip-iap abstrahiert die Kommunikation zwischen Ihrer Anwendung, IAP und Identity Platform. Die firebase- und firebaseui-Bibliotheken enthalten die Bausteine für Ihre Authentifizierungs-UI.

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

Beachten Sie, dass das Modul gcip-iap bei Verwendung von CDN nicht verfügbar ist.

Sie können die Module dann mit import in Ihre Quelldateien importieren. Verwenden Sie die richtigen Importe für Ihre SDK-Version:

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

Weitere Installationsoptionen, darunter die Verwendung lokalisierter Versionen der Bibliotheken, finden Sie in der Anleitung auf GitHub.

Anwendung konfigurieren

FirebaseUI verwendet ein Konfigurationsobjekt, das die Mandanten und Anbieter angibt, die für die Authentifizierung verwendet werden sollen. Eine komplette Konfiguration kann sehr umfangreich sein und in etwa so aussehen:

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