Google berkomitmen untuk mendorong terwujudnya keadilan ras bagi komunitas Kulit Hitam. Lihat caranya.

Otentikasi dengan Firebase dengan Nomor Telepon Menggunakan JavaScript

Anda dapat menggunakan Firebase Authentication untuk membuat pengguna login dengan mengirimkan pesan SMS ke ponsel pengguna. Pengguna masuk menggunakan kode satu kali yang terdapat dalam pesan SMS.

Cara termudah untuk menambahkan login dengan nomor telepon ke aplikasi Anda adalah dengan menggunakan FirebaseUI , yang menyertakan widget login drop-in yang menerapkan alur login untuk login dengan nomor telepon, serta login berbasis sandi dan gabungan -di. Dokumen ini menjelaskan cara menerapkan alur masuk dengan nomor telepon menggunakan SDK Firebase.

Sebelum kamu memulai

Jika Anda belum melakukannya, salin cuplikan inisialisasi dari Firebase console ke proyek Anda seperti yang dijelaskan dalam Menambahkan Firebase ke proyek JavaScript Anda .

Perhatian pada keamanan

Otentikasi hanya menggunakan nomor telepon, meskipun nyaman, kurang aman dibandingkan metode lain yang tersedia, karena kepemilikan nomor telepon dapat dengan mudah ditransfer antar pengguna. Selain itu, pada perangkat dengan beberapa profil pengguna, setiap pengguna yang dapat menerima pesan SMS dapat masuk ke akun menggunakan nomor telepon perangkat.

Jika Anda menggunakan proses masuk berbasis nomor telepon di aplikasi Anda, Anda harus menawarkannya bersama dengan metode masuk yang lebih aman, dan memberi tahu pengguna tentang pengorbanan keamanan menggunakan masuk dengan nomor telepon.

Aktifkan masuk dengan Nomor Telepon untuk proyek Firebase Anda

Untuk membuat pengguna masuk melalui SMS, Anda harus terlebih dahulu mengaktifkan metode masuk dengan Nomor Telepon untuk proyek Firebase Anda:

  1. Di Firebase console , buka bagian Otentikasi .
  2. Pada halaman Metode Masuk , aktifkan metode masuk Nomor Telepon .
  3. Pada halaman yang sama, jika domain yang akan menghosting aplikasi Anda tidak tercantum di bagian domain pengalihan OAuth , tambahkan domain Anda.

Kuota permintaan masuk nomor telepon Firebase cukup tinggi sehingga sebagian besar aplikasi tidak akan terpengaruh. Namun, jika Anda perlu masuk dengan volume pengguna yang sangat tinggi dengan autentikasi telepon, Anda mungkin perlu meningkatkan paket harga Anda. Lihat halaman harga .

Siapkan pemverifikasi reCAPTCHA

Sebelum Anda dapat membuat pengguna login dengan nomor telepon mereka, Anda harus menyiapkan pemverifikasi reCAPTCHA Firebase. Firebase menggunakan reCAPTCHA untuk mencegah penyalahgunaan, seperti dengan memastikan bahwa permintaan verifikasi nomor telepon berasal dari salah satu domain yang diizinkan aplikasi Anda.

Anda tidak perlu menyiapkan klien reCAPTCHA secara manual; saat Anda menggunakan objek RecaptchaVerifier SDK Firebase, Firebase secara otomatis membuat dan menangani semua kunci dan rahasia klien yang diperlukan.

Objek RecaptchaVerifier mendukung reCAPTCHA yang tidak terlihat , yang sering dapat memverifikasi pengguna tanpa memerlukan tindakan pengguna apa pun, serta widget reCAPTCHA, yang selalu membutuhkan interaksi pengguna agar berhasil diselesaikan.

reCAPTCHA yang dirender yang mendasarinya dapat dilokalkan ke preferensi pengguna dengan memperbarui kode bahasa pada instance Auth sebelum merender reCAPTCHA. Lokalisasi yang disebutkan di atas juga akan berlaku untuk pesan SMS yang dikirim ke pengguna, yang berisi kode verifikasi.

Web version 9

import { getAuth } from "firebase/auth";

const auth = getAuth();
auth.languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();

Web version 8

firebase.auth().languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();

Gunakan reCAPTCHA yang tidak terlihat

Untuk menggunakan reCAPTCHA tak terlihat, buat objek RecaptchaVerifier dengan parameter size disetel ke invisible , yang menentukan ID tombol yang mengirimkan formulir masuk Anda. Sebagai contoh:

Web version 9

import { getAuth, RecaptchaVerifier } from "firebase/auth";

const auth = getAuth();
window.recaptchaVerifier = new RecaptchaVerifier('sign-in-button', {
  'size': 'invisible',
  'callback': (response) => {
    // reCAPTCHA solved, allow signInWithPhoneNumber.
    onSignInSubmit();
  }
}, auth);

Web version 8

window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('sign-in-button', {
  'size': 'invisible',
  'callback': (response) => {
    // reCAPTCHA solved, allow signInWithPhoneNumber.
    onSignInSubmit();
  }
});

Gunakan widget reCAPTCHA

Untuk menggunakan widget reCAPTCHA yang terlihat, buat elemen di halaman Anda untuk memuat widget, lalu buat objek RecaptchaVerifier , yang menentukan ID penampung saat Anda melakukannya. Sebagai contoh:

Web version 9

import { getAuth, RecaptchaVerifier } from "firebase/auth";

const auth = getAuth();
window.recaptchaVerifier = new RecaptchaVerifier('recaptcha-container', {}, auth);

Web version 8

window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container');

Opsional: Tentukan parameter reCAPTCHA

Anda dapat secara opsional menyetel fungsi panggilan balik pada objek RecaptchaVerifier yang dipanggil saat pengguna menyelesaikan reCAPTCHA atau reCAPTCHA kedaluwarsa sebelum pengguna mengirimkan formulir:

Web version 9

import { getAuth, RecaptchaVerifier } from "firebase/auth";

const auth = getAuth();
window.recaptchaVerifier = new RecaptchaVerifier('recaptcha-container', {
  'size': 'normal',
  'callback': (response) => {
    // reCAPTCHA solved, allow signInWithPhoneNumber.
    // ...
  },
  'expired-callback': () => {
    // Response expired. Ask user to solve reCAPTCHA again.
    // ...
  }
}, auth);

Web version 8

window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container', {
  'size': 'normal',
  'callback': (response) => {
    // reCAPTCHA solved, allow signInWithPhoneNumber.
    // ...
  },
  'expired-callback': () => {
    // Response expired. Ask user to solve reCAPTCHA again.
    // ...
  }
});

Opsional: Pra-render reCAPTCHA

Jika Anda ingin melakukan pra-render reCAPTCHA sebelum mengirimkan permintaan masuk, panggil render :

Web version 9

recaptchaVerifier.render().then((widgetId) => {
  window.recaptchaWidgetId = widgetId;
});

Web version 8

recaptchaVerifier.render().then((widgetId) => {
  window.recaptchaWidgetId = widgetId;
});

Setelah render diselesaikan, Anda mendapatkan ID widget reCAPTCHA, yang dapat Anda gunakan untuk melakukan panggilan ke reCAPTCHA API:

Web version 9

const recaptchaResponse = grecaptcha.getResponse(recaptchaWidgetId);

Web version 8

const recaptchaResponse = grecaptcha.getResponse(recaptchaWidgetId);

Kirim kode verifikasi ke ponsel pengguna

Untuk memulai proses masuk dengan nomor telepon, berikan antarmuka kepada pengguna yang meminta mereka untuk memberikan nomor teleponnya, lalu panggil signInWithPhoneNumber untuk meminta Firebase mengirimkan kode autentikasi ke ponsel pengguna melalui SMS:

  1. Dapatkan nomor telepon pengguna.

    Persyaratan hukum berbeda-beda, tetapi sebagai praktik terbaik dan untuk menetapkan harapan bagi pengguna Anda, Anda harus memberi tahu mereka bahwa jika mereka menggunakan login melalui telepon, mereka mungkin menerima pesan SMS untuk verifikasi dan tarif standar berlaku.

  2. Panggil signInWithPhoneNumber , berikan nomor telepon pengguna dan RecaptchaVerifier yang Anda buat sebelumnya.

    Web version 9

    import { getAuth, signInWithPhoneNumber } from "firebase/auth";
    
    const phoneNumber = getPhoneNumberFromUserInput();
    const appVerifier = window.recaptchaVerifier;
    
    const auth = getAuth();
    signInWithPhoneNumber(auth, phoneNumber, appVerifier)
        .then((confirmationResult) => {
          // SMS sent. Prompt user to type the code from the message, then sign the
          // user in with confirmationResult.confirm(code).
          window.confirmationResult = confirmationResult;
          // ...
        }).catch((error) => {
          // Error; SMS not sent
          // ...
        });

    Web version 8

    const phoneNumber = getPhoneNumberFromUserInput();
    const appVerifier = window.recaptchaVerifier;
    firebase.auth().signInWithPhoneNumber(phoneNumber, appVerifier)
        .then((confirmationResult) => {
          // SMS sent. Prompt user to type the code from the message, then sign the
          // user in with confirmationResult.confirm(code).
          window.confirmationResult = confirmationResult;
          // ...
        }).catch((error) => {
          // Error; SMS not sent
          // ...
        });
    Jika signInWithPhoneNumber menghasilkan kesalahan, setel ulang reCAPTCHA agar pengguna dapat mencoba lagi:
    grecaptcha.reset(window.recaptchaWidgetId);
    
    // Or, if you haven't stored the widget ID:
    window.recaptchaVerifier.render().then(function(widgetId) {
      grecaptcha.reset(widgetId);
    });
    

Metode signInWithPhoneNumber mengeluarkan tantangan reCAPTCHA kepada pengguna, dan jika pengguna melewati tantangan, meminta Firebase Authentication mengirim pesan SMS yang berisi kode verifikasi ke ponsel pengguna.

Masuk pengguna dengan kode verifikasi

Setelah panggilan ke signInWithPhoneNumber berhasil, minta pengguna untuk mengetikkan kode verifikasi yang mereka terima melalui SMS. Kemudian, masuklah pengguna dengan meneruskan kode ke metode confirm objek ConfirmationResult yang diteruskan ke pengendali pemenuhan signInWithPhoneNumber (yaitu, bloknya then ). Sebagai contoh:

Web version 9

const code = getCodeFromUserInput();
confirmationResult.confirm(code).then((result) => {
  // User signed in successfully.
  const user = result.user;
  // ...
}).catch((error) => {
  // User couldn't sign in (bad verification code?)
  // ...
});

Web version 8

const code = getCodeFromUserInput();
confirmationResult.confirm(code).then((result) => {
  // User signed in successfully.
  const user = result.user;
  // ...
}).catch((error) => {
  // User couldn't sign in (bad verification code?)
  // ...
});

Jika panggilan untuk confirm berhasil, pengguna berhasil masuk.

Dapatkan objek AuthCredential perantara

Jika Anda perlu mendapatkan objek AuthCredential untuk akun pengguna, berikan kode verifikasi dari hasil konfirmasi dan kode verifikasi ke PhoneAuthProvider.credential alih-alih memanggil confirm :

var credential = firebase.auth.PhoneAuthProvider.credential(confirmationResult.verificationId, code);

Kemudian, Anda dapat memasukkan pengguna dengan kredensial:

firebase.auth().signInWithCredential(credential);

Tes dengan nomor telepon fiktif

Anda dapat menyiapkan nomor telepon fiktif untuk pengembangan melalui Firebase console. Pengujian dengan nomor telepon fiktif memberikan manfaat berikut:

  • Uji otentikasi nomor telepon tanpa menghabiskan kuota penggunaan Anda.
  • Uji otentikasi nomor telepon tanpa mengirim pesan SMS yang sebenarnya.
  • Jalankan tes berturut-turut dengan nomor telepon yang sama tanpa dibatasi. Ini meminimalkan risiko penolakan selama proses peninjauan App store jika pengulas kebetulan menggunakan nomor telepon yang sama untuk pengujian.
  • Uji dengan mudah di lingkungan pengembangan tanpa upaya tambahan apa pun, seperti kemampuan untuk mengembangkan dalam simulator iOS atau emulator Android tanpa Layanan Google Play.
  • Tulis tes integrasi tanpa diblokir oleh pemeriksaan keamanan yang biasanya diterapkan pada nomor telepon asli di lingkungan produksi.

Nomor telepon fiktif harus memenuhi persyaratan berikut:

  1. Pastikan Anda menggunakan nomor telepon yang memang fiktif, dan belum ada. Firebase Authentication tidak mengizinkan Anda menyetel nomor telepon yang ada yang digunakan oleh pengguna sebenarnya sebagai nomor uji. Salah satu opsi adalah menggunakan 555 nomor awalan sebagai nomor telepon uji AS, misalnya: +1 650-555-3434
  2. Nomor telepon harus diformat dengan benar untuk panjang dan batasan lainnya. Mereka masih akan melalui validasi yang sama dengan nomor telepon pengguna sebenarnya.
  3. Anda dapat menambahkan hingga 10 nomor telepon untuk pengembangan.
  4. Gunakan nomor/kode telepon percobaan yang sulit ditebak dan sering-seringlah diubah.

Buat nomor telepon fiktif dan kode verifikasi

  1. Di Firebase console , buka bagian Otentikasi .
  2. Di tab Metode masuk , aktifkan penyedia Telepon jika Anda belum melakukannya.
  3. Buka menu Nomor telepon untuk menguji akordeon.
  4. Berikan nomor telepon yang ingin Anda uji, misalnya: +1 650-555-3434 .
  5. Berikan kode verifikasi 6 digit untuk nomor tersebut, misalnya: 654321 .
  6. Tambahkan nomornya. Jika perlu, Anda dapat menghapus nomor telepon dan kodenya dengan mengarahkan kursor ke baris yang sesuai dan mengklik ikon tempat sampah.

Pengujian manual

Anda dapat langsung mulai menggunakan nomor telepon fiktif di aplikasi Anda. Ini memungkinkan Anda melakukan pengujian manual selama tahap pengembangan tanpa mengalami masalah kuota atau pembatasan. Anda juga dapat menguji langsung dari simulator iOS atau emulator Android tanpa menginstal Layanan Google Play.

Saat Anda memberikan nomor telepon fiktif dan mengirim kode verifikasi, tidak ada SMS yang dikirim. Sebagai gantinya, Anda harus memberikan kode verifikasi yang dikonfigurasi sebelumnya untuk menyelesaikan proses masuk.

Saat proses masuk selesai, pengguna Firebase dibuat dengan nomor telepon tersebut. Pengguna memiliki perilaku dan properti yang sama dengan pengguna nomor telepon asli, dan dapat mengakses Realtime Database/Cloud Firestore dan layanan lainnya dengan cara yang sama. Token ID yang dicetak selama proses ini memiliki tanda tangan yang sama dengan pengguna nomor telepon asli.

Opsi lainnya adalah menetapkan peran uji melalui klaim khusus pada pengguna ini untuk membedakan mereka sebagai pengguna palsu jika Anda ingin membatasi akses lebih lanjut.

Tes integrasi

Selain pengujian manual, Firebase Authentication menyediakan API untuk membantu menulis pengujian integrasi untuk pengujian autentikasi ponsel. API ini menonaktifkan verifikasi aplikasi dengan menonaktifkan persyaratan reCAPTCHA di web dan pemberitahuan push diam di iOS. Ini memungkinkan pengujian otomatisasi dalam aliran ini dan lebih mudah diterapkan. Selain itu, mereka membantu memberikan kemampuan untuk menguji alur verifikasi instan di Android.

