NestJS サーバー アプリケーションでのクラークによる認証

導入

この記事では、Clerk を使用して NestJS バックエンド アプリケーションに認証と認可を実装するための包括的なステップバイステップ ガイドを提供します。

事務員とは何ですか？

Clerk は、埋め込み可能なユーザー インターフェイス、柔軟な API、シームレスなユーザー認証と管理のための直感的で堅牢なダッシュボードを提供する包括的なプラットフォームです。セッション管理や多要素認証からソーシャル サインオン、マジック リンク、電子メールや SMS のワンタイム パスコードなど、あらゆるものをカバーします。

クラークを使用する理由

データ保護とプライバシーの重要性がますます高まっているため、認証とセキュリティの要件、トレンド、ベストプラクティスは常に進化しています。これらの責任を専門のサービス プロバイダーに任せることで、アプリケーションのコア機能の構築に集中し、より迅速に出荷できるようになります。

これらのセキュリティ タスクを代わりに引き受ける Clerk のようなプラットフォームが存在します。

前提条件

• Typescript の基礎知識
• NestJS の基礎についての知識
• バックエンドでの認証の概念を理解する
• ノード 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 の Web サイトから始めることができます。

必要なライブラリのインストール

このプロジェクトに必要なライブラリは、次のコマンドでインストールできます:

$ 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 の統合

このセクションでは、Clerk バックエンド SDK を NestJS プロジェクトに統合して利用する方法について説明します。

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 バックエンド アプリケーションに対して行われたリクエストの Authorization ヘッダー内のベアラー トークンとして送信されます。

事務員戦略の作成

NestJS では、認証戦略を実装するために Passport が推奨される方法です。 Clerk クライアントでトークンを検証するカスタム Clerk 戦略を作成します。

# .env

CLERK_PUBLISHABLE_KEY=YOUR_PUBLISHABLE_KEY
CLERK_SECRET_KEY=YOUR_SECRET_KEY

validate() メソッドは、NestJS が request.user に自動的に添付するユーザー データを返します。

認証モジュールの作成

Clerk 戦略を提供し、PassportModule と統合する AuthModule を作成します。次に、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 {}

保護されたルートとパブリック ルートの定義

これらの 2 つのコントローラーでは、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);

注: AppController を AppModule に登録し、AuthController を AuthModule に登録することを忘れないでください。

結論

プラットフォームとしての Clerk は、認証とセキュリティの責任を処理し、最新のトレンドとベスト プラクティスに対応します。これにより、アプリケーションのコア機能の構築と開発プロセスの加速に集中できます。

このガイドでは、プロジェクトの設定からルートの保護まで、Clerk 認証を実装する手順を説明しました。これらの基本的な手順は、認証サービス プラットフォームの可能性を探る旅を始めるのに役立ちます。

このプロジェクトの完全に機能する例は、この記事の最後に記載されています。

ダミーキング / クラーク-ネスト-認証

NestJS バックエンド アプリケーションでの Clerk 認証とユーザー管理の使用

Clerk-NestJS 認証

NestJS バックエンド アプリケーションでの Clerk 認証とユーザー管理の使用

中には何が入っているのですか?

このモノリポジトリには次のパッケージとアプリが含まれています:

アプリとパッケージ

• API: NestJS アプリ

各パッケージとアプリは 100% TypeScript です。

ユーティリティ

このモノレポには、いくつかの追加ツールがすでにセットアップされています。

• 静的型チェックのための TypeScript
• コードリンティング用の ESLint
• コードの書式設定がより美しくなります

GitHub で表示

以上がNestJS サーバー アプリケーションでのクラークによる認証の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。