facebook

facebook

网站集成最新facebook第三方登录

编程语言liuliangsong 发表了文章 • 0 个评论 • 1145 次浏览 • 2017-07-12 17:29 • 来自相关话题

  本文介绍如何在自己的网站集成facebook第三方登录,使用的是网站前端语言的Facebook Javascript SDK接口,它比使用其他网站后端语言的SDK更加简单方便。
 一、创建Facebook应用:  打开网址https://developers.facebook.com/apps/,使用facebook账号登录,然后按照下面过程创建一个Facebok应用。   点击【+添加新应用】安装,弹窗创建应用对话框;输入你要创建的应用名称,点击【创建应用编号】,完成创建应用;在选择商品页面中,选择【Facebook登录】,点击【Set up】;在选择平台页面中,选择【网络】,输入你的网址,点击【Save】保存即可;保存后,可继续按官网的介绍集成Facebook第三方登录,也可以按本站后面的介绍操作。 二、集成Facebook第三方登录到网站:1、放置网站Facebok第三方登录基础代码:  首先,我们需要在网站前端HTML页面的BODY标签中放置如下代码,加载Facebook javaScript SDK,一定得记得修改代码中的应用编号:<script>
window.fbAsyncInit = function() {
FB.init({
appId: '393455924363180', // 这里需要改成15位你创建的Facebook应用编号
cookie: true,
xfbml: true,
version: 'v2.8'
});
FB.AppEvents.logPageView();
};

(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'));
</script> 2、使用Facebook官方提供的登录按钮:  将下面HTML代码放到body中即可,其中chekcFBLoginStatus()为官方按钮登录完成后的回调函数 ,可以在此函数中记录用户ID,accessToken等。将用户ID作为参数,在数据库中的查询,以完成Facebook第三方登录:  <script>
// 使用官方按钮登录完成后的回调函数
function chekcFBLoginStatus() {
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
alert(JSON.stringify(response));
console.log(JSON.stringify(response)); //将登录成功返回的用户ID等信息输出到控制台
} else {
alert('登录失败');
}
});
}
</script>
<fb:login-button scope="public_profile,email" onlogin="chekcFBLoginStatus();"></fb:login-button> 控制台输出结果:{
"status": "connected",
"authResponse": {
"accessToken": "EAAFl7ZBSl1bwBAIpYoLhZCul3mGouYYxgcuGENE2GblkMg83hee1IoEwUK6nMEJsiHmlbUIL4WviPMQCKvM9cqaLPjflhhlCIdaTkxUKKND1vu6lVACrfJGdeEaMKZBYl8nZAhxXqm3RgVhFO8xLmWAQuN5JhawuHT8F3G9zKyDa063qoR7GUVKqBw0pcDwZD",
"userID": "1103782483099761",
"expiresIn": 4405,
"signedRequest": "pZJYeUmr3vY8pAs3NQQh46-MFXUHs4quZ-xe84-FgpI.eyJhbGdvcml0aG0iOiJITUFDLVNIQTI1NiIsImNvZGUiOiJBUUMyY3FFa19HOTBQbkdQczk2bFJKOUVzUnhreVZwLVRlQ19oU3ZRTTJtRV9VSDdnamdNOFdLSE9IMW02WHoyWkFUendMbmQxeE8wWVd2UEdsX0xMYUU3dEhQSUh6dXdGQTJ6dFAtUGFGa1VYZW00M0llOGl3ZmtzM3Nla3AxNnpINm15LTQ4d1VyMkZKZE5fR0hjaFprZ2NFekU2cEpBLXMwWW1IemFMN3lEWjFQaURFNVZPc1NrRkt3cllMWjRzdUl4SDVNd3lPVk1YSXdVblJlSVJoNUIxcVVxbmI5SE4zZW5nczVSNEdzVXJoemZSYlRmU0h2cmFjZHptQTRBYXhWSlpHbVpoWUR2WDR3RVVSRFd6TE5INU45RFRnOGZpTGlBblZRQ215Ujk5LUhDV1REM2hVYmRsdWNsQ3VyaDl3ZDlfXzgwNVZZZlFaemFYNVl3OVVKcCIsImlzc3VlZF9hdCI6MTQ5OTg1NjM5NSwidXNlcl9pZCI6IjExMDM3ODI0ODMwOTk3NjEifQ"
}
} 3、使用用户自定义样式的按钮完成Facebook第三方登录:  Facebook的官方登录按钮,能调整的样式有限、可能不达到我们先需求,所有我们大都数时候会使用自定义的登录按钮。要使用自定义按钮,将下面代码追加到body中即可:<script>
function fb_login() {
FB.login(function(response) {
if (response.status === 'connected') {
alert(JSON.stringify(response));
console.log(JSON.stringify(response));
} else {
alert('登录失败');
}
}, {scope: 'public_profile,email'});
}
</script>
<button onclick="fb_login();">使用FB账号登录</button> 三、完成Facebook第三方登录后,调用API:  Facebook Javascript SDKd的Api接口十分简单好用,比如需要获取登录用户的Facebook资料,使用下面函数即可,其中fields参数代表需要返回的字段。FB.api('/me?fields=id,email,first_name,last_name,gender', function(response) {
console.log(JSON.stringify(response));
});控制台输入结果类似如下:{"id":"1103783283095761","email":"465272@qq.com","first_name":"爱E族","last_name":"aiezu.com","gender":"male"} 四、相关网站:Facebook应用管理:https://developers.facebook.com/appsFacebook Api接口列表:https://developers.facebook.com/docs/graph-api/reference/Facebook Javascript SDK文档: https://developers.facebook.com/docs/javascript集成Twitter登录:网站集成Twitter第三方登录 查看全部
  本文介绍如何在自己的网站集成facebook第三方登录,使用的是网站前端语言的Facebook Javascript SDK接口,它比使用其他网站后端语言的SDK更加简单方便。
 

一、创建Facebook应用:

  打开网址https://developers.facebook.com/apps/,使用facebook账号登录,然后按照下面过程创建一个Facebok应用。   
  1. 点击【+添加新应用】安装,弹窗创建应用对话框;
  2. 输入你要创建的应用名称,点击【创建应用编号】,完成创建应用;
  3. 在选择商品页面中,选择【Facebook登录】,点击【Set up】;
  4. 在选择平台页面中,选择【网络】,输入你的网址,点击【Save】保存即可;
  5. 保存后,可继续按官网的介绍集成Facebook第三方登录,也可以按本站后面的介绍操作。
 

二、集成Facebook第三方登录到网站:

1、放置网站Facebok第三方登录基础代码:

  首先,我们需要在网站前端HTML页面的BODY标签中放置如下代码,加载Facebook javaScript SDK,一定得记得修改代码中的应用编号
<script>
window.fbAsyncInit = function() {
FB.init({
appId: '393455924363180', // 这里需要改成15位你创建的Facebook应用编号
cookie: true,
xfbml: true,
version: 'v2.8'
});
FB.AppEvents.logPageView();
};

(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'));
</script>
 

2、使用Facebook官方提供的登录按钮:

  将下面HTML代码放到body中即可,其中chekcFBLoginStatus()为官方按钮登录完成后的回调函数 ,可以在此函数中记录用户ID,accessToken等。将用户ID作为参数,在数据库中的查询,以完成Facebook第三方登录:  
<script>
// 使用官方按钮登录完成后的回调函数
function chekcFBLoginStatus() {
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
alert(JSON.stringify(response));
console.log(JSON.stringify(response)); //将登录成功返回的用户ID等信息输出到控制台
} else {
alert('登录失败');
}
});
}
</script>
<fb:login-button scope="public_profile,email" onlogin="chekcFBLoginStatus();"></fb:login-button>
 控制台输出结果:
{
"status": "connected",
"authResponse": {
"accessToken": "EAAFl7ZBSl1bwBAIpYoLhZCul3mGouYYxgcuGENE2GblkMg83hee1IoEwUK6nMEJsiHmlbUIL4WviPMQCKvM9cqaLPjflhhlCIdaTkxUKKND1vu6lVACrfJGdeEaMKZBYl8nZAhxXqm3RgVhFO8xLmWAQuN5JhawuHT8F3G9zKyDa063qoR7GUVKqBw0pcDwZD",
"userID": "1103782483099761",
"expiresIn": 4405,
"signedRequest": "pZJYeUmr3vY8pAs3NQQh46-MFXUHs4quZ-xe84-FgpI.eyJhbGdvcml0aG0iOiJITUFDLVNIQTI1NiIsImNvZGUiOiJBUUMyY3FFa19HOTBQbkdQczk2bFJKOUVzUnhreVZwLVRlQ19oU3ZRTTJtRV9VSDdnamdNOFdLSE9IMW02WHoyWkFUendMbmQxeE8wWVd2UEdsX0xMYUU3dEhQSUh6dXdGQTJ6dFAtUGFGa1VYZW00M0llOGl3ZmtzM3Nla3AxNnpINm15LTQ4d1VyMkZKZE5fR0hjaFprZ2NFekU2cEpBLXMwWW1IemFMN3lEWjFQaURFNVZPc1NrRkt3cllMWjRzdUl4SDVNd3lPVk1YSXdVblJlSVJoNUIxcVVxbmI5SE4zZW5nczVSNEdzVXJoemZSYlRmU0h2cmFjZHptQTRBYXhWSlpHbVpoWUR2WDR3RVVSRFd6TE5INU45RFRnOGZpTGlBblZRQ215Ujk5LUhDV1REM2hVYmRsdWNsQ3VyaDl3ZDlfXzgwNVZZZlFaemFYNVl3OVVKcCIsImlzc3VlZF9hdCI6MTQ5OTg1NjM5NSwidXNlcl9pZCI6IjExMDM3ODI0ODMwOTk3NjEifQ"
}
}
 

