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

最新推荐文章于 2024-09-03 17:44:28 发布

I尘埃

最新推荐文章于 2024-09-03 17:44:28 发布

阅读量2.6k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端相关文章标签： web开发 facebook

本文链接：https://blog.youkuaiyun.com/ydx425/article/details/77108441

前端相关专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何使用 Facebook SDK 实现网页应用的用户登录功能，包括项目创建、配置及 JavaScript 编码实现，并说明了如何获取用户的昵称和ID。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

开发准备：
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协议来请求用户授权登陆，但是对境内服务器的环境有一定的要求**