1. 程式人生 > >一張圖搞定OAuth2.0

一張圖搞定OAuth2.0

發生 密碼 llb 賬號 經典 看電影 技術 流程 圖標

目錄

  • 1、引言
  • 2、OAuth2.0是什麽
  • 3、OAuth2.0怎麽寫

1、引言

本篇文章是介紹OAuth2.0中最經典最常用的一種授權模式:授權碼模式

非常簡單的一件事情,網上一堆神乎其神的講解,讓我不得不寫一篇文章來終結它們。

一項新的技術,無非就是了解它是什麽為什麽怎麽用。至於為什麽,本篇文章不做重點探討,網上會有各種文章舉各種什麽丟鑰匙、發船票的例子供你去閱讀,個人認為還是有些嘩眾取寵,沒有聊到本質。

那我們就重點聊聊OAuth2.0是什麽怎麽用。但首先在讀本文之前,你要先對OAuth2.0有一定的了解,建議先讀一下阮一峰的oauth2.0文章,直接看“授權碼模式”即可,帶著疑問再來讀本文效果更好。

http://www.ruanyifeng.com/blog/2014/05/oauth_2_0.html

2、OAuth2.0是什麽

OAuth2.0是什麽——豆瓣和QQ的故事

OAuth簡單說就是一種授權的協議,只要授權方和被授權方遵守這個協議去寫代碼提供服務,那雙方就是實現了OAuth模式。

舉個例子,你想登錄豆瓣去看看電影評論,但你丫的從來沒註冊過豆瓣賬號,又不想新註冊一個再使用豆瓣,怎麽辦呢?不用擔心,豆瓣已經為你這種懶人做了準備,用你的qq號可以授權給豆瓣進行登錄,請看。

第一步:在豆瓣官網點擊用qq登錄

技術分享圖片

第二步:跳轉到qq登錄頁面輸入用戶名密碼,然後點授權並登錄

技術分享圖片

第三步:跳回到豆瓣頁面,成功登錄

技術分享圖片

這幾秒鐘之內發生的事情,在無知的用戶視角看來,就是在豆瓣官網上輸了個qq號和密碼就登錄成功了。在一些細心的用戶視角看來,頁面經歷了從豆瓣到qq,再從qq到豆瓣的兩次頁面跳轉。但作為一群專業的程序員,我們還應該從上帝視角來看這個過程。

OAuth2.0是什麽——上帝視角

  簡單來說,上述例子中的豆瓣就是客戶端,QQ就是認證服務器,OAuth2.0就是客戶端和認證服務器之間由於相互不信任而產生的一個授權協議。呵呵,要是相互信任那QQ直接把自己數據庫給豆瓣好了,你直接在豆瓣輸入qq賬號密碼查下數據庫驗證就登陸唄,還跳來跳去的多麻煩。

  先上一張圖,該圖描繪了只幾秒鐘發生的所有事情用上帝視角來看的流程

技術分享圖片

就這這張圖,來說一下上述例子中的三個步驟在圖中的表現。所用到的請求路徑名稱都是虛構的,所附帶的請求參數忽略了一些非重點的。

如想了解每次的請求和響應的標準齊全的參數,還是去讀那篇阮一峰的文章。http://www.ruanyifeng.com/blog/2014/05/oauth_2_0.html

第一步:在豆瓣官網點擊用qq登錄

  當你點擊用qq登錄的小圖標時,實際上是向豆瓣的服務器發起了一個 http://www.douban.com/leadToAuthorize 的請求,豆瓣服務器會響應一個重定向地址,指向qq授權登錄

  瀏覽器接到重定向地址 http://www.qq.com/authorize?callback=www.douban.com/callback ,再次訪問。並註意到這次訪問帶了一個參數是callback,以便qq那邊授權成功再次讓瀏覽器發起這個callback請求。不然qq怎麽知道你讓我授權後要返回那個頁面啊,每天讓我授權的像豆瓣這樣的網站這麽多。

  至於訪問這個地址之後,qq那邊做出怎樣的回應,就是第二步的事情了。總之第一步即對應了圖中的這些部分。

技術分享圖片

第二步:跳轉到qq登錄頁面輸入用戶名密碼,然後點授權並登錄

  上一步中瀏覽器接到重定向地址並訪問 http://www.qq.com/authorize?callback=www.douban.com/callback

  qq的服務器接受到了豆瓣訪問的authorize,在次例中所給出的回應是跳轉到qq的登錄頁面,用戶輸入賬號密碼點擊授權並登錄按鈕後,一定還會訪問qq服務器中校驗用戶名密碼的方法,若校驗成功,該方法會響應瀏覽器一個重定向地址,並附上一個code(授權碼)。由於豆瓣只關心像qq發起authorize請求後會返回一個code,並不關心qq是如何校驗用戶的,並且這個過程每個授權服務器可能會做些個性化的處理,只要最終的結果是返回給瀏覽器一個重定向並附上code即可,所以這個過程在圖中並沒有詳細展開。現把展開圖畫給大家。

技術分享圖片

第三步:跳回到豆瓣頁面,成功登錄

這一步背後的過程其實是最繁瑣的,但對於用戶來說是完全感知不到的。用戶在QQ登錄頁面點擊授權登陸後,就直接跳轉到豆瓣首頁了,但其實經歷了很多隱藏的過程。

首先接上一步,QQ服務器在判斷登錄成功後,使頁面重定向到之前豆瓣發來的callback並附上code授權碼,即 callback=www.douban.com/callback

頁面接到重定向,發起 http://www.douban.com/callback 請求

豆瓣服務器收到請求後,做了兩件再次與QQ溝通的事,即模擬瀏覽器發起了兩次請求。一個是用拿到的code去換token,另一個就是用拿到的token換取用戶信息。最後將用戶信息儲存起來,返回給瀏覽器其首頁的視圖。到此OAuth2.0授權結束。

技術分享圖片

3、OAuth2.0怎麽寫

了解了上述過程後,代碼自然就不難寫了,起碼框架是可以寫出來的。我在github上分享了一個我自己模擬的簡單的不能再簡單的oauth2.0,大家可以參考一下,僅僅用於了解oauth的過程,可別用於公司哦,不然老板得開除你。

github地址:https://github.com/sunym1993/dataU-OAuth.git/

如果無法下載,可以加我單獨發。

項目結構非常簡單,只有兩個模塊,分別是豆瓣和QQ,分別啟動即可。

技術分享圖片

最終效果也非常簡單清晰,下面請忍受low逼的顯示效果

第一步

技術分享圖片

第二步

技術分享圖片

第三步

技術分享圖片

一張圖搞定OAuth2.0