OAuth 2.0 & OpenID Connect: Login Google/GitHub an toàn với Next.js và NestJS

OAuth 2.0 & OpenID Connect: Login Google/GitHub an toàn với Next.js và NestJS | Shanverse

Codetypescript

1const state = randomBase64Url(32)2const codeVerifier = randomBase64Url(64)3const codeChallenge = base64Url(sha256(codeVerifier))4const nonce = randomBase64Url(32)56await loginTransactions.create({7  stateHash: sha256(state),8  codeVerifier,9  nonce,10  provider: 'google',11  returnTo: '/dashboard',12  expiresAt: addMinutes(new Date(), 10),13})

Codetypescript

1@Get('google/start')2async startGoogle(@Res() res: Response) {3  const tx = await this.oauthTransactions.createGoogle()45  const url = new URL(this.google.authorizationEndpoint)6  url.searchParams.set('client_id', this.google.clientId)7  url.searchParams.set('redirect_uri', this.google.redirectUri)8  url.searchParams.set('response_type', 'code')9  url.searchParams.set('scope', 'openid email profile')10  url.searchParams.set('state', tx.state)11  url.searchParams.set('nonce', tx.nonce)12  url.searchParams.set('code_challenge', tx.codeChallenge)13  url.searchParams.set('code_challenge_method', 'S256')1415  return res.redirect(url.toString())16}

Codetypescript

1@Get('google/callback')2async callback(3  @Query('code') code: string,4  @Query('state') state: string,5  @Res() res: Response,6) {7  const tx = await this.oauthTransactions.consume(state)8  if (!tx || tx.provider !== 'google') {9    throw new UnauthorizedException('Invalid login transaction')10  }1112  const tokens = await this.google.exchangeCode({13    code,14    codeVerifier: tx.codeVerifier,15    redirectUri: tx.redirectUri,16  })1718  const identity = await this.google.verifyIdToken({19    idToken: tokens.idToken,20    nonce: tx.nonce,21  })2223  const user = await this.accounts.signInWithIdentity(identity)24  const session = await this.sessions.create(user.id)2526  this.cookies.setSession(res, session)27  return res.redirect(tx.returnTo)28}

OAuth 2.0 & OpenID Connect: Login Google/GitHub an toàn với Next.js và NestJS

OAuth 2.0 không đồng nghĩa với đăng nhập

Bình luận

Threat model

Hai kiến trúc phù hợp

A. Next.js làm Backend for Frontend

B. NestJS là authorization client trung tâm

Đăng ký OAuth application

Secrets nằm ở đâu?

Authorization Code + PKCE

Callback an toàn

Validate Google ID token

GitHub OAuth flow

Account linking: vùng nguy hiểm nhất

Scope tối thiểu

Session riêng của ứng dụng

Provider token storage

returnTo và open redirect

Cookies, SameSite và cross-origin deployment

Next.js boundaries

NestJS boundaries

Lỗi thường gặp

Testing và vận hành

Checklist production

Kết luận

Xây dựng LMS hiện đại với Next.js, NestJS và PostgreSQL

2FA và FIDO2/Passkeys trong Mobile Banking: Từ SMS OTP đến sinh trắc học

Input Validation là “chân ái”: Zod và class-validator trong NestJS

OAuth 2.0 không đồng nghĩa với đăng nhập

Bình luận

Threat model

Hai kiến trúc phù hợp

A. Next.js làm Backend for Frontend

B. NestJS là authorization client trung tâm

Đăng ký OAuth application

Secrets nằm ở đâu?

Authorization Code + PKCE

Endpoint bắt đầu login

Callback an toàn

Validate Google ID token

GitHub OAuth flow

Account linking: vùng nguy hiểm nhất

Scope tối thiểu

Session riêng của ứng dụng

Provider token storage

returnTo và open redirect

Cookies, SameSite và cross-origin deployment

Next.js boundaries

NestJS boundaries

Lỗi thường gặp

Testing và vận hành

Checklist production

Kết luận

Bài viết liên quan

Xây dựng LMS hiện đại với Next.js, NestJS và PostgreSQL

2FA và FIDO2/Passkeys trong Mobile Banking: Từ SMS OTP đến sinh trắc học

Input Validation là “chân ái”: Zod và class-validator trong NestJS