Buka konsol

Melakukan Autentikasi dengan Firebase Menggunakan Nomor Telepon pada JavaScript

Anda dapat menggunakan Firebase Authentication untuk membuat pengguna login dengan mengirim pesan SMS ke ponselnya. Selanjutnya, pengguna login menggunakan kode sekali pakai yang terdapat dalam pesan SMS tersebut.

Cara termudah untuk menambahkan login dengan nomor telepon ke aplikasi adalah menggunakan FirebaseUI, yang mencakup widget login drop-in yang mengimplementasikan proses login untuk login dengan nomor telepon serta login berbasis sandi dan gabungan. Dokumen ini berisi penjelasan mengenai cara mengimplementasikan proses login dengan nomor telepon menggunakan Firebase SDK.

Sebelum memulai

Jika Anda belum melakukannya, salin cuplikan inisialisasi dari Firebase console ke project Anda seperti yang dijelaskan di bagian Menambahkan Firebase ke project JavaScript Anda.

Masalah keamanan

Autentikasi hanya melalui nomor telepon, meski nyaman, kurang aman dibandingkan metode lain yang tersedia, karena nomor tersebut dapat berpindah tangan antara pengguna dengan mudah. Selain itu, pada perangkat yang memuat beberapa profil pengguna, setiap pengguna yang dapat menerima pesan SMS dapat login ke akun menggunakan nomor telepon perangkat tersebut.

Jika Anda menggunakan fitur login dengan nomor telepon di aplikasi, Anda harus menawarkannya bersama metode login yang lebih aman, dan memberi tahu pengguna tentang kelemahan keamanan jika menggunakan metode login dengan nomor telepon.

Mengaktifkan login dengan Nomor Telepon untuk project Firebase

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

  1. Di Firebase console, buka bagian Authentication.
  2. Di halaman Metode Login, aktifkan metode login dengan Nomor Telepon.
  3. Pada halaman yang sama, jika domain yang akan meng-hosting aplikasi tidak tercantum di bagian domain pengalihan OAuth, tambahkan domain Anda.

Kuota permintaan login dengan nomor telepon di Firebase cukup tinggi, sehingga sebagian besar aplikasi tidak akan terpengaruh. Namun, jika Anda perlu membuat banyak sekali pengguna login dengan autentikasi telepon, Anda mungkin harus mengupgrade paket harga. Lihat halaman harga.

Menyiapkan pemverifikasi reCAPTCHA

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

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

Objek RecaptchaVerifier mendukung reCAPTCHA tak terlihat yang seringkali dapat memverifikasi pengguna tanpa memerlukan tindakan apa pun dari pengguna, serta widget reCAPTCHA yang selalu mengharuskan interaksi pengguna agar verifikasi berhasil diselesaikan.

reCAPTCHA yang dirender dapat diterjemahkan sesuai preferensi pengguna dengan mengupdate kode bahasa di instance Auth sebelum rendering reCAPTCHA. Penerjemahan yang disebutkan di atas juga akan berlaku untuk pesan SMS yang dikirim ke pengguna yang berisi kode verifikasi.

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

Menggunakan reCAPTCHA tak terlihat

Untuk menggunakan reCAPTCHA tak terlihat, buat objek RecaptchaVerifier dengan menyetel parameter size ke invisible, sehingga ID tombol yang mengirimkan formulir login akan ditetapkan. Misalnya:

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

Menggunakan widget reCAPTCHA

Untuk menggunakan widget reCAPTCHA terlihat, buat elemen di halaman untuk menampung widget itu, lalu buat objek RecaptchaVerifier, yang menentukan ID container apabila Anda melakukan itu. Misalnya:

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

Opsional: Menetapkan parameter reCAPTCHA

Anda dapat menyetel fungsi callback opsional pada objek RecaptchaVerifier yang akan dipanggil ketika pengguna berhasil memecahkan reCAPTCHA atau ketika reCAPTCHA berakhir sebelum pengguna mengirimkan formulir:

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

Opsional: Merender reCAPTCHA di awal

Jika Anda ingin merender reCAPTCHA di awal sebelum mengirimkan permintaan login, panggil render:

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

Setelah render berhasil, Anda akan memperoleh ID widget reCAPTCHA yang dapat digunakan untuk melakukan panggilan ke API reCAPTCHA:

var recaptchaResponse = grecaptcha.getResponse(window.recaptchaWidgetId);

Mengirim kode verifikasi ke ponsel pengguna

Untuk memulai metode login dengan nomor telepon, perlihatkan antarmuka yang akan meminta pengguna memasukkan nomor telepon, lalu panggil signInWithPhoneNumber untuk meminta Firebase agar mengirimkan kode autentikasi ke ponsel pengguna melalui SMS:

  1. Dapatkan nomor telepon pengguna.

    Persyaratan hukum yang berlaku berbeda-beda, tetapi sebagai praktik terbaik dan untuk menetapkan ekspektasi pengguna, sebaiknya informasikan bahwa jika mereka menggunakan metode login melalui telepon, akan muncul pesan SMS untuk melakukan verifikasi dan berlaku tarif standar.

  2. Gunakan signInWithPhoneNumber untuk meneruskan nomor telepon pengguna dan RecaptchaVerifier yang Anda buat sebelumnya.
    var phoneNumber = getPhoneNumberFromUserInput();
    var appVerifier = window.recaptchaVerifier;
    firebase.auth().signInWithPhoneNumber(phoneNumber, appVerifier)
        .then(function (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(function (error) {
          // Error; SMS not sent
          // ...
        });
    Jika signInWithPhoneNumber menampilkan error, 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 menampilkan pertanyaan reCAPTCHA kepada pengguna, dan jika pengguna berhasil menjawabnya, metode ini meminta agar Firebase Authentication mengirimkan kode verifikasi ke ponsel pengguna melalui SMS.

Membuat pengguna login dengan kode verifikasi

Setelah panggilan ke signInWithPhoneNumber berhasil, minta pengguna memasukkan kode verifikasi yang diterimanya melalui SMS. Selanjutnya, buat pengguna login dengan meneruskan kode tersebut ke metode confirm pada objek ConfirmationResult yang sebelumnya diteruskan ke penangan pemenuhan signInWithPhoneNumber (yaitu, blok then-nya). Misalnya:

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

Jika panggilan ke confirm berhasil, pengguna berhasil login.

Memperoleh objek AuthCredential menengah

Jika Anda memerlukan objek AuthCredential untuk akun pengguna, teruskan kode verifikasi dari hasil konfirmasi dan kode verifikasi ke PhoneAuthProvider.credential dan bukan memanggil confirm:

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

Selanjutnya, Anda dapat membuat pengguna login dengan kredensial:

firebase.auth().signInWithCredential(credential);

Menguji dengan nomor telepon yang disetujui

Anda dapat memberi akses ke nomor telepon tertentu untuk proses pengembangan melalui Firebase console. Dengan memberi akses ke nomor telepon, Anda akan menerima manfaat berikut:

  • Menguji autentikasi nomor telepon tanpa menghabiskan kuota penggunaan Anda.
  • Menguji autentikasi nomor telepon tanpa mengirim pesan SMS yang sebenarnya.
  • Menjalankan tes berurutan dengan nomor telepon yang sama tanpa hambatan. Tindakan ini meminimalkan risiko penolakan selama proses peninjauan App store jika peninjau kebetulan menggunakan nomor telepon yang sama untuk melakukan pengujian.
  • Pengujian langsung di lingkungan pengembangan tanpa ada upaya tambahan, seperti kemampuan untuk melakukan pengembangan dalam simulator iOS atau emulator Android tanpa layanan Google Play.
  • Menulis pengujian integrasi tanpa diblokir oleh pemeriksaan keamanan yang biasanya diterapkan pada nomor telepon asli di lingkungan produksi.

Nomor telepon yang akan diberi akses harus memenuhi persyaratan berikut:

  1. Pastikan Anda menggunakan nomor fiksi yang belum ada. Firebase Authentication tidak mengizinkan Anda untuk memberi akses ke nomor telepon yang memang ada dan digunakan oleh pengguna sebenarnya. Salah satu opsinya adalah menggunakan nomor berawalan 555 sebagai nomor telepon pengujian di Amerika Serikat, misalnya: +1 650-555-3434
  2. Panjang nomor telepon dan batasan lainnya harus menggunakan format yang benar. Nomor telepon tersebut akan melalui validasi yang sama seperti nomor telepon pengguna sebenarnya.
  3. Anda dapat menambahkan hingga 10 nomor telepon untuk proses pengembangan.
  4. Gunakan nomor/kode telepon pengujian yang sulit ditebak dan sering diubah.

Memberi akses ke nomor telepon dan kode verifikasi

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

Pengujian manual

Anda dapat langsung mulai menggunakan nomor telepon yang diberi akses pada aplikasi. Hal ini memungkinkan Anda melakukan pengujian manual selama tahap pengembangan tanpa mengalami masalah kuota atau hambatan. Anda juga dapat menguji langsung dari simulator iOS atau emulator Android tanpa menginstal layanan Google Play.

Ketika Anda memberikan nomor telepon yang telah diberi akses dan mengirim kode verifikasi, sebenarnya tidak ada SMS yang dikirim. Sebagai gantinya, Anda harus memberikan kode verifikasi yang dikonfigurasi sebelumnya untuk menyelesaikan login.

Setelah login selesai, pengguna Firebase dibuat dengan nomor telepon itu. Pengguna tersebut memiliki perilaku dan properti seperti halnya pengguna nomor telepon asli dan dapat mengakses Realtime Database/Cloud Firestore serta layanan lainnya dengan cara yang sama. Token ID yang dibuat selama proses ini memiliki tanda tangan yang sama dengan pengguna nomor telepon yang sebenarnya.

Pilihan lainnya adalah menetapkan peran pengujian melalui klaim khusus pada pengguna ini untuk membedakan mereka dari pengguna palsu jika Anda ingin membatasi akses lebih lanjut.

Pengujian 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 notifikasi push senyap di iOS. Dengan begitu, otomatisasi pengujian dimungkinkan dalam proses ini dan lebih mudah diterapkan. Selain itu, API ini membantu menyediakan kemampuan untuk menguji proses verifikasi instan di Android.

Di web, tetapkan appVerificationDisabledForTesting ke true sebelum melakukan rendering firebase.auth.RecaptchaVerifier. Tindakan ini akan menyelesaikan reCAPTCHA secara otomatis, sehingga memungkinkan Anda untuk meneruskan nomor telepon tanpa harus menyelesaikannya secara manual. Perhatikan bahwa meskipun reCAPTCHA dinonaktifkan, menggunakan nomor telepon yang tidak diberi akses akan menggagalkan proses login. Hanya nomor telepon yang diberi akses 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 whitelisted testVerificationCode above.
      return confirmationResult.confirm(testVerificationCode)
    }).catch(function (error) {
      // Error; SMS not sent
      // ...
    });

Pemverifikasi aplikasi reCAPTCHA fiktif yang terlihat dan tidak terlihat berperilaku berbeda ketika verifikasi aplikasi dinonaktifkan:

  • reCAPTCHA Terlihat: Ketika di-render melalui appVerifier.render(), reCAPTCHA terlihat akan otomatis selesai dengan sendirinya setelah penundaan sepersekian detik. Hal ini sama seperti pengguna mengklik reCAPTCHA setelah rendering. Respons reCAPTCHA akan berakhir setelah beberapa waktu dan kemudian diselesaikan secara otomatis lagi.
  • reCAPTCHA Tak Terlihat: ReCAPTCHA tak terlihat tidak melakukan penyelesaian otomatis pada proses rendering, tetapi melakukannya pada panggilan appVerifier.verify() atau ketika anchor tombol reCAPTCHA diklik setelah penundaan sepersekian detik. Demikian pula, respons akan berakhir setelah beberapa waktu dan hanya akan melakukan penyelesaian otomatis baik setelah pemanggilan appVerifier.verify() atau anchor tombol reCAPTCHA diklik lagi.

Setiap kali reCAPTCHA fiktif terselesaikan, fungsi callback yang sesuai dipicu seperti yang diharapkan dengan respons palsu. Kedaluwarsa akan terpicu apabila callback kedaluwarsa juga ditentukan.

Langkah berikutnya

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

  • Di aplikasi Anda, cara yang direkomendasikan untuk mengetahui status autentikasi pengguna adalah dengan menyetel observer pada objek Auth. Selanjutnya, Anda dapat memperoleh informasi profil dasar pengguna dari objek User. Lihat Mengelola Pengguna.

  • Dalam Aturan Keamanan Firebase Realtime Database dan Cloud Storage, Anda dapat memperoleh ID unik milik pengguna yang login dari variabel auth dan menggunakannya untuk mengontrol data yang dapat diakses pengguna.

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

Agar pengguna logout, panggil signOut:

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