優れたNest.jsブログを構築する：ユーザーシステムを追加する

前のチュートリアルで、記事の作成をサポートする基本的なブログを構築しました。

しかし、危険なのは、このブログには認証機能がなく、誰でも記事を作成または削除できることです。

今後のチュートリアルでは、ユーザーおよび認証システムを段階的に追加することで、このブログをより安全にします。

早速始めましょう。

認証方法の紹介

Web開発において、最も一般的な認証方法は、トークンベース（例：JWT） と セッションベース（Cookie） の2つです。

JWT（JSON Web Tokens）: これは今日最も人気のある認証方法です。ユーザーがログインした後、サーバーはトークンを生成し、クライアントに返します。クライアントは後続のリクエストでこのトークンを含め、サーバーはトークンが改ざんされていないことを検証するだけです。サーバーはユーザーのログイン状態を保存しないため、この方法は多数のサーバーを持つ現代の大規模ウェブサイトに非常に適しています。これは、複数のサーバー間でユーザー状態の頻繁な同期の必要性を回避するためです。
セッション-Cookie: ユーザーがログインした後、サーバーはセッションを作成し、Cookieを介してセッションIDをブラウザに返します。ブラウザは後続のリクエストでこのCookieを自動的に含めます。サーバーはCookieからセッションIDを使用して、保存されている対応するセッション情報を見つけ、それによってユーザーを識別します。

このチュートリアルでは、セッション-Cookie方式を選択します。私たちのブログは、従来のアーキテクチャを持つシンプルなアプリケーションです。認証にセッション-Cookieを使用することは、最も直接的で、古典的で、安全なアプローチです。Nest.jsもこれに優れた組み込みサポートを提供しています。

ユーザーモジュールの作成

認証に取り組む前に、まずユーザーシステムを追加しましょう。

前のチュートリアルでpostsモジュールを作成したのと同様に、Nest CLIを使用して必要なファイルを迅速に生成します。

nest generate module users
nest generate controller users
nest generate service users

次に、データベースのusersテーブルにマッピングするために、src/usersディレクトリにユーザーエンティティファイルuser.entity.tsを作成します。

// src/users/user.entity.ts
import { Entity, Column, PrimaryGeneratedColumn } from 'typeorm';

@Entity()
export class User {
  @PrimaryGeneratedColumn('uuid')
  id: string;

  @Column({ unique: true })
  username: string;

  @Column()
  password: string; // 保存されるパスワードは暗号化されます
}

UsersModule（src/users/users.module.ts）で、TypeOrmModuleを登録してUserエンティティを操作できるようにします。後で他のモジュール（Authモジュールなど）で使用できるようにUsersServiceをエクスポートする必要があることに注意してください。

// src/users/users.module.ts
import { Module } from '@nestjs/common';
import { TypeOrmModule } from '@nestjs/typeorm';
import { UsersController } from './users.controller';
import { UsersService } from './users.service';
import { User } from './user.entity';

@Module({
  imports: [TypeOrmModule.forFeature([User])],
  controllers: [UsersController],
  providers: [UsersService],
  exports: [UsersService], // 他のモジュールで使用するためにUsersServiceをエクスポート
})
export class UsersModule {}

最後に、最後のチュートリアルで作成したPostgreSQLデータベースで次のSQLステートメントを実行して、userテーブルを作成します。

CREATE TABLE "user" (
    "id" UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    "username" VARCHAR UNIQUE NOT NULL,
    "password" VARCHAR NOT NULL
);

Leapcellでデータベースを作成した場合、

グラフィカルインターフェイスを使用してSQLステートメントを簡単に実行できます。ウェブサイトのデータベース管理ページにアクセスし、上記のステートメントをSQLインターフェイスに貼り付けて実行するだけです。

ユーザー登録の実装

src/users/users.service.tsを修正して、ユーザーの作成と検索のロジックを追加します。

注意：セキュリティのため、ユーザーパスワードはデータベースに保存される前に暗号化する必要があります。パスワード暗号化にはbcryptライブラリを使用します。

必要な依存関係をインストールします。

npm install bcrypt
npm install -D @types/bcrypt

// src/users/users.service.ts
import { Injectable } from '@nestjs/common';
import { InjectRepository } from '@nestjs/typeorm';
import { Repository } from 'typeorm';
import { User } from './user.entity';
import * as bcrypt from 'bcrypt';

@Injectable()
export class UsersService {
  constructor(
    @InjectRepository(User)
    private usersRepository: Repository<User>
  ) {}

  async create(user: Partial<User>): Promise<User> {
    const saltRounds = 10;
    const hashedPassword = await bcrypt.hash(user.password || '', saltRounds);

    const newUser = this.usersRepository.create({
      username: user.username,
      password: hashedPassword,
    });

    return this.usersRepository.save(newUser);
  }

