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 open source, dan Client SDK.

Contoh kode yang menunjukkan langkah-langkah yang dibahas dalam tutorial ini tersedia di GitHub.

Sebelum memulai

  1. Aktifkan multi-tenancy dan buat minimal 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'

Membuat UI pemilihan tenant

FirebaseUI hanya menangani alur login; Anda harus membuat 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. 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. Tambahkan pengendali klik pemilihan tenant untuk merender komponen login dengan FirebaseUI. Perhatikan bahwa sebelum merender komponen UI, Anda harus menetapkan ID tenant di 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, ada banyak alur UX yang berbeda. Misalnya, Anda dapat meminta pengguna memasukkan email mereka 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 di objek Auth.

Langkah selanjutnya