Web网站实现facebook登录

一、登录facebook开发者中心：https://developers.facebook.com

二、创建应用编号，如下图：

三、添加产品选择Facebook登录，如下图：

四、facebbok登录设置指定要跳转的url，如下图：

五、填写网站地址，根据提示完善相关信息，如下图：

六、前端代码接入，代码如下：

<li><a href="javascript:facebook_login();" class="xq-facebook"><i class="share-icon-facebook"></i></a></li>

<script>

function facebook_login() {

        FB.login(function (response) {

            if (response.authResponse) {

                console.log('Welcome!  Fetching your information.... ');

                FB.api('/me', function (response) {

                    console.log('Good to see you, ' + response.name + '.');

                    checkLoginState()

                });

            } else {

                console.log('User cancelled login or did not fully authorize.');

            }

        }, {

            scope: '',

            return_scopes: true

        });

    }

    var fbId, fbToken;

    function checkLoginState() {

        FB.getLoginStatus(function (response) {

            statusChangeCallback(response);

        });

    }

    function statusChangeCallback(response) {

        if (response.status === 'connected') {

            fbId = response.authResponse.userID;

            fbToken = response.authResponse.accessToken;

            getUserInfo();

        } else if (response.status === 'not_authorized') {

            console.log('facebook未经授权');

        } else {

            console.log('不是登陆到Facebook;不知道是否授权');

        }

    }

    function getUserInfo() {

        FB.api('/me', function (response) {

            console.log('Successful login for: ' + response.name);

            //获取facebook返回的信息

            var data = {

                nickName: response.name,

                avatar: 'http://graph.facebook.com/' + fbId + '/picture?type=large',

                openId: fbId,

                accessToken: fbToken,

                loginType: 'FACEBOOK'

            }

            console.log(data);

        });

    }

</script>

巴特西

Web网站实现facebook登录

最新文章

热门文章