Beranda / Authentication / Firebase

Cara Autentikasi Menggunakan Akun Google pada Firebase

Oleh Wildan M Athoillah

Assalamualaikum Warahmatullahi Wabarakatuh.

Pada tutorial kali ini, saya akan mengajarkan pada kalian bagaimana cara agar aplikasi yang kita buat dapat login/masuk dengan menggunakan akun google. Didalam Firebase menyediakan banyak sekali metode masuk untuk Autentikasi pada Aplikasi, seperti Email, Twitter, Facbook, GitHub, Ponsel, dsb.


Sala satu metode masuk yang akan kita bahas yaitu, dengan menggunakan akun Google, untuk itu sebelumnya kita harus menyiapkan atau membuat akun google terlebih dahulu.

Aplikasi-aplikasi sekarang ini, banyak sekali yang menggunakan akun google sebagai alternaif metode untuk masuk kedalam sebuah aplikasi, dikarenakan popularitas akun Goolge semakin tinggi, untuk itu tidak ada salahnya jika kita menggunakan Autentikasi Google pada Proyek aplikasi kita.

Materi lainnya yang direkomendasikan:

Cara Autentikasi Menggunakan Akun Google pada Firebase


1) Pertama-tama, kita harus menambahkan Firebase kedalam Project Aplikasi,Untuk Tutorialnya kalian bisa lihat Disini
.
2) Buka Dashboard Firebase kalian, pilih Authentication > Metode Masuk > Pilih Google, lalu Aktifkan > Simpan.


3) Didalam project aplikasi kalian, buka file build.gradle (direkori app), tambahkan kedua library berikut ini, didalam dependencies.
compile 'com.google.firebase:firebase-auth:11.8.0'
compile 'com.google.android.gms:play-services-auth:11.8.0'
Kedua library tersebut digunakan untuk Autentikasi pada Firebase.

4) Jangan lupa untuk menambahkan kedua permission berikut ini didalam AndroidManifest.xml kalian.
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
5) Buat pada activity_main.xml yang digunakan untuk login, disini kita akan menggunakan SignInButton, dan juga komponen tambahan seperti TextView.
<?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.google.android.gms.common.SignInButton
        android:id="@+id/login_google"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="4dp">

    </com.google.android.gms.common.SignInButton>

</LinearLayout>
View:


6) Buka file MainActivity.java kalian, pertama kita akan mendeklarasikan beberapa variable yang digunakan untuk kebutuhan Autentikasi, dan juga persiapkan beberapa method seperti berikut ini.
package cianjur.developer.net.firebaseexample;

import android.app.ProgressDialog;
import android.content.Intent;
import android.support.annotation.NonNull;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;

import com.google.android.gms.auth.api.signin.GoogleSignInAccount;
import com.google.android.gms.auth.api.signin.GoogleSignInOptions;
import com.google.android.gms.common.ConnectionResult;
import com.google.android.gms.common.SignInButton;
import com.google.android.gms.common.api.GoogleApiClient;
import com.google.firebase.auth.FirebaseAuth;

public class login extends AppCompatActivity implements GoogleApiClient.OnConnectionFailedListener{

    //Deklarasi Variable
    ProgressDialog progressDialog; //Membuat kemajuan/progres saat login
    private SignInButton googleButton; //Sebuah Tombol khusus Untuk Login
    private GoogleSignInOptions GSO; //Untuk Konfigurasi Google SignIn
    private GoogleApiClient mGoogleApiClient; //Membuat API/Antarmuka Untuk Client
    private FirebaseAuth firebaseAuth; //Untuk Autentifikasi
    private FirebaseAuth.AuthStateListener authStateListener; //Untuk Menangani Kajadian Saat Autentifikasi
    private final int RC_SIGN_ID = 9001; //Kode Unik Untuk SignIn
    private final String TAG = "SignInAcivity";  //Untuk Log Debugging

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_login);
        googleButton = findViewById(R.id.login_google);
        FirebaseConnect();
        googleButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                SignIn();
            }
        });
    }

    //Kumpulan Konfigurasi Untuk Menghubungkan dengan Firebase
    private void FirebaseConnect(){
        //Statement
    }

    //Konfiurasi Untuk Masuk ke Akun Google
    private void SignIn(){
        //Statement
    }

    //Untuk Mengangani Kejadian Saat Pengguna Berhasil Login
    private void firebaseAuthWithGoogle(GoogleSignInAccount account){

    }

    //Menagani Kejadian Saat Gagal Koneksi
    @Override
    public void onConnectionFailed(@NonNull ConnectionResult connectionResult) {
        //Statement
    }

    @Override
    protected void onStart() {
        super.onStart();
    }

    @Override
    protected void onStop() {
        super.onStop();
    }

    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
    }
}
7) Buat Class dan Activiy baru, berinama, misalnya  "main_menu", Kita akan berpidah pada Activity tersebut jika user berhasil login.
<?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:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="Selamat Datang Di WILDAN TECHNO ART"
        android:textSize="18sp"
        android:textStyle="bold" />

    <Button
        android:id="@+id/logout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Keluar" />

