Integrasi Facebook Login pada Laravel - Laravel Series ~ Blog Indra El Firasy

Pada sesi kali ini saya akan berbagi tutorial tentang mengintegrasikan Facebook dengan laravel. Lebih tepatnya integrasi Facebook login pada aplikasi Laravel. Pada sesi kali ini kita akan memasang Facebook PHP SDK pada projek Laravel. Kemudian membuat aplikasi Facebook untuk digunakan sebagai media social-login aplikasi Laravel. Ketika seorang user login, kita akan mengambil data profile user tersebut dari Facebook dan menyimpannya pada database.

Ada beberapa step yang akan kita lalui secara garis besar pada sesi kali ini.

Konfigurasi Database
Membuat Facebook App
Memasang Facebook PHP SDK pada Laravel
Menggunakan Library Facebook pada Laravel

Konfigurasi Database

Pada sesi sebelumnya kita sudah membuat tabel users yang menyimpan data seperti email, name, dan password. Tambahkan satu atribut lagi yaitu photo. Kita juga akan butuh satu tabel lagi yang menyimpan data profile user dari Facebook seperti username, user facebook id, dan access token lebih kurang seperti gambar berikut:

Jika Anda belum memiliki kedua tabel tersebut, Anda dapat membuatnya secara manual menggunakan fitur create table pada phpmyadmin xampp Anda. Anda juga bisa menggunakan fitur migrate pada Laravel. Langkahnya adalah sebagai berikut:

Buka cmd pada windows Anda, lalu CD ke folder Laravel.

Jalankan perintah berikut:

php artisan migrate:make create_users_table
php artisan migrate:make create_profiles_table

Laravel akan membuatkan dua file migration untuk Anda. Sekarang buka file migration "create_users_table" pada folder "app/database/migrations".

Hapus semua konten dan masukkan kode migrasi berikut lalu Save.

use IlluminateDatabaseMigrationsMigration;
class CreateUsersTable extends Migration {
    public function up()
    {
        Schema::create('users', function($table)
        {
            $table->increments('id');
            $table->string('email')->unique();
            $table->string('photo');
            $table->string('name');
            $table->string('password');
            $table->timestamps();
        });
    }
    public function down()
    {
        Schema::drop('users');
    }
}

Buka file "create_profiles_table" pada folder yang sama, lalu hapus semua konten dan masukkan kode migrasi berikut lalu Save.

use IlluminateDatabaseMigrationsMigration;

class CreateProfilesTable extends Migration {
    public function up()
    {
        Schema::create('profiles', function($table)
        {
            $table->increments('id');
            $table->integer('user_id')->unsigned();
            $table->string('username');
            $table->biginteger('uid')->unsigned();
            $table->string('access_token');
            $table->string('access_token_secret');
            $table->timestamps();
        });
    }
    public function down()
    {
        Schema::drop('profiles');
    }
}

Jalankan perintah "php artisan migrate" pada cmd. Laravel akan membuatkan dua tabel user pada database. Pastikan Anda sudah membuat database dan melakukan pengaturan koneksi database pada file app/config/database.php.

Buat model untuk tabel profiles. Buat file baru dengan nama Profile.php dan simpan pada folder "app/model".

class Profile extends Eloquent {
    public function user()
    {
        return $this->belongsTo('User');
    }
}

Pada file app/model/User.php juga tambahkan pengaturan relationship berikut:
```
public function profiles()
{
   return $this->hasMany('Profile');
}
```

Memasang Facebook PHP SDK

Saya tidak akan membahas lebih dalam mengenai cara membuat Facebook App. Anda dapat mempelajarinya pada dokumentasi yang disediakan Facebook. Simpelnya silahkan buka https://developers.facebook.com/ dan klik menu Apps. Di sana ada pilihan "Add new app" untuk Anda membuat Facebook App.

Setelah Anda selesai membuat App tersebut, pastikan Anda mendapatkan App ID dan App Secret Key. Asumsikan Anda sudah memiliki keduanya, sekarang buat file facebook.php yang berisikan App ID dan Secret Key App Facebook Anda, dan simpan pada folder "app/config".

// app/config/facebook.php
// Facebook app Config 
return array(
    'appId' => 'my-app-id',
    'secret' => 'my-app-secret'
);

Berikut langkah untuk memasang Facebook PHP SDK:

Buka kembali folder Laravel anda pada cmd.
Jalankan commend berikut.
```
composer require facebook/php-sdk
```
Anda akan ditanya oleh prompt tentang version yang akan dipasang. Ketik dev-master lalu tekan Enter.
Biarkan commend prompt menyelesaikan tugasnya.

Facebook SDK akan didownload dan entry pada package SDK akan terdaftar secara otomatis pada file composer.json. File SDK Facebook tersebut akan dapat Anda temukan pada folder vendor. Sekarang kita sudah dapat menggunakan Facebook SDK tersebut pada aplikasi Anda.

Menggunakan Library Facebook pada Laravel

Sesi ini merupakan bagian terpenting untuk menerapkan Facebook Login dan tentu saja Register. Kita akan bermain pada file Route.php yang ada pada folder app.

Pertama kita akan membuat route 'login/fb' yang akan berfungsi untuk mengarahkan user ke halaman authentikasi Facebook dimana user akan memberikan permission untuk mengirim data email, name, photo dan lainnya kembali ke aplikasi.

Route::get('login/fb', function() {
    $facebook = new Facebook(Config::get('facebook'));
    $params = array(
        'redirect_uri' => url('/login/fb/callback'),
        'scope' => 'email',
    );
    return Redirect::to($facebook->getLoginUrl($params));
});

Ke dua, kita butuh route 'login/fb/callback' untuk menerima akses token dari Facebook ketika proses pertama telah dilakukan. Facebook akan secara otomatis mengakses route tersebut karena pada route 'login/fb' kita sudah mengatur redirect_url supaya menuju route ini.

Route::get('login/fb/callback', function() {
    $code = Input::get('code');
    if (strlen($code) == 0) return Redirect::to('/')->with('message', 'There was an error communicating with Facebook');

    $facebook = new Facebook(Config::get('facebook'));
    $uid = $facebook->getUser();

    if ($uid == 0) return Redirect::to('/')->with('message', 'There was an error');

    $me = $facebook->api('/me');

    dd($me);
});

Sekarang ketika Anda mencoba untuk mengakses login/fb, seharusnya Anda akan dapat melihat data-data Anda dari Facebook. Jika Anda berhasil pada tahap ini, kita tinggal membuat data tersebut dapat digunakan untuk disimpan pada database sebagai user dan profile.

Sederhananya proses yang akan dilalui adalah sebagai berikut saya kutip dari sumber.

Tahap terakhir yang akan kita lakukan adalah menyimpan/memperbaharui data user sesuai dengan logic di atas.

Route::get('login/fb/callback', function() {
    $code = Input::get('code');
    if (strlen($code) == 0) return Redirect::to('/')->with('message', 'There was an error communicating with Facebook');

    $facebook = new Facebook(Config::get('facebook'));
    $uid = $facebook->getUser();

    if ($uid == 0) return Redirect::to('/')->with('message', 'There was an error');

    $me = $facebook->api('/me');

    $profile = Profile::whereUid($uid)->first();
    if (empty($profile)) {

        $user = new User;
        $user->name = $me['first_name'].' '.$me['last_name'];
        $user->email = $me['email'];
        $user->photo = 'https://graph.facebook.com/'.$me['username'].'/picture?type=large';
        $user->save();

        $profile = new Profile();
        $profile->uid = $uid;
        $profile->username = $me['username'];
        $profile = $user->profiles()->save($profile);
    }

    $profile->access_token = $facebook->getAccessToken();
    $profile->save();

    $user = $profile->user;

    Auth::login($user);

    return Redirect::to('/')->with('message', 'Logged in with Facebook');
});

Sekarang, cobalah untuk login, dan jika semua berjalan lancar, pada database Anda akan melihat data user Anda berhasil tersimpan. Juga pada halaman browser Anda akan error karena kita belum membuat route '/'. Sekarang kita buat route '/' dan 'logout'.

Route::get('/', function()
{
    $data = array();

    if (Auth::check()) {
        $data = Auth::user();
    }
    return View::make('user', array('data'=>$data));
});

Route::get('logout', function() {
    Auth::logout();
    return Redirect::to('/');
});

Biar tampilannya tidak terlalu jelek, kita buat view dengan nama file user.blade.php dan simpan pada folder "app/views".

@if(Session::has('message'))
    {{ Session::get('message')}}
@endif
<br/>
@if (!empty($data))
    Hello, {{{ $data['name'] }}} 
    
    Your email is {{ $data['email']}}
    
    <a href="/logout">Logout</a>
@else
    Hi! Would you like to <a href="/login/fb">Login with Facebook</a> ?
@endif

Akhirnya, ketika user ke halaman index dan belum login maka akan muncul perintah untuk memintanya Login with Facebook. Jika user tersebut login, sebuah data user baru akan disimpan pada database jika sebelumnya belum pernah login.

Perlu diingat bahwa uid user yang diterima dari Facebook akan berbeda untuk setiap App Facebook. Ada peluang dimana terjadi duplikat profile data ketika Anda mengganti App Facebook anda sementara data pada tabel profile masih ada.

Demikianlah penjelasan singkat mengenai integrasi Facebook PHP SDK pada Laravel. Semoga bermanfaat bagi Anda.

Sumber:

Maxoffsky

Laravel

Demo:

http://demo-fb-login.maxoffsky.com/

Source on Github:

https://github.com/msurguy/laravel-facebook-login