百万个冷知识百万个冷知识

百万个冷知识
一起学习百万个冷知识

关于Google+以及Facebook第三方登录实现的一点总结(怎么能登录facebook)

详述

最近项目中有有关服务器端进占的市场需求,服务器端Facebook和Google +登入。

正好这几天把那个市场需求做得差不多了,收个尾,作为一个这点之前基本上未曾牵涉的阿宝,归纳下合作开发业务流程和过程中碰到的许多难题。希望能对大家有所帮助。

大体,目前网络上的牵涉到服务器端登入选用的都为OAuth证书方式,有关原理和同时实现方法有关的能网上搜寻查阅。不过牵涉到Facebook和Google +的进占,最大的难题是这两个中文网站在墙内,想FQ找数据资料比较稳当,惟有国内这点的数据资料也不是很齐备,上到的非官方的文件格式又尽是英文的,写作懦弱~

服务器端进占单纯能分为下列两个关键步骤,分别是:赢得服务器端进占许可证证书;依照规范化加进网页登入式样和js同时实现,重定向到服务器端进占网页进占并以获取许可后,返回原选定网页(或允诺);前台对登入重要信息展开奇偶校验,并以获取有关连服务器端进占使用者的重要信息;将服务器端使用者重要信息与本系统使用者展开关连。

下面就以上两个关键步骤的许多关键重要信息,换句话说是我合作开发当中碰到的难题做一下概要的记录。因为Facebook和Google +服务器端进占都选用的是Auth2技术,因此只会在具体同时实现不同的地方性原则上说明。理解不确的地方性,或者是没有说全的地方性,还请诸位一致同意~

一 赢得服务器端进占许可证证书

在以获取许可证上,须要在有关连的合作开发网络平台上提出申请进占网络连接许可证,大体你可能须要准备下列不要紧东西:

你当前须要网络连接服务器端进占的邮箱搜寻引擎(用作服务器端网络平台奇偶校验是否那个登入允诺来自于你的中文网站本身);

给使用者展现的中文网站logo和文字(用作在服务器端进占的时候给使用者简单的展(装)示(逼));

进占赢得成功后,跳回的URL(用作以获取并使用进占使用者的有关重要信息);

提出申请赢得成功之后,服务器端网络平台会提供给你有关连的AppID和AppSecret,借以前台展开附加的操作方式。大体操作方式按照非官方api的次序一步棋一步棋来就能了惹,这里就不再约勒了~(请掌握基本上的英文写作能力…)

二 依照规范化加进网页登入式样和js同时实现

单纯点讲就是在网页上加进登入Button,并通过点选促发重定向到服务器端的允诺。Google+和Facebook在大体方法论一致,在技术细节上同时实现大同小异。

Google+登入。会引用自己封装的js()来同时实现登入操作方式(gapi),并提供了多种进占同时实现方案可供选择。这里贴一下,我目前项目中同时实现的方案,仅供参考。

1.在有关连网页引用Google服务器端js。https://apis.google.com/js/api:client.js(这里的js其实和非官方最新的platform.js内容是一样的…吧~)

2.网页定义Google+登入的按钮式样(这里谷歌有内置的规范化按钮式样能直接调用,不用自己定义)

(id="googleLogin")

3.依照引用的服务器端js提供的api,作如下初始化操作方式:

auth2 = gapi.auth2.init({

client_id: clientID, //第一步棋提出申请的时候,提供给你的appidcookiepolicy: single_host_origin,

scope: https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/userinfo.email//须要以获取的使用者重要信息领域});

4.初始化后,接着须要对你定义的按钮绑定鼠标点选事件,作如下操作方式:

auth2.attachClickHandler(googleLogin,{},startApp.onSuccess,startApp.onFailure);//googleLogin为按钮的ID

5.做完这些之后就等使用者点选(上钩)啦~这里须要注意下startApp.onSuccess和startApp.onFailure方法,这里是在谷歌赢得成功进占之后的回调函数。在onSuccess里服务器端已经登入并返回,我们已经能依照接口api以获取想要的使用者重要信息了,而在onFailure里因为登入失败,我们能自定义许多提示重要信息。

6.等等!上面代码中的变量都是干嘛用的啊喂~别慌,下面附上完整的js!项目合作开发使用了RequireJs,代码仅供参考!

View Code

Facebook登入。同样会调用自己封装的js()来同时实现登入操作方式(FB),同时实现关键步骤基本上同Google+进占类似。

1.在有关连网页引用Facebook第三方js。https: //connect.facebook.net/en_US/sdk.js;

2.网页定义Facebook登入的按钮式样

(id="fblogin")

3.依照引用的服务器端js提供的api,作如下初始化操作方式:

FB.init ({

appId : #your AppID#,

cookie : true,

xfbml : true,

version : v2.4});

4.初始化后,接着须要对你定义的按钮绑定鼠标点选登入事件,作如下操作方式:

$("#fblogin").click(function (){

FB.login(function(response) {

statusChangeCallback(response); //登入回调函数},{scope: email});//须要以获取的重要信息scope});

5.statusChangeCallback为登入回调函数,须要在里面做下进占返回的有关操作:

varstatusChangeCallback =function (response){

if(response.status === connected) {

varaccessToken = response.authResponse.accessToken;//取得 accessToken

FB.api(/me?fields=name,first_name,last_name,email,function(response) {// /me为API选定的调用方法,用作以获取进占使用者有关重要信息if(response.email!=null){

$.ajax({

url:"/action.do",

data:{

userName:response.name,

firstName:response.first_name,

lastName:response.last_name,

email:response.email,

idToken:accessToken,

userType:2 },

dataType:"json",

tyep:"post",

success:function(data){

if(data.success ==true){

_window.location.reload(true);

}

}

});

}else{

alert("XXX.");

}

});

}

};

更详细的接口和同时实现请参考最下面提供的非官方API链接!多读读就懂了!

三 前台对登入重要信息展开奇偶校验,并以获取有关连服务器端进占使用者的重要信息

在使用者正确的登入服务器端网络平台并展开许可之后,调用返回函数,这时须要对使用者的登入重要信息和状态展开确认!这里非常关键,因为要确保使用者的确是从有关连服务器端网络平台登入,而不是随随便便敲一个URL就能让允诺通过了。所以我们须要服务器端网络平台提供的access_token值,依照约定好的奇偶校验规则展开奇偶校验,放行奇偶校验通过的进占允诺。

由于验证重要信息牵涉到app的隐私重要信息,和确保验证不会被人为的篡改,因此须要在服务器后端展开token的验证。

参见第二条有关js同时实现,在服务器端调用返回函数之后,代码中会展开ajax允诺,调用前台的有关连接口 /action.do,来在前台展开access_token的正确性判断。

前台会依照进占的服务器端类型,展开https允诺验证,来确保使用者进占的重要信息无误。

Google+的token验证地址:https://www.googleapis.com/oauth2/v3/tokeninfo?id_token=XXX

Google+的token验证通过返回的Json格式(奇偶校验aud是否与前台保存的AppId匹配):

{

"iss": "https://accounts.google.com",

"sub": "110169484474386276334",

"azp": "http://1008719970978-hb24n2dstb40o45d4feuo2ukqmcc6381.apps.googleusercontent.com",

"email": "billd1600@gmail.com",

"at_hash": "X_B3Z3Fi4udZ2mf75RWo3w",

"email_verified": "true",

"aud": "http://1008719970978-hb24n2dstb40o45d4feuo2ukqmcc6381.apps.googleusercontent.com",

"iat": "1433978353",

"exp": "1433981953"

}

Facebook的token验证地址(%7C为encode的 |符号):https://graph.facebook.com/debug_token?access_token={Your AppId}%7C{Your AppSecret}&input_token=XXX

Facebook的token验证通过返回的Json格式("is_valid": true):

{

"data": {

"app_id": 000000000000000,

"application": "Social Cafe",

"expires_at": 1352419328,

"is_valid":true,

"issued_at": 1347235328,

"scopes": [

"email",

"publish_actions" ],

"user_id": 1207059 }

}

因为这里前台选用JAVA合作开发,在验证地址为HTTPS允诺验证的时候,前台利用HttpClient允诺的时候牵涉到证书验证的难题,所以这里选用了 @rongyongfeikai2同学的方法:《JAVA利用HttpClient展开POST允诺(HTTPS》,有市场需求的能参考借鉴。

前台依照有关连非官方的api文件格式的token奇偶校验方式,对以获取到的token展开奇偶校验。如果允诺的验证地址返回的重要信息为奇偶校验通过,则能展开后面的操作方式了。

四 将服务器端使用者重要信息与本系统使用者展开关连

在展开前端js允诺的时候,有关连网络平台的api接口会以获取到使用者的重要信息(参照上述代码)。与此同时,在展开使用者token奇偶校验的时候,返回的有关连json对象中也会包含有关连的使用者重要信息,这些重要信息能在前台展开解析和以获取,详细的数据结构能参考非官方文件格式。为了确保使用者重要信息不会被中途截断篡改,能在前台展开数据以获取。

在以获取到服务器端登入使用者的重要信息之后,就能与本系统的账户展开匹配操作方式了。之后的操作方式存在几种不同的方式类型,对于本系统来讲,选用的是下列鉴定业务流程。

后叙

以上为目前我们系统中的服务器端登入的基本上同时实现方案,也许并不太完整(毕竟大体之前没怎么牵涉过…),但是希望其中的牵涉到的点能够帮助到大家,也希望大家能指出写的不对的地方性,并多多包涵哈。

文末也给大家,分享主要有C/C++,Linux,Nginx,ZeroMQ,MySQL,Redis,fastdfs,MongoDB,ZK,流媒体,CDN,P2P,K8S,Docker,TCP/IP,协程,DPDK技术,面试技巧方面的数据资料技术讨论。

感兴趣的朋友能加群:812855908

未经允许不得转载:百万个冷知识 » 关于Google+以及Facebook第三方登录实现的一点总结(怎么能登录facebook)
分享到: 更多 (0)

百万个冷知识 带给你想要内容

联系我们