5分钟在Next.js中无缝实现身份验证
5分钟在Next.js中无缝实现身份验证
5分钟在Next.js中无缝实现身份验证
up
1
date
vip
slug
0308112737
status
Published
tags
Code
type
Post
summary
如何在 Next.js 全栈应用程序中无缝实现身份验证
Link
category
Notion
password

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

可以访问下面页面体验
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设置环境变量

  1. 如果在Next.js项目的根目录中没有 .env.local 文件,请立即创建一个。
  1. 找到您的Clerk可替换密钥和密钥。如果您已登录Clerk,则下面的 .env.local 片段将包含您的密钥。否则:
  • 导航到您的clerk仪表板
  • 选择您的应用程序,然后在侧边栏菜单中选择添加API密钥。
  • 您可以从“快速复制”部分复制密钥。
  1. 将密钥添加到 .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已经安装并挂载到您的应用程序中,您可以决定哪些页面是公共的,哪些页面需要身份验证才能访问:
  1. 在项目的根目录下创建一个 middleware.ts 文件,如果有src目录的话,要在 src/ 目录下创建一个。
  1. 使用 authMiddleware() ,默认情况下将在Next.js中间件运行的所有路由上启用身份验证,阻止所有已注销的访问者访问。您可以使用Next.js的 matcher
  1. 将以下代码添加到 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 尝试访问您的应用

访问您的应用以验证是否已启用身份验证:
  1. 在项目的根目录下使用以下终端命令运行项目:
  • yarn dev
  1. 访问 http://localhost:3000 以访问您的应用程序。中间件将重定向到您的注册页面,由Clerk's Account Portal功能提供。
  1. 注册以访问您的应用程序。
  1. 登录您的新帐户。你现在应该可以访问了。

嵌入 <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 /> 的实际应用。它应该显示您登录的帐户中的头像。

Sign out 注销

最后,通过选择您的头像使用 <UserButton /> ,然后选择退出。
꧁不要咖啡,来个鸡蛋灌饼吧꧂
  1. Gravatar
    me
    才发现国内访问有点慢
    1M ago