Mengintegrasikan elemen UI Identity Platform ke dalam aplikasi web Anda

Panduan ini menunjukkan cara mengintegrasikan antarmuka pengguna (UI) yang disediakan oleh Identity Platform ke dalam aplikasi web yang ada.

Sebelum memulai

Untuk menyelesaikan panduan ini, Anda memerlukan hal berikut:

Komponen UI open source untuk klien lain

Artikel ini menunjukkan cara mengintegrasikan komponen UI ke dalam aplikasi web. Untuk jenis aplikasi lainnya, lihat halaman berikut:

Mengintegrasikan komponen UI ke dalam aplikasi

  1. Tambahkan skrip UI dan CSS dari CDN di tag <head> halaman Anda.


    <script src="https://www.gstatic.com/firebasejs/ui/6.1.0/firebase-ui-auth.js"></script>
<link rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/6.1.0/firebase-ui-auth.css" />

  2. Aktifkan minimal satu metode login menggunakan Konsol Google Cloud. Lihat Panduan Memulai untuk mempelajari caranya.

  3. Di tag <head> halaman, konfigurasikan cara pengguna dapat login: 

    <script>
// UI Configuration
var uiConfig = {
 signInSuccessUrl: '[URL_TO_REDIRECT_ON_SIGNIN_SUCCESS]',
 signInOptions: [
   // Leave the lines as is for the providers you want to offer your users.
   firebase.auth.GoogleAuthProvider.PROVIDER_ID,
   firebase.auth.FacebookAuthProvider.PROVIDER_ID,
   firebase.auth.TwitterAuthProvider.PROVIDER_ID,
   firebase.auth.GitHubAuthProvider.PROVIDER_ID,
   firebase.auth.EmailAuthProvider.PROVIDER_ID,
   firebase.auth.PhoneAuthProvider.PROVIDER_ID,
   firebaseui.auth.AnonymousAuthProvider.PROVIDER_ID
 ],
 // 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]');
 }
};

// Initialize the UI Components.
var ui = new firebaseui.auth.AuthUI(firebase.auth());
// The start method will wait until the DOM is loaded.
ui.start('#firebaseui-auth-container', uiConfig);
</script>

  4. Di elemen <body> halaman Anda, sisipkan widget UI: 

    <body>
<!-- The surrounding HTML is left untouched. Your app can use that space for branding, controls and other customizations.-->
<h1>Welcome to [APP_NAME]</h1>
<div id="firebaseui-auth-container"></div>
</body>

    Saat Anda merender halaman, UI yang disediakan oleh Identity Platform akan muncul, sehingga pengguna dapat login ke aplikasi Anda.

Untuk mempelajari penyesuaian lainnya, lihat dokumentasi komponen UI di GitHub.

Langkah selanjutnya