Express.jsでログイン機能を作成する

概要

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

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

Express.js v4.17.1
nodejs v19.7.0
express-session v1.17.2

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

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

まず必要になるモジュールをインストールしてください。

npm i express

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

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

login.js

const express = require("express");
const session = require("express-session");
const bodyParser = require("body-parser");
const path = require("path");
const app = express();

app.use(
  session({
    secret: "your secret",
    resave: false,
    saveUninitialized: true,
    cookie: {
      secure: process.env.NODE_ENV === "production" ? true : false,
      sameSite: "Strict",
    },
  })
);
app.use(express.static(path.join(__dirname, "public")));
app.use(bodyParser.urlencoded({ extended: false }));
app.set("view engine", "ejs"); // 追加

// ログイン状態を確認するミドルウェア
function checkAuthenticated(req, res, next) {
  if (req.session.loggedin) {
    next();
  } else {
    res.redirect("/");
  }
}
app.get("/", (req, res) => {
  res.render("index"); // 修正
});
// ダッシュボードのルートハンドラ
app.get("/dashboard", checkAuthenticated, (req, res) => {
  res.render("dashboard", { username: req.session.username });
});

app.post("/login", (req, res) => {
  const username = req.body.username;
  const password = req.body.password;

  req.session.loggedin = true;
  req.session.username = username;

  res.redirect("/dashboard"); // ダッシュボードにリダイレクト
});

app.listen(3000, () => {
  console.log("Server is running on port 3000");
});

解説

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

  • 必要なモジュールを読み込みます。
const express = require("express");
const session = require("express-session");
const bodyParser = require("body-parser");
const path = require("path");

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

  • expressのアプリケーションインスタンスを作成します。
const app = express();

これにより、HTTPリクエストを受け付け、レスポンスを返すWebサーバーが作成されます。

  • セッションミドルウェアを設定します。
app.use(
session({
    secret: "your secret",
    resave: false,
    saveUninitialized: true,
    cookie: {
    secure: process.env.NODE_ENV === "production" ? true : false,
    sameSite: "Strict",
    },
})
);

このミドルウェアはクライアントからのリクエストのセッションデータを管理します。

  • 静的ファイルをホストするためのディレクトリを設定します。
app.use(express.static(path.join(__dirname, "public")));

“public"ディレクトリ内のファイルがブラウザから直接アクセス可能になります。

  • リクエストボディの解析を設定します。
app.use(bodyParser.urlencoded({ extended: false }));

これにより、URLエンコードされたリクエストボディを解析できます。

  • ビューエンジンを設定します。
app.set("view engine", "ejs");

EJSをビューエンジンとして設定します。これにより、EJSテンプレートをレンダリングすることができます。

  • ログイン状態を確認するミドルウェアを定義します。
function checkAuthenticated(req, res, next) {
  if (req.session.loggedin) {
    next();
  } else {
    res.redirect("/");
  }
}

この関数はリクエストがログインしているユーザーからのものであることを確認し、そうでない場合はログインページにリダイレクトします。

  • ルートパス（”/"）へのGETリクエストをハンドリングします。
app.get("/", (req, res) => {
  res.render("index"); // 修正
});

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

  • ダッシュボードへのGETリクエストをハンドリングします。
app.get("/dashboard", checkAuthenticated, (req, res) => {
  res.render("dashboard", { username: req.session.username });
});

このルートは、ログインしているユーザーだけがアクセスできます。checkAuthenticatedミドルウェアがこれを保証します。

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

  req.session.loggedin = true;
  req.session.username = username;

  res.redirect("/dashboard"); // ダッシュボードにリダイレクト
});

これにより、ログインフォームから送信されたデータを処理し、ログインセッションを作成します。

  • アプリケーションをポート3000で起動します。
app.listen(3000, () => {
  console.log("Server is running on port 3000");
});

Expressのインスタンスをポート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
|- login.js
|- package.json
|- package-lock.json

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

node login.js

まとめ

この記事では、Express.jsを使用してログイン機能を実装する方法を紹介しました。具体的には、express-sessionミドルウェアとbody-parserモジュールを使用してユーザーのログインを処理し、その結果をレスポンスとして返す方法を示しました。ログイン機能はWebアプリケーションで非常に重要な役割を果たしますので、その実装方法を理解することは重要です。この記事がその理解に役立つことを願っています。

← Node.jsでTODOアプリケーションの作成方法
NestJSの環境をCLIとDockerでそれぞれ構築する方法 →