01.07 一張圖搞定OAuth2.0

概述

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

授權碼模式

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

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

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

OAuth2.0是什麼

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

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

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

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

一張圖搞定OAuth2.0

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

一張圖搞定OAuth2.0

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

一張圖搞定OAuth2.0

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

上帝視角來看這個過程。

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

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

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

一張圖搞定OAuth2.0

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

如想了解每次的請求和響應的標準齊全的參數,還是去讀那篇阮一峰的文章。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那邊做出怎樣的回應,就是第二步的事情了。總之第一步即對應了圖中的這些部分。

一張圖搞定OAuth2.0

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

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

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

一張圖搞定OAuth2.0

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

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

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

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

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

一張圖搞定OAuth2.0

喜歡的小夥伴,點個關注吧!


分享到:


相關文章: