Otentikasi Telepon dengan Firebase di Android

Diterjemahkan dari Firebase Phone Authentication

Demo

Pendahuluan

Di artikel ini kita akan belajar bagaimana menggunakan Phone Authentication dengan Firebase di Android.

Apa Itu Firebase ?

Firebase adalah layanan dari Google untuk mobile platform yang menyediakan backend service seperti database, storage, authentication dll. Firebase mendukung beberapa jenis otentikasi menggunakan email , nomor telepon, Google , Twitter dan masih banyak lagi. Di artikel ini kita hanya akan membahas Phone Authentication.

Contoh Aplikasi

Aplikasi yang akan dibangun memiliki tiga activity:

• MainActivity: Di sini pengguna akan memasukkan nomor teleponnya
• OtpActivity: Di sini pengguna akan memasukkan otp yang diterima.
• HomeActivity: Pengguna yang berhasil login akan di bawa ke halaman ini.

Cukup dengan teori, mari kita ngoding.

Mempersiapkan Firebase

Untuk mengatur Firebase sehingga bisa dipakai di project Android, kalian perlu mengikut langkah-langkah berikut:

• Buka FirebaseConsole dan login dengan akun Google.
• Di halaman awal, klik opsi “Add project”.

• Setelah mengklik “Add Project” sebuah jendela akan muncul, masukkan nama project dan pilih negara asal lalu klik tombol “CREATE PROJECT”.

• Setelah itu, kita akan dibawa ke dashboard. Di sini klik tombol “Add Firebase to your Android project”.

• Setelah memilih gambar Android yang ada, kita perlu mendaftarkan aplikasi yang ada di Android Studio dengan memasukkan package name dan sertifikat SHA-1.

• Untuk mendapatkan package name, buka AndroidManifest.xml lalu di bagian atas akan terlihat package name yang dimaksud.

• Untuk mendapatkan sertifikat SHA-1, klik pada tab “Gradle” di bagian kanan Android Studio lalu klik “app” -> “android” -> klik dua kali pada “signing report”. Akan muncul sertifikat SHA-1 seperti pada gambar di bawah.

• Setelah mengklik tombol “Register App” di dashboard Firebase sebelumnya, kita perlu mengunduh file “google-services.json” dan menyalinnnya ke modul (folder) app.

• Sekarang, buka file build.gradle level Project dan tambahkan kode berikut di bagian dependencies.

• Buka file build.gradle level app kemudian tambahkan kode berikut di bagian dependencies.

• Sekarang, kembali ke console Firebase lalu klik “Project Overview” . Di bagian “Discover Firebase” klik menu “Authentication” lalu di halaman berikutnya, klik “Setup Sign in method” dan aktifkan phone authentication lalu simpan.

Kita sudah selesai dengan pengaturan awal.

Menyiapkan Permissions

Buka file AndroidManifest.xml lalu tambahkan kode berikut untuk mengaktifkan Internet permission.

Mendesain Layout

Buka file activity_main.xml tambahkan kode di bawah untuk menampilkan sebuah editText untuk memasukkan nomor telepon dan sebuah tombol untuk mengirimkan otp serta sebuah progress bar.

Menyiapkan MainActivity

Buka file MainActivity.java lalu tambahkan kode di bawha. Kita akan mendeklarasi objek-objek yang diperlukan dan melakukan findViewById().

Mengirimkan Kode Verifikasi

BUka file MainActivity.java lalu tambahkan kode di bawah. Pada saat button di klik, kita akan mengambil teks dari dalam editText terlebih dahulu lalu mengirimkan string didalamnya ke method bernama “sendVerificationCode()”.

Apa itu PhoneAuthProvider ?

PhoneAuthProvider adalah kelas yang merepresentasikan keseluruhan mekanisme verifikasi menggunakan nomor telepon dan memberikan beberapa callback misalnya “verifyPhoneNumber()”.

Apa itu verifyPhoneNumber() ?

verifyPhoneNumber adalah fungsi yang memulai proses verifikasi nomor telepon dengan meminta tiga argumen:

• phoneNumber: Nomor telepon yang akan diverifikasi.
• timeout: Durasi timeout untuk otp yang didapatkan.
• unit: Satuan yang dipakai untuk timeout, bisa berupa detik (second), milidetik (millisecond), atau yang lain.
• activity or context: Context dari halaman mana method ini di panggil.
• OnVerificationStateChangedCallbacks: Blok yang akan menerima hasil dari request.

OnVerificationStateChangedCallbacks

Adalah sebuah abstract class dengan beberapa fungsi callback untuk even-even yang berbeda. Dari callback yang ada wajib untuk mengimplementasi salah duanya. Berikut ini fungsi yang bisa dipakai:

• onVerificationCompleted: Dipanggil saat verifikasi selesai tanpa interaksi pengguna, misalnya saat user diverifikasi tanpa kode.
• onVerificationFailed: Dipanggil saat terjadi error misalnya gagal mengirim SMS atau Number format exception.
• onCodeSent: Dipanggil saat kode sukses dikirim ke nomor telepon.

Saat button di klik, kita memanggil fungsi “sendVerificationCode” yang berikutnya akan mengirimkan sms ke nomor telepon yang telah dimasukkan. Saat onCodeSent() di panggil (kode otp sukses dikirim), maka pengguna akan di bawa ke OtpActivity sehingga bisa memverifikasi SMS.

Mengatur OtpActivity

Sekarang, buat sebuah empty activity bernama OtpActivity lalu tambahkan kode berikut di dalam file activity_otp.xml file.

OtpActivity akan memiliki satu editText untuk memasukkan otp, satu button untuk melakukan proses verifikasi dan satu progress bar.

Di dalam OtpActivity.java kita akan menerima intent dan vertificationId dari MainActivity. String yang tersimpan di dalam verificationId diperlukan untuk membuat objek PhoneAuthCredential.

Verifikasi Otp

Buka OtpActivity.java lalu tambahkan kode-kode berikut. Saat button di klik kita akan memanggil method bernama “verifyOtp”.

Apa itu PhoneAuthCredential ?

PhoneAuthCredential adalah kelas yang membungkus nomor telepon dan informasi verifikasi lainnya seperti verificationId untuk membuat sebuah credential dan credential ini nantinya akan dikirim ke method bernama “signInWithCredential”.

Apa itu signInWithCredential ?

signInWithCredential adalah fungsi yang dipakai untuk melakukan sign in berdasarkan credential yang ia terima. Di dalamnya kita bisa menyiapkan sebuah “onCompleteListener” sehingga kita bisa memeriksa hasilnya apakah pengguna sukses diverifikasi atau tidak. Jika sukses maka ia akan di bawa ke HomeActivity, jika gagal maka akan muncul pesan toast.

Menyiapkan HomeActivity

Sekarang, buat sebuah empty activity bernama HomeActivity lalu tambahkan kode berikut ke dalam file activity_home.xml. Layout ini hanya akan memiliki teks selamat datang.

Selamat mencoba. Seluruh kode bisa dilihat di sini.