用後端去設定前端（或說 user/agent）是可能的嗎？如何在 OAuth2 的驗證過程把 token 放到指定的 request header？

oauth2 express cookie backend

rainbowrain 2019-12-26 14:31:29 ‧ 2352 瀏覽

分享至

[問題情境]
我正在學習怎麼走 OAuth2 的流程去建構一個登入及授權的服務，使用的是 Authorization code 的模式。前後端分離的環境，所以欲使用服務的第三方、登入授權的前端頁面及負責驗證及邏輯的後端 APIs 都是不同 domain。後端是用 Node Express。

[問題內容]
現在遇到一個問題，主管要求回傳 token 的時候要用 httponly cookie。

而規範中 token 要設在 request header 的 Authorization 這個 Header

GET /resource HTTP/1.1
Host: server.example.com
Authorization: Bearer mF_9.B5f-4.1JqM

像上面這樣

因為 httponly 的 cookie 無法用 Javascript 存取，那要用什麼方式才可以把那段 token 設置到 request header？

還是這兩個需求（[用 httponly 傳 token ]和[把 token 設在 request headers 的自訂 header]）其實是互斥的？

現在弄出來的 request 是長這樣

GET /resource HTTP/1.1
Host: server.example.com
Cookie: Authorization=Bearer%20mF_9.B5f-4.1JqM

雖然也可以直接去取 request cookie 拿值，但這樣就跟規範的作法不一樣了。想問說就像response header 可以有 set-cookie 來設定 user/agent 的 cookie，那有類似 set-header 這樣的方式嗎？

看更多先前的討論...收起先前的討論...

小碼農米爾 iT邦高手 1 級 ‧ 2019-12-26 15:27:23 檢舉

是互斥的
通常 token 和 cookie 會選一個用

都支援也可以
和你最後提到的做法一樣
找不到 Authorization，直接去取 request cookie

╰（￣▽￣）╭

fillano iT邦超人 1 級 ‧ 2019-12-26 16:19:50 檢舉

流程好像不是這樣，這一段應該是伺服器對伺服器（client vs token server或client vs resource server），這是要怎麼設定http-only cookie？能設http-only cookie的只有token server或resource server，所以client不可能透過cookie傳token過去阿～～～

rainbowrain iT邦新手 2 級 ‧ 2019-12-26 16:30:36 檢舉

fysh711426 感謝回答～所以應該是我搞錯了什麼 .. 然後 fillano 大大就來提醒我了 XD

rainbowrain iT邦新手 2 級 ‧ 2019-12-26 16:34:30 檢舉

fillano 所以正確的流程來說， token 應該不會出現在 client 或 authServer 的前端才對？好像有點懂又有點打結 .. Orz

fillano iT邦超人 1 級 ‧ 2019-12-26 17:35:31 檢舉

我會推薦看這個：https://speakerdeck.com/chitsaou/jian-dan-yi-dong-de-oauth-2-dot-0

需要釐清：
1. 你說的token是什麼？grant code還是access token
2. 要搞清楚參與流程的角色，以及之間怎麼互動（有好幾種做法，應用場景也不同），這樣才知道什麼流程在前端跑，什麼在後端跑

小碼農米爾 iT邦高手 1 級 ‧ 2019-12-26 19:52:48 檢舉

哈哈哈，我好像搞錯+1

小碼農米爾 iT邦高手 1 級 ‧ 2019-12-26 20:05:08 檢舉

參考了 fillano 大的資訊
流程應該是這樣

1. 使用者進入了第三方的網站
2. 使用者按下登入後會轉址到你的網站 (Authorization Server)

如果已經登入過會直接轉回第三方網站，且第三方拿到 grant code

不知道主管大大是不是指這裡
可以用 cookie 判斷使用者是否已登入
這裡我只想到可以用 cookie，token 不知道怎麼實作

3. 如未登入，使用者輸入帳號密碼
成功登入後，轉址到第三方網站，第三方拿到 grant code

4. 第三方拿著 grant code，到你的網站 (Authorization Server)
取得 access token

5. 第三方取得 access token 後才能向你的 api 拿資料 (Resource Server)

不確定是不是這樣，小弟也在學習中

fillano iT邦超人 1 級 ‧ 2019-12-27 09:14:34 檢舉

你得到它了

rainbowrain iT邦新手 2 級 ‧ 2019-12-27 11:38:36 檢舉

fillano 以前看過了，不過這次再重看又有新認識，可能開始實作之後有些東西比較有概念了。我描述的 token 都是 access token ～流程的部份角色算是清楚了，但角色間的互動在什麼情況用哪一種還沒很清楚 orz

rainbowrain iT邦新手 2 級 ‧ 2019-12-27 12:13:56 檢舉

fysh711426 最早的時候我想的流程也是這樣，但隨著實作就又越來越多疑問

用你的流程作為討論

1. 使用者進入了第三方的網站
2. 使用者按下登入後會轉址到你的網站 (Authorization Server)

如果已經登入過會直接轉回第三方網站，且第三方拿到 grant code

不知道主管大大是不是指這裡
可以用 cookie 判斷使用者是否已登入
這裡我只想到可以用 cookie，token 不知道怎麼實作
** 我一開始沒想到這件事 orz 所以你這邊講的 token 我不確定是指什麼，一般判斷登入狀態除了 cookie 還有其他好的方法嗎 **

** 一開始我這邊就想錯了，因為我的流程登入後還要確認授權，但我把登入跟授權想在一起 **
** 所以登入狀態跟授權狀態都要獨立判斷 .. 已登入及已取得授權的情況下才會 redirect 並在 params 附上 grant code **

3. 如未登入，使用者輸入帳號密碼
成功登入後，轉址到第三方網站，第三方拿到 grant code

** redirect 這邊也是我迷惑的地方，因為我想做的方式是 .. **
** 使用者在 Client（A 視窗）點擊 Login with XXX ，然後出現一個新視窗 XXX Auth（B 視窗）**
**（目前是直接用 window.open ，不知道用 iframe 的話操作會不會有什麼差異 **
** 所以我會在 B 視窗完成登入及授權，這時候不知道要怎麼讓 A 視窗 redirect 到 callback/url 才對 **
** 暫時考慮用 window.postmessage 的方式把 redirect 的資訊傳回去 **
** 但後來一想，我未來根本不會知道 Client 用什麼方式來呼叫 XXX Auth ，應該要有一個通用的方法來處理才對 **

4. 第三方拿著 grant code，到你的網站 (Authorization Server)
取得 access token

** 一開始我以為是 Client Frontend 直接送 request 到 XXX Auth 換 access token **
** 重看一次簡報才想起來有重點提示 grant code 換 access token 這一段要在 Client 的後端做 **

5. 第三方取得 access token 後才能向你的 api 拿資料 (Resource Server)

** Resource Server 驗證 access token 的方式我也還不知道怎麼做 **
** 是 Auth Server 要做一支 API 給 Resource Server 用來驗證 **
** 還是讓 Resource Server 可以 access client_secret 自己驗證就好 **
** 不知道哪一種方式正確或有沒有其他方式 **

好像也不是這麼困難的功能，搞了快兩個月 .. 開始覺得自己很廢 Orz
有種在當薪水小偷的感覺 T-T

fysh711426 最早的時候我想的流程也是這樣，但隨著實作就又越來越多疑問

用你的流程作為討論

1. 使用者進入了第三方的網站
2. 使用者按下登入後會轉址到你的網站 (Authorization Server)

如果已經登入過會直接轉回第三方網站，且第三方拿到 grant code

不知道主管大大是不是指這裡
可以用 cookie 判斷使用者是否已登入
這裡我只想到可以用 cookie，token 不知道怎麼實作
** 我一開始沒想到這件事 orz 所以你這邊講的 token 我不確定是指什麼，一般判斷登入狀態除了 cookie 還有其他好的方法嗎 **

** 一開始我這邊就想錯了，因為我的流程登入後還要確認授權，但我把登入跟授權想在一起 **
** 所以登入狀態跟授權狀態都要獨立判斷 .. 已登入及已取得授權的情況下才會 redirect 並在 params 附上 grant code **

3. 如未登入，使用者輸入帳號密碼
成功登入後，轉址到第三方網站，第三方拿到 grant code

** redirect 這邊也是我迷惑的地方，因為我想做的方式是 .. **
** 使用者在 Client（A 視窗） 點擊 Login with XXX ，然後出現一個新視窗 XXX Auth（B 視窗）**
**（目前是直接用 window.open ，不知道用 iframe 的話操作會不會有什麼差異 **
** 所以我會在 B 視窗完成登入及授權，這時候不知道要怎麼讓 A 視窗 redirect 到 callback/url 才對 **
** 暫時考慮用 window.postmessage 的方式把 redirect 的資訊傳回去 **
** 但後來一想，我未來根本不會知道 Client 用什麼方式來呼叫 XXX Auth ，應該要有一個通用的方法來處理才對 **

4. 第三方拿著 grant code，到你的網站 (Authorization Server)
取得 access token

** 一開始我以為是 Client Frontend 直接送 request 到 XXX Auth 換 access token **
** 重看一次簡報才想起來有重點提示 grant code 換 access token 這一段要在 Client 的後端做 **

5. 第三方取得 access token 後才能向你的 api 拿資料 (Resource Server)

** Resource Server 驗證 access token 的方式我也還不知道怎麼做 **
** 是 Auth Server 要做一支 API 給 Resource Server 用來驗證 **
** 還是讓 Resource Server 可以 access client_secret 自己驗證就好 **
** 不知道哪一種方式正確或有沒有其他方式 **

好像也不是這麼困難的功能，搞了快兩個月 .. 開始覺得自己很廢 Orz
有種在當薪水小偷的感覺  T-T

修改

rainbowrain iT邦新手 2 級 ‧ 2019-12-27 12:23:00 檢舉

是說為什麼都不用回答這個功能 XD

小碼農米爾 iT邦高手 1 級 ‧ 2019-12-27 13:38:27 檢舉

從零開始研究+實作本來就需要時間
不要想太多 ╰（￣▽￣）╭

最後一點 Resource 驗證，可以參考這篇的 Access Token 部分
https://blog.yorkxin.org/2013/09/30/oauth2-1-introduction.html

裡面有提到，可以由 Authorization Server 間接驗證，也可以將資訊嵌在 Token 內。

如果你是用 Bearer Token 的話，
可以直接寫在 Token 內，Bearer Token 本身有防偽機制。

不過要注意不要放敏感資訊，Bearer Token 內的資訊可以直接被解出來看。