</LinearLayout>
8) Selanjutnya buka lagi MainActivity untuk login tadi, didalam method FirebaseConnect(), masukan source code berikut ini:
private void FirebaseConnect(){
        firebaseAnalytics = FirebaseAnalytics.getInstance(this); //Menghubungkan dengan Firebase Analytics
        firebaseAuth = FirebaseAuth.getInstance(); //Menghubungkan dengan Firebase Authentifikasi
        progressDialog = new ProgressDialog(this); //Sebuah ProgressDialog untuk menandakan program sedang dieksekusi

        //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();
                }
            }
        };

        // Konfigurasi GoogleSignIn, Dengan cara bagaimanakah User akan Masuk
        GSO = new GoogleSignInOptions.Builder(GoogleSignInOptions.DEFAULT_SIGN_IN)
                .requestIdToken(getString(R.string.default_web_client_id))
                .requestEmail()
                .build();

        mGoogleApiClient = new GoogleApiClient.Builder(getApplicationContext())
                .enableAutoManage(this, this)
                .addApi(Auth.GOOGLE_SIGN_IN_API, GSO)
                .build();
    }
9) Masukan kode berikut ini didalam method onStart() dan onStop().
    @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);
        }
    }
10) Selanjutnya didalam method SignIn(), saat tombol signIn di klik, maka user diminta untuk menentukan/memilih alamat email yang akan digunakan untuk login.
//Konfiurasi Untuk Masuk ke Akun Google
  private void SignIn(){
    Intent GSignIN = Auth.GoogleSignInApi.getSignInIntent(mGoogleApiClient);
    startActivityForResult(GSignIN, RC_SIGN_ID);
    progressDialog.setMessage("Mohon Tunggu...");
    progressDialog.setIndeterminate(true);
    progressDialog.show();
}
11) Didalam method onActivityResult(), masukan source code berikut ini:
    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        // Mendapatkan Akses untuk SignIn/Masuk Jika permintaan dari Firebase Autentifikasi Terpenuhi
        if (requestCode == RC_SIGN_ID) {
            GoogleSignInResult result = Auth.GoogleSignInApi.getSignInResultFromIntent(data);
            if(result.isSuccess()){
                GoogleSignInAccount account = result.getSignInAccount();
                firebaseAuthWithGoogle(account);
            }else {
                progressDialog.dismiss();
            }
        }else{
            progressDialog.dismiss();
        }
    }
12) Didalam method onConnectionFailed(), kita cukup menambahkan baris kode berikut ini, untuk menangani kejadian jika koneksi gagal terhubung.
//Menagani Kejadian Saat Gagal Koneksi
@Override
public void onConnectionFailed(@NonNull ConnectionResult connectionResult) {
    Log.d(TAG, "OnConnectionFailed" + connectionResult);
    progressDialog.dismiss();
    Toast.makeText(getApplicationContext(),"Koneksi Tidak Terhubung", Toast.LENGTH_SHORT).show();
}
13) Setelah pengguna berhasil login, maka akan mendapatkan token ID dari objek GoogleSignInAccount, token tersebut akan ditukarkan dengan kredensial Firebase, setelah itu lakukan autentikasi dengan Firebase menggunakan kredensial tersebut.
    private void firebaseAuthWithGoogle(GoogleSignInAccount account){
        Log.d(TAG, "firebaseAuthWithGoogle:" + account.getId());

        AuthCredential credential = GoogleAuthProvider.getCredential(account.getIdToken(), null);
        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();
                        }
                        progressDialog.dismiss();
                    }
                });
    }
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 min_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:



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.

Wildan M Athoillah
Wildan M Athoillah Blogger dan spesialis pembuat aplikasi android.