認證受權：一鍵登陸的背後過程

前言

　　許多網站在登陸時，都有第三方帳號登陸方式：如常見的QQ、微信、微博登陸

　　以下圖：博客園、簡書登陸界面

　　     

 

 　  那麼當咱們點擊三方帳號登陸時，發生了什麼事情呢？涉及什麼概念呢？接下來咱們就以QQ登陸爲例一步步去查看整個過程。

三方登陸過程

　以QQ登陸簡書爲例，來查看整個過程。

　一、進入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）受權簡書可訪問該帳號的權限內容：獲取暱稱、頭像、性別 

　二、輸入帳號贊成受權登陸後，咱們就直接回到了簡書的主頁面中，此時已登陸用戶。如圖

　　　對於用戶來講頁面在登陸後就調整到了主頁，但在程序過程當中卻經歷了好幾個步驟：

　　　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）……

　　帶着這些問題，咱們將一步步去學習，解決這些問題。已到達完整的瞭解整個過程　　

總結

　　經過以上分析主要步驟包含：

　　一、在簡書登陸界面點擊QQ登陸圖標

　　二、簡書後臺(users/auth/qq_connect)重定向到QQ用戶登陸界面；須要攜帶參數（response_type+client_id+redirect_uri+state ）

　　三、輸入QQ點擊登陸受權，校驗QQ用戶，生成受權碼；返回簡書回調地址

　　四、簡書服務器根據獲取的受權碼獲取獲取Access Token

　　五、根據Access Token獲取對應用戶身份的OpenID

　　六、根據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