使用 NestJS - 實作第三方 OAuth 授權登入服務

Introduction

After doing a simple OAuth exercise, I also learned the NestJS (Node) backend framework and Prisma (ORM) along the way.

Purpose

Open Authorization (OAuth) is an open standard for authorization, widely used for social logins. It allows third-party websites to access resources on a resource server without obtaining the user's credentials.

Flow Chart

Flow Description

When the user clicks the login button on the main website, the redirect_uri is passed to the OAuth login page via the URL.
After the user enters their username and password to log in, the system generates a code, stores it in the database, and then redirects the page back to the e-commerce site's callback page, passing the code via the URL.
On the callback page, the frontend can extract the code from the URL and send it to the backend. The backend then uses this code to exchange it for an access token via the OAuth API.
The page receives the access token. This token can then be used to access the resource server and retrieve relevant information. When the token expires, it can be refreshed.

Technology Stack Used

Frontend (E-commerce site) - (Next.JS, Eslint, Prettier, React, Redux toolkit) - Code
Backend (OAuth service) - (NestJS, MySQL, Prisma, Swagger, class-validator for data validation, and Guards for JWT API authentication) - Code
Database: MySQL

Demo

Deployment Environment

Deployed to a NAS using PowerShell
GCP reverse proxy + personal NAS server

Testing

Jest
Rest Client

Thoughts

This was my first time building a website with NestJS, and I found the development experience to be very pleasant. The modular design of NestJS reminded me of Angular's dependency injection, and it also felt a bit like the layered architecture of .NET MVC. Paired with Prisma, database operations became very intuitive. For lightweight websites, NestJS not only enables rapid development but also makes it easy to achieve modularity and separation of concerns, leading to a more efficient development process.

Additional Notes:

1. A summary of the different OAuth grant types

Authorization Code Grant - In this flow, an authorization code is used to exchange for an access token. The application never directly handles the user's credentials.
Client Credentials Grant - In this grant type, if Service A wants to access Service B's API, Service A uses its own client credentials (issued by Service B) to obtain an access token.
Implicit Grant - Typically used with JavaScript, but it is being phased out due to security concerns.
Resource Owner Password Credentials Grant - This grant type directly requests the user's credentials from the client. It is less secure and not commonly used anymore.

2. The difference between OAuth and SSO

SSO: The purpose of Single Sign-On (SSO) is to simplify the login process across multiple applications. It allows a user to log in once and then seamlessly use the same identity across different applications. SSO primarily focuses on authentication, which is confirming who the user is.
OAuth: OAuth, on the other hand, is an authorization protocol. It allows a third-party application to access protected resources on behalf of a user. The main purpose of OAuth is authorization, enabling an application to securely access certain user resources without needing direct access to the user's credentials (like their password).

3. A newer topic: OpenID Connect (OIDC)

OpenID Connect: OIDC is an identity layer built on top of OAuth 2.0. It is specifically designed for authentication and supports SSO. OIDC is a hybrid of SSO and OAuth, addressing both authentication and authorization needs.