在使用之前，需要先在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登入挺簡單的，因為官方文件都寫的非常清楚了，但是畢竟自己是前端小白，所以需要總結一切自己覺得對自己有幫助的經驗啊，遇到報錯的時候，我們需要沉下心去找解決的辦法，解決之後會覺得很有成就感的哦~）