需要参考的链接

开发者文档（直接用上述facebook账号密码登录即可）： developers.facebook.com/

js版接入facebook相关文档： developers.facebook.com/docs/javasc…

接入流程图

流程图

前端

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>facebook登录测试</title>
</head>

<body>
    <p>facebook登录界面</p>
    <button onclick="login()">登录</button>
    <button onclick="getStatus()">登录状态</button>
</body>

</html>
// 引用
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>
<script>
    window.fbAsyncInit = function () {
        FB.init({
            appId: '757644475578867',
            cookie: true,
            xfbml: true,
            version: 'v14.0'
        });
    };

    function login() {
        FB.login(function (response) {
            if (response.authResponse) {
                console.log('Welcome!  Fetching your information.... ');
                console.log('authResponse', response.authResponse);
                FB.api('/me', function (response) {
                    console.log('Good to see you, ' + response.name + '.');
                });
            } else {
                console.log('User cancelled login or did not fully authorize.');
            }
        });
    }


    function getStatus() {
        FB.getLoginStatus(function (response) {
        if (response.status === 'connected') {
            // The user is logged in and has authenticated your
            // app, and response.authResponse supplies
            // the user's ID, a valid access token, a signed
            // request, and the time the access token 
            // and signed request each expire.
            var uid = response.authResponse.userID;
            var accessToken = response.authResponse.accessToken;
            console.log('getLoginStatus', response);
        } else if (response.status === 'not_authorized') {
            // The user hasn't authorized your application.  They
            // must click the Login button, or you must call FB.login
            // in response to a user gesture, to launch a login dialog.
            console.log('must click the Login button, or you must call FB.login');
        } else {
            console.log('else');
            // The user isn't logged in to Facebook. You can launch a
            // login dialog with a user gesture, but the user may have
            // to log in to Facebook before authorizing your application.

        }
    });
    }
    
</script>

后端

前端在FB.login的回调里面可以拿到token(短时效) 需要后端校验一下，防止别人拿其他平台的appId授权的token来请求,并且将token换成长时效token developers.facebook.com/docs/facebo…

可以用 https://graph.facebook.com/debug_token?access_token={App-token}&input_token={User-token}这个接口来校验token，User-token为用户登录的token（比如上面用户登录返回的accessToken），App-token是由appId和appSecret拼接而成，格式为 {appId}%7C{appSecret}，%7C就是|urlencode之后的编码。

比如appId是746492673568696，appSecret是71cf85a8ba36c84b22bc3461e143e16b，那就可以直接用发送get请求https://graph.facebook.com/debug_token?access_token=746492673568696%7C71cf85a8ba36c84b22bc3461e143e16b&input_token=前端用户登录返回的accessToken，返回结果的格式如下

{ 
    "data": { 
        "app_id": "746492673568696", 
        "type": "USER", 
        "application": "shop", 
        "data_access_expires_at": 1594896505, 
        "expires_at": 1587124800, 
        "is_valid": true, 
        "scopes": [ 
            "user_birthday", 
            "user_likes", "user_photos", 
            "user_friends", "user_status", 
            "email", "public_profile" 
        ], 
        "user_id": "110029804771531"
    } 
 }

其中is_valid就是token是否校验成功。如果还需要获取其他用户信息，可以参考Facebook提供的api developers.facebook.com/docs/graph-…

Web接入facebook第三方登录之前后端流程

需要参考的链接

接入流程图

前端

相关准备

图示例

代码

后端