clerk身份验证管理

1- Clerk 身份验证管理

1.1- 创建 Clerk 账户

  1. 访问 Clerk 官网 并注册一个账户。
  2. 创建一个新的应用，记下提供的 API 密钥和前端 API。

1.2- 创建 Next.js 应用

在终端中运行以下命令以创建新的 Next.js 应用：

npx create-next-app@latest clerk-auth-demo

选择使用 TypeScript 和 Tailwind CSS（如果需要），并确保选择 App Router。

1.3- 安装 Clerk SDK

进入项目目录并安装 Clerk 的 SDK：

cd clerk-auth-demo
npm install @clerk/nextjs

1.4- 配置环境变量

在项目根目录下创建 .env.local 文件，并添加以下内容：

NEXT_PUBLIC_CLERK_FRONTEND_API=<your-clerk-frontend-api>
CLERK_API_KEY=<your-clerk-api-key>

确保将 <your-clerk-frontend-api> 和 <your-clerk-api-key> 替换为您在 Clerk 控制台中获得的实际值。

1.5- 设置 ClerkProvider

在 app/layout.tsx 文件中，使用 ClerkProvider 包裹应用的根组件：

import { ClerkProvider } from '@clerk/nextjs';

// 根布局组件
export default function RootLayout({ children }) {
    return (
        <ClerkProvider>
            <html lang="en">
                <body>{children}</body>
            </html>
        </ClerkProvider>
    );
}

1.6- 创建登录和注册页面

1.6.1- 创建登录页面

在 app/sign-in/[[...sign-in]]/page.tsx 中创建登录组件：

import { SignIn } from '@clerk/nextjs';

// 登录页面组件
const SignInPage = () => {
    return (
        <div>
            <h1>登录</h1>
            <SignIn />
        </div>
    );
};

export default SignInPage;

1.6.2- 创建注册页面

在 app/sign-up/[[...sign-up]]/page.tsx 中创建注册组件：

import { SignUp } from '@clerk/nextjs';

// 注册页面组件
const SignUpPage = () => {
    return (
        <div>
            <h1>注册</h1>
            <SignUp />
        </div>
    );
};

export default SignUpPage;

1.7- 用户个人资料页面

创建一个用户个人资料页面，显示当前用户的信息。在 app/profile/page.tsx 中：

import { useUser } from '@clerk/nextjs';

// 用户个人资料页面组件
const ProfilePage = () => {
    const { user } = useUser(); // 获取当前用户信息

    return (
        <div>
            <h1>用户个人资料</h1>
            {user ? (
                <div>
                    <p>欢迎, {user.firstName} {user.lastName}</p>
                    <p>电子邮件: {user.emailAddresses[0].emailAddress}</p>
                </div>
            ) : (
                <p>请登录以查看个人资料。</p>
            )}
        </div>
    );
};

export default ProfilePage;

1.8- 保护路由

为了保护某些页面，确保用户已登录，可以在页面组件中使用 withAuth 高阶组件。例如，在 app/profile/page.tsx 中：

import { withAuth } from '@clerk/nextjs';

// 用户个人资料页面组件
const ProfilePage = () => {
    // 个人资料页面代码...
};

// 使用 withAuth 保护该页面
export default withAuth(ProfilePage);

1.9- 部署应用

您可以使用 Vercel 一键部署应用。确保在 Vercel 的环境变量设置中添加 Clerk 的 API 密钥。

1.10- 测试应用

在本地运行开发服务器：

npm run dev

访问以下链接进行测试：

  • 登录页面: http://localhost:3000/sign-in
  • 注册页面: http://localhost:3000/sign-up
  • 个人资料页面: http://localhost:3000/profile

2- 总结

通过以上步骤，您可以在 Next.js 应用中完整地集成 Clerk 身份验证管理工具。每个步骤都包含了必要的代码和注释，帮助您理解如何实现用户登录、注册和个人资料管理。Clerk 提供的组件和 API 使得身份验证的实现变得简单而高效。