認證授權:一鍵登入的背後過程

cwsheng發表於2020-08-16

前言

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

  如下圖:部落格園簡書登入介面

       

 

    那麼當我們點選三方賬號登入時,發生了什麼事情呢?涉及什麼概念呢?接下來我們就以QQ登入為例一步步去檢視整個過程。

三方登入過程

 以QQ登入簡書為例,來檢視整個過程。

 1、進入QQ登入頁面:

  可以通過F12檢視原始碼知道:點選簡書登入介面QQ圖示是開啟到了 /users/auth/qq_connect 頁面,如下圖1;但我們點選後檢視到的介面卻是QQ登入介面,如下圖2

  圖1

  值得注意的是,我們已經跳轉到了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

  

相關文章