这篇文章将介绍如何为 Next.js应用设置 Google 身份验证，手把手教你如何创建项目，如何使用Tailwind CSS 实现界面。
要求
在开始之前，请确保你已经具备以下条件：
Google Cloud账号：使用Google Cloud创建 OAuth 凭据。 我们会从创建项目开始，逐步完成 Google 身份验证的添加。
第一步：创建 Next.js 项目并集成 Tailwind CSS
首先，我们需要创建一个新的Next.js 项目。在终端运行以下命令：
npx create-next-app@latest my-google-auth-app
安装过程中，当系统询问是否添加 Tailwind CSS，请选择 YES！
- Tailwind CSS 是目前最受欢迎的 CSS 框架之一，它提供了一种简单又高效的方式来设计响应式界面。
- 使用 Tailwind 后，Next.js 会自动为你完成大部分配置，让你快速上手。
第二步：配置 Google Cloud OAuth 凭据
Google 身份验证需要 OAuth 凭据，下面是具体步骤：
-
打开 Google Cloud Console，如果还没有项目，请创建一个新项目。 虽然身份验证的设置过程略显复杂，但只需按部就班操作就行！
-
转到 APIs & Services > Credentials，然后点击 Create Credentials。
-
选择 OAuth 2.0 Client ID，将应用类型设置为“Web 应用”。
-
在“Authorized redirect URIs”中，输入以下地址：
http://localhost:3000/api/auth/callback -
Google 将生成 Client ID 和 Client Secret，将它们保存下来（或者在新标签页中保持打开）。稍后会用到。
第三步：配置环境变量
为了保护敏感信息，我们需要将 Google 凭据存储在环境变量中：
-
在你的 Next.js 项目中创建
.env.local文件，并添加以下内容：GOOGLE_CLIENT_ID=your-google-client-id GOOGLE_CLIENT_SECRET=your-google-client-secret NEXTAUTH_SECRET=super-secret-key -
将
your-google-client-id和your-google-client-secret替换为 Google Cloud 提供的实际值。 -
不要将
.env.local提交到 GitHub，以防敏感信息泄露！
🔒 关于 NEXTAUTH_SECRET
NEXTAUTH_SECRET 是一个加密密钥，用于保护用户会话的安全：
- 在 macOS 或 Linux 中，你可以运行以下命令生成一个安全的随机密钥：
openssl rand -base64 32 - 将生成的密钥添加到
.env.local文件中：NEXTAUTH_SECRET=your-super-secure-random-key
第四步：安装并配置 NextAuth
安装 NextAuth 用于管理身份验证流程：
npm install next-auth
创建文件 app/api/auth/[...nextauth]/route.ts，用于定义 API 路由：
import NextAuth from 'next-auth';
import GoogleProvider from 'next-auth/providers/google';
export const authOptions = {
providers: [
GoogleProvider({
clientId: process.env.GOOGLE_CLIENT_ID,
clientSecret: process.env.GOOGLE_CLIENT_SECRET,
}),
],
secret: process.env.NEXTAUTH_SECRET,
};
const handler = NextAuth(authOptions);
export { handler as GET, handler as POST };
完成此设置后，NextAuth 会自动处理复杂的 OAuth 流程，帮助用户完成登录、认证等操作。
第五步：创建登录和登出功能
为用户提供登录和登出功能的交互逻辑。在 lib 文件夹中创建 lib/auth.ts 文件：
import { signIn, signOut } from 'next-auth/react';
export const handleSignIn = () => signIn('google');
export const handleSignOut = () => signOut();
第六步：添加登录和登出按钮
接下来，为页面添加实际的用户界面。在 app/page.js 文件中添加以下代码：
"use client";
import { handleSignIn, handleSignOut } from '../lib/auth';
import { useSession } from 'next-auth/react';
export default function HomePage() {
const { data: session } = useSession();
return (
<main className="flex items-center justify-center min-h-screen bg-gray-100">
{session ? (
<div>
<h2 className="text-lg font-medium text-gray-700">
欢迎, {session.user.name}!
</h2>
<button
onClick={handleSignOut}
className="px-4 py-2 mt-4 text-white bg-red-500 rounded-lg hover:bg-red-600"
>
退出登录
</button>
</div>
) : (
<button
onClick={handleSignIn}
className="px-6 py-3 text-white bg-blue-600 rounded-lg hover:bg-blue-700"
>
使用 Google 登录
</button>
)}
</main>
);
}
因为 useSession 必须在 <SessionProvider> 内使用，所以要在 app/layout.tsx 或者你的根布局文件中，添加 SessionProvider，确保它包裹住整个应用,代码如下：
"use client";
import "./globals.css";
import { SessionProvider } from "next-auth/react";
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body>
<SessionProvider>
{children}
</SessionProvider>
</body>
</html>
);
}
- 效果：用户登录后会显示欢迎信息和“退出登录”按钮，未登录时则显示“使用 Google 登录”按钮。
- 使用 Tailwind CSS 能让按钮快速具备现代化设计风格。
第七步：运行并测试
完成所有设置后，运行项目：
npm run dev
访问 http://localhost:3000。点击“使用 Google 登录”按钮，会跳转到谷歌的OAuthSignin 登录页面，登录成功后即可显示用户信息。到此你的谷歌验证登录就完成了。
评论(0)