網頁使用第三方登入服務-Facebook

發表於 2022-12-25 更新於 2023-01-17 分類於筆記，開發

寫在前面

聖誕節快樂～
冷冷的天不曉得大家有沒有出門溜達，還是昨天平安夜裡已經在外狂歡，正在補眠中XD

延續上一篇的Google 登入，今天要介紹的是Facebook 登入，
跟上一篇一樣，截圖的部分可能會與實做的內容，在名稱上有些微的調整，但實在懶得重新截圖了，
請各位看倌不要介意，斟酌參考。

Facebook 相關文件

使用套件

1	composer require facebook/graph-sdk

註冊流程

建立應用程式
選擇類型
基本資訊
選擇剛建立的應用程式
選擇Facebook 登入
選擇網站
填入網站資訊
設定OAuth
* 重新導向URI 需與程式內相同
基本資料
開啟權限

程式碼參考

前端使用sdk 產生按鈕

<!doctype html>
<html>
    <body>
        <fb:login-button scope="public_profile,email" onlogin="checkLoginState();"></fb:login-button>
        <script>

        window.fbAsyncInit = function() {
            FB.init({
                appId      : '{{ app_id }}',
                cookie     : true,
                xfbml      : true,
                version    : 'v13.0'
            });

            FB.AppEvents.logPageView();

        };

        function statusChangeCallback(response) {
            console.log(response);
        }

        (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 = "https://connect.facebook.net/en_US/sdk.js";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));

        function checkLoginState() {
            FB.getLoginStatus(function(response) {
                location.href="{{ redirect_url }}?access_token="+response.authResponse.accessToken;
            });
        }

        </script>
    </body>
</html>

callback
* 此處method 為GET

<?php

// 視各專案儲存config 的方式有所差異
$app_id = $config['app_id'];
$app_secret = $config['app_secret'];

$fb = new \Facebook\Facebook([
    'app_id' => $app_id,
    'app_secret' => $app_secret,
    'default_graph_version' => 'v13.0',
    'default_access_token' => $_GET['access_token'] // 從fb 傳過來的access_token
]);

try {
    $response = $fb->get('/me?fields=name,email,birthday,gender,hometown,location'); // 參數可帶需要的資訊
} catch (\Facebook\Exceptions\FacebookResponseException $e) {
    return ['success' => false];
} catch (\Facebook\Exceptions\FacebookSDKException $e) {
    return ['success' => false];
}

// graphUser
$me = $response->getGraphUser();
$name = $me->getName();
$email = $me->getEmail();
$id = $me->getId();
$birthday = $me->getBirthday();

// graphNode
// $graphNode = $response->getGraphNode();
// $name = $graphNode->getField('name');
// $email = $graphNode->getField('email');
// $id = $graphNode->getField('id');
// $birthday = $graphNode->getField('birthday');

// graphNode Instance method
// $userInfo = $graphNode->asArray();
// $name = $userInfo['name'];

// 以上三種方法皆可取得userData

結語

若不想要使用前端sdk 產生按鈕，也可以透過FB提供的getLoginUrl
取得導向連結，再將連結放入自己客製的登入按鈕中，當使用者點擊該按鈕，就導向登入網址，
後續動作差異不大，有興趣的話可以稍微研究一下，但值得一提的是，
我在實做的過程中一直顯示錯誤，後來發現是因為反向代理的關係，我使用的開發環境有設定反向代理，
但反向代理的過程中，會將https -> http，導致傳到facebooku驗證資訊的時候會顯示callback url 與設定不符。

這部分我比較不懂，是請前輩協助才發現此問題，寫出來給大家參考，若有發現鬼打牆的情況，不妨確認開發的環境是否與我的情況相同。

目前Facebook 登入取得的email, 姓名等等都是參考用的，若要應用在商城或者是其他需要會員資料的地方，
需要斟酌使用，畢竟無法保證其正確性。
除了email 、public profile以外的其他資訊，需要先呼叫一次api 後，才能到developer 的應用程式中去設定進階存取權，
需要提供一些資料，以及操作的影片，才能提交審核，因為過於繁瑣，就不進行申請了。

下一篇會介紹Line 登入，先預祝大家新年快樂～