Menambahkan login ke aplikasi Web dengan mudah melalui FirebaseUI

FirebaseUI adalah library yang dikembangkan dari Firebase Authentication SDK yang menyediakan alur UI drop-in untuk digunakan di 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 mem-fork project dan menyesuaikannya dengan kebutuhan.
  • Daftar sekali ketuk dan login otomatis - integrasi otomatis dengan Daftar sekali ketuk 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 selengkapnya, buka bagian Mengupgrade pengguna anonim.

Sebelum memulai

  1. Tambahkan Firebase Authentication ke aplikasi web Anda, dengan memastikan Anda menggunakan compat v9 (direkomendasikan) atau SDK yang lebih lama (lihat sidebar di atas).

  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://www.gstatic.com/firebasejs/ui/6.0.1/firebase-ui-auth.js"></script>
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/6.0.1/firebase-ui-auth.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 menayangkan 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" />

Menginisialisasi FirebaseUI

Begitu SDK berhasil diimpor, lakukan inisialisasi UI Auth.

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

Menyiapkan metode login

Sebelum dapat menggunakan Firebase untuk memproses login pengguna, 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 Sign-in method, aktifkan penyedia Email/Password. 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 signInOptions FirebaseUI beserta signInMethod link email.

    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 link login dengan email dan UI harus dirender untuk menyelesaikan 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 dikonfigurasi untuk mengizinkan atau memblokir pengguna agar tidak menyelesaikan login lintas perangkat.

    Callback emailLinkSignIn opsional dapat ditetapkan untuk menampilkan konfigurasi firebase.auth.ActionCodeSettings yang akan digunakan saat mengirimkan link. Dengan begitu, Anda dapat menentukan cara 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.

    Metode login dengan link email di FirebaseUI-web kompatibel dengan FirebaseUI-Android dan FirebaseUI-iOS. Seorang 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 rahasia dan client ID OAuth yang sesuai juga ditetapkan.

  2. Selain itu, di bagian Authentication, pastikan domain tempat halaman login akan dirender juga ditambahkan ke daftar domain yang diotorisasi.

  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 juga ditambahkan ke daftar domain yang diotorisasi.

  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 saat reCAPTCHA tersebut terlihat maupun tidak (setelan defaultnya adalah normal). Baca dokumentasi reCAPTCHA API untuk mengetahui informasi lebih lanjut.

    Anda juga dapat menetapkan 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 alur 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 FirebaseUI 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 Auth FirebaseUI:

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

Mengupgrade pengguna anonim

Mengaktifkan upgrade pengguna anonim

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

Menangani konflik penggabungan upgrade pengguna anonim

Dalam beberapa kasus, 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 ada, FirebaseUI akan memicu callback signInFailure dengan kode error firebaseui/anonymous-upgrade-merge-conflict saat 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 informasi selengkapnya mengenai cara menggunakan dan menyesuaikan FirebaseUI, baca README.
  • Jika Anda menemukan masalah di FirebaseUI dan ingin melaporkannya, gunakan issue tracker GitHub.