Laravel – 使用 laravel/socialite 建立 Facebook 第三方登入

安裝 Laravel 6.x LTS 及 Authentication

參考官方網站步驟建立

composer create-project --prefer-dist laravel/laravel facebookAuth "6.*"
composer require laravel/ui "^1.0" --dev
php artisan ui vue --auth
npm install && npm run dev

安裝 laravel/socialite

composer require laravel/socialite

修改 config/app.php

# providers 加入
    Laravel\Socialite\SocialiteServiceProvider::class,
# aliases 加入
    'Socialite' => Laravel\Socialite\Facades\Socialite::class,

修改 config/services.php，加入 facebook

    'facebook' => [
        'client_id' => env('FACEBOOK_APP_ID'),
        'client_secret' => env('FACEBOOK_APP_SECRET'),
        'redirect' => env('FACEBOOK_REDIRECT'),
    ],

建立 SocialAuthFacebookController 控制器

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Socialite;
use App\Services\SocialFacebookAccountService;

class SocialAuthFacebookController extends Controller
{
    /**
     * Create a redirect method to facebook api.
     *
     * @return void
     */
    public function redirect()
    {
        return Socialite::driver('facebook')->redirect();
    }
    /**
    * Return a callback method from facebook api.
    *
    * @return callback URL from facebook
    */
    public function callback(SocialFacebookAccountService $service)
    {
        $user = $service->createOrGetUser(Socialite::driver('facebook')->user());
        auth()->login($user);
        return redirect()->to('/home');
    }
}

修改 route/web.php 新增

Route::get('/redirect', 'SocialAuthFacebookController@redirect');
Route::get('/callback', 'SocialAuthFacebookController@callback');

建立 Model 及 修改相關檔案

php artisan make:model SocialFacebookAccount -m

修改 App/SocialFacebookAccount.php

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class SocialFacebookAccount extends Model
{
    protected $fillable = ['user_id', 'provider_user_id', 'provider'];
    public function user()
    {
        return $this->belongsTo(User::class);
    }
}

修改 create_social_facebook_accounts_table.php

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateSocialFacebookAccountsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('social_facebook_accounts', function (Blueprint $table) {
          $table->integer('user_id');
          $table->string('provider_user_id');
          $table->string('provider');
          $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('social_facebook_accounts');
    }
}

修改完成後執行 php artisan migrate:refresh 將資料庫建立起來。

新增 app/Services 目錄及 SocialFacebookAccountService.php

<?php
namespace App\Services;
use App\SocialFacebookAccount;
use App\User;
use Laravel\Socialite\Contracts\User as ProviderUser;

class SocialFacebookAccountService
{
    public function createOrGetUser(ProviderUser $providerUser)
    {
        $account = SocialFacebookAccount::whereProvider('facebook')
            ->whereProviderUserId($providerUser->getId())
            ->first();
        if ($account) {
            return $account->user;
        } else {
            $account = new SocialFacebookAccount([
                'provider_user_id' => $providerUser->getId(),
                'provider' => 'facebook'
            ]);
            $user = User::whereEmail($providerUser->getEmail())->first();
            if (!$user) {
                $user = User::create([
                    'email' => $providerUser->getEmail(),
                    'name' => $providerUser->getName(),
                    'password' => md5(rand(1,10000)),
                ]);
            }
            $account->user()->associate($user);
            $account->save();
            return $user;
        }
    }
}

修改 login 視圖，新增一個按鈕

<div class="form-group">
    <div class="col-md-8 col-md-offset-4">
        <a href="{{url('/redirect')}}" class="btn btn-primary">Login with Facebook</a>
    </div>
</div>

到 https://developers.facebook.com/ 建立應用程式取得 APP_ID及 APP_SECRET，並修改 .env 檔案，新增 Facebook 相關設定

FACEBOOK_APP_ID= 到https://developers.facebook.com/ 取得
FACEBOOK_APP_SECRET= 到https://developers.facebook.com/ 取得
FACEBOOK_REDIRECT=https://localhost/callback

測試

成品同步放在我的 GitHub 上.

https://github.com/weayzehoa/facebookAuth