Fitur Autentikasi Lanjutan

1. Siapkan

Mendapatkan kode sumber

Dalam codelab ini, Anda akan memulai dengan versi aplikasi contoh Friendly Chat yang hampir selesai, sehingga hal pertama yang perlu Anda lakukan adalah meng-clone kode sumber:

$ git clone https://github.com/firebase/codelab-friendlychat-web --branch security

Kemudian, pindah ke direktori security-start, tempat Anda akan bekerja selama sisa codelab ini:

$ cd codelab-friendlychat-web/security-start

Sekarang, instal dependensi agar Anda dapat menjalankan kode. Jika Anda menggunakan koneksi internet yang lebih lambat, proses ini mungkin perlu waktu satu atau dua menit:

$ npm install && (cd functions && npm install)

Pelajari repo ini

Direktori security-solution/ berisi kode lengkap untuk aplikasi contoh. Direktori security-start adalah tempat Anda akan mengerjakan codelab, dan tidak memiliki beberapa bagian penting dari implementasi autentikasi. File dan fitur utama dalam security-start/ dan security-solution/ adalah:

• functions/index.js berisi kode Cloud Functions, dan di sinilah Anda akan menulis fungsi pemblokiran autentikasi.
• public/ - berisi file statis untuk aplikasi chat Anda
• public/scripts/main.js - tempat kode JS aplikasi chat Anda (src/index.js) dikompilasi untuk
• src/firebase-config.js - berisi objek konfigurasi Firebase yang digunakan untuk menginisialisasi aplikasi chat Anda
• src/index.js - kode JS aplikasi chat Anda

Mendapatkan Firebase CLI

Emulator Suite adalah bagian dari Firebase CLI (antarmuka command line), yang dapat diinstal di mesin Anda dengan perintah berikut:

$ npm install -g firebase-tools@latest

Buat JavaScript dengan webpack, yang akan membuat main.js di dalam direktori public/scripts/.

webpack build

Selanjutnya, pastikan Anda memiliki CLI versi terbaru. Codelab ini berfungsi dengan versi 11.14 atau yang lebih tinggi.

$ firebase --version
11.14.2

Menghubungkan ke project Firebase

Jika Anda tidak memiliki project Firebase, buat project Firebase baru di Firebase console. Catat Project ID yang Anda pilih, karena Anda akan memerlukannya nanti.

Sekarang, Anda harus menghubungkan kode ini ke project Firebase. Pertama-tama, jalankan perintah berikut untuk login ke Firebase CLI:

$ firebase login

Selanjutnya, jalankan perintah berikut untuk membuat alias project. Ganti $YOUR_PROJECT_ID dengan ID project Firebase Anda.

$ firebase use $YOUR_PROJECT_ID

Sekarang Anda siap menjalankan aplikasi.

2. Menjalankan emulator

Di bagian ini, Anda akan menjalankan aplikasi secara lokal. Ini berarti saatnya melakukan booting Emulator Suite.

Memulai Emulator

Dari dalam direktori sumber codelab, jalankan perintah berikut untuk memulai emulator:

$ firebase emulators:start

Tindakan ini akan menyajikan aplikasi di http://127.0.0.1:5170 dan terus membangun ulang kode sumber saat Anda membuat perubahan. Anda hanya perlu melakukan refresh paksa (ctrl-shift-r) secara lokal di browser Anda untuk melihat perubahan Anda.

Anda akan melihat output seperti ini:

