第三方登录-京东联登

 

一、OAuth2.0简介

      登录授权作为一个网站的敲门砖，几乎是每个系统都会支持的功能，一般情况下都是先注册后登录的流程，登录方式也是多种多样，最常见的应该是用户名+密码、手机号验证码、三方登录，如使用微信、微博、京东等，大多数的三方系统作为IDP，内部都是采用标准OAuth2.0协议中的授权码模式，因为这种模式是最安全的，只要理解了OAuth2协议，对接起来也是大同小异，只是在返回的数据格式上稍有不同。本文不详细介绍OAuth2是什么，因为自己也还在学习中，而且我觉得OAuth2里面有很多很有趣也很值得深入研究的东西，绝对不是一篇文章能描述清楚的。在刚接触到的时候就觉得发明这个协议的人真的是个天才，所以买了一些相关的书籍在研究，后续会将学到的东西记录下来，因为在项目中遇到了对接微信、京东的需求，所以记录一下对接过程中，我方作为SP需要做的一些事情。这里提供一篇阮一峰大神的文章，可以说是很清楚的入门篇了：

http://www.ruanyifeng.com/blog/2019/04/oauth-grant-types.html 

二、三方登录调研

  以CSDN为例，支持以下几种三方登录，第一个是微信登录，只有点击了才会显示微信，可能是个bug吧，不过不重要～～

 

 

 下面看一下点击这几种登录方式都会发生什么？因为微信需要下载csdn客户端，所以我选择其他的几种

2.1 QQ

跳转到授权登录页

 

 

解码后的URL：

https://graph.qq.com/oauth2.0/show?which=Login&display=pc&client_id=100270989&response_type=code&redirect_uri=https://passport.csdn.net/account/login?pcAuthType=qq&newAuth=true&state=test

2.2 微博

跳转页面

 

 

 解码后到URL：

手机扫码：https://api.weibo.com/oauth2/authorize?client_id=2601122390&response_type=code&redirect_uri=https://passport.csdn.net/account/login?pcAuthType=sinat&newAuth=true###

PC页面：https://login.sina.com.cn/signup/signin.php?r=https://api.weibo.com/oauth2/authorize?time=1634443364309&sign=1c0248ae1a7cfca5343021a084d28e5c&client_id=2601122390&response_type=code&redirect_uri=https://passport.csdn.net/account/login?pcAuthType=sinat&newAuth=true

2.3 百度

跳转页面

 

 

解码后到URL：

https://openapi.baidu.com/oauth/2.0/authorize?client_id=cePqkUpKCBrcnQtARTNPxxQG&response_type=code&redirect_uri=https://passport.csdn.net/account/login?oauth_provider=BaiduProvider&pcAuthType=baidu

2.4 github

跳转页面

 

 

 解密后的URL：

https://github.com/login?client_id=4bceac0b4d39cf045157&return_to=/login/oauth/authorize?client_id=4bceac0b4d39cf045157&redirect_uri=https://passport.csdn.net/account/login?pcAuthType=github&newAuth=true&state=test

可以看到无论哪种方式，都会先跳转到第三方自己的登录授权页面，除了github之外请求的URL中都包含client_id、response_type、redirect_uri、state这四个参数，尝试使用github登录后发现，github的登录方式存在bug，无法进行后续流程，先

不耽误时间了。

三、第三方登录的实现方式

下面是在项目复盘的时候，总结的一个实现UML图，可以看到在调三方接口之前，SP方也是需要做很多的工作，不是简单的调别人的接口，因我方支持idp信息的可配置化，所以只要完成主要业务流程，对接第三方的时候只要对其信息进行配置即可，不需要区分是京东还是微信，这一点还是很方便的。

 上面的流程可以总结为以下几步：

1、前端通过后端接口获取跳转到IDP登录页面的URL

因为URL中的state参数会影响后续的流程，所以跳转地址由后端生成，state信息会存储这次请求中的所有参数。

2、用户在第三方登录页进行授权登录

用户完成授权登录之后，第三方会重定向到SP方提供的重定向地址，并且在参数中返回授权码code和请求时传过去的状态码state

3、重定向地址将会向SP后端发送请求获取token

后端接收到请求后，会校验state的有效性，校验通过之后向第三方请求获取token和用户信息，获取到token和idp用户的唯一标识之后：

如果需要sp用户和idp用户绑定，则查询是否已经绑定：已绑定则给当前sp用户下发自己的token，否则进行绑定流程；

如果不需要sp用户和idp用户绑定，则直接使用idp用户唯一标识作为sp用户，下发自己的token；

4、绑定用户【可选】

如果需要绑定且未绑定，则执行绑定流程

四、京东联登准备工作

使用京东登录之前，需要先进行以下准备，这里是宙斯开发者中心的京东登录接口文档，已经很详细了：https://jos.jd.com/commondoc?listId=306

4.1 申请宙斯账号

在京东开放平台宙斯开发者中心申请宙斯账号：https://jos.jd.com/

4.2 创建应用

进入控制中心创建应用

 

4.3 获取App Key 和App Secret

 

 

4.4 配置回调地址

进入应用设置，在里面配置应用信息，主要是回调地址redirect url

经过以上四步，就完成了idp方的准备工作，其中的回调地址是在idp方（京东）登录成功之后，重定向到sp方（我方）的前端地址，前端会映射到后端的某个接口，在该接口中获取token信息。

 

五、需要开发的接口

https://login.csa-expo.com/login/personal 以该网站的京东登录为例

5.1 authorizeUri

获取授权地址，跳转到京东登录页

 

5.2 redirect

重定向之后如果需要绑定，则前端控制页面跳转到绑定页

 

 

5.3 binding

绑定完成后直接跳转到登录成功后的页面：https://www.csa-expo.com/

以上就是京东登录对接到的流程，SP方的业务流程还得根据当前系统的实现方式来决定。

其实微信登录根京东登录的流程差不多，只是他们在接口中约定的用户唯一标识不一样，这些都可以抽离成可配置化的信息，这样就不用在对接不同的第三方时，都要改代码。