יצירת דף כניסה באמצעות FirebaseUI

כדי להשתמש בזהויות חיצוניות עם שרת Proxy לאימות זהויות (IAP), האפליקציה צריכה דף כניסה. שרת IAP יפנה את המשתמשים לדף הזה כדי לאמת אותם לפני שהם יוכלו לגשת למשאבים מאובטחים.

במאמר הזה נסביר איך ליצור דף אימות באמצעות FirebaseUI, ספריית JavaScript בקוד פתוח. ‫FirebaseUI מספק רכיבים שאפשר להתאים אישית, שעוזרים לצמצם את כמות קוד ה-boilerplate, ומטפל בתהליכי הכניסה של משתמשים באמצעות מגוון רחב של ספקי זהויות.

כדי להתחיל מהר יותר, אפשר לאפשר ל-IAP לארח את ממשק המשתמש בשבילכם. כך אפשר לנסות זהויות חיצוניות בלי לכתוב קוד נוסף. במקרים מורכבים יותר, אפשר גם לבנות דף כניסה משלכם מאפס. האפשרות הזו מורכבת יותר, אבל היא מאפשרת לכם שליטה מלאה בתהליך האימות ובחוויית המשתמש.

לפני שמתחילים

במהלך ההגדרה, מפעילים זהויות חיצוניות ובוחרים באפשרות I'll provide my own UI (אני אשתמש בממשק משתמש משלי).

התקנת הספריות

מתקינים את הספריות gcip-iap, firebase ו-firebaseui. מודול gcip-iap מבצע הפשטה של התקשורת בין האפליקציה, IAP ו-Identity Platform. הספריות firebase ו-firebaseui מספקות את אבני הבניין לממשק המשתמש של האימות.

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

הערה: אי אפשר להשתמש במודול gcip-iap באמצעות CDN.

לאחר מכן תוכלו import את המודולים בקובצי המקור. משתמשים בהצהרות הייבוא הנכונות לגרסת ה-SDK:

‫gcip-iap v0.1.4 או גרסאות קודמות

// 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 ואילך

החל מגרסה v1.0.0, ‏ gcip-iap דורש תלות בעמיתים בגרסה firebase v9 ומעלה. אם אתם עוברים לגרסה gcip-iap v1.0.0 ומעלה, אתם צריכים לבצע את הפעולות הבאות:

  • מעדכנים את הגרסאות של firebase ו-firebaseui בקובץ package.json לגרסה v9.6.0+ ולגרסה v6.0.0+ בהתאמה.
  • מעדכנים את הצהרות הייבוא firebase באופן הבא:
// 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.

אין צורך לבצע שינויים נוספים בקוד.

אפשרויות התקנה נוספות, כולל שימוש בגרסאות מקומיות של הספריות, זמינות בהוראות ב-GitHub.

הגדרת האפליקציה

‫FirebaseUI משתמש באובייקט הגדרה שמציין את הדיירים והספקים שבהם יש להשתמש לאימות. הגדרות מלאות יכולות להיות ארוכות מאוד, והן עשויות להיראות כך:

// 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',
            // Do not require display name on sign up.
            requireDisplayName: false,
            disableSignUp: {
              // Disable user from signing up with email providers.
              status: true,
              adminEmail: 'admin@example.com',
              helpLink: 'https://www.example.com/trouble_signing_in'
            }
          },
          // SAML provider. (multiple SAML providers can be passed)
          {
            provider: 'saml.my-provider1',
            providerName: 'SAML provider',
            fullLabel: 'Employee Login',
            buttonColor: '#4666FF',
            iconUrl: 'https://www.example.com/photos/my_idp/saml.png'
          },
        ],
        // If there is only one sign-in provider eligible for the user,
        // whether to show the provider selection page.
        immediateFederatedRedirect: true,
        signInFlow: 'redirect', // Or popup
        // The terms of service URL and privacy policy URL for the sign-in page
        // specific to each tenant.
        tosUrl: 'http://localhost/tenant1/tos',
        privacyPolicyUrl: 'http://localhost/tenant1/privacypolicy'
      },
      // Tenant configuration for tenant ID tenantId2.
      tenantId2: {
        fullLabel: 'OCP Portal',
        displayName: 'OCP',
        buttonColor: '#2F2F2F',
        iconUrl: '<icon-url-of-sign-in-button>',
        // Tenant2 supports a SAML, OIDC and Email/password