Membuat halaman login dengan FirebaseUI

Untuk menggunakan identitas eksternal dengan Identity-Aware Proxy (IAP), aplikasi Anda memerlukan halaman login. IAP akan mengalihkan pengguna ke halaman ini untuk melakukan autentikasi sebelum mereka dapat mengakses resource yang aman.

Artikel ini menunjukkan cara membuat halaman autentikasi menggunakan FirebaseUI, library JavaScript open source. FirebaseUI menyediakan elemen yang dapat disesuaikan yang membantu mengurangi kode boilerplate, dan menangani alur untuk login pengguna dengan berbagai penyedia identitas.

Untuk memulai lebih cepat, biarkan IAP menghosting UI untuk Anda. Hal ini memungkinkan Anda mencoba identitas eksternal tanpa menulis kode tambahan. Untuk skenario yang lebih canggih, Anda juga dapat membuat halaman login sendiri dari awal. Opsi ini lebih kompleks, tetapi memberi Anda kontrol penuh atas alur autentikasi dan pengalaman pengguna.

Sebelum memulai

Aktifkan identitas eksternal, lalu pilih opsi Saya akan menyediakan UI saya sendiri selama penyiapan.

Menginstal library

Instal library gcip-iap, firebase, dan firebaseui. Modul gcip-iap mengabstraksi komunikasi antara aplikasi Anda, IAP, dan Identity Platform. Library firebase dan firebaseui menyediakan blok penyusun untuk UI autentikasi Anda.

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

Perhatikan bahwa modul gcip-iap tidak tersedia menggunakan CDN.

Kemudian, Anda dapat import modul dalam file sumber. Gunakan impor yang benar untuk versi SDK Anda:

gcip-iap v0.1.4 atau yang lebih lama

// Import firebase modules.
import * as firebase from "firebase/app";
import "firebase/auth";
//