Membuat halaman login untuk beberapa tenant

Dokumen ini menunjukkan cara mem-build halaman login khusus tenant untuk Identity Platform menggunakan FirebaseUI, kumpulan komponen UI bawaan yang open source, dan Client SDK.

Kode contoh yang menunjukkan langkah-langkah yang dibahas dalam tutorial ini tersedia di GitHub.

Sebelum memulai

  1. Aktifkan multi-tenancy dan buat minimal dua tenant.
  2. Konfigurasi penyedia identitas untuk setiap tenant.

Mendapatkan komponen

Anda dapat mengambil skrip UI, SDK Klien, 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 pemilihan tenant

FirebaseUI hanya menangani alur login; Anda harus mem-build UI sendiri agar pengguna dapat memilih tenant untuk login. Langkah-langkah berikut menunjukkan cara mem-build halaman pemilihan tenant sederhana dengan dua tombol.

  1. Buat dua elemen pemilihan 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. Membuat 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. Menambahkan pengendali klik pemilihan tenant untuk merender komponen login dengan FirebaseUI. Perhatikan bahwa sebelum merender komponen UI, Anda harus menetapkan 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.

Meskipun contoh ini menggunakan dua tombol sederhana dan satu halaman, banyak alur UX yang berbeda dapat terjadi. Misalnya, Anda dapat meminta pengguna untuk memasukkan email di satu halaman, lalu menampilkan layar pemilihan tenant. Anda juga dapat menghosting halaman login terpisah untuk setiap tenant. Dalam hal ini, Anda harus mengurai ID tenant dari URL, lalu menetapkannya pada objek Auth.

Langkah selanjutnya