Cara Autentikasi Nomor Telepon dengan Firebase di Android

Membuat OTP (One Time Password) untuk verifikasi nomor telepon menggunakan firebase

Halo semuanya, pada postingan ini saya akan membagikan tutorial sederhana untuk kalian yang baru belajar membuat aplikasi android menggunakan android studio. Tutorial kali ini kita akan belajar bagaimana cara membuat autentikasi nomor telepon dengan firebase di android studio. Fitur autentikasi nomor telepon yang disediakan oleh firebase ini dapat kita manfaatkan ketika kita membuat aplikasi yang membutuhkan nomor telepon yang aktif dari pengguna. Biasanya autentikasi nomor telepon ini terdapat pada fitur login dan register pada aplikasi android.

Daftar Isi sembunyikan

1. Project PhoneOtpAuth

2. Menambahkan dependencies di build.gradle (:app)

3. Membuat Project di Firebase

4. Mengaktifkan Ponsel sebagai sign-in method

5. Menambahkan firebase ke aplikasi

6. Menambahkan sidik jari sertifikat SHA

7. Membuat User Interface

8. Mengambil nomor telepon

9. Membuat OTP

10. Mendapatkan sms kode OTP

Project PhoneOtpAuth

Hal pertama yang harus kita lakukan tentu membuat project baru di android studio. Pada tutorial ini saya memberikan nama projeknya “PhoneOtpAuth”.
Pastikan anda memilih API 23 sebagai minimum SDK, karena kode pada tutorial ini hanya akan berjalan normal jika menggunakan API 23 atau diatasnya.

Menambahkan dependencies di build.gradle (:app)

Implementasi library firebase dan country code picker

	implementation 'com.google.firebase:firebase-auth:19.3.1'
	implementation 'com.google.firebase:firebase-database:19.3.0'
	implementation 'com.google.firebase:firebase-storage:19.1.1'
	implementation 'com.googlecode.libphonenumber:libphonenumber:8.9.7'
	implementation 'com.github.joielechong:countrycodepicker:2.4.2'

view raw build.gradle (:app) hosted with

by GitHub

Jangan lupa tambahkan kode berikut di build.gradle (PhoneOtpAuth) agar library country code picker berfungsi normal

	allprojects {
	repositories {
	google()
	jcenter()
	maven { url "https://jitpack.io" }
	}
	}

view raw build.gradle (:app) hosted with

by GitHub

Membuat Project di Firebase

Login di firebase console (https://console.firebase.google.com/) kemudian buat project baru. Pada tutorial ini saya memberikan nama projeknya “PhoneOtp-Auth”.

Mengaktifkan Ponsel sebagai sign-in method

Buka project firebase yang telah dibuat, lalu pilih Authentication > Sign-in method > Aktifkan Ponsel

Menambahkan firebase ke aplikasi

Buka Setelan Project > Pilih tab Umum
Tambahkan aplikasi lalu konfigurasi SDK sesuai petunjuk pada console firebase

Menambahkan sidik jari sertifikat SHA

Saat konfigurasi SDK di firebase console, jangan lupa untuk menambahkan Sertifikat penandatanganan debug SHA-1
Untuk mendapatkan Sertifikat penandatanganan debug SHA-1, anda dapat mengikuti tutorial dari google pada link berikut: https://developers.google.com/android/guides/client-auth

Membuat User Interface

Buka activity_register.xml dan tulis kode berikut

	<?xml version="1.0" encoding="utf-8"?>
	<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
	xmlns:app="http://schemas.android.com/apk/res-auto"
	xmlns:tools="http://schemas.android.com/tools"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	tools:context=".RegisterActivity">

	<LinearLayout
	android:id="@+id/linearLayout"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:layout_alignParentBottom="true"
	android:layout_alignParentStart="true"
	android:layout_marginBottom="229dp"
	android:orientation="horizontal"
	android:padding="15dp">

	<com.rilixtech.widget.countrycodepicker.CountryCodePicker
	android:id="@+id/ccp"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:gravity="center_vertical"
	app:ccp_defaultCode="62"
	android:layout_gravity="center_vertical"
	android:paddingTop="14dp"
	android:paddingBottom="14dp"
	android:paddingStart="14dp" />

	<EditText
	android:id="@+id/editTextPhone"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:layout_weight="2"
	android:inputType="number"
	android:digits="0123456789"
	android:hint="Phone Number"
	android:maxLength="12"
	android:textColorHint="@android:color/black" />
	</LinearLayout>

	<Button
	android:id="@+id/buttonContinue"
	android:layout_width="183dp"
	android:layout_height="wrap_content"
	android:layout_alignParentBottom="true"
	android:layout_centerHorizontal="true"
	android:layout_marginBottom="88dp"
	android:background="#00e5ff"
	android:text="Send OTP"
	android:textAllCaps="false"
	android:textColor="@android:color/background_light"
	android:textSize="20sp"
	android:textStyle="bold" />

	</RelativeLayout>

view raw activity_register.xml hosted with

by GitHub

Berikut output dari kode XML diatas.

Cara Autentikasi Nomor Telepon dengan Firebase di android

Buka activity_otp.xml dan tulis kode berikut

	<?xml version="1.0" encoding="utf-8"?>
	<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
	xmlns:tools="http://schemas.android.com/tools"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	tools:context=".OtpActivity">

	<EditText
	android:id="@+id/editTextCode"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_alignParentBottom="true"
	android:layout_centerHorizontal="true"
	android:layout_marginBottom="232dp"
	android:ems="10"
	android:inputType="number"
	android:hint="Enter OTP Code"
	android:textColorHint="@android:color/black"
	tools:layout_editor_absoluteX="85dp"
	tools:layout_editor_absoluteY="57dp" />

	<Button
	android:id="@+id/buttonSignIn"
	android:layout_width="227dp"
	android:layout_height="47dp"
	android:layout_alignParentBottom="true"
	android:layout_centerHorizontal="true"
	android:layout_marginBottom="82dp"
	android:background="#00e5ff"
	android:text="Create Account"
	android:textColor="@android:color/background_light"
	android:textSize="20sp"
	android:textStyle="bold"
	tools:layout_editor_absoluteX="147dp"
	tools:layout_editor_absoluteY="159dp" />

	<ProgressBar
	android:id="@+id/progressbar"
	style="?android:attr/progressBarStyle"
	android:layout_width="55dp"
	android:layout_height="55dp"
	android:layout_below="@+id/editTextCode"
	android:layout_centerHorizontal="true"
	android:layout_marginTop="-214dp"
	android:visibility="gone"/>

	</RelativeLayout>

view raw activity_otp.xml hosted with

by GitHub

Berikut output dari kode XML diatas.

Buka activity_main.xml dan tulis kode berikut

	<?xml version="1.0" encoding="utf-8"?>
	<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
	xmlns:app="http://schemas.android.com/apk/res-auto"
	xmlns:tools="http://schemas.android.com/tools"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	tools:context=".MainActivity">

	<TextView
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:text="Hello World!"
	app:layout_constraintBottom_toBottomOf="parent"
	app:layout_constraintLeft_toLeftOf="parent"
	app:layout_constraintRight_toRightOf="parent"
	app:layout_constraintTop_toTopOf="parent" />

	</androidx.constraintlayout.widget.ConstraintLayout>

view raw activity_main.xml hosted with

by GitHub

Berikut output dari kode XML diatas.

Mengambil nomor telepon

Buka RegisterActivity.kt dan tulis kode berikut

	package com.tubianto.phoneotpauth

	import android.content.Intent
	import android.os.Bundle
	import android.view.View
	import android.widget.Button
	import android.widget.EditText
	import androidx.appcompat.app.AppCompatActivity
	import com.google.firebase.auth.FirebaseAuth
	import kotlinx.android.synthetic.main.activity_register.*

	class RegisterActivity : AppCompatActivity() {
	private lateinit var editText: EditText
	private lateinit var buttonContinue: Button
	private var phoneCode: String = "62"
	override fun onCreate(savedInstanceState: Bundle?) {
	super.onCreate(savedInstanceState)
	setContentView(R.layout.activity_register)
	ccp.setOnCountryChangeListener { selectedCountry ->
	phoneCode = selectedCountry.phoneCode
	}
	editText = findViewById(R.id.editTextPhone)
	buttonContinue = findViewById(R.id.buttonContinue)
	buttonContinue.setOnClickListener(object: View.OnClickListener {
	override fun onClick(v:View) {
	val code = phoneCode
	val number = editText.text.toString().trim()
	if (number.isEmpty() \|\| number.length < 10)
	{
	editText.error = "Valid number is required"
	editText.requestFocus()
	return
	}
	val phonenumber = "+$code$number"
	val intent = Intent(this@RegisterActivity, OtpActivity::class.java)
	intent.putExtra("phonenumber", phonenumber)
	startActivity(intent)
	}
	})
	}
	override fun onStart() {
	super.onStart()
	if (FirebaseAuth.getInstance().currentUser != null)
	{
	val intent = Intent(this, MainActivity::class.java)
	intent.flags = Intent.FLAG_ACTIVITY_NEW_TASK or Intent.FLAG_ACTIVITY_CLEAR_TASK
	startActivity(intent)
	}
	}
	}

view raw RegisterActivity.kt hosted with

by GitHub

Jadikan RegisterActivity sebagai launcher atau halaman pertama yang di jalankan
AndroidManifest.xml

	<?xml version="1.0" encoding="utf-8"?>
	<manifest xmlns:android="http://schemas.android.com/apk/res/android"
	package="com.tubianto.phoneotpauth">

	<application
	android:allowBackup="true"
	android:icon="@mipmap/ic_launcher"
	android:label="@string/app_name"
	android:roundIcon="@mipmap/ic_launcher_round"
	android:supportsRtl="true"
	android:theme="@style/AppTheme">
	<activity android:name=".RegisterActivity">
	<intent-filter>
	<action android:name="android.intent.action.MAIN" />

	<category android:name="android.intent.category.LAUNCHER" />
	</intent-filter>
	</activity>
	<activity android:name=".OtpActivity" />
	<activity android:name=".MainActivity" />
	</application>

	</manifest>

view raw AndroidManifest.xml hosted with

by GitHub

Membuat OTP

Buka OtpActivity.kt dan tulis kode berikut

	package com.tubianto.phoneotpauth

	import android.content.Intent
	import android.os.Bundle
	import android.view.View
	import android.widget.Button
	import android.widget.EditText
	import android.widget.ProgressBar
	import android.widget.Toast
	import androidx.appcompat.app.AppCompatActivity
	import com.google.android.gms.tasks.TaskExecutors
	import com.google.firebase.FirebaseException
	import com.google.firebase.auth.FirebaseAuth
	import com.google.firebase.auth.PhoneAuthCredential
	import com.google.firebase.auth.PhoneAuthProvider
	import java.util.concurrent.TimeUnit

	class OtpActivity : AppCompatActivity() {
	private lateinit var verificationid:String
	private lateinit var mAuth: FirebaseAuth
	private lateinit var progressBar: ProgressBar
	private lateinit var editText: EditText
	private lateinit var buttonSignIn: Button
	private val mCallBack = object: PhoneAuthProvider.OnVerificationStateChangedCallbacks() {
	override fun onCodeSent(s:String, forceResendingToken:PhoneAuthProvider.ForceResendingToken) {
	super.onCodeSent(s, forceResendingToken)
	verificationid = s
	}
	override fun onVerificationCompleted(phoneAuthCredential: PhoneAuthCredential) {
	val code = phoneAuthCredential.smsCode
	if (code != null)
	{
	progressBar.visibility = View.VISIBLE
	verifyCode(code)
	}
	}
	override fun onVerificationFailed(e: FirebaseException) {
	Toast.makeText(this@OtpActivity, e.message, Toast.LENGTH_LONG).show()
	}
	}
	override fun onCreate(savedInstanceState: Bundle?) {
	super.onCreate(savedInstanceState)
	setContentView(R.layout.activity_otp)
	mAuth = FirebaseAuth.getInstance()
	progressBar = findViewById(R.id.progressbar)
	editText = findViewById(R.id.editTextCode)
	val phonenumber = intent.getStringExtra("phonenumber")
	sendVerificationCode(phonenumber)
	buttonSignIn = findViewById(R.id.buttonSignIn)
	buttonSignIn.setOnClickListener(object: View.OnClickListener {
	override fun onClick(v:View) {
	val code = editText.text.toString().trim()
	if ((code.isEmpty() \|\| code.length < 6))
	{
	editText.error = "Enter code..."
	editText.requestFocus()
	return
	}
	verifyCode(code)
	}
	})
	}
	private fun verifyCode(code:String) {
	val credential = PhoneAuthProvider.getCredential(verificationid, code)
	signInWithCredential(credential)
	}
	private fun signInWithCredential(credential:PhoneAuthCredential) {
	mAuth.signInWithCredential(credential)
	.addOnCompleteListener { task ->
	if (task.isSuccessful) {
	val intent = Intent(this@OtpActivity, MainActivity::class.java)
	intent.flags = Intent.FLAG_ACTIVITY_NEW_TASK or Intent.FLAG_ACTIVITY_CLEAR_TASK
	startActivity(intent)
	} else {
	Toast.makeText(this@OtpActivity, task.exception?.message, Toast.LENGTH_LONG).show()
	}
	}
	}
	private fun sendVerificationCode(number:String) {
	PhoneAuthProvider.getInstance().verifyPhoneNumber(
	number,
	60,
	TimeUnit.SECONDS,
	TaskExecutors.MAIN_THREAD,
	mCallBack
	)
	}
	}