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

概要

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

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

Node.js v19.7.0

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

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

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

npm i ejs

Node.jsを用いてログイン機能を実装する場合、以下のコードを使用します。このコードでは、POSTリクエストを受け取り、ユーザーのログインを処理し、その結果を含むレスポンスを返します。

const http = require('http');
const url = require('url');
const fs = require('fs');
const path = require('path');
const querystring = require('querystring');
const ejs = require('ejs');

// 仮のユーザーデータベース
const users = {
  'user1': 'pass1',
  'user2': 'pass2'
};

const server = http.createServer((req, res) => {
  const parsedUrl = url.parse(req.url, true); // Parse URL
  const pathName = parsedUrl.pathname;

  if (req.method === 'GET') {
    if (pathName === '/') {
      // Render the index page
      ejs.renderFile(path.join(__dirname, '/views/index.ejs'), {}, (err, str) => {
        res.writeHead(200, {'Content-Type': 'text/html'});
        res.end(str);
      });
    } else if (pathName === '/dashboard') {
      // Render the dashboard page
      ejs.renderFile(path.join(__dirname, '/views/dashboard.ejs'), {username: 'user1'}, (err, str) => {
        res.writeHead(200, {'Content-Type': 'text/html'});
        res.end(str);
      });
    }
  } else if (req.method === 'POST') {
    if (pathName === '/login') {
      // Handle login
      let body = '';
      req.on('data', chunk => {
        body += chunk.toString();
      });
      req.on('end', () => {
        const parsedBody = querystring.parse(body);

        // ユーザー名とパスワードのチェック
        if (users[parsedBody.username] && users[parsedBody.username] === parsedBody.password) {
          res.end('Login successful');
        } else {
          res.end('Login failed');
        }
      });
    }
  }
});

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

解説

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

必要なモジュールを読み込みます。

const http = require("http");
const querystring = require("querystring");

httpモジュールは、HTTPサーバーとHTTPクライアントの機能を提供します。querystringモジュールは、URLクエリストリングを解析し、オブジェクトに変換する機能を提供します。

仮のユーザーデータベースを作成します。

const users = {
  'user1': 'pass1',
  'user2': 'pass2'
};

これは単なるデモなので、ハードコーディングしたユーザーデータベースを作成します。

HTTPサーバーを作成します。

const server = http.createServer((req, res) => {
  // ...
});

createServer関数は、各リクエストに対して呼び出されるリクエストリスナー関数を引数に取ります。

POSTリクエストを受け取ります。

if (req.method === 'POST') {
  // ...
}

HTTPメソッドがPOSTの場合のみ、リクエストボディを受け取ります。

リクエストボディを解析します。

let body = '';
req.on('data', chunk => {
  body += chunk.toString();
});
req.on('end', () => {
  const parsedBody = querystring.parse(body);
  // ...
});

リクエストボディはチャンクで送信され、それぞれのチャンクはバイナリデータなので、toString関数で文字列に変換します。リクエストボディの終わりに到達したとき、bodyに格納された全体のリクエストボディをquerystring.parse関数で解析し、オブジェクトに変換します。

ユーザー名とパスワードを確認します。

if (users[parsedBody.username] && users[parsedBody.username] === parsedBody.password) {
  res.end('Login successful');
} else {
  res.end('Login failed');
}

解析したリクエストボディに含まれるユーザー名とパスワードを、ユーザーデータベースと比較します。一致すればログイン成功、一

致しなければログイン失敗とします。

サーバーを起動します。

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

サーバーをポート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

まとめ

Node.jsでのログイン機能の実装は、HTTPモジュールの基本的な使用方法とリクエストボディの解析方法を理解すれば容易に行うことができます。この記事がその理解に役立つことを願っています。

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

概要 #

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

解説 #

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

まとめ #

概要

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

解説

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

まとめ