Membuat halaman login untuk beberapa tenant dengan Identity Platform

Halaman ini menunjukkan cara membuat halaman login untuk beberapa tenant di Identity Platform menggunakan FirebaseUI, yang merupakan kumpulan komponen UI siap pakai open source, dan SDK Klien.

Sebelum memulai

  1. Aktifkan multi-tenancy dan buat setidaknya dua tenant.
  2. Mengonfigurasi penyedia identitas untuk setiap tenant.

Mendapatkan komponen

Anda dapat mengambil skrip UI, Client SDK, dan file CSS langsung dari CDN dengan menambahkannya ke elemen <head> halaman Anda:

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

Atau, Anda dapat menginstal modul menggunakan npm, lalu mereferensikannya sebagai impor 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'

Membangun UI untuk memilih tenant

FirebaseUI hanya menangani alur login; Anda perlu membuat UI sendiri agar pengguna dapat memilih tenant untuk login.

Untuk membuat halaman pemilihan tenant dasar dengan dua tombol, lakukan hal berikut:

  1. Buat dua elemen pilihan tenant.

    <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. Buat elemen penampung untuk FirebaseUI.

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

  3. Buat konfigurasi untuk setiap tenant.

    <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. Untuk merender komponen login dengan FirebaseUI, tambahkan pengendali klik pemilihan tenant. Sebelum merender komponen UI, tetapkan ID tenant pada instance 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. Luncurkan aplikasi Anda. Layar login dengan dua tombol tenant akan muncul.

Anda juga dapat membuat alur kerja multi-halaman. Misalnya, Anda dapat membuat alur kerja di mana halaman pertama meminta email pengguna, dan halaman berikutnya memungkinkan mereka memilih tenant. Selain itu, Anda dapat menghosting halaman login terpisah untuk setiap tenant. Untuk melakukannya, Anda harus mengurai ID tenant dari URL, lalu menyetelnya pada objek Auth.

Langkah berikutnya