Web網站實現facebook登陸

1、登陸facebook開發者中心：https://developers.facebook.com

2、建立應用編號，以下圖：

3、添加產品選擇Facebook登陸，以下圖：

4、facebbok登陸設置指定要跳轉的url，以下圖：

5、填寫網站地址，根據提示完善相關信息，以下圖：

6、前端代碼接入，代碼以下：

<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>