如何使用 Clerk 在 React.js、Next.js、Vue.js 和 Nuxt.js 中管理用户身份验证

介绍

身份验证是任何软件、应用程序、系统的重要组成部分，它通过限制应用程序的区域来提供额外的安全保护。例如，除非用户经过身份验证，否则无法访问包含重要信息的仪表板。当然，我们可以为用户实现用户、电子邮件和密码，然后用户会收到一封电子邮件来验证电子邮件，只有这样用户才能访问允许通过身份验证的内容，这种流程仍然非常流行，但它有一些额外的步骤，许多用户对此感到厌烦，因为使用提供商（无论是谷歌、微软、苹果还是其他公司）的身份验证要简单得多，只需单击几下即可通过身份验证，甚至不必离开当前所在的屏幕。在构建应用程序时一定要考虑这种易于访问的特点，以便用户可以选择他想要的那个。

在本文中，我们将使用 Clerk 与 React.js 和 Next.js，遗憾的是 Clerk 尚未完全支持 Vue.js 或 Nuxt.js 应用程序，在 Clerk 的官方文档中，我们可以找到对 Vue.js 的提及，但要通过 SDK 使用它。

使用 REACT.JS 的店员

第一步是登录 Clerk 网站，选择您希望在应用程序中使用的提供商。免费套餐最多可选择 3 个提供商，如果您希望使用更多提供商，则需要升级您的帐户。

将其添加到 React.js 应用程序的第二步非常简单。首先我们需要安装 clerk 包：

npm install @clerk/clerk-react

然后我们需要设置我们的环境变量，首先检查您是否已经有一个 env.local 文件来在那里添加密钥，如果您没有这个文件，您可以继续创建它来添加 clerk 可发布密钥，如下所示：

VITE_CLERK_PUBLISHABLE_KEY=pk_test_************************

下一步是导入可发布密钥，我们可以通过转到 main.ts 文件并将其导入到那里来执行此操作，您还可以添加 if 检查以避免 Typescript 错误。

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './index.css'

// Import your publishable key
const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY

if (!PUBLISHABLE_KEY) {
  throw new Error('Missing Publishable Key')
}

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

现在我们必须将添加到我们的应用程序中，也将其添加到 main.ts 文件中，但现在我们必须用如下所示的方式包装整个应用程序，并将 publishableKey 附加到它：

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './index.css'
import { ClerkProvider } from '@clerk/clerk-react'

// Import your publishable key
const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY

if (!PUBLISHABLE_KEY) {
  throw new Error('Missing Publishable Key')
}

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <ClerkProvider publishableKey={PUBLISHABLE_KEY} afterSignOutUrl="/">
      <App />
    </ClerkProvider>
  </React.StrictMode>,
)

现在，最后一步是在 Header 组件中添加 Clerk 组件，用于处理身份验证步骤，例如登录、注销，以及在过程中选择的身份验证器按钮，例如 Google、Microsoft、Github、Apple 等等。您可以按照自己的方式组织 Header 组件，只需从 Clerk 导入组件即可。

import { SignedIn, SignedOut, SignInButton, UserButton } from '@clerk/clerk-react'

export function Header() {
  return (
    <header>
      <SignedOut>
        <SignInButton />
      </SignedOut>
      <SignedIn>
        <UserButton />
      </SignedIn>
    </header>
  )
}

并且不要忘记添加包 React-Router-Dom，以便在用户通过身份验证后导航到相应的页面。

使用 NEXT.JS 的职员

要将 Clerk 添加到 Next.js 应用程序，步骤几乎相同，只需进行一些更改，让我们看看如何做到这一点。

首先使用您的帐户登录 Clerk 的网站并选择提供商，然后继续添加可发布的密钥，并记住 Next.js 对其环境变量有不同的命名约定。

而使用Next.js需要在环境文件中添加2个值，一个密钥，一个可发布密钥和一个秘密密钥：

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_************************
CLERK_SECRET_KEY=sk_test_************************

下一步是添加一个中间件来拦截未经身份验证的用户的路由，您可以在根目录中创建一个名为 middleware.ts 的文件。然后，使用 Clerk 提供的 auth() 和 protected() 函数来验证路由并强制进行身份验证，代码如下：

import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server'

const isProtectedRoute = createRouteMatcher(['/dashboard(.*)', '/forum(.*)'])

export default clerkMiddleware((auth, req) => {
  if (isProtectedRoute(req)) auth().protect()
})

export const config = {
  matcher: [
    // Skip Next.js internals and all static files, unless found in search params
    '/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)',
    // Always run for API routes
    '/(api|trpc)(.*)',
  ],
}

现在我们将向主 layout.tsx 文件中添加内容，以包装整个应用程序并使 Clerk 在全球范围内可用。

import { ClerkProvider, SignInButton, SignedIn, SignedOut, UserButton } from '@clerk/nextjs'
import './globals.css'
import Header from '@/components/Header';


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

现在我们添加 Header 组件并使用 Clerk 组件：

import { SignedIn, SignedOut, SignInButton, UserButton } from '@clerk/nextjs';

export function Header() {
  return (
    <header>
      <SignedOut>
        <SignInButton />
      </SignedOut>
      <SignedIn>
        <UserButton />
      </SignedIn>
    </header>
  )
}

带 VUE 的店员

为了将 Clerk 添加到 Vue.js 应用程序，我们需要使用 Clerk 的 SDK。这个过程非常简单，这就是使用 Clerk 的优势之一——简单。

使用以下命令将 SDK 安装到您的项目中：

npm install vue-clerk

将可发布的密钥添加到您的项目中，与 Next.js 不同，对于 Vue.js 和 React.js，只有一个密钥需要添加到 .env.local 文件：

VITE_CLERK_PUBLISHABLE_KEY=pk_test_************************

然后将 main.ts 文件中的 Clerk 可发布密钥导入到 src 文件夹中：

import { createApp } from 'vue'
import App from './App.vue'

const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY

if (!PUBLISHABLE_KEY) {
  throw new Error('Missing Publishable Key')
}

const app = createApp(App)
app.mount('#app')

从 vue-clerk 添加 clerkPlugin

import { createApp } from 'vue'
import App from './App.vue'
import { clerkPlugin } from 'vue-clerk'

const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY

if (!PUBLISHABLE_KEY) {
  throw new Error('Missing Publishable Key')
}

const app = createApp(App)
app.use(clerkPlugin, {
  publishableKey: PUBLISHABLE_KEY
})
app.mount('#app')

现在创建您的标题组件并使用 Clerk 预建组件：

<script setup>
     import { SignedIn, SignedOut, SignInButton, UserButton } from 'vue-clerk'
</script>

<template>
  <SignedOut>
    <SignInButton />
  </SignedOut>
  <SignedIn>
    <UserButton />
  </SignedIn>
</template>

当用户完成身份验证后，使用 vue-router 导航到已验证的页面。

使用 NUXT.JS 的店员

Nuxt.js 应用程序需要使用 Vue-clerk 以及一些额外的步骤才能使 Clerk 与 Nuxt.js 架构兼容。这与 Next.js 的流程有所不同，因为这两种技术的目的相似。

在 nuxt.config.ts 中，我们将模块 vue-clerk/nuxt 添加到模块数组中，这样所有组件和可组合项都将自动导入

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['vue-clerk/nuxt'],
  clerk: {
    appearance: {},
  }
})

现在环境变量已添加到您的环境文件中：

NUXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_publishable_key
NUXT_CLERK_SECRET_KEY=your_secret_key

环境变量将使用runtimeConfig加载到nuxt.config.ts文件中，并注意命名约定，它们必须与NUXT_PUBLIC_YOUR_ENV和runtimeConfig对象匹配，否则我们可能会遇到开发和构建环境之间的不一致。

export default defineNuxtConfig({
  modules: ['vue-clerk/nuxt'],
  clerk: {
    appearance: {},
  }
  runtimeConfig: {
    public: {
      clerkPublishableKey: process.env.CLERK_PUBLISHABLE_KEY,
    },
  }
});

现在下一步是在例如Header组件中使用 Clerk Components 并使用它。

<script lang="ts" setup>
// You don't have to import anything from  Clerk
</script>

<template>
  <div>
    <SignIn />
  </div>
</template>

我们还必须保护需要身份验证的路线，如果用户未获得授权，他将被重定向到主页或我们想要的任何地方。

// middleware/auth.ts
import { defineNuxtRouteMiddleware, navigateTo } from '#app';
import { useClerk } from '@clerk/clerk-vue';

export default defineNuxtRouteMiddleware(() => {
  const clerk = useClerk();

  if (!clerk.user.value) {
    return navigateTo('/sign-in');
  }
});

下一步是添加类型，以确保 Clerk 能够兼容 Typescript。由于我们使用的是 Vue.js 和 Nuxt.js 的 SDK，因此无需安装 @clerk/types 包，因为 SDK 本身就包含类型定义。您可以阅读代码库中的文件，以确定具体的类型。

import { UserResource } from '@clerk/types';

// Example function using Clerk's user type
function getUserName(user: UserResource) {
  Return { 
user.firstName || 'Guest', 
user.emailAddresses; 
  }
}

剩下的唯一事情就是启用 typescript 模块来构建应用程序，以便稍后部署到生产中。

export default defineNuxtConfig({
  modules: ['vue-clerk/nuxt'],
  clerk: {
    appearance: {},
  }
  runtimeConfig: {
    public: {
      clerkPublishableKey: process.env.CLERK_PUBLISHABLE_KEY,
    },
  }
  buildModules: ['@nuxt/typescript-build'], // Enable TypeScript
});

结论

使用 Clerk 进行身份验证非常简单和容易，现在您可以将其添加到您的项目中并为您的用户提供另一个选项供您选择，这将更好地提高用户体验。

参考

https://clerk.com/docs/quickstarts/react

https://clerk.com/docs/quickstarts/nextjs

https://vue-clerk.vercel.app/

https://clerk.com/docs/references/react/use-clerk

https://github.com/wobsoriano/nuxt-clerk-template/tree/main

https://www.vue-clerk.com/guides/nuxt

https://www.npmjs.com/package/@clerk/types

https://github.com/clerk/javascript/blob/e483037f61b4cfa8a04be27971f3b09eb88c84ac/packages/types/src/user.ts#L52

鏂囩珷鏉ユ簮锛�https://dev.to/hramonpereira/how-to-manage-user-authentication-in-reactjs-nextjs-vuejs-and-nuxtjs-using-clerk-136l