Cara Autentikasi Menggunakan Akun Facebook pada Firebase


Assalamualaikum Warahmatullahi Wabarakatuh.

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.

Cara Autentikasi Menggunakan Akun Facebook pada Firebase

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 Akun Facebook pada Firebase

1) Tambahkan Firebase kedalam Project Aplikasi Kalian,Untuk Tutorialnya bisa dilihat Disini

2) Buka website Facebook Developer, Disini. Lalu tambahkan aplikasi baru yang ingin kita buat, untuk dihubungkan dengan Facebook.

Menambahkan Aplikasi Baru di Facebook Developer

2) Pada bagian ini, kalian isi dengan Nama Tampilan/Nama Aplikasi dan Email Kontak yang aktif, setelah itu klik Buat ID Aplikasi.

Buat ID Aplikasi Baru

3) Didalam menu Dashboard kalian, salin.copy ID Aplikasi dan Kunci Rahasia Aplikasi/App Secret.

Dashboard Pada Facebook Developer

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.

Memasukan ID Aplikasi dan Sercet App pada Autentifikasi FB di Firebase

5) Buka Facebook Developer Lagi, Masuk pada menu Masuk Facebook > Tutorial Singkat > Pilih Android.

Tutorial Singkat untuk menambahkan Masuk Facebook ke Aplikasi

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
    }
}

7) Buka file build.gradle (Module: App), masukan library berikut ini, kedalam dependencies{}.

implementation 'com.facebook.android:facebook-android-sdk:[4,5)'
implementation 'com.google.firebase:firebase-auth:11.8.0'

8) Masuka Kedua Package Berikut ini kedalam MainActivity.java, kalian.

import com.facebook.FacebookSdk;
import com.facebook.appevents.AppEventsLogger;

9) Pada bagian ini, kalian ini dengan Nama Paket dan Nama Peket pada ActiviyMain (Kaliann cukup menambahkan nama class di ujing nama paket). Save.

Memasukan Nama Paket

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:

Menentukan Path pada Java

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:

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

Yang saya tandai dengan warna merah, sesuaikan dengan nama direktori di komputer/laptop kalian, lalu yang saya tandai dengan warna hijau, ubah dengan nama direktori openssl, di komputer/laptop kalian.

13 Jika sudah maka akan diminta password untuk membukanya, masukan password "android", lalu tekan enter.

Medapatkan Kunci Hash

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>

15) Buka file /app/manifest/AndroidManifest.xml, lalu Tambahkan elemen uses-permission berikut ini, agar aplikasi mengijinkan membuaka socket jaringan.

<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>

17) Selanjutnya kita tambahkan tombol Login Facebook di activity_main.xml.

<?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>

View:

Login Facebook Activity

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>

19) Buka file MainActivity.java, atau activity utama kalian, 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.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() {
            @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() {
                    @Override
                    public void onComplete(@NonNull Task 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);
    }
}

Saat User berhasil login, makan akan berpindah pada activity main_menu.

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:

Screenshot_Autentikasi Dengan Facebook Example1 Screenshot_Autentikasi Dengan Facebook Example2

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.

Buka Komentar Tutup Komentar

Disqus Comments