js

js

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

编程语言llslx520 发表了文章 • 0 个评论 • 120 次浏览 • 2017-07-12 21:27 • 来自相关话题

一、获取twitter应用ID:     1、注册twitter账号:  打开https://twitter.com网站,注册twitter账号,并在个人中心的"设置与隐私"页中的"安全"设置中,绑定登录验证手机(只有绑定验证手机后才能注册twitter应用)。
  2、创建twitter应用:  登录网址 https://apps.twitter.com/ 点击"Create New App",创建一个新的应用。在创建应用时,需要填写"应用名称"、“应用描述“、”站点网址“、"回调URL"。



创建完twitter应用后,在应用的"Keys and Access Tokens"选项找到你的"Api Key"和"Api Secret"备用



 二、将twitter应用api key信息设置到统一登录平台:1、登录到herokuapp.com:  打开统一登录平台网站https://auth-server.herokuapp.com/,点击"Signin"按钮,使用任何一个第三方登录进行登录。   
 2、设置twitter应用api key信息:  在"Manage apps"部分,填写上面申请到的Twitter应用的"Api Key"和"Api Secret",其中"grant_url"可以不填,”reference“可随便填写,填写完成后点击保存:



  三、集成登录javascript代码:  将下面代码放到站点HTML文件的body标签内即可:<script src="//adodson.com/hello.js/dist/hello.all.js"></script>
<script>
// 设置第三方登录平台的应用app key
// 可以同时设置twitter、facebook、windows、google等多个第三方登录平台是app key
hello.init({
'twitter': 'HC9erGJFgWOh8af4GhKskYVPn' // 这里设置Twitter Api key
,'facebook': 'facebook app key...'
});

// 监听登录事件,登录成功返回的auth里面包含基本用户信息和accessToken信息
hello.on('auth.login', function(auth) {
alert(JSON.stringify(auth));
// 登录完成后获取当前登录用户完整信息
hello(auth.network).api('me').then(function(r) {
alert(JSON.stringify(r));
});
});

function tw_login() {
hello('twitter').login().then(function() {}, function(e) {});
}
</script>


<button class="twBtn" onclick="tw_login()">twitter</button>
<!--button class="twBtn" onclick="hello('twitter').login()">twitter</button-->  四、参考资料:Twitter应用创建:https://apps.twitter.com/统一登录平台:https://auth-server.herokuapp.com/Twitter Api文档:http://adodson.com/hello.js/#quick-start集成Facebook登录:网站集成Facebook第三方登录 查看全部

一、获取twitter应用ID:     

1、注册twitter账号:

  打开https://twitter.com网站,注册twitter账号,并在个人中心的"设置与隐私"页中的"安全"设置中,绑定登录验证手机(只有绑定验证手机后才能注册twitter应用)。
  

2、创建twitter应用:

  登录网址 https://apps.twitter.com/ 点击"Create New App",创建一个新的应用。在创建应用时,需要填写"应用名称"、“应用描述“、”站点网址“、"回调URL"。
创建Twitter应用.png

创建完twitter应用后,在应用的"Keys and Access Tokens"选项找到你的"Api Key"和"Api Secret"备用
创建Twitter应用-apiKey.png

 

二、将twitter应用api key信息设置到统一登录平台:

1、登录到herokuapp.com:

  打开统一登录平台网站https://auth-server.herokuapp.com/,点击"Signin"按钮,使用任何一个第三方登录进行登录。   
 

2、设置twitter应用api key信息:

  在"Manage apps"部分,填写上面申请到的Twitter应用的"Api Key"和"Api Secret",其中"grant_url"可以不填,”reference“可随便填写,填写完成后点击保存:
设置twitter第三方登录凭据.png

  

三、集成登录javascript代码:

  将下面代码放到站点HTML文件的body标签内即可:
<script src="//adodson.com/hello.js/dist/hello.all.js"></script>
<script>
// 设置第三方登录平台的应用app key
// 可以同时设置twitter、facebook、windows、google等多个第三方登录平台是app key
hello.init({
'twitter': 'HC9erGJFgWOh8af4GhKskYVPn' // 这里设置Twitter Api key
,'facebook': 'facebook app key...'
});

// 监听登录事件,登录成功返回的auth里面包含基本用户信息和accessToken信息
hello.on('auth.login', function(auth) {
alert(JSON.stringify(auth));
// 登录完成后获取当前登录用户完整信息
hello(auth.network).api('me').then(function(r) {
alert(JSON.stringify(r));
});
});

