Laravel:20分鐘完成Facebook登入功能

要實作Facebook的OAuth 2.0登入流程,最基本的方法是先瞭解OAuth 2.0協定內容,接著到Facebook官網下載程式語言的SDK、註冊應用程式,然後照著官方文件實作。

但如果使用Laravel的話,直接使用社群提供的package就可以囉。本文介紹artdarek/oauth-4-laravel的使用。

首先要下載這個套件。在指令列輸入:

composer require 'artdarek/oauth-4-laravel:dev-master'

自動下載完畢之後,在’app/config/app.php’內加入兩個value:

'providers' => array(
    // ...

    'Artdarek\OAuth\OAuthServiceProvider'
)

'aliases' => array(
    // ...

    'OAuth' => 'Artdarek\OAuth\Facade\OAuth',
)

Laravel就知道去哪找這個套件了。

然後在’app/config/’底下建立’oauth-4-laravel.php’設定檔:

 'Session', 

    /**
     * Consumers
     */
    'consumers' => array(

        /**
         * Facebook
         */
        'Facebook' => array(
            'client_id'     => '',
            'client_secret' => '',
            'scope'         => array(),
        ),      

    )

);

其中的client_id跟client_secret需要跟Facebook取得,請到Facebook Developers註冊一個app:
上面的Apps => Add a New App => Website => 輸入app名稱 => Create New Facebook App ID => 搞定。
把id 跟 secret複製貼上到這邊。
scopte留空陣列,只會跟臉書拿到基本公開資料。如果想要email的話,就在陣列內加入’email’。
關於權限請參考官網:Permissions with Facebook Login

然後在’app/routes.php’加入你希望的route:
(假設你有個負責會員資料的controller稱為MemberController)

Route::get('/auth/facebook', 'MemberController@loginWithFacebook');

在你希望提供facebook登入的頁面加入:

    Login with Facebook

然後到你的MemberController加入這段程式碼:

public function loginWithFacebook() {

    // get data from input
    $code = Input::get( 'code' );

    // get fb service
    $fb = OAuth::consumer( 'Facebook' );

    // check if code is valid

    // if code is provided get user data and sign in
    if ( !empty( $code ) ) {

        // This was a callback request from facebook, get the token
        $token = $fb->requestAccessToken( $code );

        // Send a request with it
        $result = json_decode( $fb->request( '/me' ), true );

        $message = 'Your unique facebook user id is: ' . $result['id'] . ' and your name is ' . $result['name'];
        echo $message. "
"; //Var_dump //display whole array(). dd($result); } // if not ask for permission first else { // get fb authorization $url = $fb->getAuthorizationUri(); // return to facebook login url return Redirect::to( (string)$url ); } }

大功告成!按下你剛設定的’Login with Facebook’按鈕,你會看到Faecbok要求授權、之後會在你的網站上顯示從Facebook撈到的個資。如何使用這些個資就看您打算如何應用囉。

Q&A

Q: 雖然很神奇,但這從頭到尾黑箱作業。背後到底發生什麼事我都不知道,要我如何敢照做?

問得好。其實,會這麼神奇是因為…

套件管理使用了Composer,所以只要輸入composer require就會自動下載完畢。不放心的話請到Composer官網逛逛,或是閱讀我之前寫的Composer設計原理與基本用法

除此之外,一般來說載好第3方套件之後,通常你至少需要初始化這個第3方類別、接著設定幾個值之類的:

$coolLibrary = new ThirdPartyLibrary();
$coolLibrary->setParameter($paramater)

但是Laravel提供Service Provider功能,讓package的初始化在Service Provider內完成,然後Laravel又提供Facades功能,讓你可以使用類別靜態函式去操作某個實體。
結果就是你只需要寫這行:

 $fb = OAuth::consumer( 'Facebook' );

你就可以用這$fb變數去進行各種操作…驗證、發送API request、等等。
當然這種靜態函式包裝某個實體的作法,有些人不喜歡、認為這反OOP。參見:讓你少打很多字:Facades。