Menambahkan login ke aplikasi Web dengan mudah melalui FirebaseUI

FirebaseUI adalah library yang dibuat sebagai tambahan dari Firebase Authentication SDK yang menyediakan alur UI drop-in untuk digunakan dalam aplikasi Anda. FirebaseUI memberikan manfaat berikut:

  • Beberapa Penyedia - alur login untuk email/sandi, link email, autentikasi melalui telepon, login dengan Google, Facebook, Twitter, dan GitHub.
  • Penautan Akun - alur untuk menautkan akun pengguna secara aman di seluruh penyedia identitas.
  • Penyesuaian - timpa gaya CSS FirebaseUI agar cocok dengan persyaratan aplikasi Anda. Selain itu, karena FirebaseUI bersifat open source, Anda dapat menyalin project dan menyesuaikannya sesuai kebutuhan.
  • Pendaftaran dengan sekali tap dan login otomatis - integrasi otomatis melalui Daftar dengan sekali tap untuk login lintas perangkat dengan cepat.
  • UI yang Dilokalkan - penerjemahan ke lebih dari 40 bahasa.
  • Upgrade pengguna anonim - kemampuan untuk mengupgrade pengguna anonim melalui proses login/pendaftaran. Untuk informasi lebih lanjut, kunjungi bagian Upgrade pengguna anonim.

Sebelum memulai

  1. Tambahkan Firebase Authentication ke aplikasi web Anda.

  2. Sertakan FirebaseUI melalui salah satu opsi berikut:

    1. CDN

      Sertakan skrip dan file CSS berikut pada tag <head> halaman Anda, di bawah cuplikan inisialisasi dari Firebase Console:

      <script src="https://cdn.firebase.com/libs/firebaseui/3.5.2/firebaseui.js"></script>
      <link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/3.5.2/firebaseui.css" />
      
    2. Modul npm

      Instal FirebaseUI dan dependensinya melalui npm menggunakan perintah berikut:

      $ npm install firebaseui --save
      

      require modul berikut dalam file sumber Anda:

      var firebase = require('firebase');
      var firebaseui = require('firebaseui');
      
    3. Komponen Bower

      Instal FirebaseUI dan dependensinya melalui Bower menggunakan perintah berikut:

      $ bower install firebaseui --save
      

      Sertakan file yang diperlukan dalam HTML, jika Server HTTP Anda menyajikan file dalam bower_components/:

      <script src="bower_components/firebaseui/dist/firebaseui.js"></script>
      <link type="text/css" rel="stylesheet" href="bower_components/firebaseui/dist/firebaseui.css" />
      

Menyiapkan metode login

Sebelum Anda dapat menggunakan Firebase untuk membuat pengguna login, Anda harus mengaktifkan dan mengonfigurasi metode login yang ingin Anda dukung.

Alamat email dan sandi

  1. Di Firebase console, buka bagian Authentication, lalu aktifkan autentikasi email dan sandi.

  2. Tambahkan ID penyedia email ke daftar signInOptions FirebaseUI.

    ui.start('#firebaseui-auth-container', {
      signInOptions: [
        firebase.auth.EmailAuthProvider.PROVIDER_ID
      ],
      // Other config options...
    });
    
  3. Opsional: EmailAuthProvider dapat dikonfigurasi untuk mewajibkan pengguna memasukkan nama tampilan (setelan defaultnya adalah true).

    ui.start('#firebaseui-auth-container', {
      signInOptions: [
        {
          provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
          requireDisplayName: false
        }
      ]
    });
    
  1. Di Firebase console, buka bagian Authentication. Pada tab Metode login, aktifkan penyedia Email/Sandi. Perlu diketahui bahwa login dengan email/sandi harus diaktifkan untuk menggunakan metode login dengan link email.

  2. Di bagian yang sama, aktifkan metode login dengan Link email (login tanpa sandi), lalu klik Simpan.

  3. Tambahkan ID penyedia email ke daftar FirebaseUI signInOptions bersama dengan link email signInMethod.

    ui.start('#firebaseui-auth-container', {
      signInOptions: [
        {
          provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
          signInMethod: firebase.auth.EmailAuthProvider.EMAIL_LINK_SIGN_IN_METHOD
        }
      ],
      // Other config options...
    });
    
  4. Saat merender UI login secara bersyarat (relevan untuk aplikasi satu halaman), gunakan ui.isPendingRedirect() untuk mendeteksi apakah URL sesuai dengan login dengan link email dan UI perlu dirender untuk menyelesaikan proses login.

    // Is there an email link sign-in?
    if (ui.isPendingRedirect()) {
      ui.start('#firebaseui-auth-container', uiConfig);
    }
    // This can also be done via:
    if ((firebase.auth().isSignInWithEmailLink(window.location.href)) {
      ui.start('#firebaseui-auth-container', uiConfig);
    }
    
  5. Opsional: EmailAuthProvider untuk login dengan link email dapat dikonfigurasikan agar pengguna dapat atau tidak dapat menyelesaikan proses login melalui lintas perangkat.

    Callback emailLinkSignIn opsional dapat ditetapkan untuk menampilkan konfigurasi firebase.auth.ActionCodeSettings yang akan digunakan saat mengirim link. Dengan begitu, Anda dapat menentukan penanganan link, link dinamis khusus, status tambahan di deep link, dll. Jika tidak disediakan, URL saat ini akan digunakan dan alur khusus web akan dipicu.

    Login dengan link email di FirebaseUI-web kompatibel dengan FirebaseUI-Android dan FirebaseUI-iOS karena satu pengguna yang memulai alur dari FirebaseUI-Android dapat membuka link tersebut dan menyelesaikan proses login dengan FirebaseUI-web. Hal tersebut juga berlaku untuk alur yang berlawanan.

    ui.start('#firebaseui-auth-container', {
      signInOptions: [
        {
          provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
          signInMethod: firebase.auth.EmailAuthProvider.EMAIL_LINK_SIGN_IN_METHOD,
          // Allow the user the ability to complete sign-in cross device,
          // including the mobile apps specified in the ActionCodeSettings
          // object below.
          forceSameDevice: false,
          // Used to define the optional firebase.auth.ActionCodeSettings if
          // additional state needs to be passed along request and whether to open
          // the link in a mobile app if it is installed.
          emailLinkSignIn: function() {
            return {
              // Additional state showPromo=1234 can be retrieved from URL on
              // sign-in completion in signInSuccess callback by checking
              // window.location.href.
              url: 'https://www.example.com/completeSignIn?showPromo=1234',
              // Custom FDL domain.
              dynamicLinkDomain: 'example.page.link',
              // Always true for email link sign-in.
              handleCodeInApp: true,
              // Whether to handle link in iOS app if installed.
              iOS: {
                bundleId: 'com.example.ios'
              },
              // Whether to handle link in Android app if opened in an Android
              // device.
              android: {
                packageName: 'com.example.android',
                installApp: true,
                minimumVersion: '12'
              }
            };
          }
        }
      ]
    });
    

Penyedia OAuth (Google, Facebook, Twitter, dan GitHub)

  1. Di Firebase console, buka bagian Authentication, lalu aktifkan login dengan penyedia OAuth yang ditetapkan. Pastikan ID dan rahasia klien OAuth yang sesuai juga ditetapkan.

  2. Masih di bagian Autentikasi, pastikan domain tempat halaman login Anda akan dirender berada dalam daftar domain yang diizinkan.

  3. Tambahkan ID penyedia OAuth ke daftar signInOptions FirebaseUI.

    ui.start('#firebaseui-auth-container', {
      signInOptions: [
        // List of OAuth providers supported.
        firebase.auth.GoogleAuthProvider.PROVIDER_ID,
        firebase.auth.FacebookAuthProvider.PROVIDER_ID,
        firebase.auth.TwitterAuthProvider.PROVIDER_ID,
        firebase.auth.GithubAuthProvider.PROVIDER_ID
      ],
      // Other config options...
    });
    
  4. Opsional: Untuk menetapkan cakupan kustom atau parameter OAuth kustom per penyedia, Anda dapat meneruskan objek, bukan hanya nilai penyedia:

    ui.start('#firebaseui-auth-container', {
      signInOptions = [
        {
          provider: firebase.auth.GoogleAuthProvider.PROVIDER_ID,
          scopes: [
            'https://www.googleapis.com/auth/contacts.readonly'
          ],
          customParameters: {
            // Forces account selection even when one account
            // is available.
            prompt: 'select_account'
          }
        },
        {
          provider: firebase.auth.FacebookAuthProvider.PROVIDER_ID,
          scopes: [
            'public_profile',
            'email',
            'user_likes',
            'user_friends'
          ],
          customParameters: {
            // Forces password re-entry.
            auth_type: 'reauthenticate'
          }
        },
        firebase.auth.TwitterAuthProvider.PROVIDER_ID, // Twitter does not support scopes.
        firebase.auth.EmailAuthProvider.PROVIDER_ID // Other providers don't need to be given as object.
      ]
    });
    

Nomor telepon

  1. Di Firebase console, buka bagian Authentication, lalu aktifkan login dengan nomor telepon.

  2. Pastikan domain tempat halaman login Anda akan dirender berada dalam daftar domain yang diizinkan.

  3. Tambahkan ID penyedia nomor telepon ke daftar signInOptions FirebaseUI.

    ui.start('#firebaseui-auth-container', {
      signInOptions = [
        firebase.auth.PhoneAuthProvider.PROVIDER_ID
      ],
      // Other config options...
    });
    
  4. Opsional: PhoneAuthProvider dapat dikonfigurasi dengan parameter reCAPTCHA kustom, baik reCAPTCHA tersebut terlihat maupun tidak (setelan defaultnya adalah normal). Baca dokumen reCAPTCHA API untuk mengetahui informasi lebih lanjut.

    Anda juga dapat menyetel negara yang akan dipilih secara default pada input nomor telepon. Lihat daftar kode negara yang didukung untuk mengetahui daftar kode secara lengkap. Jika tidak ditentukan, secara default input nomor telepon akan ditetapkan ke Amerika Serikat (+1).

    Opsi berikut saat ini didukung.

    ui.start('#firebaseui-auth-container', {
      signInOptions = [
        {
          provider: firebase.auth.PhoneAuthProvider.PROVIDER_ID,
          recaptchaParameters: {
            type: 'image', // 'audio'
            size: 'normal', // 'invisible' or 'compact'
            badge: 'bottomleft' //' bottomright' or 'inline' applies to invisible.
          },
          defaultCountry: 'GB', // Set default country to the United Kingdom (+44).
          // For prefilling the national number, set defaultNationNumber.
          // This will only be observed if only phone Auth provider is used since
          // for multiple providers, the NASCAR screen will always render first
          // with a 'sign in with phone number' button.
          defaultNationalNumber: '1234567890',
          // You can also pass the full phone number string instead of the
          // 'defaultCountry' and 'defaultNationalNumber'. However, in this case,
          // the first country ID that matches the country code will be used to
          // populate the country selector. So for countries that share the same
          // country code, the selected country may not be the expected one.
          // In that case, pass the 'defaultCountry' instead to ensure the exact
          // country is selected. The 'defaultCountry' and 'defaultNationaNumber'
          // will always have higher priority than 'loginHint' which will be ignored
          // in their favor. In this case, the default country will be 'GB' even
          // though 'loginHint' specified the country code as '+1'.
          loginHint: '+11234567890'
        }
      ]
    });
    

Login

Untuk memulai aliran login FirebaseUI, inisialisasi instance FirebaseUI dengan meneruskan instance Auth yang mendasarinya.

// Initialize the FirebaseUI Widget using Firebase.
var ui = new firebaseui.auth.AuthUI(firebase.auth());

Tentukan elemen HTML tempat widget login Firebase UI akan dirender.

<!-- The surrounding HTML is left untouched by FirebaseUI.
     Your app may use that space for branding, controls and other customizations.-->
<h1>Welcome to My Awesome App</h1>
<div id="firebaseui-auth-container"></div>
<div id="loader">Loading...</div>

Tentukan konfigurasi FirebaseUI (penyedia yang didukung dan penyesuaian UI serta callback keberhasilan, dll).

var uiConfig = {
  callbacks: {
    signInSuccessWithAuthResult: function(authResult, redirectUrl) {
      // User successfully signed in.
      // Return type determines whether we continue the redirect automatically
      // or whether we leave that to developer to handle.
      return true;
    },
    uiShown: function() {
      // The widget is rendered.
      // Hide the loader.
      document.getElementById('loader').style.display = 'none';
    }
  },
  // Will use popup for IDP Providers sign-in flow instead of the default, redirect.
  signInFlow: 'popup',
  signInSuccessUrl: '<url-to-redirect-to-on-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
  ],
  // Terms of service url.
  tosUrl: '<your-tos-url>',
  // Privacy policy url.
  privacyPolicyUrl: '<your-privacy-policy-url>'
};

Terakhir, render antarmuka FirebaseUI Auth:

// The start method will wait until the DOM is loaded.
ui.start('#firebaseui-auth-container', uiConfig);

Upgrade pengguna anonim

Mengaktifkan upgrade pengguna anonim

Ketika pengguna anonim login atau mendaftar dengan akun permanen, Anda harus memastikan pengguna tersebut dapat melanjutkan dengan apa yang mereka lakukan sebelum mendaftar. Untuk melakukannya, cukup setel autoUpgradeAnonymousUsers ke true ketika Anda mengonfigurasi UI login (opsi ini dinonaktifkan secara default).

Menangani konflik penggabungan upgrade pengguna anonim

Ada beberapa kasus ketika pengguna, yang awalnya login secara anonim, mencoba upgrade ke pengguna Firebase yang sudah ada. Karena pengguna yang sudah ada tidak dapat ditautkan ke pengguna lain yang sudah ada, FirebaseUI akan memicu callback signInFailure dengan kode error firebaseui/anonymous-upgrade-merge-conflict ketika hal di atas terjadi. Objek error juga akan berisi kredensial permanen. Login dengan kredensial permanen akan dipicu di callback tersebut untuk menyelesaikan proses login. Sebelum login dapat diselesaikan melalui auth.signInWithCredential(error.credential), Anda harus menyimpan data pengguna anonim dan menghapus pengguna anonim. Kemudian, setelah pendaftaran selesai, salin kembali data ke pengguna non-anonim. Contoh di bawah menggambarkan bagaimana alur ini akan berfungsi.

// Temp variable to hold the anonymous user data if needed.
var data = null;
// Hold a reference to the anonymous current user.
var anonymousUser = firebase.auth().currentUser;
ui.start('#firebaseui-auth-container', {
  // Whether to upgrade anonymous users should be explicitly provided.
  // The user must already be signed in anonymously before FirebaseUI is
  // rendered.
  autoUpgradeAnonymousUsers: true,
  signInSuccessUrl: '<url-to-redirect-to-on-success>',
  signInOptions: [
    firebase.auth.GoogleAuthProvider.PROVIDER_ID,
    firebase.auth.FacebookAuthProvider.PROVIDER_ID,
    firebase.auth.EmailAuthProvider.PROVIDER_ID,
    firebase.auth.PhoneAuthProvider.PROVIDER_ID
  ],
  callbacks: {
    // signInFailure callback must be provided to handle merge conflicts which
    // occur when an existing credential is linked to an anonymous user.
    signInFailure: function(error) {
      // For merge conflicts, the error.code will be
      // 'firebaseui/anonymous-upgrade-merge-conflict'.
      if (error.code != 'firebaseui/anonymous-upgrade-merge-conflict') {
        return Promise.resolve();
      }
      // The credential the user tried to sign in with.
      var cred = error.credential;
      // Copy data from anonymous user to permanent user and delete anonymous
      // user.
      // ...
      // Finish sign-in after data is copied.
      return firebase.auth().signInWithCredential(cred);
    }
  }
});

Langkah Berikutnya

  • Untuk mengetahui informasi lebih lanjut mengenai cara menggunakan dan menyesuaikan FirebaseUI, baca README.
  • Jika Anda menemukan masalah di FirebaseUI dan ingin melaporkannya, gunakan pelacak masalah GitHub.

Kirim masukan tentang...

Butuh bantuan? Kunjungi halaman dukungan kami.