Lihat yang baru dari Firebase di Google I/O 2022. Pelajari lebih lanjut

Otentikasi Telepon

Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.

otentikasi telepon memungkinkan pengguna untuk masuk ke Firebase menggunakan ponsel mereka sebagai authenticator. Pesan SMS dikirim ke pengguna (menggunakan nomor telepon yang disediakan) yang berisi kode unik. Setelah kode telah resmi, pengguna dapat masuk ke Firebase.

nomor telepon yang pengguna akhir menyediakan otentikasi akan dikirim dan disimpan oleh Google untuk meningkatkan spam dan pencegahan penyalahgunaan di layanan Google, termasuk, tapi tidak terbatas pada Firebase. Pengembang harus memastikan mereka memiliki persetujuan pengguna akhir yang tepat sebelum menggunakan Firebase Authentication nomor telepon masuk service.authentication

Firebase Telepon Authentication tidak didukung di semua negara. Silakan lihat mereka FAQs untuk informasi lebih lanjut.

Mendirikan

Sebelum memulai dengan Telepon Authentication, pastikan Anda telah mengikuti langkah-langkah ini:

  1. Aktifkan Phone sebagai metode Sign-In di konsol Firebase .
  2. Android : Jika Anda belum mengatur aplikasi Anda SHA-1 hash di Firebase konsol , melakukannya. Lihat Otentikasi Klien Anda untuk informasi tentang menemukan aplikasi Anda SHA-1 hash.
  3. iOS : Dalam Xcode, memungkinkan pemberitahuan push untuk proyek Anda & memastikan kunci APN otentikasi Anda dikonfigurasi dengan Firebase Cloud Messaging (FCM) . Untuk melihat mendalam penjelasan dari langkah ini, melihat Firebase iOS Telepon Tupoksi dokumentasi.
  4. Web : Pastikan bahwa Anda telah menambahkan domain aplikasi Anda pada Firebase konsol , di bawah OAuth domain redirect .

Catatan ; Nomor telepon masuk hanya tersedia untuk digunakan pada perangkat nyata dan web. Untuk menguji aliran otentikasi Anda pada emulator perangkat, silakan lihat Testing .

Penggunaan

The Firebase Authentication SDK untuk Flutter menyediakan dua cara individu untuk menandatangani pengguna dengan nomor telepon mereka. Asli (misalnya Android & iOS) platform menyediakan fungsionalitas yang berbeda untuk memvalidasi nomor telepon dari web, oleh karena itu dua metode yang ada untuk setiap platform eksklusif:

  • Landasan asli : verifyPhoneNumber .
  • Web Platform : signInWithPhoneNumber .

Asli: verifyPhoneNumber

Pada platform asli, nomor telepon pengguna harus terlebih dahulu diverifikasi dan kemudian pengguna baik dapat masuk atau menghubungkan account mereka dengan PhoneAuthCredential .

Pertama, Anda harus meminta pengguna untuk nomor telepon mereka. Setelah disediakan, memanggil verifyPhoneNumber() metode:

await FirebaseAuth.instance.verifyPhoneNumber(
  phoneNumber: '+44 7123 123 456',
  verificationCompleted: (PhoneAuthCredential credential) {},
  verificationFailed: (FirebaseAuthException e) {},
  codeSent: (String verificationId, int? resendToken) {},
  codeAutoRetrievalTimeout: (String verificationId) {},
);

Ada 4 callback terpisah yang Anda harus menangani, masing-masing akan menentukan bagaimana Anda memperbarui UI aplikasi:

  1. verificationCompleted : Automatic penanganan kode SMS pada perangkat Android.
  2. Verifikasi Gagal : peristiwa kegagalan Handle seperti nomor telepon tidak valid atau apakah kuota SMS telah terlampaui.
  3. codeSent : Handle ketika kode telah dikirim ke perangkat dari Firebase, digunakan untuk meminta pengguna memasukkan kode.
  4. codeAutoRetrievalTimeout : Menangani batas waktu ketika kode SMS otomatis penanganan gagal.

