CRUD Firebase Realtime Database (2): Membuat Sistem Autentikasi


Assalamualaikum Warahmatullahi Wabawarakatuh.

Setelah kita Menambahkan Firebase pada Project Aplikasi, yang sudah kita bahas pada postingan sebelumnya, selanjutnya kita akan membuat sistem autentikasi, yaitu metode masuk yang digunakan oleh user agar dapat login/masuk kedalam aplikasi.

Demi keamanan pengguna, secara default, Firebase Realtime Database mempunyai aturan yaitu user diharuskan untuk terautentikasi terlebih dahulu jika ingin menulis atau membaca data didalam Databas, supaya tidak sembarang orang dapat mengakses data dari database.

CRUD Firebase Realtime Database (2): Membuat Sistem Autentikasi

Kita akan membuat sistem autentikasi menggunakan Library FirebaseUI, library tersebut menyediakan tampilan atau User Interface untuk autentikasi. Ada banyak pilihat metode masuk dengan menggunakan FirebaseUI, tapi disini kita hanya akan menggunakan Akun Google saja untuk methode masuknya.

CRUD Firebase Realtime Database (2): Membuat Sistem Autentikasi

1) Buka Firebase Konsol, arahkan pada menu Authentication, disini kita pilih Metode Masuk dengan menggunakan Akun Google.

Memilih Proses Metode Masuk

2) Buka project aplikasi Android kalian, untuk autentikasi menggunakan akun Google, kita cukup menambahkan libray FirebaseUI-auth dan google-play-service-auth kedalam Dependencies.

dependencies {
    implementation 'com.firebaseui:firebase-ui-auth:3.2.2'
    implementation 'com.google.android.gms:play-services-auth:11.8.0'
}

3) Pada activity_main.xml, disini kita akan membuat layout untuk tampilan User Interfacenya, komponen yang digunakan seperti EditText untuk Input data, dan Beberapa Button. Serta ProgressBar.

<?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"
    android:layout_margin="12dp"
    tools:context="com.wildan.firebasecrud.ui.MainActivity">

    <ProgressBar
        android:id="@+id/progress"
        style="?android:attr/progressBarStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="false"
        android:layout_alignParentLeft="false"
        android:layout_alignParentRight="false"
        android:layout_alignParentStart="false"
        android:layout_alignParentTop="false"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:orientation="vertical">

        <EditText
            android:id="@+id/nim"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ems="10"
            android:hint="NIM"
            android:inputType="textPersonName" />

        <EditText
            android:id="@+id/nama"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ems="10"
            android:hint="Masukan Nama"
            android:inputType="textPersonName" />

        <EditText
            android:id="@+id/jurusan"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ems="10"
            android:hint="Jurusan"
            android:inputType="textPersonName" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:orientation="horizontal">

            <Button
                android:id="@+id/login"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Login" />

            <Button
                android:id="@+id/save"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Simpan" />

            <Button
                android:id="@+id/logout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Logout" />

        </LinearLayout>

        <Button
            android:id="@+id/showdata"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Lihat Data" />

    </LinearLayout>

</RelativeLayout>

View:

Screenshot_InputDataLayout FirebaseCRUD

4) Buka file MainActivity.java, pada source code tersebut kita akan menambahkan FirebaseUI untuk autentikasi.

package com.wildan.firebasecrud.ui;

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.EditText;
import android.widget.ProgressBar;
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 com.wildan.firebasecrud.R;

import java.util.Collections;

public class MainActivity extends AppCompatActivity implements View.OnClickListener{

    //Deklarasi Variable
    private ProgressBar progressBar;
    private EditText NIM, Nama, Jurusan;
    private FirebaseAuth auth;
    private Button Logout, Simpan, Login, ShowData;

    //Membuat Kode Permintaan
    private int RC_SIGN_IN = 1;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        progressBar = findViewById(R.id.progress);
        progressBar.setVisibility(View.GONE);

        //Inisialisasi ID (Button)
        Logout = findViewById(R.id.logout);
        Logout.setOnClickListener(this);
        Simpan = findViewById(R.id.save);
        Simpan.setOnClickListener(this);
        Login = findViewById(R.id.login);
        Login.setOnClickListener(this);
        ShowData = findViewById(R.id.showdata);
        ShowData.setOnClickListener(this);

        auth = FirebaseAuth.getInstance(); //Mendapakan Instance Firebase Autentifikasi

        //Inisialisasi ID (EditText)
        NIM = findViewById(R.id.nim);
        Nama = findViewById(R.id.nama);
        Jurusan = findViewById(R.id.jurusan);

        /*
         * Mendeteksi apakah ada user yang masuk, Jika tidak, maka setiap komponen UI akan dinonaktifkan
         * Kecuali Tombol Login. Dan jika ada user yang terautentikasi, semua fungsi/komponen
         * didalam User Interface dapat digunakan, kecuali tombol Logout
         */
        if(auth.getCurrentUser() == null){
            defaultUI();
        }else {
            updateUI();
        }
    }

    //Tampilan Default pada Activity jika user belum terautentikasi
    private void defaultUI(){
        Logout.setEnabled(false);
        Simpan.setEnabled(false);
        ShowData.setEnabled(false);
        Login.setEnabled(true);
        NIM.setEnabled(false);
        Nama.setEnabled(false);
        Jurusan.setEnabled(false);
    }

    //Tampilan User Interface pada Activity setelah user Terautentikasi
    private void updateUI(){
        Logout.setEnabled(true);
        Simpan.setEnabled(true);
        Login.setEnabled(false);
        ShowData.setEnabled(true);
        NIM.setEnabled(true);
        Nama.setEnabled(true);
        Jurusan.setEnabled(true);
        progressBar.setVisibility(View.GONE);
    }

    // Mengecek apakah ada data yang kosong, akan digunakan pada Tutorial Selanjutnya
    private boolean isEmpty(String s){
        return TextUtils.isEmpty(s);
    }

    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();
                updateUI();
            }else {
                progressBar.setVisibility(View.GONE);
                Toast.makeText(MainActivity.this, "Login Dibatalkan", Toast.LENGTH_SHORT).show();
            }
        }
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.login:
                // Statement program untuk login/masuk
                startActivityForResult(AuthUI.getInstance()
                                .createSignInIntentBuilder()

                                //Memilih Provider atau Method masuk yang akan kita gunakan
                                .setAvailableProviders(Collections.singletonList(new AuthUI.IdpConfig.GoogleBuilder().build()))
                                .setIsSmartLockEnabled(false)
                                .build(),
                        RC_SIGN_IN);
                progressBar.setVisibility(View.VISIBLE);
                break;

            case R.id.save:
                /*
                  Digunakan untuk mendapatkan referensi dan meyimpan data pada Database
                  Akan dibahas pada Tutorial Berikutnya, Mengenai Fungsi Create
                 */
                break;

            case R.id.logout:
                // Statement program untuk logout/keluar
                AuthUI.getInstance()
                        .signOut(this)
                        .addOnCompleteListener(new OnCompleteListener() {
                            @Override
                            public void onComplete(@NonNull Task task) {
                                Toast.makeText(MainActivity.this, "Logout Berhasil", Toast.LENGTH_SHORT).show();
                                finish();
                            }
                        });
                break;
            case R.id.showdata:
                // Digunakan untuk melihat data yang sudah tersimpan didalam Database
                // Akan digunakan pada Tutorial Berikutnya, mengenai penggunaan Fungsi Read
                break;
        }
    }
}

Didalam method onCreate(), Firebase mengecek apakah ada user yang terautentikasi, jika tidak ada atau null, maka akan mengarah pada activity yang disediakan FirebaseUI, didalamya kita menggunakan sebuah provider AuthUI.IdpConfig.GoogleBuilder().build(), yang memungkinkan user untuk login menggunakan akun Google.

Method setAvailableProviders() diguanakan untuk menentukan dan menambahkan metode autentikasi yang digunakan. disini kita hanya menggunakan satu metode masuk, jadi kita gunakan Class dan fungsi Collections.singletonList().

Smart Lock menyimpan kredensial pengguna dan secara otomatis memasukkan pengguna ke aplikasi, tapi pada contoh kali ini kita menonaktifkan fitur SmartLock.

Dan yang terakhir, yaitu AuthUI.getInstance().signOut(this), pada saat Button Logout diklik, digunakan untuk proses keluar/logout.

Demo:

Screenshot_FirebaseCRUD Autenikasi dengan Akun Google 

Terimakasih atas kunjungannya, semoga tutorial yang saya berikan bisa bermanfaat untuk kalian semua, Setelah kedua materi yang kalian pelajar sebelumnya. Selanjutnya kita akan berfokus pada Realtime Database, yaitu membuat fungsi Create, Read, Update dan Delete.

Wassalamualaikum Warahmatullahi Wabarakatuh.

Berlangganan update artikel terbaru via email:

0 Response to "CRUD Firebase Realtime Database (2): Membuat Sistem Autentikasi"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel