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

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

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:

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:

 

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.

Wildan M Athoillah

Pantang menyerah dan terus maju, bertekad meningkatkan kualitas sumber daya manusia, melalui tulisan, karya dan ilmu yang diberikan.

Share this post

Berlangganan update artikel terbaru via email:

Link will be apear in 15 seconds.

Well done! you have successfully gained access to Decrypted Link.