Fastifyでログイン機能を作成する方法

概要

Fastifyでは、ログイン機能の実装はミドルウェア関数内で行います。
ミドルウェア関数の引数には、requestオブジェクトとreplyオブジェクトが渡されます。 これらのオブジェクトを使用して、ログイン処理やレスポンスの生成などを行います。

ここでは、以下バージョンを使用した、Fastifyでログイン機能を実装する方法を説明します。

Fastify v3.22.1
nodejs v19.7.0
@fastify/session v10.4.0
@fastify/cookie v8.3.0

また、今回作成するコードは全て、GitHubに掲載しています。

なお、本記事では、@fastify/sessionモジュールを使用するため以下コマンドを入力して、@fastify/sessionをインストールしてください、

npm install fastify @fastify/session @fastify/cookie @fastify/formbody @fastify/view ejs

ログイン機能のバックエンドを作成する方法

ログイン処理を実装するためには、fastify-sessionミドルウェアとリクエストオブジェクトを使用します。 fastify-sessionは、クライアントからのリクエストに含まれるセッション情報を解析します。ログインが成功したら、そのセッションをリクエストオブジェクトのsessionプロパティに格納します。

以下のサンプルコードは、Fastifyでログイン機能を理解するための例です。POSTリクエストを受け取り、ユーザーのログインを処理し、その結果を含むレスポンスを返します。

login.js

const fastify = require("fastify")({ logger: true });
const session = require("@fastify/session");
const cookie = require("@fastify/cookie");
const formbody = require("@fastify/formbody");
const view = require("@fastify/view");
const ejs = require("ejs");

fastify.register(cookie);
fastify.register(session, {
  secret: "a secret with minimum length of 32 characters",
  cookie: {
    secure: false,
  },
  saveUninitialized: false,
});
fastify.register(formbody);

fastify.register(view, {
  engine: {
    ejs: ejs,
  },
});

fastify.get("/", (req, reply) => {
  reply.view("/views/index.ejs");
});

fastify.get("/dashboard", (req, reply) => {
  if (req.session.user) {
    reply.view("/views/dashboard.ejs", { username: req.session.user });
  } else {
    reply.redirect("/");
  }
});

fastify.post("/login", (req, reply) => {
  const { username, password } = req.body;

  // ここでユーザー名とパスワードの検証を行う（省略）
  req.session.user = username;

  reply.redirect("/dashboard");
});

fastify.listen({ port: 3000 }, (err, address) => {
  if (err) throw err;
  fastify.log.info(`server listening on ${address}`);
});

解説

以下、コードの詳細な解説をします。

  • 必要なモジュールを読み込みます。
const fastify = require('fastify')({ logger: true })
const session = require('fastify-session');
const cookie = require('fastify-cookie');
const path = require("path");
const pointOfView = require('point-of-view');
const ejs = require('ejs');

これらのモジュールは、FastifyでのWebアプリケーション開発に必要な基本的な機能を提供します。

  • Fastifyプラグインを登録します。
fastify.register(cookie)
fastify.register(session, {
  secret: 'a secret with minimum length of 32 characters',
  cookie: {
    secure: false,
  },
  saveUninitialized: false,
})
fastify.register(pointOfView, {
  engine: {
    ejs: ejs
  }
})

これらのプラグインは、Cookieの管理、セッションの管理、ビューエンジン（EJS）の設定を行います。

  • ルートパス（"/"）へのGETリクエストをハンドリングします。
fastify.get('/', (req, reply) => {
  reply.view('/views/index.ejs');
})

これにより、ユーザーがウェブサイトのルートにアクセスしたときに、“index.ejs"テンプレートがレンダリングされます。

  • ダッシュボードへのGETリクエストをハンドリングします。
fastify.get('/dashboard', (req, reply) => {
  if (req.session.user) {
    reply.view('/views/dashboard.ejs', { username: req.session.user });
  } else {
    reply.redirect('/');
  }
})

このルートは、ログインしているユーザーだけがアクセスできます。 ユーザーがログインしている場合、“dashboard.ejs"テンプレートがレンダリングされます。ユーザーがログインしていない場合、ルートはルートパスにリダイレクトします。

  • ログインへのPOSTリクエストをハンドリングします。
fastify.post('/login', (req, reply) => {
  const { username, password } = req.body;

  // ここでユーザー名とパスワードの検証を行う（省略）
  req.session.user = username;

  reply.redirect('/dashboard');
})

このルートは、ユーザーのログイン情報を受け取り、その情報を検証します。検証が成功した場合、セッションにユーザー情報を保存し、ユーザーをダッシュボードにリダイレクトします。

  • Fastifyサーバーを開始します。
fastify.listen(3000, (err, address) => {
  if (err) throw err
  fastify.log.info(`server listening on ${address}`)
})

Fastifyのインスタンスをポート3000でリッスンさせ、サーバーを起動します。サーバーが起動したら、“Server is running on port 3000"というメッセージをコンソールに出力します。

ログイン機能のフロントエンドを作成する方法

ログインフォームを作成するために、以下のコードを"views/index.ejs"に追加します。

views/index.ejs

<!DOCTYPE html>
<html>
  <head>
    <title>Login Page</title>
  </head>
  <body>
    <h1>Login</h1>
    <form action="/login" method="POST">
      <label for="username">Username:</label><br />
      <input type="text" id="username" name="username" /><br />
      <label for="password">Password:</label><br />
      <input type="password" id="password" name="password" /><br />
      <input type="submit" value="Login" />
    </form>
  </body>
</html>

ログイン後のダッシュボードを作成するために、以下のコードを"views/dashboard.ejs"に追加します。 views/dashboard.ejs

<!-- views/dashboard.ejs -->
<!DOCTYPE html>
<html>
  <head>
    <title>Dashboard</title>
  </head>
  <body>
    <h1>Welcome, <%= username %>!</h1>
    <p>This is your dashboard.</p>
  </body>
</html>

全てのファイルを作成すると、ディレクトリ構成は以下のようになります。

certification
|- views
|  |- dashboard.ejs
|  |- index.ejs
|- app.js
|- package.json
|- package-lock.json

全てのファイルを作成したら、以下のコマンドを実行してサーバーを起動します。

node app.js

まとめ

この記事では、Fastifyを利用して、Node.jsでログイン機能を実装する方法を紹介しました。Fastifyは、Node.jsでWebアプリケーションを開発するための高速で効率的なフレームワークです。Fastifyは、Node.jsの他のフレームワークと比較して、高速で効率的なフレームワークです。Fastifyは、Node.jsの他のフレームワークと比較して、高速で効率的なフレームワークです。Fastifyは、Node.jsの他のフレームワークと比較して、高速で効率的なフレームワークです。Fastifyは、Node.jsの他のフレームワークと比較して、高速で効率的なフレームワークです。Fastifyは、Node.jsの他のフレームワークと比較して、高速で効率的なフレームワークです。Fastifyは、Node.jsの他のフレームワークと比較して、高速で効率的なフレームワークです。Fastifyは、Node.jsの他のフレームワークと比較して、高速で効率的なフレームワークです。Fastifyは、Node.jsの他のフレームワークと比較して、高速で効率的なフレームワークです。

← Express.jsをコアモジュールとCLIとDockerでそれぞれ環境構築する方法
簡単にできる！node.jsの環境構築方法 →