Tutorial Laravel 5.5 - Login / Register dengan Menggunakan akun Facebook / Google - Laravel Socialite

Untuk saat ini hampir setiap website yang memiliki fitur register dan login sudah menyertakan opsi untuk melakukan register maupun login dengan menggunakan akun Facebook dan Google. Fitur demikian menurut saya tentu saja akan mempermudah user melakukan register dan login karena tidak perlu memasukkan username / email dan password lagi. Laravel sudah menyediakan fitur tersebut yaitu dengan menggunakan Laravel Socialite. Pada artikel kali ini akan saya jelaskan bagaimana cara menggunakan Laravel Socialite ini untuk melakukan login / register pada suatu website.

#INSTALL PACKAGE LARAVEL SOCIALITE

Langkah pertama adalah melakukan instalasi package Laravel Socilite. Jalankan perintah berikut pada command prompt direktori program anda.

composer require laravel/socialite

Hasilnya akan muncul proses seperti gambar di bawah ini

Composer

#MEMBUAT CREDENTIAL FACEBOOK DAN GOOGLE

Langka berikutnya adalah membuat credential pada Facebook dan Google. Informasi credential ini nantinya akan dipakai sebagai informasi pada Laravel Socialite ini. 

Facebook

Untuk mendapatkan informasi credential pada facebook yaitu dengan membuat App baru melalui url berikut ini https://developers.facebook.com/. Buatlah app baru dan kemudian akan muncul tampilan seperti gambar di bawah ini

Facebook Developer

Pilihlah button Set Up pada menu Facebook Login.

Menu

Pilihlah menu Settings dari bagian Product - Facebook Login. 

Isihlah input pada Valid OAuth Redirect URIs dengan url callback website anda. Dalam hal ini saya akan menggunakan contoh https://ozkadon.blogspot.com/callback/facebook. Yang perlu diingat adalah website yang anda gunakan harus menggunakan https agar dapat memakai fitur ini. Setelah itu klik button Save Changes.

Settings - Basic

Langkah berikutnya adalah membuka menu Basic sesuai dengan gambar di atas. Nanti akan muncul halaman seperti gambar di atas.

Isilah url pada bagian Privacy Policy URL dan Terms of Service URL. Dan klik Save Changes.

Simpanlah data APP ID dan APP Secret pada app yang baru anda buat ini. Dan yang terakhir adalah klik tulisan OFF di bagian atas untuk mengubah status app dari In Development menjadi Live.

Google

Untuk membuat credential baru pada google yang pertama adalah bukalah link berikut https://console.developers.google.com. Pilihlah menu Create credentials kemudian pilihlah jenis OAuth client ID. 

• Pilihlah application type Web application
• Authorized JavaScript origins diisi dengan nama url website anda
• Authorized redirect URIs sama dengan facebook diisi dengan url redirect misalnya https://ozkadon.blogspot.com/callback/google

Di sini saya membedakan parameter url bagian akhirnya di mana saya menggunakan google untuk redirect google dan facebook untuk redirect facebook. Nantinya parameter ini akan saya gunakan untuk membedakan cara mengambil data dengan Laravel Socialite ini.

Credential Google

Simpanlah data Client ID dan Client secret pada credential yang baru saja anda buat. Sekarang kita akan beralih pada bagian program Laravelnya.

#KONFIGURASI LARAVEL

Tambahkan file konfigurasi berikut ini pada file services.php yang terdapat dalam direktori config.

    'facebook' => [

        'client_id' => env('FB_CLIENT_ID', 'xxx'),

        'client_secret' => env('FB_SECRET_ID', 'xxx'),

        'redirect' => env('FB_REDIRECT', 'xxx')

    ],

    'google' => [

        'client_id' => env('GP_CLIENT_ID', 'xxx'),

        'client_secret' => env('GP_SECRET_ID', 'xxx'),

        'redirect' => env('GP_REDIRECT', 'xxx')

    ],

Langkah berikutnya adalah menambahkan kode pada file .env sesuai dengan variabel yang telah dituliskan pada bagian config/services.php di atas.

FB_CLIENT_ID = isi dengan Facebook Client ID 

FB_SECRET_ID = isi dengan Facebook Secret ID

FB_REDIRECT = isi dengan URL Redirect Facebook

GP_CLIENT_ID = isi dengan Google Client ID

GP_SECRET_ID = isi dengan Google Secret ID

GP_REDIRECT = isi dengan URL Redirect Google

Isilah variabel-variabel pada .env dengan data-data credential yang sudah anda simpan sebelumnya. Untuk FB_REDIRECT dan GP_REDIRECT isilah dengan URL redirect yang anda daftarkan sebelumnya pada saat membuat credential pada contoh yang saya gunakan adalah https://ozkadon.blogspot.com/callback/facebook dan https://ozkadon.blogspot.com/callback/google.

#KODE PROGRAM LARAVEL

Yang pertama buatlah route terlebih dahulu seperti contoh kode di bawah ini

Route::get('/auth/{sosmed}','HomeController@connect');

Disini saya menggunakan {sosmed} untuk membedakan antara facebook atau google yang akan dipanggil.Sedangkan berikut ini adalah kode dari function connect yang sudah ditulis dalam route tadi.

    public function connect($sosmed) {

        $this->arrsosmed = array('facebook','google');

        if(!in_array($sosmed, $this->arrsosmed)){

            return redirect('/');

        }

        return Socialite::driver($sosmed)->redirect();

    }

Kode diatas akan melakukan pengecekan jika request di luar facebook dan google akan dilakukan redirect ke halaman awal.

Kemudian yang perlu kita buat selanjutnya adalah tampilan view dari halaman login / register ini. Berikut ini adalah contoh kode sederhana dari view untuk login tersebut.

<a class="btn btn-lg btn-block btn-primary mb-10" href="<?= url('/auth/facebook'); ?>" role="button"><i class="fa fa-facebook-square"></i>  Log in with Facebook</a>

<a class="btn btn-lg btn-block btn-danger btn-gp mb-10" href="<?= url('/auth/google'); ?>" role="button"><i class="fa fa-google-plus-square"></i> Log in with Google + </a>

Contoh kode di atas hanya contoh sederhana dimana saya membuat 2 link login yaitu yang atas untuk login dengan facebook dan yang bawah untuk login dengan menggunakan google account.

Nah sekarang kita memasuki bagian akhir yang perlu dikerjakan, yaitu membuat route untuk menangani url redirect dari facebook dan google yang kita daftarkan tadi saat membuat credential. Buatlah route yang sesuaikan dengan url redirect yang anda daftarkan tadi.

Route::get('/callback/{sosmed}','HomeController@callback');

Disini saya menggunakan url /callback/{sosmed} sesuai dengan contoh-contoh yang telah saya berikan sebelumnya. Sama dengan penjelasan sebelumnya saya menggunakan {sosmed} untuk membedakan antara facebook dan google nantinya.

