首頁 >web前端 >js教程 >在 NestJS 伺服器應用程式中使用 Clerk 進行身份驗證

在 NestJS 伺服器應用程式中使用 Clerk 進行身份驗證

Patricia Arquette
Patricia Arquette原創
2025-01-05 14:04:43633瀏覽

介紹

本文提供了使用 Clerk 在 NestJS 後端應用程式中實現身份驗證和授權的全面逐步指南。

什麼是文員?

Clerk 是一個綜合平台,提供可嵌入的使用者介面、靈活的 API 以及用於無縫用戶身份驗證和管理的直覺且強大的儀表板。它涵蓋了從會話管理和多因素身份驗證到社交登入、魔術連結、電子郵件或簡訊一次性密碼等的一切。

為什麼要使用文員?

身份驗證和安全要求、趨勢和最佳實踐總是在不斷發展,因為資料保護和隱私變得越來越重要。透過將這些責任轉移給專業服務供應商,您可以專注於建立應用程式的核心功能並更快地交付。

像 Clerk 這樣的平台可以為您承擔這些安全任務。

先決條件

  • Typescript 基礎知識
  • 熟悉 NestJS 基礎
  • 了解後端驗證概念
  • 執行 Node 18 或最新版本

項目設定

該專案需要一個新的或現有的 NestJS 專案、一個 Clerk 帳戶和應用程序,以及 Passport、Passport Strategy 和 Clerk 後端 SDK 等庫。

建立 NestJS 項目

您可以使用 Nest CLI 輕鬆設定新的 NestJS 專案。使用您喜歡的任何套件管理器,執行以下命令來建立新的 Nest 應用程式:

$ pnpm add -g @nestjs/cli
$ nest new clerk-auth

查看 NestJS 文件以了解更多詳細資訊。

設定您的文員帳戶和應用程式

如果您還沒有 Clerk 帳戶,請建立一個 Clerk 帳戶並在 Clerk 儀表板中設定一個新應用程式。您可以在 Clerk 網站上開始使用。

安裝所需的庫

可以使用以下指令安裝專案所需的函式庫:

$ pnpm add @clerk/backend @nestjs/config @nestjs/passport passport passport-custom

環境配置

在專案的根目錄中建立一個 .env 檔案來管理不同環境、生產、開發或登台的變數。

新增下列變量,以從 Clerk 帳戶儀表板取得的實際金鑰取代佔位符。

# .env

CLERK_PUBLISHABLE_KEY=YOUR_PUBLISHABLE_KEY
CLERK_SECRET_KEY=YOUR_SECRET_KEY

要使用 ConfigService 存取整個應用程式中的環境變量,請將 ConfigModule 匯入根 AppModule。

// src/app.module.ts

import { Module } from '@nestjs/common';
import { ConfigModule } from '@nestjs/config';

@Module({
  imports: [
    ConfigModule.forRoot({
      isGlobal: true,
    }),
  ],
})
export class AppModule {}

在 NestJS 中整合 Clerk

本節介紹如何在您的 NestJS 專案中整合和使用 Clerk 後端 SDK。

建立 Clerk 用戶端提供者

將 Clerk 用戶端註冊為提供程序,使其可以使用裝飾器注入到類別中,從而可以在整個程式碼庫中的任何需要的地方使用它,如接下來的部分所示。

$ pnpm add -g @nestjs/cli
$ nest new clerk-auth

在 AppModule 中註冊 ClerkClientProvider

接下來,您需要向 Nest 註冊提供者以啟用依賴項注入。

$ pnpm add @clerk/backend @nestjs/config @nestjs/passport passport passport-custom

使用有職員簽發的 JWT 的護照

當使用者透過 Clerk 的託管頁面或前端應用程式註冊或登入時,Clerk 會發出 JWT 令牌。然後,此令牌會作為不記名令牌傳送到向 NestJS 後端應用程式發出的請求的授權標頭中。

制定文員策略

在NestJS中,Passport是建議的實作身分驗證策略的方式。您將建立一個自訂 Clerk 策略,用於使用 Clerk 用戶端驗證令牌。

# .env

CLERK_PUBLISHABLE_KEY=YOUR_PUBLISHABLE_KEY
CLERK_SECRET_KEY=YOUR_SECRET_KEY

validate() 方法傳回 NestJS 自動附加到 request.user 的使用者資料。

建立身份驗證模組

建立一個 AuthModule,它提供 Clerk 策略並與 PassportModule 整合。然後,在AppModule中註冊AuthModule。

// src/app.module.ts

import { Module } from '@nestjs/common';
import { ConfigModule } from '@nestjs/config';

@Module({
  imports: [
    ConfigModule.forRoot({
      isGlobal: true,
    }),
  ],
})
export class AppModule {}
// src/providers/clerk-client.provider.ts

import { createClerkClient } from '@clerk/backend';
import { ConfigService } from '@nestjs/config';

export const ClerkClientProvider = {
  provide: 'ClerkClient',
  useFactory: (configService: ConfigService) => {
    return createClerkClient({
      publishableKey: configService.get('CLERK_PUBLISHABLE_KEY'),
      secretKey: configService.get('CLERK_SECRET_KEY'),
    });
  },
  inject: [ConfigService],
};

實施路由保護

受保護的路由是需要使用者經過驗證才能存取的路由。

創建文員身份驗證守衛

守衛根據某些運行時條件決定特定請求是否應由路由處理程序處理。

如果您想要預設保護應用程式中的所有路由,則需要執行以下步驟:

  1. 建立一個公共裝飾器來標記無需身份驗證即可存取的路由。
  2. 實作 ClerkAuthGuard 來限制對受保護路由的訪問,僅允許經過身份驗證的使用者繼續。
// src/app.module.ts

import { Module } from '@nestjs/common';
import { ConfigModule } from '@nestjs/config';
import { ClerkClientProvider } from 'src/providers/clerk-client.provider';

@Module({
  imports: [
    ConfigModule.forRoot({
      isGlobal: true,
    }),
  ],
  providers: [ClerkClientProvider],
})
export class AppModule {}
// src/auth/clerk.strategy.ts

import { User, verifyToken } from '@clerk/backend';
import { Injectable, Injectable, UnauthorizedException } from '@nestjs/common';
import { ConfigService } from '@nestjs/config';
import { PassportStrategy } from '@nestjs/passport';
import { Strategy } from 'passport-custom';
import { UsersService } from 'src/users/users.service';
import { Request } from 'express';
import { ClerkClient } from '@clerk/backend';

@Injectable()
export class ClerkStrategy extends PassportStrategy(Strategy, 'clerk') {
  constructor(
    @Inject('ClerkClient')
    private readonly clerkClient: ClerkClient,
    private readonly configService: ConfigService,
  ) {
    super();
  }

  async validate(req: Request): Promise<User> {
    const token = req.headers.authorization?.split(' ').pop();

    if (!token) {
      throw new UnauthorizedException('No token provided');
    }

    try {
      const tokenPayload = await verifyToken(token, {
        secretKey: this.configService.get('CLERK_SECRET_KEY'),
      });

      const user = await this.clerkClient.users.getUser(tokenPayload.sub);

      return user;
    } catch (error) {
      console.error(error);
      throw new UnauthorizedException('Invalid token');
    }
  }
}

全域啟用身份驗證

由於預設情況下您的大多數端點都會受到保護,因此您可以將身份驗證防護配置為全域防護。

// src/auth/auth.module.ts

import { Module } from '@nestjs/common';
import { ClerkStrategy } from './clerk.strategy';
import { PassportModule } from '@nestjs/passport';
import { ClerkClientProvider } from 'src/providers/clerk-client.provider';
import { ConfigModule } from '@nestjs/config';

@Module({
  imports: [PassportModule, ConfigModule],
  providers: [ClerkStrategy, ClerkClientProvider],
  exports: [PassportModule],
})
export class AuthModule {}

定義受保護的公共路線

在這兩個控制器中,AppController 中使用 Public 裝飾器來將路由指定為公用。相較之下,AuthController 中不需要裝飾器來將路由指定為受保護,因為身份驗證防護預設情況下全域應用。

// src/app.module.ts

import { Module } from '@nestjs/common';
import { ConfigModule } from '@nestjs/config';
import { ClerkClientProvider } from 'src/providers/clerk-client.provider';
import { AuthModule } from 'src/auth/auth.module';

@Module({
  imports: [
    ConfigModule.forRoot({
      isGlobal: true,
    }),
    AuthModule,
  ],
  providers: [ClerkClientProvider],
})
export class AppModule {}
// src/decorators/public.decorator.ts

import { SetMetadata } from '@nestjs/common';

export const IS_PUBLIC_KEY = 'isPublic';
export const Public = () => SetMetadata(IS_PUBLIC_KEY, true);

注意:記得在AppModule中註冊AppController,在AuthModule中註冊AuthController。

結論

Clerk 作為一個平台,負責處理身份驗證和安全責任,緊跟最新趨勢和最佳實踐。這使您能夠專注於建立應用程式的核心功能並加速您的開發過程。

在本指南中,我們介紹了實作 Clerk 驗證的步驟,從設定項目到保護路由。這些基本步驟應該可以幫助您開始探索身分驗證服務平台的可能性。

本文末包含該項目的完整功能範例。

Authentication with Clerk in NestJS Server Application 達米王 / 職員巢授權

在 NestJS 後端應用程式中使用 Clerk 身份驗證和使用者管理

Clerk-NestJS 驗證

在 NestJS 後端應用程式中使用 Clerk 驗證和使用者管理

裡面有什麼?

這個 monorepo 包含以下軟體包和應用程式:

應用程式和軟體包

  • api:一個 NestJS 應用

每個套件和應用程式都是 100% TypeScript。

實用工具

這個 monorepo 已經為您設定了一些附加工具:

  • 用於靜態類型檢查的 TypeScript
  • 用於程式碼檢查的 ESLint
  • 程式碼格式更漂亮



在 GitHub 上查看


以上是在 NestJS 伺服器應用程式中使用 Clerk 進行身份驗證的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn