יצירת דף כניסה למספר דיירים באמצעות Identity Platform

בדף הזה מוסבר איך ליצור דף כניסה למספר דיירים ב-Identity Platform באמצעות FirebaseUI, שהיא אוסף של רכיבי ממשק משתמש מוכנים מראש בקוד פתוח, וClient SDK.

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

  1. מפעילים ריבוי דיירים ויוצרים לפחות שני דיירים.
  2. הגדרת ספקי זהויות לכל דייר.

קבלת הרכיבים

אפשר לאחזר את סקריפט ממשק המשתמש, Client SDK וקובצי CSS ישירות מ-CDN על ידי הוספתם לרכיב <head> של הדף:

<script src="https://www.gstatic.com/firebasejs/x.x.x/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/x.x.x/firebase-auth.js"></script>
<script src="https://cdn.firebase.com/libs/firebaseui/x.x.x/firebaseui.js"></script>
<link rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/x.x.x/firebaseui.css" />

לחלופין, אפשר להתקין את המודולים באמצעות npm ואז להפנות אליהם כייבוא של ES6:

npm install firebase --save && \
npm install firebaseui --save

// Import Firebase JS SDK.
import * as firebase from "firebase/app";
import "firebase/auth";
import * as firebaseui from 'firebaseui'

יצירת ממשק משתמש לבחירת דיירים

‫FirebaseUI מטפל רק בתהליכי כניסה. אתם צריכים ליצור ממשק משתמש משלכם כדי שהמשתמשים יוכלו לבחור דייר שאיתו הם רוצים להיכנס.

כדי ליצור דף בסיסי לבחירת דייר עם שני לחצנים, מבצעים את הפעולות הבאות:

  1. יוצרים שני רכיבים לבחירת דיירים.

    <div id="tenant-selection-buttons">
  <button id="tenant1-select-button" data-val="tenantId1">Display name of Tenant 1</button>
  <button id="tenant2-select-button" data-val="tenantId2">Display name of Tenant 2</button>
</div>

  2. יוצרים רכיב מאגר תגים ל-FirebaseUI.

    <div id="firebaseui-auth-container"></div>

  3. יוצרים הגדרה לכל דייר.

    <script>
  var uiConfigs = {
  'TENANT_ID1': {
    'signInOptions': [firebase.auth.EmailAuthProvider.PROVIDER_ID],
    'credentialHelper': 'none',
    'signInFlow': 'popup',
    'callbacks': {
      'signInSuccessWithAuthResult': function(authResult, redirectUrl) {
        // The sign in success callback.
        return false;
       }
    },
    // tosUrl and privacyPolicyUrl accept either url string or a callback
    // function.
    // Terms of service url/callback.
    tosUrl: '[YOUR_TOS_URL]',
    // Privacy policy url/callback.
    privacyPolicyUrl: function() {
      window.location.assign('[YOUR_PRIVACY_POLICY_URL]');
    }
  },
  'TENANT_ID2': {
    'signInOptions': [firebase.auth.GoogleAuthProvider.PROVIDER_ID],
    'credentialHelper': 'none',
    'signInFlow': 'popup',
    'callbacks': {
      'signInSuccessWithAuthResult': function(authResult, redirectUrl) {
        // The sign in success callback.
        return false;
       }
    },
    // tosUrl and privacyPolicyUrl accept either url string or a callback
    // function.
    // Terms of service url/callback.
    tosUrl: '[YOUR_TOS_URL]',
    // Privacy policy url/callback.
    privacyPolicyUrl: function() {
      window.location.assign('[YOUR_PRIVACY_POLICY_URL]');
    }
  }
};
</script>

  4. כדי להציג את רכיב הכניסה באמצעות FirebaseUI, מוסיפים click handlers לבחירת דייר. לפני שמעבדים את רכיב ממשק המשתמש, צריך להגדיר את מזהה הדייר במופע Auth.

    <script>
  var ui = new firebaseui.auth.AuthUI(firebase.auth());
  tenantSelectionButton.addEventListener('click', (e) => {
  var tenantId = e.target.getAttribute('data-val');
  firebase.auth().tenantId = tenantId;
  ui.reset();
  ui.start('#firebaseui-auth-container', uiConfigs[tenantId]);
  });
</script>

  5. מפעילים את האפליקציה. מופיע מסך כניסה עם שני לחצנים של דיירים.

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

המאמרים הבאים