[Next.js14] NextAuth v5 (3) - Google 登入

王大冶發表於2024-11-05
JSGo

image.png

  • React Hook 深入淺出
  • CSS技巧與案例詳解
  • vue2與vue3技巧合集
  • VueUse原始碼解讀

Google Cloud 設定

訪問 https://console.cloud.google.com/apis

image.png

如果你是第一次使用Google Cloud，請確保同意服務條款。

按照以下步驟繼續：

image.png

image.png

image.png

根據你的喜好編輯專案名稱，然後點選"CREATE"

image.png

你將被重定向到這個介面

👉 OAuth 同意螢幕

讓我們首先配置OAuth同意螢幕

image.png

image.png

如果你的組織中有內部測試人員，選擇Internal使用者型別。否則繼續選擇External使用者

image.png

編輯應用名稱並選擇使用者支援郵箱，然後向下滾動直到找到"Developer contact information"（開發者聯絡資訊）

image.png

填寫電子郵件地址，然後點選"SAVE AND CONTINUE"（儲存並繼續）按鈕

依次點選剩餘步驟（Scopes、Test Users、Summary）的"SAVE AND CONTINUE"按鈕

👉 憑據

現在設定憑據

image.png

首先選擇應用型別為"Web"

image.png

然後填寫"Name"部分，並點選Authorized redirect URIs下方的"ADD URI"按鈕。

在URIs部分填寫 http://localhost:3000/api/auth/callback/google ，然後點選"CREATE"按鈕

🔴注意🔴
部署服務時，確保將URI修改為：
https://${部署域名URL}/api/auth/callback/google
以避免錯誤。

image.png

幾秒鐘後，你將收到OAuth客戶端已建立的通知，並可以檢視和複製"Client ID"和"Client Secret"

最後將"Client ID"和"Client Secret"新增到你的.env檔案中

GOOGLE_CLIENT_ID = ${YOUR GOOGLE CLIENT ID}
GOOGLE_CLIENT_SECRET =${YOUR GOOGLE CLIENT SECRET}

程式碼實現

首先，在src/auth.ts中新增Google provider

// src.auth.ts
import NextAuth from 'next-auth';
import { authConfig } from './auth.config';
import Credentials from 'next-auth/providers/credentials';
import { User } from '@/lib/definitions';
import google from 'next-auth/providers/google'; // 新增匯入

export const { handlers: { GET, POST }, auth, signIn, signOut, update } = NextAuth({
  ...authConfig,
  providers: [
    // **************************************************************
    // 新增provider
    google({
      clientId: process.env.GOOGLE_CLIENT_ID ?? '',
      clientSecret: process.env.GOOGLE_CLIENT_SECRET ?? '',
    }),
    // **************************************************************
    Credentials({
      async authorize(credentials) {
        if (credentials.id && credentials.password) {
          // 在這裡新增你的後端程式碼
          // let loginRes = await backendLogin(credentials.id, credentials.password)
          let loginRes = {
            success : true,
            data : {
              user: {
                ID: "john_doe",
                NAME: "John Doe",
                EMAIL: "email@email.email",
              },
            }
          }
          // 登入失敗
          if (!loginRes.success) return null;
          // 登入成功
          const user = {
            id: loginRes.data.user.ID ?? '',
            name: loginRes.data.user.NAME ?? '',
            email: loginRes.data.user.EMAIL ?? '',
          } as User;
          return user;
        }
        return null;
      },
    })
  ],
  callbacks: {
    async session({ session, token, user }) {
      session.user = token.user as User
      return session;
    },
    async jwt({ token, user, trigger, session }) {
      if (user) {
        token.user = user;
      }
      if (trigger === "update" && session) {
        token = {...token, user : session}
        return token;
      };
      return token;
    },
  },
});

在src/lib/actions.ts中建立一個在客戶端呼叫的Google登入方法

// src/lib/actions.ts
"use server"

import { signIn } from "../auth";
import { AuthError } from "next-auth";

...

export async function googleAuthenticate(
  prevState: string | undefined,
  formData: FormData,
) {
  try {
    await signIn('google');
  } catch (error) {
    if (error instanceof AuthError) {
      return 'google log in failed'
    }
    throw error;
  }
}

確保src/app/api/auth/[…nextauth]/route.ts檔案存在

// src/app/api/auth/[...nextauth]/route.ts
export { GET, POST } from "@/auth"
export const runtime = "edge"

最後，在登入頁面src/app/login/page.tsx中建立Google登入按鈕

// src/app/login/page.tsx
"use client"

import { authenticate, googleAuthenticate } from "@/lib/actions" // 新增匯入
import { useFormState } from "react-dom"

export default function Page() {
    const [errorMsg, dispatch] = useFormState(authenticate, undefined)
    const [errorMsgGoogle, dispatchGoogle] = useFormState(googleAuthenticate, undefined) //googleAuthenticate鉤子
    return (
      <div>
        <h1>Log in Page</h1>
        <form className="flex flex-col" action={dispatch}>
            <input className="bg-blue-300 text-black" name="id"></input>
            <input className="bg-yellow-300 text-black" name="password" type="password"></input>
            <button>
                Log In
            </button>
            <p>{errorMsg}</p>
        </form>
        {/* 新增Google登入按鈕 */}
        <br />
        <form className="flex flex-col" action={dispatchGoogle}>
            <button>
                Google Sign In
            </button>
            <p>{errorMsgGoogle}</p>
        </form>
        {/* 新增Google登入按鈕 */}
      </div>
    )
  }

現在使用npx next dev或npm run dev執行Next應用，訪問 http://localhost:3000/login 並點選"Google Sign In"按鈕。你將被重定向到Google的OAuth同意螢幕。

成功登入Google賬戶後，你將被重定向回主頁，你的Google賬戶詳細資訊將列印在終端上！

image.png

原始碼和備註

https://github.com/youngjun625/nextauth14-nextauthv5?source=post_page-----3683d8fae69c--------------------------------

本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。

相關文章