前言
許多網站在登錄時,都有第三方賬號登錄方式:如常見的QQ、微信、微博登錄

那么當我們點擊三方賬號登錄時,發生了什么事情呢?涉及什么概念呢?接下來我們就以QQ登錄為例一步步去查看整個過程。
三方登錄過程
以QQ登錄簡書為例,來查看整個過程。
1、進入QQ登錄頁面:
可以通過F12查看源碼知道:點擊簡書登錄界面QQ圖標是打開到了 /users/auth/qq_connect 頁面,如下圖1;但我們點擊后查看到的界面卻是QQ登錄界面,如下圖2


值得注意的是,我們已經跳轉到了QQ的服務器地址了:https://graph.qq.com/oauth2.0/show?which=Login&display=pc&client_id=100410602&redirect_uri=http%3A%2F%2Fwww.jianshu.com%2Fusers%2Fauth%2Fqq_connect%2Fcallback&response_type=code&state=%257B%257D
通過發現里面有幾個特別的參數:
| 參數名 |
參數值 |
| client_id(客戶端id) | 100410602(這是來源哪里呢?) |
| redirect_uri(重定向地址) | http%3A%2F%2Fwww.jianshu.com%2Fusers%2Fauth%2Fqq_connect%2Fcallback(是簡書的一個回調地址) |
| response_type(響應類型) | code(代表什么意思呢?) |
| state(狀態) | %257B%257D |
通過觀察該頁面主要包含兩部分:
a)賬號密碼輸入框
b)授權簡書可訪問該賬號的權限內容:獲取昵稱、頭像、性別
2、輸入賬號同意授權登錄后,我們就直接回到了簡書的主頁面中,此時已登錄用戶。如圖
對於用戶來說頁面在登錄后就調整到了主頁,但在程序過程中卻經歷了好幾個步驟:
a)登錄用戶名、密碼校驗
b)獲取授權碼,返回設置的回調地址
c)根據授權碼獲取access_token
d)根據access_token獲取OpenID
e)根據OpenId獲取用戶信息
f)返回跳轉到簡書主頁

那么這整個過程在程序中是怎么完成的呢?接下來我們用一張圖來介紹完整過程。
流程回顧
根據上面流程繪制了如下認證流程圖:
在QQ互聯開發網站中,我們可以了解到QQ是OAuth方式實現的,那么現在可能大家就有些疑問:
a)OAuth是什么?
OAuth(開放授權)是一個開放標准,允許用戶授權第三方網站訪問他們存儲在另外的服務提供者上的信息,而不需要將用戶名和密碼提供給第三方網站或分享他們數據的所有內容。
b)該過程中簡書服務器、QQ認證服務器、QQApi服務器到底是什么,有什么關系?
c)過程中的授權碼、Token、openId又是什么呢?
d)……
帶着這些問題,我們將一步步去學習,解決這些問題。已到達完整的了解整個過程
總結
通過以上分析主要步驟包含:
1、在簡書登錄界面點擊QQ登錄圖標
2、簡書后台(users/auth/qq_connect)重定向到QQ用戶登錄界面;需要攜帶參數(response_type+client_id+redirect_uri+state )
3、輸入QQ點擊登錄授權,校驗QQ用戶,生成授權碼;返回簡書回調地址
4、簡書服務器根據獲取的授權碼獲取獲取Access Token
5、根據Access Token獲取對應用戶身份的OpenID
6、根據OpenID,調用OpenApi接口
后續
逐步解答上面提出得到問題,對相關知識深入了解。最終實現自己的認證授權服務
下一篇就介紹OAuth標准
參考:
QQ互聯開發: https://wiki.connect.qq.com/%E5%BC%80%E5%8F%91%E6%94%BB%E7%95%A5_server-side
OAuth2.0簡介:https://wiki.connect.qq.com/oauth2-0%E7%AE%80%E4%BB%8B
