FaceBook快捷登入

Posted 2021-01-17 luol

关于集成FaceBook快捷登入，我上回做了个最简单的版本，所有Web端通用，在这边共享下，有更好的解决方案的，麻烦评论留个地址，有不妥之处请指正。

首先，我们先加载Facebook的Js

window.fbAsyncInit = function () {
        FB.init({
            appId: ‘这里写你的ClientId‘,
            cookie: true,
            xfbml: true,
            version: ‘v3.1‘//这里是版本
        });
        FB.AppEvents.logPageView();
    };
    (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‘));

　　然后写一个按钮事件来调用FaceBook登入事件

 $("#FaceBookLogin").click(function () {
        FB.login(function (response) {
            if (response.status === ‘connected‘) {
                console.log(‘Welcome!  Fetching your information.... ‘);
                let accesstoken = response.authResponse.accessToken;
                let userid = response.authResponse.userID;
                // 登录到您的应用程序。
                ////==这边就可以把accesstoken和userid发送到你的服务器，来进行校验了==////
                FB.logout();//个人觉得已经登入完了，就可以把FaceBook退出了
            } else {
                console.log(‘User cancelled login or did not fully authorize.‘);
            }
        });
    })

　　下面就是服务端校验了

在服务端GET请求https://graph.facebook.com/v3.1/这边写前端传过来的Id?fields=email%2Cfirst_name%2Clast_name%2Cname%2Caddress%2Cgender&access_token=这边写前端传过来的Token

如果请求回来的id、email是有的，那就是对的token和id

Id就是我们后台用来判断用户账户的Facebook的ID