3、使用用户自定义样式的按钮完成Facebook第三方登录:

  Facebook的官方登录按钮,能调整的样式有限、可能不达到我们先需求,所有我们大都数时候会使用自定义的登录按钮。要使用自定义按钮,将下面代码追加到body中即可:
<script>
function fb_login() {
FB.login(function(response) {
if (response.status === 'connected') {
alert(JSON.stringify(response));
console.log(JSON.stringify(response));
} else {
alert('登录失败');
}
}, {scope: 'public_profile,email'});
}
</script>
<button onclick="fb_login();">使用FB账号登录</button>
 

三、完成Facebook第三方登录后,调用API:

  Facebook Javascript SDKd的Api接口十分简单好用,比如需要获取登录用户的Facebook资料,使用下面函数即可,其中fields参数代表需要返回的字段。
FB.api('/me?fields=id,email,first_name,last_name,gender', function(response) {
console.log(JSON.stringify(response));
});
控制台输入结果类似如下:
{"id":"1103783283095761","email":"465272@qq.com","first_name":"爱E族","last_name":"aiezu.com","gender":"male"}
 

四、相关网站:

网站集成最新facebook第三方登录

编程语言liuliangsong 发表了文章 • 0 个评论 • 1145 次浏览 • 2017-07-12 17:29 • 来自相关话题

  本文介绍如何在自己的网站集成facebook第三方登录,使用的是网站前端语言的Facebook Javascript SDK接口,它比使用其他网站后端语言的SDK更加简单方便。
 一、创建Facebook应用:  打开网址https://developers.facebook.com/apps/,使用facebook账号登录,然后按照下面过程创建一个Facebok应用。   点击【+添加新应用】安装,弹窗创建应用对话框;输入你要创建的应用名称,点击【创建应用编号】,完成创建应用;在选择商品页面中,选择【Facebook登录】,点击【Set up】;在选择平台页面中,选择【网络】,输入你的网址,点击【Save】保存即可;保存后,可继续按官网的介绍集成Facebook第三方登录,也可以按本站后面的介绍操作。 二、集成Facebook第三方登录到网站:1、放置网站Facebok第三方登录基础代码:  首先,我们需要在网站前端HTML页面的BODY标签中放置如下代码,加载Facebook javaScript SDK,一定得记得修改代码中的应用编号:<script>
window.fbAsyncInit = function() {
FB.init({
appId: '393455924363180', // 这里需要改成15位你创建的Facebook应用编号
cookie: true,
xfbml: true,
version: 'v2.8'
});
FB.AppEvents.logPageView();
};

