Belajar Menggunakan FirebaseUI untuk Autentikasi


Assalamualaikum Warahmatullahi Wabarakatuh.

FirebaseUI adalah library open source untuk Android yang memungkinkan kita menghubungkan elemen UI ke dalam Firebase API dengan cepat. Libray ini meyediakan elemen User Interface sehingga memudahkan developer untuk merancang elemen UI didalam firebase.


Pada contoh kali ini, kita akan membuat sistem autentikasi atau login menggunakan Library FirebaseUI, untuk autentikasinya, kita dapat menggunakan Akun Google, Twiitter, Facebook, Email, dll. dan juga dapat menggunakan semuanya sekaligus.

Dengan menggunakan Library tersebut, saat aplikasi mendeteksi apakah ada user yang masuk, jika tidak maka akan diarahkan ke menu login yang disediakan FirebaseUI. karena open source, kalian bebas untuk memedifikasi tampilan untuk disesuaikan dengan pengguna.

Materi lainnya yang direkomendasikan:


Belajar Menggunakan FirebaseUI untuk Autentikasi

1) Pertama, tambahkan Firebase kedalam Project Aplikasi,Untuk Tutorialnya kalian bisa lihat Disini

2) Karena pada project ini, kita hanya akan menggunakan 2 metode autentikai, yaitu, dengan Email dan akun Google, jadi kalian cukup menambahkan libray FirebaseUI-auth dan google-play-service-auth kedalam Dependencies.
dependencies {
    compile 'com.firebaseui:firebase-ui-auth:3.2.2'
    compile 'com.google.android.gms:play-services-auth:11.8.0'
}
3) Jangan lupa untuk menambahkan kedua permission berikut ini didalam AndroidManifest.xml kalian.
<uses-permission android:name="android.permission.INTERNET" />
4) Buka Firebase Konsol, disini kita menentukan Metode Masuk dengan menggunakan Email/Sandi dan Akun Google.


5) Selanjutnya, kita tinggal membuat layout untuk MainActivity, pada activity tersebut kita hanya akan menambahkan TextView untuk menampilkan data user dan Button untuk logout/keluar serta menghapus akun, karena Fungsi dari FirebaseUI yaitu menyediakan tampilan visual untuk login/masuk, sehinggal kita tidak pelu membuatnya.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:layout_margin="12dp"
    android:gravity="center"
    android:orientation="vertical"
    tools:context="cianjur.developer.net.firebaseexample.MainActivity">

    <TextView
        android:id="@+id/myName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Nama :"
        android:textSize="15sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/myEmail"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:text="Email :"
        android:textSize="15sp"
        android:textStyle="bold" />

    <Button
        android:id="@+id/logout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:text="Keluar" />

    <Button
        android:id="@+id/delete"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="4dp"
        android:text="Hapus Akun" />

</LinearLayout>
View:


6) Pada MainActivity.java, masukan source code berikut ini.
package cianjur.developer.net.firebaseexample;

import android.content.Intent;
import android.support.annotation.NonNull;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
import android.widget.Toast;

import com.firebase.ui.auth.AuthUI;
import com.google.android.gms.tasks.OnCompleteListener;
import com.google.android.gms.tasks.Task;
import com.google.firebase.auth.FirebaseAuth;

import java.util.Arrays;

public class MainActivity extends AppCompatActivity implements View.OnClickListener{

    private FirebaseAuth auth;
    private TextView Name, Email;
    private Button Logout, Delete;

    //Membuat Kode Permintaan
    private int RC_SIGN_IN = 1;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Name = findViewById(R.id.myName);
        Email = findViewById(R.id.myEmail);
        Logout = findViewById(R.id.logout);
        Logout.setOnClickListener(this);
        Delete = findViewById(R.id.delete);
        Delete.setOnClickListener(this);

        auth = FirebaseAuth.getInstance(); //Menghubungkan dengan Firebase Authentifikasi

        /*
         * Mendeteksi apakah ada user yang masuk, Jika tidak ada, maka akan menuju ke menu Login
         * Jika ada, maka akan menampilkan Data dari User, seperti nama dan Email
         */
        if(auth.getCurrentUser() == null){
            startActivityForResult(AuthUI.getInstance()
                            .createSignInIntentBuilder()
                            .setAvailableProviders(Arrays.asList(
                                    new AuthUI.IdpConfig.GoogleBuilder().build(),
                                    new AuthUI.IdpConfig.EmailBuilder().build()))
                            .setIsSmartLockEnabled(false)
                            .build(),
                    RC_SIGN_IN);
        }else {
            Name.setText("Nama Saya : " + auth.getCurrentUser().getDisplayName());
            Email.setText("Email : " + auth.getCurrentUser().getEmail());
        }
    }

    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        // RC_SIGN_IN adalah kode permintaan yang Anda berikan ke startActivityForResult, saat memulai masuknya arus.
        if (requestCode == RC_SIGN_IN) {

            //Berhasil masuk
            if (resultCode == RESULT_OK) {
                Toast.makeText(MainActivity.this, "Login Berhasil", Toast.LENGTH_SHORT).show();
                Name.setText("Nama Saya : " + auth.getCurrentUser().getDisplayName());
                Email.setText("Email : " + auth.getCurrentUser().getEmail());
            } else {
                Toast.makeText(MainActivity.this, "Login Gagal/Dibatalkan", Toast.LENGTH_SHORT).show();
            }
        }
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.logout:
                //Membuat kejadian saat tombol Logout diklik
                AuthUI.getInstance()
                        .signOut(this)
                        .addOnCompleteListener(new OnCompleteListener<Void>() {
                            @Override
                            public void onComplete(@NonNull Task<Void> task) {
                                Toast.makeText(MainActivity.this, "Logout", Toast.LENGTH_SHORT).show();
                                finish();
                            }
                        });
                break;

            case R.id.delete:
                //Membuat kejadian saat tombol Delete diklik
                AuthUI.getInstance()
                        .delete(this)
                        .addOnCompleteListener(new OnCompleteListener<Void>() {
                            @Override
                            public void onComplete(@NonNull Task<Void> task) {
                                if (task.isSuccessful()) {
                                    Toast.makeText(MainActivity.this, "Akun Berhasil Dihapus", Toast.LENGTH_SHORT).show();
                                    finish();
                                } else {
                                    Toast.makeText(MainActivity.this, "Anda Belum Login/Tidak Punya Akun", Toast.LENGTH_SHORT).show();
                                }
                            }
                        });
                break;
        }
    }
}
Penjelasan:

Pada method onCreate(), Firebase mengecek apakah ada user yang terautentikasi, jika tidak ada atau null, maka akan mengarahkan pada layout activity yang disediakan FirebaseUI, didalamya kita menggunakan 2 buah provider, yaitu AuthUI.IdpConfig.EmailBuilder().build() dan AuthUI.IdpConfig.GoogleBuilder().build().

Method setAvailableProviders() diguanakan untuk menentukan dan menambahkan metode autentikasi yang digunakan.

Smart Lock menyimpan kredensial pengguna dan secara otomatis memasukkan pengguna ke aplikasi, tapi pada contoh kali ini kita menonaktifkan fitur SmartLock, untuk penjelasan lebih lanjut, akan dibahas pada postingan beriktutnya.

Jika user telah login/masuk, maka Activity Utama akan tampil dan menampilkan Nama serta Email kita, selain itu terdapat 2 buah Button untuk logout/keluar dan menghapus akun, menggunakan FirebaseUI.

Demo:




Untuk dokumentasi lainnya, dapat kalian lihat disini.

Terimakasih atas kunjungannya, semoga tutorial yang saya berikan bisa bermanfaat untuk kalian semua, selebihnya, mohon maaf bila ada kesalahan.

Wassalamualaikum Warahmatullahi Wabarakatuh.

Disqus Comments