Dan langkah terakhir yang akan kita buat adalah function callback. Berikut ini contoh kode dari function callback yang saya buat.

    public function callback(Request $request, $sosmed) {
        //pengecekan jika bukan facebook dan google maka diredirect ke halaman awal
        $this->arrsosmed = array('facebook','google');
        if(!in_array($sosmed, $this->arrsosmed)){
            return redirect('/');
        }

        //code untuk pengecekan nilai kembalian
        if($request->has('code')){
	    // jika facebook
            if($sosmed == 'facebook'){  
                $driver = Socialite::driver($sosmed)
                            ->fields([
                            'name', 
                            'first_name', 
                            'last_name', 
                            'email', 
                            'gender', 
                            'verified'
                            ]);
            } else {
                //jika bukan facebook
                $driver = Socialite::driver($sosmed)->scopes(['profile','email']);
            }

	    //untuk mengambil informasi user yang login
            $user = $driver->user();
            if($user){
                //jika login dengan google
                if($sosmed=='google'){
                    $sex = 'other';
                    if (isset($user->user['gender'])) {
                        if(!in_array($user->user['gender'], array('male','female'))){
                            $sex = 'other';
                        } else $sex = $user->user['gender'];
                    }
                } else {
                    $sex = 'other';
                }

                //jika login dengan facebook
                if($sosmed == 'facebook'){
                    if(array_key_exists('email',$user->user)){
                        $mail = $user->user['email'];
                    }else{
                        $mail = $user->email;
                    }
                }else{
                    $mail = $user->email;
                }

                $firstname = ($sosmed=='facebook')?preg_replace('/[^A-Za-z0-9]/', "", $user->user['first_name']):preg_replace('/[^A-Za-z0-9]/', "", $user->user['name']['givenName']);
                $lastname = ($sosmed=='facebook')?preg_replace('/[^A-Za-z0-9]/', "", $user->user['last_name']):preg_replace('/[^A-Za-z0-9]/', "", $user->user['name']['familyName']);
                $email = $mail;
                $jenis_kelamin = $sex;
                 
                //pengecekan jika email kosong - berlaku jika mendaftar facebook melalui mobile yang hanya memerlukan nomor handphone
                if (empty($email)){
                    return redirect('/signup')->with('alert-danger', 'No email address found. Please register manually');
                }

                //pengecekan jika user sudah terdaftar
                $check = User::where('email', '=', $email)->first();
                if ($check){
                        $infos = User::with('avatar')->where(['id' => $check->id])->first();  
                        if(count($infos)) {
                            $info['user_id'] = $infos->id;
                            $info['user_level_id'] = $infos->user_level_id;
                            $info['firstname'] = $infos->firstname;
                            $info['lastname'] = $infos->lastname;
                            $info['email'] = $infos->email;
                            $info['phone'] = $infos->handphone;
                            $info['sex'] = $infos->jenis_kelamin;
                            $info['birth_date'] = $infos->tgl_lahir;
                            $info['occupation'] = $infos->pekerjaan;
                            $info['city'] = $infos->kota;
                            $info['address'] = $infos->alamat;
                            $info['active'] = $infos->active;
                            $info['created_at'] = $infos->created_at->toDateTimeString();            
                            $info['updated_at'] = $infos->updated_at->toDateTimeString();            
                            $info['level'] = $infos->level->name;
                            $info['username'] = $infos->username;          
                            $info['avatar'] = $infos->avatar->url;          
                            $info['last_activity'] = $infos->last_activity;     
                            Session::put ('userinfo', $info);
                        }
                        return redirect('/');
                } else {
                    //jika user belum terdaftar maka buat user baru pada database
                    $user = new User;
                    $user->user_level_id = 3;
                    $user->firstname = $firstname;
                    $user->lastname = $lastname;
                    $user->avatar_id = 0;
                    $user->email = $email;
                    $user->username = strtotime(Carbon::now());
                    $user->password = '';
                    $user->active = 1;
                    $user->user_modified = 1;
                    $user->last_activity = Carbon::now();
                    $user->tgl_lahir = date('Y-m-d');
                    $user->jenis_kelamin = $sex;
                    $user->activation_code = generateRandomString();
                    $user->save();

                    //update info pada session
                    $infos = User::with('avatar')->where(['id' => $user->id])->first();  
                    if(count($infos)) {
                        $info['user_id'] = $infos->id;
                        $info['user_level_id'] = $infos->user_level_id;
                        $info['firstname'] = $infos->firstname;
                        $info['lastname'] = $infos->lastname;
                        $info['email'] = $infos->email;
                        $info['phone'] = $infos->handphone;
                        $info['sex'] = $infos->jenis_kelamin;
                        $info['birth_date'] = $infos->tgl_lahir;
                        $info['occupation'] = $infos->pekerjaan;
                        $info['city'] = $infos->kota;
                        $info['address'] = $infos->alamat;
                        $info['active'] = $infos->active;
                        $info['created_at'] = $infos->created_at->toDateTimeString();            
                        $info['updated_at'] = $infos->updated_at->toDateTimeString();            
                        $info['level'] = $infos->level->name;
                        $info['username'] = $infos->username;          
                        $info['avatar'] = $infos->avatar->url;          
                        $info['last_activity'] = $infos->last_activity;     
                        Session::put ('userinfo', $info);
                    }
                    return redirect('/');
                }
            }
            else return redirect('auth/'.$sosmed);
        }
        else{
            return redirect('auth/'.$sosmed);
        }
    }

Agar artikel ini tidak terlalu panjang, saya menjelaskan bagaimana logika kode tersebut dengan menggunakan comment //. Tentu saja anda tidak perlu meniru persis apa yang saya buat. Sesuaikan sendiri field-field yang dibutuhkan sesuai dengan tabel user pada program anda. Disini saya hanya memberikan contoh penggunakan Laravel Socialite untuk mendapatkan informasi user. Bagaimana pengolahan data user tersebut bisa anda lakukan sesuai kebutuhan.

Demikian artikel Tutorial Laravel 5.5 - Login / Register dengan Menggunakan akun Facebook / Google - Laravel Socialite ini. Semoga penjelasan saya pada artikel ini dapat dipahami. Selamat mencoba.