OAuth 2.0 入門

OAuth 是 open authorization 的簡寫,意思是開放受權。下面是維基百科的解釋:html

OAuth的標誌
開放受權(OAuth)是一個開放標準,容許用戶讓第三方應用訪問該用戶在某一網站上存儲的私密的資源(如照片,視頻,聯繫人列表),而無需將用戶名和密碼提供給第三方應用。

OAuth容許用戶提供一個令牌,而不是用戶名和密碼來訪問他們存放在特定服務提供者的數據。每個令牌受權一個特定的網站(例如,視頻編輯網站)在特定的時段(例如,接下來的2小時內)內訪問特定的資源(例如僅僅是某一相冊中的視頻)。這樣,OAuth讓用戶能夠受權第三方網站訪問他們存儲在另外服務提供者的某些特定信息,而非全部內容。git

某乎上有人作了一番形象化的解釋:github

打比方我約了一個空調工幫忙維修空調,可是這天我恰好不在家。我能夠留一把鑰匙給他,但又怕不安全。好比他可能回去配一把鑰匙,他可能順手拿走我家裏的貴重物品。好在有 OAuth,我能夠給他一把 OAuth 鑰匙,這把鑰匙只能在今天使用,明天就過時。而且,經過這把鑰匙進入室內的人,只能看見空調,其餘東西對他來講是隱藏的。最關鍵的是,若是我中途反悔,能夠隨時隨地吊銷這把鑰匙,而在房間的空調工會被自動趕出來。

徹底憑記憶默寫出來,大概意思沒有錯。ajax

OAuth 2.0是OAuth協議的下一版本,但不向下兼容OAuth 1.0。OAuth 2.0關注客戶端開發者的簡易性,同時爲Web應用,桌面應用和手機,和起居室設備提供專門的認證流程。npm

本篇文章只討論 2.0 版本。瀏覽器

受權方式

相比概念, OAuth 的具體內容更顯複雜。我會先約定幾個名詞,再作一個小實驗,使用 github 的 OAuth 來受權個人小 App。安全

  • 資源服務器,這裏指 github
  • 受權服務器,這裏也是 github,也許github後臺有不少微服務分別管理,但對於咱們的角度來看是一個總體
  • 第三方 App,也就是下面的請求受權的 App
  • 用戶:App 的用戶,同時擁有 Github 的帳戶
  • 客戶端 client: 這裏指瀏覽器

準備工做

註冊 App
register-app-1
register-app-2
注意這裏填寫的 homepage url 和 authorization callback url。服務器

homepage url: http://localhost:8080
authorization callback url: http://localhost:8080/callback.html

接下來,準備一個小項目
project-folder
簡單起見,安裝靜態文件server,這裏使用 http-serverapp

npm install http-server -g

這項目根目錄,啓動 server微服務

http-server -p 8080

ok,到這裏,應該能明白項目中 index.html 對應的是 homepage url,callback.html 對應的是 authorization callback url。

圖示流程

熟悉的登陸界面,用戶選擇使用github帳戶登陸
login
頁面跳轉到github受權頁面,注意地址欄的地址信息中包含了client id 和 redirect url
authorized
確認受權以後,頁面跳轉到 redirect url,也就是本地的 callback.html 頁面,注意地址欄中的 code。這個code很關鍵,用於獲取最終的 token。
return-code
callback.html 頁面解析出 code,發送 ajax 請求獲取 token
get-token
獲得的 token。
got-token

項目完整代碼-github

取消受權

在本文最開始的地方,提到了 OAuth 的用戶能夠方便的取消受權 - 吊銷令牌(revoke token)。
revoke-token

總結

  1. 註冊 App, 填寫 home page url, authorization callback url(受權回調頁面),獲取 client id, client secret。
  2. client 端跳轉到 github 的受權頁面,攜帶 client id 等參數
  3. 用戶確認受權後,github 跳轉回受權回調頁面,攜帶 code
  4. client 使用 code 和其餘必要參數(client id,secret),請求 github 頒發 access token
  5. 用戶能夠隨時吊銷令牌,終止受權

參考

相關文章
相關標籤/搜索