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:
- Cara Autentikasi Menggunakan Nomor Telepon pada Firebase
- Cara Autentikasi Menggunakan Akun Facebook pada Firebase
- Cara Autentikasi Menggunakan Akun Twitter pada Firebase
- Cara Autentikasi Menggunakan Akun Google pada Firebase
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'
}
<uses-permission android:name="android.permission.INTERNET" />
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>
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;
}
}
}
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.
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.
