如何在下一个JS应用程序中集成职员？
#javascript #网络开发人员 #教程 #nextjs

大家好，在此纠纷中，您将经历一个简单的过程，即在下一个JS 应用程序中使用 clerk 。

注意：出于学习目的，如果您没有从头开始构建任何身份验证，请首先学习基本的身份验证工作，并至少构建一个或两个认证页面。

文员不过是第三方身份验证服务。店员身份验证是控制对数字平台或应用程序访问的安全方法。它确保只有授权用户才能使用这些服务。将其视为俱乐部入口处的虚拟弹跳器 - 检查IDS（登录凭据）以验证允许谁允许。店员身份验证使用密码，生物特征（例如指纹）和单个签名来确认用户的身份等技术。这样可以防止未经授权的访问和保护智能信息。就像锁和钥匙一样，店员身份验证可以使数字空间免受不必要的访客的范围，同时让合适的人享受好处。

                         ## LET'S START

步骤1 ：创建下一个JS应用程序！

使用命令npx create-next-app ./folderName，生成基本的下一个JS应用程序和文件夹结构。确保您输入与我一样。

Image description

生成文件夹结构后，我们可以移至下一步。

步骤2 ：在店员中创建帐户！
访问THIS链接并创建一个新帐户。

现在它将您将您重定向到申请页面，看起来像这样

Image description

店员提供了19种以上的身份验证方法。
其中一些是：

  1. Google
  2. Facebook
  3. github
  4. Apple
  5. LinkedIn
  6. mircosoft 等等... 给应用程序命名并选择所需的方法。 单击创建应用程序

Image description

步骤3 ：选择要使用的框架
本教程适用于下一个JS，所以我将仅选择下一步。
否则提供5个以上的框架。

Image description

步骤4 ：创建.env文件

现在在项目的根文件夹中创建.env文件，然后添加 clerk_secret_key 和 next_public_clerk_publishable_keykey

在您的情况下，这些密钥会有所不同，因此请确保您仅添加。

注意：remeber在.gitignore文件中添加.env文件。

Image description

步骤5 ：安装店员

根据您选择的框架，在您的项目中安装文员。
在这种情况下，我们接下来要去，如果您使用相同的话，请确保输入相同的。

npm install @clerk/nextjs

Image description

步骤6 ：安装店员
为了在整个应用程序上安装店员，我们需要导入clerkprovider并将其包裹在我们的主应用程序周围。

转到./“ projectName”/app/layout.tsx

layout.tsx

最初 

import './globals.css'
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'

const inter = Inter({ subsets: ['latin'] })

export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  )
}

用clerkprovider包装应用程序后。
我们需要从 @/clerk/nextjs导入 * clerkprovider *作为命名导入。


import { ClerkProvider } from '@clerk/nextjs'
import './globals.css'
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'

const inter = Inter({ subsets: ['latin'] })

export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <ClerkProvider>
      <html lang="en">
        <body className={inter.className}>{children}</body>
      </html>
    </ClerkProvider>
  )
}

步骤7 ：添加中间件

为了在身份验证时保护我们的项目或应用程序，我们需要使用中间件。

在项目的根目录中创建一个文件 middleware.ts 复制并粘贴follwiing代码。


import { authMiddleware } from "@clerk/nextjs";

export default authMiddleware({});

export const config = {
  matcher: ["/((?!.*\\..*|_next).*)", "/", "/(api|trpc)(.*)"],
};

步骤8 ：添加注册和登录页
*请注意 *

店员需要一个派友文件夹结构。

i。创建2个名为“（auth）”和“（root）”的文件夹。

ii。内部（root），将新文件创建为page.tsx。此文件是应用程序的主要文件。

iii。内部（auth），创建另一个名为“（路由）”的文件夹。

iv。内部（路由）创建2个文件夹作为“登录”和“注册”。

v。内部登录和注册分别创建名为[[...登录]]和[[...注册]]的新文件夹。

vi。在登录和注册中创建命名为page.tsx的文件。

现在分别复制代码。

for page.tsx在[[...登录]]中：

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

export default function Page() {
      return <SignIn />;
}

for page.tsx在[[...注册]]：

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

export default function Page() {
      return <SignUp />;
}

最后，您的auth文件夹结构应该看起来像：

Image description

步骤9 ：“添加.env文件中的环境变量” 

NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/

恭喜！！！ *您已成功地将业务员与您的应用程序集成在一起 *

！（https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0d0cuhw17zmd2nyzc2nv.png）

为了将登录/注册模式或盒子集中，我们也需要为Auth添加布局。

*每个路由组都可以有自己的布局。

添加布局，您可以执行以下操作：

i。创建一个名为layout.tsx的文件。空文件将使Next.js抛出错误，因为下一步期望布局文件返回函数。

错误

Image description

复制代码：

export default function AuthLayout({
      children
}: {
      children: React.ReactNode
}) {
      return (
            <div className="flex items-center justify-center h-full">{children}</div>
      )
}
// this file is responsible for the layout of entire auth page.

最终结果

Image description

Image description