Membuat halaman login dengan FirebaseUI

Untuk menggunakan identitas eksternal dengan Identity-Aware Proxy (IAP), aplikasi Anda memerlukan halaman login. IAP akan mengalihkan pengguna ke halaman ini untuk melakukan autentikasi sebelum mereka dapat mengakses resource yang aman.

Artikel ini menunjukkan cara membuat halaman autentikasi menggunakan FirebaseUI, library JavaScript open source. FirebaseUI menyediakan elemen yang dapat disesuaikan yang membantu mengurangi kode boilerplate, dan menangani alur untuk login pengguna dengan berbagai penyedia identitas.

Untuk memulai lebih cepat, biarkan IAP menghosting UI untuk Anda. Hal ini memungkinkan Anda mencoba identitas eksternal tanpa menulis kode tambahan. Untuk skenario yang lebih canggih, Anda juga dapat membuat halaman login sendiri dari awal. Opsi ini lebih kompleks, tetapi memberi Anda kontrol penuh atas alur autentikasi dan pengalaman pengguna.

Sebelum memulai

Aktifkan identitas eksternal, lalu pilih opsi Saya akan menyediakan UI saya sendiri selama penyiapan.

Menginstal library

Instal library gcip-iap, firebase, dan firebaseui. Modul gcip-iap mengabstraksi komunikasi antara aplikasi Anda, IAP, dan Identity Platform. Library firebase dan firebaseui menyediakan blok penyusun untuk UI autentikasi Anda.

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

Perhatikan bahwa modul gcip-iap tidak tersedia menggunakan CDN.

Kemudian, Anda dapat import modul dalam file sumber. Gunakan impor yang benar untuk versi SDK Anda:

gcip-iap v0.1.4 atau yang lebih lama 

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

gcip-iap v1.0.0 atau yang lebih baru

Mulai dari versi v1.0.0, gcip-iap memerlukan dependensi rekan firebase v9 atau yang lebih tinggi. Jika Anda melakukan migrasi ke gcip-iap v1.0.0 atau yang lebih baru, selesaikan tindakan berikut:

  • Update versi firebase dan firebaseui di file package.json Anda ke v9.6.0+ dan v6.0.0+.
  • Perbarui pernyataan impor firebase sebagai berikut:
// 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.

Tidak ada perubahan kode tambahan yang diperlukan.

Untuk opsi penginstalan tambahan, termasuk menggunakan versi pustaka yang dilokalkan, lihat petunjuk di GitHub.

Mengonfigurasi aplikasi Anda

FirebaseUI menggunakan objek konfigurasi yang menentukan tenant dan penyedia yang akan digunakan untuk autentikasi. Konfigurasi lengkap bisa sangat panjang, dan mungkin terlihat seperti ini:

// 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 selection button. Only needed if you are
        // using the option first option.
        fullLabel: 'ACME Portal',
        displayName: 'ACME',
        buttonColor: '#2F2F2F',
        iconUrl: '<icon-url-of-sign-in-button>',
         // Sign-in providers enabled for tenantId1.
        signInOptions: [
          // Microsoft sign-in.
          {
            provider: 'microsoft.com',
            providerName: 'Microsoft',
            buttonColor: '#2F2F2F',
            iconUrl: '<icon-url-of-sign-in-button>',
            loginHintKey: 'login_hint'
          },
          // Email/password sign-in.
          {
            provider: 'password',