facebook賬號授權登錄第三方網站

參考facebook官方文檔： https://developers.facebook.com/docs/facebook-login/web#redirecturl

在使用之前，需要先在facebook開發者平臺註冊賬號，新建應用，然後獲取新建應用的appId

獲取了appId之後，就可以按照以下步驟進行了。

HTML部分：

<span class="container_span"> <img src="img/facebook.png" alt=""> Log in with Facebook</span>

JS部分：

window.fbAsyncInit = function () {
    FB.init({
        appId: 'xxxxxxxxxxxxx',  //你的appId
        autoLogAppEvents: true,
        xfbml: true,
        version: 'v3.0' //facebook登錄版本
    })
}

//異步引入Facebook sdk.js
(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'))

$('.container_span').click(function () {
    login()
})

function 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: '',
        // scope: 'publish_actions',
        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);
        //把用戶信息交給後臺
        var data = {
            nickName: response.name,
            avatar: 'http://graph.facebook.com/' + fbId + '/picture?type=large',
            openId: fbId,
            loginType: 'FACEBOOK'
        }
        console.log(data)
        POST('/app/user/loginByOther.v2', data, function (res) {
            if (res.code == 0) {
                console.log(res.data)
                localStorage.userInfo = JSON.stringify(res.data)
                localStorage.token = res.data.token
                localStorage.avatar = res.data.avatar
                localStorage.userName = res.data.nickName
                // location.href = 'index.html'

            } else {
                alert(JSON.parse(res.msg)[language])
            }
        })

    });
}

然後就可以預覽效果啦，點擊facebook登錄按鈕，發現彈出來的網頁報錯了：Can't Load URL: The domain of this URL isn't included in the app's domains. To be able to load this URL, add all domains and subdomains of your app to the App Domains field in your app settings.

藉助翻譯軟件可知，報錯內容爲：無法加載網址：此網址的網域未包含在應用的網域中。爲了能夠加載此網址，請將您應用的所有網域和子網域添加到應用設置中的“應用域名”字段。

於是我們需要再次打開facebook開發者設置，在左側欄的facebook登入-->設置-->應用域名方框中填入你的網頁的安全域名。

然後再次點擊facebook登錄按鈕，發現彈出一個網頁

沒錯，這就意味着你已經成功調起facebook啦~

然後用戶輸入facebook賬號密碼就能獲取到用戶信息，把用戶信息傳給後臺保存起來，就能登錄啦~

（PS: 雖然大家都說facebook登錄挺簡單的，因爲官方文檔都寫的非常清楚了，但是畢竟自己是前端小白，所以需要總結一切自己覺得對自己有幫助的經驗啊，遇到報錯的時候，我們需要沉下心去找解決的辦法，解決之後會覺得很有成就感的哦~）