Cara Autentikasi Menggunakan Akun Facebook pada Firebase
Pada tutorial ini, saya akan mengajarkan pada kalian, Bagaimana Cara Autentikasi atau Metode Masuk dengan Menggunakan Akun Facebook pada Firebase, didalam firebase autentikasi, banyak sekali metode masuk yang bisa kita pilih, salah satunya yaitu Facebook.
Alasan kenapa Facebook menjadi alternatif lain untuk metode masuk pada sebuah aplikasi, dikarenakan pengguna Facebook saat sudah semakin banyak, hampir semua orang mempunyai akun Facebook, oleh sebab itu, user dapat memilih untuk login menggunakan akun fb nya sendiri, jika ingin lebih praktis tanpa hapus registrasi.
Materi lainnya yang direkomendasikan:
- Cara Autentikasi Menggunakan Nomor Telepon pada Firebase
- Firebase Analytics: Events dan User Properties
- Cara Autentikasi Menggunakan Akun Google pada Firebase
Cara Autentikasi Menggunakan Akun Facebook pada Firebase
1) Tambahkan Firebase kedalam Project Aplikasi Kalian,Untuk Tutorialnya bisa dilihat Disini2) Buka website Facebook Developer, Disini. Lalu tambahkan aplikasi baru yang ingin kita buat, untuk dihubungkan dengan Facebook.
2) Pada bagian ini, kalian isi dengan Nama Tampilan/Nama Aplikasi dan Email Kontak yang aktif, setelah itu klik Buat ID Aplikasi.
3) Didalam menu Dashboard kalian, salin.copy ID Aplikasi dan Kunci Rahasia Aplikasi/App Secret.
4) Pada menu Dashboad Firebase, Buka Auhentication, pilih Metode masuk, pilih Facebook, lalu kalin masukan ID Aplikasi dan Secret App yang sudah kalian salin tadi. setelah itu klik Simpan.
5) Buka Facebook Developer Lagi, Masuk pada menu Masuk Facebook > Tutorial Singkat > Pilih Android.
6) Pada bagian ini, kita langsung import saya Facebook SDK kedalam Repositori kita. Buka Project Aplikasi Android Kalian, disini kalian diharuskan untuk mengunduh SDK dari Repositori Maven Central, buka file build.gradle (Module: Project).
allprojects {
repositories {
google()
jcenter()
mavenCentral() //Repositori Yang Harus Ditambahkan
}
}
implementation 'com.facebook.android:facebook-android-sdk:[4,5)'
implementation 'com.google.firebase:firebase-auth:11.8.0'
import com.facebook.FacebookSdk;
import com.facebook.appevents.AppEventsLogger;
10) Selanjutnya kalian diharuskan untuk memasukan Hash Kunci, Caranya buka CMD (Sebagai Administrator), lalu masuk pada path bin, didalam Java > jre. Contohnya seperti berikut ini:
Kalian dapat berpindah direktori menggunakan perintah cd.
11) Selanjutnya kalian download openssl pada link berikut ini. Download Disini. Extract lalu simpan pada partisi C. Jika sudah ada, kalina bisa melewati langkah berikut ini.
12) Buka cmd, lalu masukan script/pertintah berikut ini, ubah nama Wildan M Athoillah dan sesuaikan dengan nama folder di komputer kamu, lalu C:\OpenSSL-Win64\bin\openssl sesuaikan dengan dimana kamu menyimpan file tersebut
keytool -exportcert -alias androiddebugkey -keystore "C:\Users\Wildan M Athoillah\.android\debug.keystore" | "C:\OpenSSL-Win64\bin\openssl" sha1 -binary | "C:\OpenSSL-Win64\bin\openssl" base64
Kalian salin Kunci Hashnya, lalu paste pada Facebook Developer
14) Aktifkan Single Sign On, Buka file /app/res/values/strings.xml kalian, tambahkan ID Aplikasi Kalian.
<string name="facebook_app_id">xxxxxxxxxxxxxxx</string>
<string name="fb_login_protocol_scheme">fbxxxxxxxxxxxxxxx</string>
<uses-permission android:name="android.permission.INTERNET" />
16) Tambahkan elemen meta-data, dan sebuah aktivitas serta filter intent untuk Tab Khusus Chrome di dalam elemen application kalian. Seperti berikut ini:
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<!-- Baris Kode Yang Ditambahkan -->
<meta-data android:name="com.facebook.sdk.ApplicationId"
android:value="@string/facebook_app_id"/>
<activity android:name="com.facebook.FacebookActivity"
android:configChanges=
"keyboard|keyboardHidden|screenLayout|screenSize|orientation"
android:label="@string/app_name" />
<activity
android:name="com.facebook.CustomTabActivity"
android:exported="true">
<intent-filter>
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<data android:scheme="@string/fb_login_protocol_scheme" />
</intent-filter>
</activity>
<!-- End -->
<activity android:name=".login">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity android:name=".main_menu"></activity>
</application>
<?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="28dp"
android:gravity="center"
android:orientation="vertical"
tools:context="cianjur.developer.net.firebaseexample.login">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Masuk Dengan"
android:textSize="15sp"
android:textStyle="bold" />
<com.facebook.login.widget.LoginButton
android:id="@+id/login_fb"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp" />
</LinearLayout>
18) Sebelumnya kalain harus membuat activity kedua, berimana misalnya "main_menu".
<?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="16dp"
android:gravity="center"
android:orientation="vertical"
tools:context="cianjur.developer.net.firebaseexample.main_menu">
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Selamat Datang Di WILDAN TECHNO ART"
android:textSize="14sp"
android:textStyle="bold" />
<Button
android:id="@+id/logout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Keluar" />
</LinearLayout>
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.widget.Toast;
import com.facebook.AccessToken;
import com.facebook.CallbackManager;
import com.facebook.FacebookCallback;
import com.facebook.FacebookException;
import com.facebook.FacebookSdk;
import com.facebook.login.LoginResult;
import com.facebook.login.widget.LoginButton;
import com.google.android.gms.tasks.OnCompleteListener;
import com.google.android.gms.tasks.Task;
import com.google.firebase.auth.AuthCredential;
import com.google.firebase.auth.AuthResult;
import com.google.firebase.auth.FacebookAuthProvider;
import com.google.firebase.auth.FirebaseAuth;
public class login extends AppCompatActivity{
//Deklarasi Variable
private FirebaseAuth firebaseAuth; //Untuk Autentifikasi
private FirebaseAuth.AuthStateListener authStateListener; //Untuk Menangani Kajadian Saat Autentifikasi
private LoginButton loginFB;
private CallbackManager callbackManager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_login);
//Inisialisasi Facebook Login Buton
callbackManager = CallbackManager.Factory.create();
loginFB = findViewById(R.id.login_fb);
//Mengizinkan Membaca Email dan Profil
loginFB.setReadPermissions("email", "public_profile");
loginFB.registerCallback(callbackManager, new FacebookCallback<LoginResult>() {
@Override
public void onSuccess(LoginResult loginResult) {
//Menghandle saat Login kia Sukses
handleFacebookAccessToken(loginResult.getAccessToken());
}
@Override
public void onCancel() {
//Menghandle saat Membatalkan Aktivitas
}
@Override
public void onError(FacebookException error) {
//Menghandle saat Terjadi Error
Toast.makeText(getApplicationContext(),"Terjadi Kesalahan", Toast.LENGTH_SHORT).show();
}
});
FirebaseConnect();
}
//Kumpulan Konfigurasi Untuk Menghubungkan dengan Firebase
private void FirebaseConnect(){
firebaseAuth = FirebaseAuth.getInstance(); //Menghubungkan dengan Firebase Authentifikasi
//Authentifikasi Listener
authStateListener = new FirebaseAuth.AuthStateListener() {
@Override
public void onAuthStateChanged(@NonNull FirebaseAuth firebaseAuth) {
/*
* Jika User sebelumnya telah masuk/login dan belum keluar/logout, secara otomatis
* Saat aplikasi dibuka kembali, Activity ini akan langsung dialihkan pada Activiy MainMenu
*/
if(firebaseAuth.getCurrentUser() != null){
startActivity(new Intent(login.this,main_menu.class));
finish();
}
}
};
}
//Konfiurasi Untuk Masuk ke Akun Facebook
private void SignIn(){
}
//Untuk Mengangani Kejadian Saat Pengguna Berhasil Login
private void handleFacebookAccessToken(AccessToken token){
AuthCredential credential = FacebookAuthProvider.getCredential(token.getToken());
firebaseAuth.signInWithCredential(credential)
.addOnCompleteListener(this, new OnCompleteListener<AuthResult>() {
@Override
public void onComplete(@NonNull Task<AuthResult> task) {
if (task.isSuccessful()) {
Toast.makeText(getApplicationContext(),"Autentikasi Berhasil", Toast.LENGTH_SHORT).show();
finish();
}else {
Toast.makeText(getApplicationContext(),"Autentikasi Gagal", Toast.LENGTH_SHORT).show();
}
}
});
}
@Override
protected void onStart() {
super.onStart();
//Jika User Telah Masuk/Login, makan akan mengangani kajadian apakah user telah masuk
firebaseAuth.addAuthStateListener(authStateListener);
}
//Saat Aktifitas dihentikan, maka listener akan dihapus
@Override
protected void onStop() {
super.onStop();
if(authStateListener != null){
firebaseAuth.removeAuthStateListener(authStateListener);
}
}
@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
super.onActivityResult(requestCode, resultCode, data);
//Menembalikan Hasil Activity ke SDK Facebook
callbackManager.onActivityResult(requestCode, resultCode, data);
}
}
Untuk Logout/Keluar, kalian dapat menambahkan baris kode berikut ini pada button didalam Activity main_menu.
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 com.google.firebase.auth.FirebaseAuth;
public class main_menu extends AppCompatActivity {
private FirebaseAuth auth;
private FirebaseAuth.AuthStateListener authStateListener;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main_menu);
Button Keluar = findViewById(R.id.logout);
auth = FirebaseAuth.getInstance(); //Menghubungkan dengan Firebase Authentifikasi
//Authentifikasi Listener
authStateListener = new FirebaseAuth.AuthStateListener() {
@Override
public void onAuthStateChanged(@NonNull FirebaseAuth firebaseAuth) {
/*
* Jika User sebelumnya telah keluar/logout
* Saat aplikasi dibuka kembali, Activity ini akan langsung dialihkan pada Activity Login
*/
if(firebaseAuth.getCurrentUser() == null){
startActivity(new Intent(main_menu.this, login.class));
finish();
}
}
};
Keluar.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
//Digunakan Untuk Logout
auth.signOut();
}
});
}
@Override
protected void onStart() {
super.onStart();
auth.addAuthStateListener(authStateListener);
}
@Override
protected void onStop() {
super.onStop();
if(authStateListener != null){
auth.removeAuthStateListener(authStateListener);
}
}
}
Demo:
Penjelasan lengkapnya bisa kalian lihat disini.
Projectnya Bisa Kalian Download di Github Saya.
Terimakasih atas kunjungannya, semoga tutorial yang saya berikan bisa bermanfaat untuk kalian semua, selebihnya, mohon maaf bila ada kesalahan.
Wassalamualaikum Warahmatullahi Wabarakatuh.