verificationCompleted

handler ini hanya akan dipanggil pada perangkat Android yang mendukung resolusi kode SMS otomatis.

Ketika kode SMS dikirim ke perangkat, Android secara otomatis akan memverifikasi kode SMS tanpa memerlukan pengguna untuk memasukkan secara manual kode. Jika peristiwa ini terjadi, sebuah PhoneAuthCredential secara otomatis disediakan yang dapat digunakan untuk masuk dengan atau menghubungkan nomor telepon pengguna.

FirebaseAuth auth = FirebaseAuth.instance;

await auth.verifyPhoneNumber(
  phoneNumber: '+44 7123 123 456',
  verificationCompleted: (PhoneAuthCredential credential) async {
    // ANDROID ONLY!

    // Sign the user in (or link) with the auto-generated credential
    await auth.signInWithCredential(credential);
  },
);

verifikasi gagal

Jika Firebase mengembalikan kesalahan, misalnya untuk nomor telepon yang salah atau jika kuota SMS untuk proyek tersebut telah melampaui, sebuah FirebaseAuthException akan dikirim ke handler ini. Dalam hal ini, Anda akan meminta sesuatu petunjuk yang salah tergantung pada kode kesalahan.

FirebaseAuth auth = FirebaseAuth.instance;

await auth.verifyPhoneNumber(
  phoneNumber: '+44 7123 123 456',
  verificationFailed: (FirebaseAuthException e) {
    if (e.code == 'invalid-phone-number') {
      print('The provided phone number is not valid.');
    }

    // Handle other errors
  },
);

Kode terkirim

Ketika Firebase mengirimkan kode SMS ke perangkat, handler ini dipicu dengan verificationId dan resendToken (A resendToken hanya didukung pada perangkat Android, perangkat iOS akan selalu mengembalikan null nilai).

Setelah dipicu, itu akan menjadi saat yang tepat untuk memperbarui UI aplikasi Anda untuk meminta pengguna untuk memasukkan kode SMS mereka mengharapkan. Setelah kode SMS telah dimasukkan, Anda dapat menggabungkan ID verifikasi dengan kode SMS untuk membuat baru PhoneAuthCredential :

FirebaseAuth auth = FirebaseAuth.instance;

await auth.verifyPhoneNumber(
  phoneNumber: '+44 7123 123 456',
  codeSent: (String verificationId, int? resendToken) async {
    // Update the UI - wait for the user to enter the SMS code
    String smsCode = 'xxxx';

    // Create a PhoneAuthCredential with the code
    PhoneAuthCredential credential = PhoneAuthProvider.credential(verificationId: verificationId, smsCode: smsCode);

    // Sign the user in (or link) with the credential
    await auth.signInWithCredential(credential);
  },
);

Secara default, Firebase tidak akan kembali mengirim pesan SMS baru jika sudah baru-baru dikirim. Namun Anda bisa mengubah perilaku ini dengan re-memanggil verifyPhoneNumber metode dengan mengirim ulang token ke forceResendingToken argumen. Jika berhasil, pesan SMS akan dikirim ulang.

codeAutoRetrievalTimeout

Pada perangkat Android yang mendukung resolusi kode SMS otomatis, handler ini akan dipanggil jika perangkat belum otomatis dipecahkan pesan SMS dalam jangka waktu tertentu. Setelah rentang waktu yang telah berlalu, perangkat tidak akan lagi berusaha untuk menyelesaikan setiap pesan yang masuk.

Secara default, perangkat menunggu selama 30 detik namun ini dapat disesuaikan dengan timeout argumen:

FirebaseAuth auth = FirebaseAuth.instance;

await auth.verifyPhoneNumber(
  phoneNumber: '+44 7123 123 456',
  timeout: const Duration(seconds: 60),
  codeAutoRetrievalTimeout: (String verificationId) {
    // Auto-resolution timed out...
  },
);

Web: signInWithPhoneNumber

Pada platform web, pengguna dapat masuk dengan mengkonfirmasi mereka memiliki akses ke telepon dengan memasukkan kode SMS yang dikirim ke nomor telepon yang disediakan. Untuk keamanan tambahan dan pencegahan spam, pengguna diminta untuk membuktikan bahwa mereka adalah manusia dengan menyelesaikan Google reCAPTCHA widget. Setelah dikonfirmasi, kode SMS akan dikirimkan.

The Firebase Authentication SDK untuk Flutter akan mengelola reCAPTCHA widget dari kotak secara default, namun memberikan kontrol atas bagaimana ditampilkan dan dikonfigurasi jika diperlukan. Untuk memulai, memanggil signInWithPhoneNumber metode dengan nomor telepon.

FirebaseAuth auth = FirebaseAuth.instance;

// Wait for the user to complete the reCAPTCHA & for an SMS code to be sent.
ConfirmationResult confirmationResult = await auth.signInWithPhoneNumber('+44 7123 123 456');

Memanggil metode pertama akan memicu widget reCAPTCHA untuk display. Pengguna harus menyelesaikan tes sebelum kode SMS dikirim. Setelah selesai, Anda kemudian dapat mendaftar pengguna dalam dengan memberikan kode SMS ke confirm metode pada diselesaikan ConfirmationResult respon:

UserCredential userCredential = await confirmationResult.confirm('123456');

Seperti lain masuk arus, sukses masuk akan memicu setiap pendengar negara otentikasi Anda telah berlangganan seluruh aplikasi Anda.

reCAPTCHA Konfigurasi

ReCAPTCHA widget adalah aliran sepenuhnya dikelola yang menyediakan keamanan untuk aplikasi web Anda.

Argumen kedua signInWithPhoneNumber menerima opsional RecaptchaVerifier contoh yang dapat digunakan untuk mengelola widget. Secara default, widget akan membuat sebagai widget terlihat ketika masuk aliran dipicu. "Tak terlihat" widget akan muncul sebagai halaman penuh modal di-atas aplikasi Anda.

Hal tersebut adalah mungkin untuk menampilkan widget inline yang pengguna harus secara eksplisit tekan untuk memverifikasi diri mereka sendiri.

Untuk menambahkan widget inline, menentukan ID DOM elemen ke container argumen dari RecaptchaVerifier misalnya. elemen harus ada dan harus mengosongkan dinyatakan kesalahan akan dilempar. Jika tidak ada container argumen disediakan, widget akan diberikan sebagai "tak terlihat".

ConfirmationResult confirmationResult = await auth.signInWithPhoneNumber('+44 7123 123 456', RecaptchaVerifier(
  container: 'recaptcha',
  size: RecaptchaVerifierSize.compact,
  theme: RecaptchaVerifierTheme.dark,
));

Anda dapat mengubah ukuran dan tema dengan menyesuaikan size dan theme argumen seperti yang ditunjukkan di atas.

Hal ini juga memungkinkan untuk mendengarkan acara, seperti apakah reCAPTCHA telah selesai oleh pengguna, apakah reCAPTCHA telah kedaluwarsa atau kesalahan dilemparkan:

RecaptchaVerifier(
  onSuccess: () => print('reCAPTCHA Completed!'),
  onError: (FirebaseAuthException error) => print(error),
  onExpired: () => print('reCAPTCHA Expired!'),
);

pengujian

Firebase menyediakan dukungan untuk lokal menguji nomor telepon:

  1. Pada Konsol Firebase, pilih "Phone" penyedia otentikasi dan klik pada "Nomor telepon untuk menguji" dropdown.
  2. Masukkan nomor baru telepon (misalnya +44 7444 555666 ) dan kode tes (misalnya 123456 ).

Jika memberikan nomor telepon tes untuk baik verifyPhoneNumber atau signInWithPhoneNumber metode, tidak ada SMS akan benar-benar dikirim. Anda malah dapat memberikan kode tes langsung ke PhoneAuthProvider atau dengan signInWithPhoneNumber s hasil konfirmasi handler.