(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'));
</script> 2、使用Facebook官方提供的登录按钮:  将下面HTML代码放到body中即可,其中chekcFBLoginStatus()为官方按钮登录完成后的回调函数 ,可以在此函数中记录用户ID,accessToken等。将用户ID作为参数,在数据库中的查询,以完成Facebook第三方登录:  <script>
// 使用官方按钮登录完成后的回调函数
function chekcFBLoginStatus() {
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
alert(JSON.stringify(response));
console.log(JSON.stringify(response)); //将登录成功返回的用户ID等信息输出到控制台
} else {
alert('登录失败');
}
});
}
</script>
<fb:login-button scope="public_profile,email" onlogin="chekcFBLoginStatus();"></fb:login-button> 控制台输出结果:{
"status": "connected",
"authResponse": {
"accessToken": "EAAFl7ZBSl1bwBAIpYoLhZCul3mGouYYxgcuGENE2GblkMg83hee1IoEwUK6nMEJsiHmlbUIL4WviPMQCKvM9cqaLPjflhhlCIdaTkxUKKND1vu6lVACrfJGdeEaMKZBYl8nZAhxXqm3RgVhFO8xLmWAQuN5JhawuHT8F3G9zKyDa063qoR7GUVKqBw0pcDwZD",
"userID": "1103782483099761",
"expiresIn": 4405,
"signedRequest": "pZJYeUmr3vY8pAs3NQQh46-MFXUHs4quZ-xe84-FgpI.eyJhbGdvcml0aG0iOiJITUFDLVNIQTI1NiIsImNvZGUiOiJBUUMyY3FFa19HOTBQbkdQczk2bFJKOUVzUnhreVZwLVRlQ19oU3ZRTTJtRV9VSDdnamdNOFdLSE9IMW02WHoyWkFUendMbmQxeE8wWVd2UEdsX0xMYUU3dEhQSUh6dXdGQTJ6dFAtUGFGa1VYZW00M0llOGl3ZmtzM3Nla3AxNnpINm15LTQ4d1VyMkZKZE5fR0hjaFprZ2NFekU2cEpBLXMwWW1IemFMN3lEWjFQaURFNVZPc1NrRkt3cllMWjRzdUl4SDVNd3lPVk1YSXdVblJlSVJoNUIxcVVxbmI5SE4zZW5nczVSNEdzVXJoemZSYlRmU0h2cmFjZHptQTRBYXhWSlpHbVpoWUR2WDR3RVVSRFd6TE5INU45RFRnOGZpTGlBblZRQ215Ujk5LUhDV1REM2hVYmRsdWNsQ3VyaDl3ZDlfXzgwNVZZZlFaemFYNVl3OVVKcCIsImlzc3VlZF9hdCI6MTQ5OTg1NjM5NSwidXNlcl9pZCI6IjExMDM3ODI0ODMwOTk3NjEifQ"
}
} 3、使用用户自定义样式的按钮完成Facebook第三方登录:  Facebook的官方登录按钮,能调整的样式有限、可能不达到我们先需求,所有我们大都数时候会使用自定义的登录按钮。要使用自定义按钮,将下面代码追加到body中即可:<script>
function fb_login() {
FB.login(function(response) {
if (response.status === 'connected') {
alert(JSON.stringify(response));
console.log(JSON.stringify(response));
} else {
alert('登录失败');
}
}, {scope: 'public_profile,email'});
}
</script>
<button onclick="fb_login();">使用FB账号登录</button> 三、完成Facebook第三方登录后,调用API:  Facebook Javascript SDKd的Api接口十分简单好用,比如需要获取登录用户的Facebook资料,使用下面函数即可,其中fields参数代表需要返回的字段。FB.api('/me?fields=id,email,first_name,last_name,gender', function(response) {
console.log(JSON.stringify(response));
});控制台输入结果类似如下:{"id":"1103783283095761","email":"465272@qq.com","first_name":"爱E族","last_name":"aiezu.com","gender":"male"} 四、相关网站:Facebook应用管理:https://developers.facebook.com/appsFacebook Api接口列表:https://developers.facebook.com/docs/graph-api/reference/Facebook Javascript SDK文档: https://developers.facebook.com/docs/javascript集成Twitter登录:网站集成Twitter第三方登录 查看全部
  本文介绍如何在自己的网站集成facebook第三方登录,使用的是网站前端语言的Facebook Javascript SDK接口,它比使用其他网站后端语言的SDK更加简单方便。
 

一、创建Facebook应用:

  打开网址https://developers.facebook.com/apps/,使用facebook账号登录,然后按照下面过程创建一个Facebok应用。   
  1. 点击【+添加新应用】安装,弹窗创建应用对话框;
  2. 输入你要创建的应用名称,点击【创建应用编号】,完成创建应用;
  3. 在选择商品页面中,选择【Facebook登录】,点击【Set up】;
  4. 在选择平台页面中,选择【网络】,输入你的网址,点击【Save】保存即可;
  5. 保存后,可继续按官网的介绍集成Facebook第三方登录,也可以按本站后面的介绍操作。
 

二、集成Facebook第三方登录到网站:

1、放置网站Facebok第三方登录基础代码:

  首先,我们需要在网站前端HTML页面的BODY标签中放置如下代码,加载Facebook javaScript SDK,一定得记得修改代码中的应用编号
<script>
window.fbAsyncInit = function() {
FB.init({
appId: '393455924363180', // 这里需要改成15位你创建的Facebook应用编号
cookie: true,
xfbml: true,
version: 'v2.8'
});
FB.AppEvents.logPageView();
};

(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'));
</script>
 

2、使用Facebook官方提供的登录按钮:

  将下面HTML代码放到body中即可,其中chekcFBLoginStatus()为官方按钮登录完成后的回调函数 ,可以在此函数中记录用户ID,accessToken等。将用户ID作为参数,在数据库中的查询,以完成Facebook第三方登录:  
<script>
// 使用官方按钮登录完成后的回调函数
function chekcFBLoginStatus() {
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
alert(JSON.stringify(response));
console.log(JSON.stringify(response)); //将登录成功返回的用户ID等信息输出到控制台
} else {
alert('登录失败');
}
});
}
</script>
<fb:login-button scope="public_profile,email" onlogin="chekcFBLoginStatus();"></fb:login-button>
 控制台输出结果:
{
"status": "connected",
"authResponse": {
"accessToken": "EAAFl7ZBSl1bwBAIpYoLhZCul3mGouYYxgcuGENE2GblkMg83hee1IoEwUK6nMEJsiHmlbUIL4WviPMQCKvM9cqaLPjflhhlCIdaTkxUKKND1vu6lVACrfJGdeEaMKZBYl8nZAhxXqm3RgVhFO8xLmWAQuN5JhawuHT8F3G9zKyDa063qoR7GUVKqBw0pcDwZD",
"userID": "1103782483099761",
"expiresIn": 4405,
"signedRequest": "pZJYeUmr3vY8pAs3NQQh46-MFXUHs4quZ-xe84-FgpI.eyJhbGdvcml0aG0iOiJITUFDLVNIQTI1NiIsImNvZGUiOiJBUUMyY3FFa19HOTBQbkdQczk2bFJKOUVzUnhreVZwLVRlQ19oU3ZRTTJtRV9VSDdnamdNOFdLSE9IMW02WHoyWkFUendMbmQxeE8wWVd2UEdsX0xMYUU3dEhQSUh6dXdGQTJ6dFAtUGFGa1VYZW00M0llOGl3ZmtzM3Nla3AxNnpINm15LTQ4d1VyMkZKZE5fR0hjaFprZ2NFekU2cEpBLXMwWW1IemFMN3lEWjFQaURFNVZPc1NrRkt3cllMWjRzdUl4SDVNd3lPVk1YSXdVblJlSVJoNUIxcVVxbmI5SE4zZW5nczVSNEdzVXJoemZSYlRmU0h2cmFjZHptQTRBYXhWSlpHbVpoWUR2WDR3RVVSRFd6TE5INU45RFRnOGZpTGlBblZRQ215Ujk5LUhDV1REM2hVYmRsdWNsQ3VyaDl3ZDlfXzgwNVZZZlFaemFYNVl3OVVKcCIsImlzc3VlZF9hdCI6MTQ5OTg1NjM5NSwidXNlcl9pZCI6IjExMDM3ODI0ODMwOTk3NjEifQ"
}
}
 

3、使用用户自定义样式的按钮完成Facebook第三方登录:

  Facebook的官方登录按钮,能调整的样式有限、可能不达到我们先需求,所有我们大都数时候会使用自定义的登录按钮。要使用自定义按钮,将下面代码追加到body中即可:
<script>
function fb_login() {
FB.login(function(response) {
if (response.status === 'connected') {
alert(JSON.stringify(response));
console.log(JSON.stringify(response));
} else {
alert('登录失败');
}
}, {scope: 'public_profile,email'});
}
</script>
<button onclick="fb_login();">使用FB账号登录</button>
 

三、完成Facebook第三方登录后,调用API:

  Facebook Javascript SDKd的Api接口十分简单好用,比如需要获取登录用户的Facebook资料,使用下面函数即可,其中fields参数代表需要返回的字段。
FB.api('/me?fields=id,email,first_name,last_name,gender', function(response) {
console.log(JSON.stringify(response));
});
控制台输入结果类似如下:
{"id":"1103783283095761","email":"465272@qq.com","first_name":"爱E族","last_name":"aiezu.com","gender":"male"}
 

四、相关网站: