5分钟在Next.js中无缝实现身份验证

cloudflare workers应用系列之2免费图床苹果

围城之外

cloudflare ai免费生成

up

1

date

‣

vip

slug

0308112737

type

Post

CreatedTime

Mar 8, 2024 03:28 AM

status

Published

5分钟在Next.js中无缝实现身份验证

可以访问下面页面体验

51xmi.com

https://51xmi.com/tt

5分钟在Next.js中无缝实现身份验证

如何在 Next.js 全栈应用程序中无缝实现身份验证

身份验证一直是构建全栈应用程序中的一大主要痛点。而Clerk的出现消除了身份验证中的所有难题，大大降低了妥善保护全栈应用程序的门槛。与其他托管身份验证提供程序相比，Clerk 的开发者体验也明显做得更好。

在本教程中，我们将运用 Clerk 在 Next.js 13 当中构建一款简单的全栈应用程序。

安装 `@clerk/nextjs`

要开始使用Clerk和Next.js，请将SDK添加到您的项目中：

yarn add @clerk/nextjs 我是用的yarn npm 和 pnpm 同理

Set your environment variables设置环境变量

如果在Next.js项目的根目录中没有 .env.local 文件，请立即创建一个。

找到您的Clerk可替换密钥和密钥。如果您已登录Clerk，则下面的 .env.local 片段将包含您的密钥。否则：

导航到您的clerk仪表板

选择您的应用程序，然后在侧边栏菜单中选择添加API密钥。

您可以从“快速复制”部分复制密钥。

将密钥添加到 .env.local 文件。

最终结果应该如下所示：

.env.local

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_publishable_key

CLERK_SECRET_KEY=sk_test_••••••••••••••••••••••••••••••••••

将 `<ClerkProvider>` 添加到您的应用程序

所有Clerk钩子和组件都必须是 <ClerkProvider> 组件的子组件，该组件提供活动会话和用户上下文。

请在下面选择您的首选路由器，了解如何在整个应用中提供此数据：

App Router 或

Pages Router


import '@/styles/globals.css'
import { ClerkProvider } from "@clerk/nextjs";
import type { AppProps } from "next/app";
function MyApp({ Component, pageProps }: AppProps) {
return (
<ClerkProvider {...pageProps}>
<Component {...pageProps} />
</ClerkProvider>
);
}
export default MyApp;

将身份验证添加到应用

现在Clerk已经安装并挂载到您的应用程序中，您可以决定哪些页面是公共的，哪些页面需要身份验证才能访问：

在项目的根目录下创建一个 middleware.ts 文件，如果有src目录的话，要在 src/ 目录下创建一个。

使用 authMiddleware() ，默认情况下将在Next.js中间件运行的所有路由上启用身份验证，阻止所有已注销的访问者访问。您可以使用Next.js的 matcher

将以下代码添加到 middleware.ts 中以保护整个应用程序：


import { authMiddleware } from "@clerk/nextjs";
 
export default authMiddleware({
  // Routes that can be accessed while signed out
  publicRoutes: ['/公共区'],
  // Routes that can always be accessed, and have
  // no authentication information
  ignoredRoutes: ['/不需要验证的'],  
  //也可以这样写 ,只有一个页需要验证. ignoredRoutes: (req) => !req.url.includes("/需要验证的页"),
});
 
export const config = {
  // Protects all routes, including api/trpc.
  // See https://clerk.com/docs/references/nextjs/auth-middleware
  // for more information about configuring your Middleware
  matcher: ["/((?!.+\\.[\\w]+$|_next).*)", "/", "/(api|trpc)(.*)"],
};

Try accessing your app 尝试访问您的应用

访问您的应用以验证是否已启用身份验证：

在项目的根目录下使用以下终端命令运行项目：

yarn dev

访问 http://localhost:3000 以访问您的应用程序。中间件将重定向到您的注册页面，由Clerk's Account Portal功能提供。

注册以访问您的应用程序。

登录您的新帐户。你现在应该可以访问了。

嵌入 `<UserButton />`

<UserButton /> 是一个预构建的组件，允许用户登录、注销和管理其帐户信息。

使用以下代码将 <UserButton /> 添加到你的应用, 可以新建一个页面：


import { UserButton } from "@clerk/nextjs";
 
export default function Home() {
  return (
    <>
      <header>
        <UserButton />
      </header>
      <div>Your home page's content can go here.</div>
    </>
  );
}

然后，本地访问您的应用主页 localhost:3000相应页面 ，查看 <UserButton /> 的实际应用。它应该显示您登录的帐户中的头像。