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 的結果了。