Tutorial Melakukan Autentikasi (Authentication) Menggunakan Firebase di Android Menggunakan Nomor Telepon

Hari ini kita akan belajar tentang Firebase telepon otentikasi. Firebase fantastis, dan menyediakan hampir fitur yang Anda butuhkan untuk backend dari aplikasi Anda. Jadi dalam tutorial ini, kita akan belajar tentang Firebase telepon Autentikasi, dan aku cukup yakin bahwa Anda telah melihat hal ini dalam banyak aplikasi. Anda memasukkan nomor telepon Anda, menerima OTP, dan kemudian Anda menggunakan OTP itu untuk mengotentikasi.

Manfaat menggunakan autentikasi telepon – Bila Anda menggunakan otentikasi nomor telepon, Anda memiliki banyak keuntungan:

• Mencegah pengguna palsu: Bila Anda menggunakan otentikasi telepon, pengguna tidak dapat mendaftar untuk beberapa account, untuk setiap account nomor telepon unik diperlukan.
• Peningkatan nilai pengguna: Ketika Anda memiliki semua pengguna diverifikasi oleh nomor telepon nilai meningkat dasar pengguna Anda.
• Peningkatan keamanan dan pengalaman pengguna: saat ini lebih banyak orang menggunakan apl dan mengingat sandi adalah sakit kepala bagi banyak pengguna, sehingga mereka akhirnya menggunakan password yang lemah. Menggunakan telepon otentikasi meningkatkan keamanan dan pengalaman pengguna, karena pengguna tidak perlu membuat dan mengingat kata sandi, mereka akan memasukkan nomor mereka dan kemudian mereka dapat menerima kode otentikasi sementara melalui SMS.

Mengapa firebase autentikasi telepon – Untuk menerapkan otentikasi telepon Anda perlu membayar untuk layanan SMS, tetapi dengan firebase, Anda dapat melakukannya gratis, Bukankah itu mengagumkan? Rencana gratis firebase memiliki verifikasi sepuluh ribu per bulan.  Thats cukup bagi pemula apps saya kira, tapi ya jika Anda melampaui batas ini, Anda perlu membayar. Jadi, orang-orang yang cukup untuk diskusi sekarang mari kita mulai proyek kami dan mari kita lihat bagaimana kita dapat mengintegrasikan otentikasi telepon di aplikasi kita.

Tutorial firebase autentikasi telepon – Sekarang mari kita belajar bagaimana menerapkan Firebase telepon otentikasi dalam proyek kami.

Menciptakan sebuah proyek Studio Android yang baru – Sekali lagi kita akan melakukannya dalam sebuah proyek baru, sehingga membuat proyek Android Studio baru. Dalam kasus saya saya telah menciptakan sebuah proyek bernama FirebasePhoneAuthentication. Setelah proyek benar-benar sarat, kita akan menambahkan firebase otentikasi ke dalamnya.

Menambahkan Firebase otentikasi

• Klik pada tools-> firebase. Ini akan membuka asisten dari mana Anda dapat menambahkan semua layanan yang firebase ke dalam proyek Anda.
• Jadi dari sini Anda dapat membuat sebuah proyek firebase baru atau Anda juga dapat memilih proyek yang sudah ada.
• Menghubungkan proyek android Anda untuk firebase proyek dan menambahkan dependensi menggunakan Asisten ini.

Mengaktifkan otentikasi telepon Firebase

• Untuk melakukan ini pergi ke konsol Firebase dan membuka proyek yang Anda gunakan.
• Lalu pergi ke tanda di metode dan mengaktifkan telepon otentikasi.

Enable Firebase Phone Authentication

Merancang layar – Sebelum pindah ke dalam merancang saya ingin memberitahu Anda bahwa, untuk masuk kita akan memiliki dua kegiatan, dalam kegiatan pertama pengguna akan masukkan nomor telepon dan selanjutnya kami akan melakukan verifikasi kode yang dikirim melalui SMS.

Masukkan layar nomor telepon – Saya telah membuat desain ini untuk layar ini.

Phone Number Screen

