Facebook JavaScript Login

之前有提到 Facebook 以及 Google 使用 PHP API 登入的寫法（旋轉門），今天來講一下 Facebook JavaScript 端的用法，JavaScript 端為人所詬病的安全性問題，可以使用另外一個 PHP 呼叫 Facebook Graph Tool 的方式去取得值，下面來示範作法。

HTML

<input type="hidden" name="appId" id="appId" value="<?php echo $appId; ?>">

我不喜歡把 PHP 結果寫在 JavaScript 裡面，所以在 html 頁面放一個 JavaScript 去抓值。

JavaScript

function facebookLogin() {
    FB.login(function(response) {
        if (response.authResponse) {
            FB.getLoginStatus(function(res) {
                if (res.status === 'connected') {
                    accessToken = res.authResponse.accessToken;

                    $.get('next.php', {accessToken: accessToken}, function() {
                        // Do something
                    })
                }
            });
        }
    });
}

window.fbAsyncInit = function() {
    FB.init({
        appId: $('#appId').val(),
        version: 'v2.3',
        status: true, cookie: true,
        xfbml: true
    });
 
    facebookLogin();
};

(function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "//connect.facebook.net/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
} (document, 'script', 'facebook-jssdk'));

這段 code 會自動觸發 facebookLogin function，如果想要按按鈕觸發的話，就是移除 window.fbAsyncInit 下的 facebookLogin()，然後把他 bind 到某個事件上。

PHP

<?php

$accessToken = $_GET['accessToken'];
$graphUrl = "https://graph.facebook.com/me?access_token=" . $accessToken;
$data = json_decode(file_get_contents($graphUrl));

echo '<pre>'; var_dump($data); echo '</pre>';

PHP 頁面接到值後，可以利用這個 access token 去跟 graph api 拿資料，可以活多久我沒記，因為照理說這些事情應該要在瞬間處裡完成，透過這樣的方式就不用害怕對方攔截並修改你 JavaScript 的結果了。

Facebook And Google Login Upgrade

這次 Faceook 規定 4/30 要升級到比較新的套件，Google 則是 4/20 以後要禁止使用 openid 2.0 登入，列一下 PHP 端製作的筆記。

Facebook

首先你要下載 Facebook PHP 的 SDK，安裝方法有 composer 或直接下載，PHP 版本需求為 5.4+。

Composer

{
  "require" : {
    "facebook/php-sdk-v4" : "4.0.*"
  }
}

GitHub

https://github.com/facebookarchive/facebook-php-sdk

PHP Code

<?php

use Facebook\FacebookSession;
use Facebook\FacebookRequest;
use Facebook\GraphUser;
use Facebook\FacebookRequestException;
use Facebook\FacebookRedirectLoginHelper;

$id = 'YOUR CLIENT ID';
$secret = 'YOUR SECRET';
$url = 'RETURN URL';

// Pemission scope, type is array
// reference url: https://developers.facebook.com/docs/facebook-login/permissions/v2.3
$permissions = 'YOUR PERMISSIONS SCOPE';

FacebookSession::setDefaultApplication($id, $secret);
$helper = new FacebookRedirectLoginHelper($url);

try {
    if(isset($_SESSION['access_token']) === true) {
        $session = new FacebookSession($_SESSION['access_token']);
    } else {
        $session = $helper->getSessionFromRedirect();
    }
} catch(FacebookRequestException $ex) {
    // When Facebook returns an error
    $ex->getMessage();
} catch(\Exception $ex) {
    // When validation fails or other local issues
    $ex->getMessage();
}

if ($session) {
    $_SESSION['access_token'] = $session->getToken();

    // Get all scope id
    $request = (new FacebookRequest($session, 'GET', '/me/ids_for_business'))->execute();
    $idGroup = (array)$request->getGraphObject()->getProperty('data')->asArray();

    // Get user info
    $request = (new FacebookRequest($session, 'GET', '/me'))->execute();
    $user = $request->getGraphObject()->asArray();
} else {
    // Echo login url
    echo $helper->getLoginUrl($permissions);
}

Google

安裝方法一樣有兩種，composer 跟 github，PHP 要求為 5.2+。

Composer

"require": {
  "google/apiclient": "1.0.*@beta"
}

GitHub

https://github.com/google/google-api-php-client

PHP Code

<?php

$id = 'YOUR CLIENT ID';
$secret = 'YOUR SECRET';
$url = 'RETURN URL';

$client = new Google_Client();
$client->setClientId($id);
$client->setClientSecret($secret);
$client->setRedirectUri($url);
$client->setScopes(
    array(
        'https://www.googleapis.com/auth/userinfo.email',
        'https://www.googleapis.com/auth/userinfo.profile',
    )
);
$service = new Google_Service_Oauth2($client);

if (isset($_GET['code']) === true) {
    $client->authenticate($_GET['code']);
    $_SESSION['access_token'] = $client->getAccessToken();

    header('Location: http://' . $_SERVER['HTTP_HOST'] . $_SERVER['PHP_SELF']);
}

if (isset($_SESSION['access_token']) === true) {
    $client->setAccessToken($_SESSION['access_token']);
}

if ($client->getAccessToken()) {
    // User info
    $me = $service->userinfo->get();
} else {
    $authUrl = $client->createAuthUrl();

    // Login url
    echo $authUrl;
}