前端登入機制

6 min readOct 13, 2021

前端網頁登入的驗證機制目前有三類
1.Cookie
2.Session
3. JWT(Json web token)

Cookie
1.以key-value的方式儲在瀏覽器
2.屬於無狀態協議，每個請求都是獨立的，無法分辨這次的請求和上次請求是否同一人
3.存在client端，可能會被竄改
4.不可誇域

Session:紀錄Server和Client狀態的一種機制
1.基於Cookie產生Session和SessionId，
2.Session儲存在Server，SessionId儲存在Client

Session的流程
1.Server根據使用者資料建立Session
2.Request回到Client，收到回傳的SessionId
3.將SessionId記在Cookie及Domain
4.當Client第二次訪問Server時，會將Cookie傳到Server拿取SessionId，若找到對應Session就代表使用者己登入

Cookie和Session比較

安全性： Session > Cookie
因為Session存在Server端，會比存在Client端的Cookie還安全

儲存資訊: Session > Cookie
Session可以儲存任意類型，Cookei只能存字串

儲存大小： Seesion > Cookie
Session可儲存空間較大，Cookie儲存大小最大不超過4KB

時效：Cookie > Session
Session 時效較Cookie短，Client關閉或過期都會失效。
Cookie可以保持長期的登入狀態。

Token
Access Token：一種訪問時所需要的憑證
組成：唯一id(UID) + 時間戳記(Time stamp) + 簽名(signature)
1.Token放在header中
2.因為是Server無狀態的驗證方式，故Server不會存Token，改用解析Token時間換取儲存空間來減少Server的負擔，不需頻繁的查DB
3.Token不受限同源問題

特點：
1.Server不需儲存狀態，擴展性高
2.較高的安全性
3.可跨域使用

流程
1.Client要求登入
2.Server收到要求驗證帳號密碼
3.驗證成功會發送Token到Client
4.Client收到請求會存在Cookie或Localhost
5.Client每次請求會帶Token
6.Server每次收到請脙都會驗證Token

Refresh Token:
1.用來改善Token時效過長可能會被竊取的問題
2.是一種可以刷新Refresh的Token，每次刷新都要使用者登入一次帳密，用來確定是否為本人。
3.如果過期了，使用者還是要登入。
4.Refresh token的過期時間存在Server上，只有在申請新Access token才要驗證

Token和Session比較
1.Token的安全性比Session好
2.如果你的產品需要支援第三方服務，用Token，若只要在自己網站開發二者都可以。

JSON Web Token
JWT是目前最流行的跨網域解決方案，用來傳送使用者資訊。
可以用HMAC演算法或RSA公私鑰進行簽名。
解決了：
因為他是存在Client，所以JWT的出現不是為了解決資料安全的問題，而是為了確保資料是被本人所創建的！（無法竄改）。

但無法解決安全性問題：
因header, payload 是以base64方式去編碼，
Token會帶資料，所以比Cookie還大。

驗證流程：
1.Client登入，Server認證成功後送一組JWT到Client
2.Client存JWT在Local，通常放在localstorage
3.使用者要訪問受到保護的route或是資源時，要在header的Authorization加入Bearer模式。

Authorization: Bearer <token>

4.Server的Router會檢查Authorization
5.JWT可夾帶使用者訊息，減少查DB的動作
6.JWT不會用到Cookie，所以可以用任意網域的服務
7.使用者的狀態不會存在Server，是一種無狀態驗證機制

JWT使用方式
1.放入header

GET /calendar/v1/events
Host: api.example.com
Authorization: Bearer <token>

2.使用URL傳輸
不建議，因為會把Token顯示在URL給大家看


http://www.example.com/user?token=xxx

Token和JWT
共通點：
1.都是一種Token
2.都可以記錄使用者訊息
3.讓Server無狀態化
4.驗證成功後，才可訪問資源

差異：
Token:
驗證Client送過來的Token時，需要用DB 查詢資料，再驗證Token是否有效。

JWT:
將Token和payload加密後存Client，Server只需用Key進行解密，不需再查DB，因為JWT己包含使用者資訊和加密訊息。

以上完全是參考yyisyou的內容重打一次，用來增加記憶，
那怎樣用到FB第三方登入?
https://ithelp.ithome.com.tw/articles/10230023
https://jasonwatmore.com/post/2020/09/26/vuejs-facebook-how-to-use-the-facebook-sdk-in-an-vue-app

參考：
https://iter01.com/159348.html
https://blog.yyisyou.tw/5d272c64/
https://www.gushiciku.cn/pl/pZ8M/zh-tw
https://iter01.com/159348.html

前端登入機制

Written by Jameskrauser Lee

Responses (1)