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

一張圖搞定OAuth2.0 一張圖搞定OAuth2.0

https://www.cnblogs.com/flashsun/p/7424071.html

 

一張圖搞定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逼的顯示效果

第一步

第二步

第三步

目錄

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逼的顯示效果

第一步

第二步

第三步