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登录挺简单的，因为官方文档都写的非常清楚了，但是毕竟自己是前端小白，所以需要总结一切自己觉得对自己有帮助的经验啊，遇到报错的时候，我们需要沉下心去找解决的办法，解决之后会觉得很有成就感的哦~）

facebook账号授权登录第三方网站

猜你喜欢