  async findOne(username: string): Promise<User | null> {
    return this.usersRepository.findOneBy({ username });
  }
}

Authモジュールとログインロジック検証の作成

すべての認証関連ロジックは、個別のauthモジュールに配置します。まず、コアとなる「ユーザー検証」ロジックのみを実装します。

CLIを使用してauthモジュールとserviceを作成します。

nest generate module auth
nest generate service auth

src/auth/auth.service.tsを修正して、ユーザー名とパスワードが正しいかどうかを確認するためのvalidateUserメソッドを追加します。

// src/auth/auth.service.ts
import { Injectable } from '@nestjs/common';
import { UsersService } from '../users/users.service';
import * as bcrypt from 'bcrypt';

@Injectable()
export class AuthService {
  constructor(private usersService: UsersService) {}

  async validateUser(username: string, pass: string): Promise<any> {
    const user = await this.usersService.findOne(username);
    if (user && (await bcrypt.compare(pass, user.password))) {
      const { password, ...result } = user;
      return result; // 検証成功、パスワードなしでユーザー情報を返す
    }
    return null; // 検証失敗
  }
}

次に、AuthServiceがUsersServiceを使用できるように、AuthModuleにUsersModuleをインポートします。

// src/auth/auth.module.ts
import { Module } from '@nestjs/common';
import { AuthService } from './auth.service';
import { UsersModule } from '../users/users.module';

@Module({
  imports: [UsersModule],
  controllers: [AuthController],
  providers: [AuthService],
})
export class AuthModule {}

ログインおよび登録ページの作成

ユーザーインタラクションのためのインターフェイスを提供する必要があります。viewsフォルダにlogin.ejsとregister.ejsを作成します。

register.ejs

<%- include('_header', { title: 'Register' }) %>

<form action="/users/register" method="POST" class="post-form">
  <h2>Register</h2>
  <div class="form-group">
    <label for="username">Username</label>
    <input type="text" id="username" name="username" required />
  </div>
  <div class="form-group">
    <label for="password">Password</label>
    <input type="password" id="password" name="password" required />
  </div>
  <button type="submit">Register</button>
</form>

<%- include('_footer') %>

login.ejs

<%- include('_header', { title: 'Login' }) %>

<form action="/auth/login" method="POST" class="post-form">
  <h2>Login</h2>
  <div class="form-group">
    <label for="username">Username</label>
    <input type="text" id="username" name="username" required />
  </div>
  <div class="form-group">
    <label for="password">Password</label>
    <input type="password" id="password" name="password" required />
  </div>
  <button type="submit">Login</button>
</form>

<%- include('_footer') %>

ルーティングとコントローラーロジックの実装

次に、登録およびログインリクエストを処理するルートを作成します。

登録ルート

登録ページの表示とフォーム投稿を処理するようにsrc/users/users.controller.tsを更新します。

// src/users/users.controller.ts
import { Controller, Get, Post, Render, Body, Res } from '@nestjs/common';
import { UsersService } from './users.service';
import { Response } from 'express';

@Controller('users')
export class UsersController {
  constructor(private readonly usersService: UsersService) {}

  @Get('register')
  @Render('register')
  showRegisterForm() {
    return;
  }

  @Post('register')
  async register(@Body() body: any, @Res() res: Response) {
    // 簡単のため、複雑な検証はありません
    await this.usersService.create(body);
    res.redirect('/auth/login'); // 登録成功後にログインページにリダイレクト
  }
}

ログイン検証ルート

ログインリクエストを処理する新しいauth.controller.tsを作成します。

nest generate controller auth

src/auth/auth.controller.tsを編集します。ここでvalidateUserメソッドを呼び出します。検証が成功した場合、ブログのホームページにリダイレクトします。

失敗した場合、簡単のため、現時点では特別に処理しません。実際のアプリケーションでは、通常、エラーメッセージを返します。

// src/auth/auth.controller.ts
import { Controller, Get, Post, Render, Body, Res, UnauthorizedException } from '@nestjs/common';
import { AuthService } from './auth.service';
import { Response } from 'express';

@Controller('auth')
export class AuthController {
  constructor(private authService: AuthService) {}

  @Get('login')
  @Render('login')
  showLoginForm() {
    return;
  }

  @Post('login')
  async login(@Body() body: any, @Res() res: Response) {
    const user = await this.authService.validateUser(body.username, body.password);
    if (!user) {
      throw new UnauthorizedException();
    }
    // 検証成功
    res.redirect('/posts');
  }
}

最後に、app.module.tsにUsersModuleとAuthModuleをインポートします。

// src/app.module.ts
// ... imports
import { UsersModule } from './users/users.module';
import { AuthModule } from './auth/auth.module';

@Module({
  imports: [
    // ... TypeOrmModule.forRoot(...)
    PostsModule,
    UsersModule,
    AuthModule,
  ],
  // ...
})
export class AppModule {}