i  emulators: Starting emulators: auth, functions, firestore, hosting, storage
✔  functions: Using node@16 from host.
i  firestore: Firestore Emulator logging to firestore-debug.log
✔  firestore: Firestore Emulator UI websocket is running on 9150.
i  hosting[demo-example]: Serving hosting files from: ./public
✔  hosting[demo-example]: Local server: http://127.0.0.1:5170
i  ui: Emulator UI logging to ui-debug.log
i  functions: Watching "[...]" for Cloud Functions...
✔  functions: Loaded functions definitions from source: beforecreated.
✔  functions[us-central1-beforecreated]: providers/cloud.auth/eventTypes/user.beforeCreate function initialized (http://127.0.0.1:5011/[...]/us-central1/beforecreated).
i  Running script: npm start
 
> security@1.0.0 start
> webpack --watch --progress
[...]
webpack 5.50.0 compiled with 1 warning in 990 ms

Setelah Anda melihat pesan All emulators ready, aplikasi siap digunakan.

3. Menerapkan MFA

MFA telah diterapkan sebagian dalam repo ini. Anda akan menambahkan kode untuk mendaftarkan pengguna di MFA terlebih dahulu, lalu meminta pengguna yang terdaftar di MFA untuk faktor kedua.

CATATAN: Ini adalah metode utama yang akan Anda gunakan untuk menerapkan MFA:

• getMultiFactorResolver(): Mendapatkan objek MultiFactorResolver yang digunakan untuk memfasilitasi login pengguna saat mereka perlu menyediakan faktor kedua
• verifyPhoneNumber(): Mengirim pesan verifikasi ke ponsel pengguna untuk pendaftaran dan login MFA
• resolveSignIn(): Digunakan untuk menyelesaikan login setelah pengguna memberikan kode verifikasi yang dikirimkan kepada mereka
• enroll(): Digunakan untuk menyelesaikan pendaftaran MFA setelah pengguna memberikan kode verifikasi yang dikirimkan kepada mereka

Di editor Anda, buka file src/index.js dan temukan metode startEnrollMultiFactor(). Tambahkan kode berikut untuk menyiapkan pemverifikasi reCAPTCHA yang akan mencegah penyalahgunaan telepon (pemverifikasi reCAPTCHA disetel ke tidak terlihat dan tidak akan terlihat oleh pengguna):

async function startEnrollMultiFactor(phoneNumber) {
  const recaptchaVerifier = new RecaptchaVerifier(
    "recaptcha",
    { size: "invisible" },
    getAuth()
  );

Kemudian, temukan metode finishEnrollMultiFactor() dan tambahkan kode berikut untuk mendaftarkan faktor kedua:

// Completes MFA enrollment once a verification code is obtained.
async function finishEnrollMultiFactor(verificationCode) {
  // Ask user for the verification code. Then:
  const cred = PhoneAuthProvider.credential(verificationId, verificationCode);
  const multiFactorAssertion = PhoneMultiFactorGenerator.assertion(cred);
 
  // Complete enrollment.
  await multiFactor(getAuth().currentUser)
    .enroll(multiFactorAssertion)
    .catch(function (error) {
      alert(`Error finishing second factor enrollment. ${error}`);
      throw error;
    });
  verificationId = null;
}

Selanjutnya, cari fungsi signIn dan tambahkan alur kontrol berikut yang meminta pengguna yang terdaftar di MFA untuk memasukkan faktor kedua mereka:

async function signIn() {
  // Sign in Firebase using popup auth and Google as the identity provider.
  var provider = new GoogleAuthProvider();
  await signInWithPopup(getAuth(), provider)
    .then(function (userCredential) {
      // User successfully signed in and is not enrolled with a second factor.
    })
    .catch(function (error) {
      if (error.code == "auth/multi-factor-auth-required") {
        multiFactorResolver = getMultiFactorResolver(getAuth(), error);
        displaySecondFactor(multiFactorResolver.hints);
      } else {
        alert(`Error signing in user. ${error}`);
      }
    });
}

Implementasi lainnya, termasuk fungsi yang dipanggil di sini, sudah selesai. Untuk mengetahui cara kerjanya, telusuri bagian file lainnya.

4. Coba login dengan MFA di emulator

Sekarang coba implementasi MFA. Pastikan emulator Anda masih berjalan dan buka aplikasi yang dihosting secara lokal di localhost:5170. Coba login, dan jika diminta untuk memberikan kode MFA, Anda akan melihat kode MFA di jendela terminal.

Karena emulator sepenuhnya mendukung Autentikasi Multi-Faktor, lingkungan pengembangan Anda dapat sepenuhnya mandiri.

Untuk mempelajari lebih lanjut cara menerapkan MFA, lihat dokumen referensi kami.

5. Membuat fungsi pemblokiran

Beberapa aplikasi dimaksudkan untuk digunakan hanya oleh sekelompok pengguna tertentu. Untuk kasus tersebut, Anda perlu membuat persyaratan khusus agar pengguna dapat mendaftar atau login ke aplikasi Anda.

Itulah yang disediakan oleh fungsi pemblokiran: cara untuk membuat persyaratan otentikasi khusus. Fungsi tersebut adalah Cloud Functions, tetapi tidak seperti kebanyakan fungsi, fungsi tersebut berjalan secara sinkron saat pengguna mencoba mendaftar atau login.

CATATAN: Fungsi pemblokiran dapat menerima pengguna tanpa mengubah, menerima, dan mengubah pengguna -- yang berguna untuk menerapkan klaim kustom, atau menolak pengguna.

Ada dua peristiwa yang dapat memicu fungsi pemblokiran:

• Peristiwa beforeUserCreated: dipicu sebelum akun pengguna dibuat – dapat digunakan untuk menentukan persyaratan bagi pengguna untuk membuat akun
• Peristiwa beforeUserSignedIn: dipicu sebelum pengguna login – dapat digunakan untuk menentukan persyaratan bagi pengguna untuk login

Untuk membuat fungsi pemblokiran, buka functions/index.js di editor dan cari fungsi beforecreated yang dijadikan sebagai komentar.

Ganti dengan kode berikut yang hanya mengizinkan pengguna dengan domain example.com untuk membuat akun:

exports.beforecreated = beforeUserCreated((event) => {
  const user = event.data;
  // Only users of a specific domain can sign up.
  if (!user.email || !user.email.endsWith("@example.com")) {
    throw new HttpsError("invalid-argument", "Unauthorized email");
  }
});

6. Mencoba fungsi pemblokiran di emulator

Untuk mencoba fungsi pemblokiran, pastikan emulator Anda sedang berjalan, dan logout dari aplikasi web di localhost:5170.

Kemudian, coba buat akun dengan alamat email yang tidak diakhiri dengan example.com. Fungsi pemblokiran akan mencegah keberhasilan operasi.

Sekarang, coba lagi dengan alamat email yang diakhiri dengan example.com. Akun akan berhasil dibuat.

Dengan fungsi pemblokiran, Anda dapat membuat batasan apa pun yang Anda perlukan seputar autentikasi. Untuk mempelajari lebih lanjut, lihat dokumen referensi.

Rangkuman

Selamat! Anda telah menambahkan Autentikasi Multi-Faktor ke aplikasi web untuk membantu pengguna menjaga keamanan akun mereka, lalu Anda membuat persyaratan khusus bagi pengguna untuk mendaftar menggunakan fungsi pemblokiran. Anda mendapatkan gif!