function tw_login() {
hello('twitter').login().then(function() {}, function(e) {});
}
</script>


<button class="twBtn" onclick="tw_login()">twitter</button>
<!--button class="twBtn" onclick="hello('twitter').login()">twitter</button-->
  

四、参考资料:

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

编程语言liuliangsong 发表了文章 • 0 个评论 • 176 次浏览 • 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"}
 

四、相关网站:

JS将时间戳转换为刚刚、N分钟前、今天几点几分、昨天几点几分等表示法

回复

Javascriptliuliangsong 回复了问题 • 1 人关注 • 1 个回复 • 1660 次浏览 • 2016-10-11 15:38 • 来自相关话题

条新动态, 点击查看
自定义的转换函数: function timestampFormat( timestamp ) {
function zeroize( num ) {
return (String(num).length == 1 ? '0' : ... 显示全部 »
自定义的转换函数: function timestampFormat( timestamp ) {
function zeroize( num ) {
return (String(num).length == 1 ? '0' : '') + num;
}

var curTimestamp = parseInt(new Date().getTime() / 1000); //当前时间戳
var timestampDiff = curTimestamp - timestamp; // 参数时间戳与当前时间戳相差秒数

var curDate = new Date( curTimestamp * 1000 ); // 当前时间日期对象
var tmDate = new Date( timestamp * 1000 ); // 参数时间戳转换成的日期对象

var Y = tmDate.getFullYear(), m = tmDate.getMonth() + 1, d = tmDate.getDate();
var H = tmDate.getHours(), i = tmDate.getMinutes(), s = tmDate.getSeconds();

if ( timestampDiff < 60 ) { // 一分钟以内
return "刚刚";
} else if( timestampDiff < 3600 ) { // 一小时前之内
return Math.floor( timestampDiff / 60 ) + "分钟前";
} else if ( curDate.getFullYear() == Y && curDate.getMonth()+1 == m && curDate.getDate() == d ) {
return '今天' + zeroize(H) + ':' + zeroize(i);
} else {
var newDate = new Date( (curTimestamp - 86400) * 1000 ); // 参数中的时间戳加一天转换成的日期对象
if ( newDate.getFullYear() == Y && newDate.getMonth()+1 == m && newDate.getDate() == d ) {
return '昨天' + zeroize(H) + ':' + zeroize(i);
} else if ( curDate.getFullYear() == Y ) {
return zeroize(m) + '月' + zeroize(d) + '日 ' + zeroize(H) + ':' + zeroize(i);
} else {
return Y + '年' + zeroize(m) + '月' + zeroize(d) + '日 ' + zeroize(H) + ':' + zeroize(i);
}
}
} 参数的时间不能大于当前时间,大于当前时间会返回“刚刚”。

  用法展示: timestampFormat(1326170770); //2012年01月10日 12:46
timestampFormat(Date.parse('2016-10-11 15:26:10')/1000); //刚刚
timestampFormat(Date.parse('2016-10-11 15:10:10')/1000); //16分钟前
timestampFormat(Date.parse('2016-10-11 10:10:10')/1000); //今天10:10
timestampFormat(Date.parse('2016-10-10 10:10:10')/1000); //昨天10:10
timestampFormat(Date.parse('2016-02-10 10:10:10')/1000); //02月10日 10:10
timestampFormat(Date.parse('2012-10-10 10:10:10')/1000); //2012年10月10日 10:10

JS将时间戳转换为刚刚、N分钟前、今天几点几分、昨天几点几分等表示法

回复

Javascriptliuliangsong 回复了问题 • 1 人关注 • 1 个回复 • 1660 次浏览 • 2016-10-11 15:38 • 来自相关话题

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

编程语言llslx520 发表了文章 • 0 个评论 • 120 次浏览 • 2017-07-12 21:27 • 来自相关话题

一、获取twitter应用ID:     1、注册twitter账号:  打开https://twitter.com网站,注册twitter账号,并在个人中心的"设置与隐私"页中的"安全"设置中,绑定登录验证手机(只有绑定验证手机后才能注册twitter应用)。
  2、创建twitter应用:  登录网址 https://apps.twitter.com/ 点击"Create New App",创建一个新的应用。在创建应用时,需要填写"应用名称"、“应用描述“、”站点网址“、"回调URL"。



创建完twitter应用后,在应用的"Keys and Access Tokens"选项找到你的"Api Key"和"Api Secret"备用



 二、将twitter应用api key信息设置到统一登录平台:1、登录到herokuapp.com:  打开统一登录平台网站https://auth-server.herokuapp.com/,点击"Signin"按钮,使用任何一个第三方登录进行登录。   
 2、设置twitter应用api key信息:  在"Manage apps"部分,填写上面申请到的Twitter应用的"Api Key"和"Api Secret",其中"grant_url"可以不填,”reference“可随便填写,填写完成后点击保存:



  三、集成登录javascript代码:  将下面代码放到站点HTML文件的body标签内即可:<script src="//adodson.com/hello.js/dist/hello.all.js"></script>
<script>
// 设置第三方登录平台的应用app key
// 可以同时设置twitter、facebook、windows、google等多个第三方登录平台是app key
hello.init({
'twitter': 'HC9erGJFgWOh8af4GhKskYVPn' // 这里设置Twitter Api key
,'facebook': 'facebook app key...'
});

// 监听登录事件,登录成功返回的auth里面包含基本用户信息和accessToken信息
hello.on('auth.login', function(auth) {
alert(JSON.stringify(auth));
// 登录完成后获取当前登录用户完整信息
hello(auth.network).api('me').then(function(r) {
alert(JSON.stringify(r));
});
});

function tw_login() {
hello('twitter').login().then(function() {}, function(e) {});
}
</script>


<button class="twBtn" onclick="tw_login()">twitter</button>
<!--button class="twBtn" onclick="hello('twitter').login()">twitter</button-->  四、参考资料:Twitter应用创建:https://apps.twitter.com/统一登录平台:https://auth-server.herokuapp.com/Twitter Api文档:http://adodson.com/hello.js/#quick-start集成Facebook登录:网站集成Facebook第三方登录 查看全部

一、获取twitter应用ID:     

1、注册twitter账号:

  打开https://twitter.com网站,注册twitter账号,并在个人中心的"设置与隐私"页中的"安全"设置中,绑定登录验证手机(只有绑定验证手机后才能注册twitter应用)。
  

2、创建twitter应用:

  登录网址 https://apps.twitter.com/ 点击"Create New App",创建一个新的应用。在创建应用时,需要填写"应用名称"、“应用描述“、”站点网址“、"回调URL"。
创建Twitter应用.png

创建完twitter应用后,在应用的"Keys and Access Tokens"选项找到你的"Api Key"和"Api Secret"备用
创建Twitter应用-apiKey.png

 

二、将twitter应用api key信息设置到统一登录平台:

1、登录到herokuapp.com:

  打开统一登录平台网站https://auth-server.herokuapp.com/,点击"Signin"按钮,使用任何一个第三方登录进行登录。   
 

2、设置twitter应用api key信息:

  在"Manage apps"部分,填写上面申请到的Twitter应用的"Api Key"和"Api Secret",其中"grant_url"可以不填,”reference“可随便填写,填写完成后点击保存:
设置twitter第三方登录凭据.png

  

三、集成登录javascript代码:

  将下面代码放到站点HTML文件的body标签内即可:
<script src="//adodson.com/hello.js/dist/hello.all.js"></script>
<script>
// 设置第三方登录平台的应用app key
// 可以同时设置twitter、facebook、windows、google等多个第三方登录平台是app key
hello.init({
'twitter': 'HC9erGJFgWOh8af4GhKskYVPn' // 这里设置Twitter Api key
,'facebook': 'facebook app key...'
});

// 监听登录事件,登录成功返回的auth里面包含基本用户信息和accessToken信息
hello.on('auth.login', function(auth) {
alert(JSON.stringify(auth));
// 登录完成后获取当前登录用户完整信息
hello(auth.network).api('me').then(function(r) {
alert(JSON.stringify(r));
});
});

function tw_login() {
hello('twitter').login().then(function() {}, function(e) {});
}
</script>


<button class="twBtn" onclick="tw_login()">twitter</button>
<!--button class="twBtn" onclick="hello('twitter').login()">twitter</button-->
  

四、参考资料:

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

编程语言liuliangsong 发表了文章 • 0 个评论 • 176 次浏览 • 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"}
 

四、相关网站: