iT邦幫忙

0

Week15 - 用NestJS整合Line Login,一個基於OAuth2.0的OpenID Connect系統 - OAuth2.0 & OIDC篇 [Server的終局之戰系列]

本文章同時發佈於:


大家好,眾所皆知JavaScript是非常彈性而強大的語言,可以快速的替自己打造一個靈活的Server。但也因為這樣,導致:

一個框架,給不同的工程師使用,每位寫的都是不同的Style

這使得每個專案的測試、建立Model的方式、MVC的架構都不大相同,最後每次接管專案都是一個新的學習,明明都是同個框架啊!所以:

是否有一個Solution可以規範各個主流技術的邏輯分層

就變為了需求,而NestJS的框架,就是為了這個而生。

NestJS基於Express.js或是Fastify.js,使用TypeScript,並受到Angular等前端框架啟發,整體的架構非常清晰,並且對於GraphQL、gRPC、Redis、MQTT、NATS、RabbitMQ等等技術都有完整的Solution,甚至在External API的請求上也支援RxJS。

他的目標是希望讓後端也有一個「可測試、彈性高、可維護、結構佳」的框架,總而言之真的是讓我非常興奮的框架XD。

所以接下來幾篇文章會透過Line Login的整合來介紹NestJS。

這篇文章會討論

  • Line Login
  • OAuth2.0的Authorization Code模式與OpenID Connect

Line Login

大家應該有在一些網站看到可透過「FB、Google、Line」來註冊登入的方式,如此一來,就不用在自己註冊一個帳號,使得自己還要多記一個帳號,用Line註冊就可以一個Line帳號走遍各個網站。

但你有想過這個背後的運作原理嗎?實際上並不複雜,就是:

  1. 小明在A網站上透過Line Login
  2. Line API會發放就像身分證的小明OpenID給A網站
  3. A網站拿到這個OpenID就將它記錄在資料庫中,他就會代表小明這個帳號的識別碼
  4. 之後透過Line Login,Server只要發現是小明的OpenID,就會判斷為小明

OAuth2.0與OpenID Connect

OAuth2.0是一種「資源授權 - Authorization」的方案,他有四種授權方式,分別為:

  • Authorization Code
  • Implicit
  • Password
  • Client Credentials

Authorization Code為安全性最高也較常見的一種,而其他三種不是Line Login的方式,所以暫不討論XD。

OAuth2.0 - Authorization Code流程

整體了流程詳細可以RFC 6749 - 4.1章節,但第一次看這麼詳細的介紹可能會讓人霧散散(就跟我一樣XD)。我們可以用以下簡單的圖來解釋:

最大的關鍵點在「輸入帳號密碼時,被導倒了Line 認證網站,認證成功之後再將成功資訊帶回某網站後端來請求access token」。

如此一來,某網站後端在使用Line的資源時,就不會直接用Line帳號密碼來存取資源,而是接觸經過「Line 認證網站」認證過後的「驗證成功資訊」來存取資源。

基於OAuth2.0而生的OpenID Connect

大家可能會發現,剛剛說的Authorization Code流程都只有提到「存取資源」,沒錯,其實OAuth2.0一開始的設計是為了授權而產生,你可以用透過OAuth2.0取得的access token來請使用者照片、使用者文章、使用者生日等等此使用者的資源。

但要「身份認證 - Authentication」怎麼辦呢?OpenID Connect(簡稱OIDC)就是為了解決此問題,他基於OAuth2.0的流程,並添加了對Line來說就像是身分證的OpenID connect資訊與access token一起回傳,

可以發現,除了紅色匡起來的部分,其他都與OAuth2.0的Authorization Code認證相同。

所以,你可以很單純的把OAuth2.0與OpenID Connect做以下區分

  • OAuth2.0的access token: 為「資源授權 - Authorization」,是用來取得使用者的相關資源,例如照片、文章、生日等等。
  • 基於OAuth2.0而生的OpenID Connect: 為「身份認證 - Authentication」,使用OAuth2.0的流程來產生像身分證的ID,用來代表此使用者。

探討完了Line Login的原理後,接下來幾篇文章就會開始NestJS的實作部分,再請大家多多指教。

謝謝你的閱讀,也歡迎分享討論~最後附上家人為NestJS所畫的吉祥物圖XD。


尚未有邦友留言

立即登入留言