Untuk merancang di atas layar masuk activity_main.xml dan menulis kode xml 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=".MainActivity">

    <RelativeLayout
        android:id="@+id/relativeLayout"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:background="@color/colorPrimary"
        android:orientation="horizontal">

        <ImageView
            android:layout_width="120dp"
            android:layout_height="120dp"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:background="@drawable/ic_logo" />

    </RelativeLayout>

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="120dp"
        android:layout_below="@id/relativeLayout"
        android:layout_marginTop="-50dp"
        android:background="@drawable/waves" />

    <RelativeLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/imageView"
        android:orientation="vertical"
        android:padding="20dp">

        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="25dp"
            android:text="May I ask your phone number?"
            android:textAppearance="@style/Base.TextAppearance.AppCompat.Headline"
            android:textColor="@color/colorPrimary" />

        <EditText
            android:id="@+id/editTextMobile"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/textView"
            android:layout_marginTop="20dp"
            android:digits="0123456789"
            android:drawableLeft="@drawable/ic_phone"
            android:drawablePadding="10dp"
            android:hint="enter your mobile number"
            android:inputType="phone"
            android:maxLength="10" />

        <Button
            android:id="@+id/buttonContinue"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/editTextMobile"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="15dp"
            android:background="@color/colorPrimaryDark"
            android:text="Continue"
            android:textAllCaps="false"
            android:textColor="#cdd8f1" />

    </RelativeLayout>

</RelativeLayout>

Memverifikasi layar nomor telepon - Sekarang kita akan menciptakan kegiatan berikutnya yang mana kami akan sangat nomor telepon. Pada layar ini juga kita perlu EditText mana pengguna akan memasukkan kode. Tapi kita akan mendeteksi SMS secara otomatis sehingga pengguna tidak perlu untuk memasukkan secara manual.

Pertama membuat kegiatan baru dalam proyek, dan saya telah menciptakan sebuah kegiatan bernama VerifyPhoneActivity.

Verify Phone Number

Untuk desain di atas untuk VerifyPhoneActivity Anda, buka activity_verify_phone.xml dan menulis kode xml 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=".VerifyPhoneActivity">

    <RelativeLayout
        android:id="@+id/relativeLayout"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:background="@color/colorPrimary"
        android:orientation="horizontal">

        <ImageView
            android:layout_width="120dp"
            android:layout_height="120dp"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:background="@drawable/ic_logo" />

    </RelativeLayout>

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="120dp"
        android:layout_below="@id/relativeLayout"
        android:layout_marginTop="-50dp"
        android:background="@drawable/waves" />

    <RelativeLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/imageView"
        android:orientation="vertical"
        android:padding="20dp">

        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="25dp"
            android:text="Wait for the code I sent You"
            android:textAppearance="@style/Base.TextAppearance.AppCompat.Headline"
            android:textColor="@color/colorPrimary" />

        <ProgressBar
            android:id="@+id/progressbar"
            android:layout_below="@id/textView"
            android:layout_centerHorizontal="true"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <EditText
            android:id="@+id/editTextCode"
            android:layout_width="200dp"
            android:layout_height="wrap_content"
            android:layout_below="@id/progressbar"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="10dp"
            android:digits="0123456789"
            android:drawablePadding="10dp"
            android:hint="enter verification code"
            android:inputType="phone"
            android:maxLength="10" />

        <Button
            android:id="@+id/buttonSignIn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/editTextCode"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="15dp"
            android:background="@color/colorPrimaryDark"
            android:text="Sign In"
            android:textAllCaps="false"
            android:textColor="#cdd8f1" />

    </RelativeLayout>

</RelativeLayout>

Sekarang kita akan menciptakan satu kegiatan lain yang bernama ProfileActivity.

Menciptakan ProfileActivity

• Menciptakan EmptyActivity baru yang bernama ProfileActivity dan kegiatan ini akan terbuka setelah berhasil login.
• Pada layar ini kita memiliki apa-apa tetapi hanya TextView dengan pesan selamat datang, seperti yang Anda lihat di bawah ini.

Creating ProfileActivity

Mendapatkan nomor ponsel - Kita akan mendapatkan nomor ponsel pengguna dalam MainActivity. Jadi datang di dalam MainActivity.java dan tuliskan kode berikut.

package net.simplifiedcoding.firebasephoneauthentication;

import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.EditText;

public class MainActivity extends AppCompatActivity {


    private EditText editTextMobile;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        editTextMobile = findViewById(R.id.editTextMobile);

        findViewById(R.id.buttonContinue).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                String mobile = editTextMobile.getText().toString().trim();

                if(mobile.isEmpty() || mobile.length() < 10){
                    editTextMobile.setError("Enter a valid mobile");
                    editTextMobile.requestFocus();
                    return;
                }

                Intent intent = new Intent(MainActivity.this, VerifyPhoneActivity.class);
                intent.putExtra("mobile", mobile);
                startActivity(intent);
            }
        });
    }

}

Kode di atas ini sangat sederhana. Kita hanya mengambil nomor telepon dari EditText dan mengirimkannya ke VerifyPhoneActivity.class dengan maksud.

Memverifikasi Nomer HP: Mengirimkan kode verifikasi - Untuk mengirimkan kode verifikasi kami akan menggunakan kode berikut.