web开发第三方登陆之facebook登陆

开发准备:
1,一个线上的可以通过域名访问的拥有文件控制权限的站点

开始开发:
1,在facebook开放平台https://developers.facebook.com创建一个项目,获取项目应用编号和应用密钥
这里写图片描述
这里写图片描述

在设置中配置其他信息
这里写图片描述

2,编码

function statusChangeCallback(response) {
    console.log('statusChangeCallback');
    console.log(response);
    if (response.status === 'connected') {
//如果已经登陆facebook,则获取信息
        testAPI();
    } else {
//否则,提醒用户登录
        alert('请先登陆facebook!');
        window.open('http://fb.com');
        window.location = window.location.href;
    }
}

function checkLoginState() {
    FB.getLoginStatus(function(response) {
        statusChangeCallback(response);
    });
}

window.fbAsyncInit = function() {
    FB.init({
        appId      : '301449836930353',  //应用编号
        cookie     : true,
        xfbml      : true,
        version    : 'v2.8'
    });
    //登陆方法
FB.getLoginStatus(function(response) {
        statusChangeCallback(response);
    });
};

(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 = "//connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

//获取用户信息
function testAPI() {
    console.log('Welcome!  Fetching your information.... ');
    FB.api('/me', function(response) {
       console.log(response.name);
    });
}

3,在页面添加按钮并绑定点击事件,调用

FB.getLoginStatus(function(response) {
    statusChangeCallback(response);
});

即可

**4,该方法仅能获取用户昵称和用户id,而且需要用户已经登陆facebook,如果没有登陆,则引导其登陆。
如果需要获取更多权限和信息,需要使用php根据OAuth 2.0协议来请求用户授权登陆,但是对境内服务器的环境有一定的要求**

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值