Di web, setel appVerificationDisabledForTesting ke true sebelum merender firebase.auth.RecaptchaVerifier . Ini menyelesaikan reCAPTCHA secara otomatis, memungkinkan Anda meneruskan nomor telepon tanpa menyelesaikannya secara manual. Perhatikan bahwa meskipun reCAPTCHA dinonaktifkan, menggunakan nomor telepon non-fiksi akan tetap gagal untuk menyelesaikan proses masuk. Hanya nomor telepon fiksi yang dapat digunakan dengan API ini.

// Turn off phone auth app verification.
firebase.auth().settings.appVerificationDisabledForTesting = true;

var phoneNumber = "+16505554567";
var testVerificationCode = "123456";

// This will render a fake reCAPTCHA as appVerificationDisabledForTesting is true.
// This will resolve after rendering without app verification.
var appVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container');
// signInWithPhoneNumber will call appVerifier.verify() which will resolve with a fake
// reCAPTCHA response.
firebase.auth().signInWithPhoneNumber(phoneNumber, appVerifier)
    .then(function (confirmationResult) {
      // confirmationResult can resolve with the fictional testVerificationCode above.
      return confirmationResult.confirm(testVerificationCode)
    }).catch(function (error) {
      // Error; SMS not sent
      // ...
    });

Pemverifikasi aplikasi reCAPTCHA tiruan yang terlihat dan tidak terlihat berperilaku berbeda saat verifikasi aplikasi dinonaktifkan:

  • ReCAPTCHA yang terlihat : Saat reCAPTCHA yang terlihat dirender melalui appVerifier.render() , reCAPTCHA yang terlihat secara otomatis akan hilang dengan sendirinya setelah penundaan sepersekian detik. Ini sama dengan pengguna yang mengklik reCAPTCHA segera setelah rendering. Respons reCAPTCHA akan kedaluwarsa setelah beberapa waktu dan kemudian diselesaikan secara otomatis lagi.
  • ReCAPTCHA yang tidak terlihat : ReCAPTCHA yang tidak terlihat tidak menyelesaikan secara otomatis saat rendering dan sebaliknya melakukannya pada panggilan appVerifier.verify() atau saat jangkar tombol reCAPTCHA diklik setelah penundaan sepersekian detik. Demikian pula, respons akan kedaluwarsa setelah beberapa waktu dan hanya akan diselesaikan secara otomatis baik setelah panggilan appVerifier.verify() atau saat jangkar tombol reCAPTCHA diklik lagi.

Setiap kali reCAPTCHA tiruan diselesaikan, fungsi panggilan balik yang sesuai dipicu seperti yang diharapkan dengan respons palsu. Jika panggilan balik kedaluwarsa juga ditentukan, itu akan memicu pada kedaluwarsa.

Langkah selanjutnya

Setelah pengguna masuk untuk pertama kalinya, akun pengguna baru dibuat dan ditautkan ke kredensial—yaitu, nama pengguna dan sandi, nomor telepon, atau informasi penyedia autentikasi—yang digunakan pengguna untuk masuk. Akun baru ini disimpan sebagai bagian dari proyek Firebase Anda, dan dapat digunakan untuk mengidentifikasi pengguna di setiap aplikasi dalam proyek Anda, terlepas dari cara pengguna masuk.

  • Di aplikasi Anda, cara yang disarankan untuk mengetahui status autentikasi pengguna adalah dengan menyetel pengamat pada objek Auth . Anda kemudian bisa mendapatkan informasi profil dasar pengguna dari objek User . Lihat Kelola Pengguna .

  • Di Aturan Keamanan Firebase Realtime Database dan Cloud Storage , Anda bisa mendapatkan ID pengguna unik pengguna yang masuk dari variabel auth , dan menggunakannya untuk mengontrol data apa yang dapat diakses pengguna.

Anda dapat mengizinkan pengguna untuk masuk ke aplikasi Anda menggunakan beberapa penyedia autentikasi dengan menautkan kredensial penyedia autentikasi ke akun pengguna yang ada.

Untuk mengeluarkan pengguna, panggil signOut :

Web version 9

import { getAuth, signOut } from "firebase/auth";

const auth = getAuth();
signOut(auth).then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});

Web version 8

firebase.auth().signOut().then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});