第三方登錄-京東聯登

 

一、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方的業務流程還得根據當前系統的實現方式來決定。

其實微信登錄根京東登錄的流程差不多，只是他們在接口中約定的用戶唯一標識不一樣，這些都可以抽離成可配置化的信息，這樣就不用在對接不同的第三方時，都要改代碼。