全棧身份認證實作:使用 Next.js、NextAuth.js 和 MongoDB-6. Google OAuth
Published in
Dec 13, 2023
整合 Google OAuth 作為登入方法,並處理第三方認證。
6–1. Google OAuth 設定
- 於 nextauth-options.ts 添加 GoogleProvider,GoogleProvider 中的 GOOGLE_CLIENT_ID、GOOGLE_CLIENT_SECRET 存放於環境變數檔。
- 前往 Google Cloud Console 設定並取得 GOOGLE_CLIENT_ID 、 GOOGLE_CLIENT_SECRET 。步驟如下:
- Authorized JavaScript origins: http://localhost:3000
Authorized redirect URIs: http://localhost:3000/api/auth/callback/google
- 在 component/button 資料夾中新增 Google 登入按鈕(google-signin-button.tsx),並使用 google signIn 功能,透過設定 callbackUrl,用戶在登入後能夠被重新導回原先所在的頁面。
- 在 SignInForm 組件(signin-form.tsx)中使用 GoogleSignInButton。
程式碼
6–2. 使用 Google OAuth
- 用戶 session 資料可以在客戶端(前端)和伺服器端(後端)被訪問和使用。
- useSession() React Hook — 客戶端(前端)使用,可以用於檢查用戶是否已經登入,在渲染過程中管理和訪問 session 狀態。
- 使用範例:用於構建根據用戶登入狀態而調整功能或顯示的前端組件。
- getServerSession() 方法 — 伺服器端(後端)使用,可以用於保護 API 路由,確保只有已認證的用戶才能訪問,通過解析來自客戶端的 HTTP 請求中的”Session Token”(通常存儲在 Cookie 中),來確定當前的用戶身份。
- 使用範例:在伺服器端渲染頁面時根據用戶身份變更內容,或者用於創建需要用戶身份驗證的 API 路由,如更新用戶個人信息。
- 在 lib/actions 資料夾下創建 auth.actions.ts,集中管理所有與身份驗證相關的 server actions,新增 getUserSession。
- 展示如何在前端和後端使用用戶 session 資料:UserNav 組件(user-nav.tsx)根據 session 判斷登入狀態,UserAvatar 組件(user-avatar.tsx)顯示用戶頭像。
程式碼
單元重點
- 於 nextauth-options.ts 添加 GoogleProvider,GoogleProvider 中的 GOOGLE_CLIENT_ID、GOOGLE_CLIENT_SECRET 存放於環境變數檔。
- 新增 Google 登入按鈕,使用 google signIn 功能。
- 於 UserNav 及 UserAvatar 組件使用 session 資料。
參考資料
NextAuth.js (GoogleProvider)-https://next-auth.js.org/providers/google