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.
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
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:
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;
}
}
}
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:
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.
: Membuat Sistem Autentikasi){kind=link}