Node.js で環境変数を 設定 / 取得 する方法については 別記事 があるのでそちらをご参照ください。 ここでは、VSCode に対して 環境変数を 設定 / 取得 する方法についてのみまとめました。

環境変数設定を追加する

F5 実行したとき呼び出される launch.json に追記することで実現します。 以下に launch.json へ追記する手順を載せます。

1. ビューバーの「デバッグ」を選択

   

2. 「歯車」アイコンを選択

   

3. launch.json に env プロパティを追加

   今回は env プロパティ に "SAMPLE_MESSAGE": "Hello World" を追加します。

   {
     // 使用できる Node.js デバッグ属性を学ぶために、インテリセンスを使用してください。
     // 既存の属性の説明をホバーして表示します。
     // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
     "version": "0.2.0",
     "configurations": [
       {
         "type": "node",
         "request": "launch",
         "name": "プログラムの起動",
         "program": "${file}",
         "env": {
           "SAMPLE_MESSAGE": "Hello World"
         }
       }
     ]
   }
   

4. launch.json を保存

   

一度 launch.json を設定すると以下の場所へファイルが作成されます。 2度目以降は上記手順で launch.json を開いてもよいですし、以下のパスにある launch.json を直接開いても同じです。

%PROJECT_ROOT%
│
└─.vscode
       launch.json

追加した環境変数を取得する

F5 で デバッグ実行 すると以下のスクリプトで追加した SAMPLE_MESSAGE 環境変数を呼び出すことができます。

process.env.SAMPLE_MESSAGE

今回の記事は参考になったでしょうか？

Visual Studio Code に環境変数を設定するポイントは「 launch.json へ env プロパティを設定すること」です。 そして launch.json は %PROJECT_ROOT%\.vscode\launch.json にあります。

この記事が参考になればと思います。

Node.js を実行しようとすると環境変数を指定、利用したいケースがあると思います。 今回は Node.js で環境変数を利用する方法 についてまとめてみました。

環境変数 を 設定する

構文

[ENV_VAR1=ENV_VAL1 [ENV_VAR2=ENV_VAL2 ...]] node FILE_NAME

解説

node コマンド実行前に設定したい環境変数をスペース区切りで指定することで設定できます。 あらかじめ実行環境の環境変数として定義してあるものも利用できるので、node を実行前に set で定義することもできます（サンプルには記載）。

サンプル

USER_ID=123456 USER_KEY=J4rhsP7n node app.js

set USER_ID=123456
set USER_KEY=J4rhsP7n
node app.js

環境変数 を 取得する

構文

process.env.ENV_VAR1

解説

基本的には process.env オブジェクトのプロパティとしてアクセスすることで利用できます。

サンプル

console.log(JSON.stringify(process.env));

定義済み 環境変数

実行環境依存の環境変数

実行環境で既に定義済みの環境変数はもちろん使えます。 Windows で定義済みの環境変数は以下の記事にまとめているので参照してください。

• galife - バッチ 作成時 に デフォルト で使える 環境変数 まとめ

Node.js 定義済みの環境変数

Node.js として実行時にすぐ使える独自定義済みのものをここでは取り上げます。

Node.js で慣例的に使われる環境変数

モジュールによってはデフォルトで定義済みとなる、 Node.js で慣例的に使われる環境変数をここでは取り上げます。

参考記事

• stackoverflow - Read environment variables in Node.js
• stackoverflow - Node.js: Setting Environment Variables
• Block Rockin’ Codes - Node.js の起動オプション、環境変数、npm start の話

よくある「登録機能」を作るときの ポイント および 具体的な実装方法 をまとめてみました。 個別な課題は調べることができますが、「登録機能を作る」という観点でまとめているので、どのようなことを気を付けなければならないかがこの記事で理解できると思います。 この記事でざっくりとしたイメージを持っていただいたうえで、個別の詳しい内容を調べるとより理解が深まると思います。

概要

店舗情報を登録する機能を実装してみます。 画面上は見た通りのテキストボックスとボタンしかありませんが、登録機能では以下の4点がポイントになります。 ポイントのうち3つ（CSRF対策、1フォーム複数サブミット、2重送信防止）については個別記事もありますので以下の「関連記事」をご参照ください。

• CSRF対策
• 1フォームに複数サブミット（複数遷移先）を設定
• ２重送信防止
• 再送信防止

画面

データ登録する画面は「入力」、「確認」、「完了」の3画面構成になっています。 実装詳細はあとで見ていくので、まずは作ろうとしているもののざっくりとした画面イメージです。

• 入力 (/shop/regist/input)

  

• 確認 (/shop/regist/confirm)

  

• 完了 (/shop/regist/complete)

  

データベース

test

shops

shop = {
  name:     { type: string },
  location: { type: string },
  tel:      { type: string }
}

実装

登録画面の具体的な実装のサンプルコードを以下に載せます。 以下のリストにはありませんが、別途 jQuery も含まれていますのでご注意ください。

• /app.js
• /router.js
• /public/scripts/shop/regist/confirm.js
• /public/scripts/shop/regist/protect-double-submit.js
• /views/shop/regist/input.ejs
• /views/shop/regist/confirm.ejs
• /views/shop/regist/complete.ejs

/app.js

var express = require("express");
var cookie = require("cookie-parser");
var session = require("express-session");
var bodyParser = require("body-parser");

// Expressインスタンスを生成
var app = express();

// テンプレートエンジンの設定
app.set("views", "./views");
app.set("view engine", "ejs");

// ミドルウエアの設定
app.use("/public", express.static("public"));
app.use(cookie());
app.use(session({ secret: "YOUR SECRET SALT", resave: true, saveUninitialized: true }));
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

// ルーティングの設定
app.use("/shop", require("./router.js"));

// サーバー起動
app.listen(3000);

L2-4
セッションおよびクッキーの利用、フォームからのポストがあるので cookie-parser 、 express-session 、 body-parser を利用します。

L21
今回はルーティング処理が複数存在して煩雑になるので、別モジュール（ router.js ）に掃き出します。

/router.js

var router = require("express").Router();
var co = require("co");
var MongoClient = require("mongodb").MongoClient;
var Tokens = require("csrf");
var tokens = new Tokens();

/**
 * リクエストボディーからデータを抽出
 */
var extract = function (request) {
  return {
    name: request.body.name,
    location: request.body.location,
    tel: request.body.tel,
    _csrf: request.body._csrf
  };
};

/**
 *  リクエストデータを検証
 */
var validate = function (data) {
  var errors = data.errors = [];

  if (!data.name) {
    errors[errors.length] = "会社名を指定してください。";
  }

  if (!data.location) {
    errors[errors.length] = "所在地を指定してください。";
  }

  if (!data.tel) {
    errors[errors.length] = "電話番号を指定してください。";
  }

  return errors.length === 0;
};

/**
 * リクエストデータを登録
 */
var commit = function (data, callback) {
  const URL = "mongodb://localhost:27017/test";

  return co(function* () {
    var db = yield MongoClient.connect(URL);
    var collection = db.collection("shops");
    var result = yield collection.updateOne(
      { name: { $eq: data.name } },
      { $set: data },
      { upsert: true },
      (error, result) => {
        db.close();
        callback && callback();
      });
  }).catch((reason) => {
    console.error(JSON.stringify(reason));
  });
};

/**
 * GET: /shop/regist/input
 */
router.get("/regist/input", function (request, response) {
  // 新規に 秘密文字 と トークン を生成
  var secret = tokens.secretSync();
  var token = tokens.create(secret);

  // 秘密文字はセッションに保存
  request.session._csrf = secret;

  // トークンはクッキーに保存
  response.cookie("_csrf", token);

  // 入力画面の表示
  response.render("./shop/regist/input.ejs");
});

/**
 * POST: /shop/regist/input
 */
router.post("/regist/input", function (request, response) {
  // 入力データを取得
  var data = extract(request);

  // 入力画面の再表示
  response.render("./shop/regist/input.ejs", data);
});

/**
 * POST: /shop/regist/confirm
 */
router.post("/regist/confirm", function (request, response) {
  // 入力データを取得
  var data = extract(request);

  // 入力データの検証
  if (validate(data) === false) {
    return response.render("./shop/regist/input.ejs", data);
  }

  response.render("./shop/regist/confirm.ejs", data);
});

/**
 * POST: /shop/regist/complete
 */
router.post("/regist/complete", function (request, response) {
  // 秘密文字 と トークン を取得
  var secret = request.session._csrf;
  var token = request.cookies._csrf;

  // 秘密文字 と トークン の組み合わせが正しいか検証
  if (tokens.verify(secret, token) === false) {
    throw new Error("Invalid Token");
  }

  // 入力データを取得
  var data = extract(request);

  // 入力データの検証
  if (validate(data) === false) {
    return response.render("./shop/regist/input.ejs", data);
  }

  // 登録処理
  commit(data).then(() => {
    // 使用済み 秘密文字 と トークン の無効化
    delete request.session._csrf;
    response.clearCookie("_csrf");

    // 完了画面へリダイレクト
    response.redirect("/shop/regist/complete");
  });
});

/**
 * GET: /shop/regist/complete
 */
router.get("/regist/complete", function (request, response) {
  response.render("./shop/regist/complete.ejs");
});

module.exports = router;

L67-68,71,74
入力画面が初回呼び出しされたとき、CSRF対策として 秘密文字 と トークン を新規発行します。 秘密文字はセッションへ保存し、トークンはクライアントのクッキーに保存します。

L111-112,115-117
確定画面が呼び出されたとき、実際にデータ登録処理を行いますが、この確定処理が正しく呼び出されているかを検証します。 入力画面が呼び出されたときに準備した 秘密文字 と トークン をそれぞれ取り出して組み合わせが正しいか検証を行います。 組み合わせに問題があればエラーとして返してしまいます。

L130-131
確定画面が呼び出され、データ処理も正常に終わると、まずは CSRF対策 として準備していた 秘密文字 と トークン を破棄して無効化します。 これにより同じ 秘密文字 と トークン の組み合わせが2度以上使えなくなります。 秘密文字 と トークン の再利用を許可しないことで、トークンが漏洩した場合の対策になります。

L134
確定画面が呼び出され、データ処理も正常に終わると、完了画面へ リダイレクト させます。 リダイレクトさせることで完了画面で F5 を押下したときに確定処理が再実行されることを防止します。

/public/scripts/shop/regist/confirm.js

(function () {
  // 「戻る」ボタン押下時に呼び出されます。
  var btnBack_onclick = function (event) {
    var $form = $("#form");
    $form.attr("action", "/shop/regist/input");
    $form.submit();
  };

  // 「登録」ボタン押下時に呼び出されます。
  var btnRegist_onclick = function (event) {
    var $form = $("#form");
    $form.attr("action", "/shop/regist/complete");
    $form.submit();
  };

  // ドキュメント読み込み完了時に呼び出されます。
  var document_onready = function (event) {
    $("#btn-back").on("click", btnBack_onclick);
    $("#btn-regist").on("click", btnRegist_onclick).focus();
  };

  $(document).ready(document_onready);
})();

「確認」画面には１つのフォーム内に「戻る」ボタンと「確定」ボタンがあります。 どちらを押したかによって遷移先が異なるため、それぞれのボタン押下時に form の action 属性を書き換えて遷移先を切り替えます。

L19
起動時に「確定」ボタンへフォーカスを当てておくことで、この画面へ遷移した直後に Enter キー 押下で次の画面へ進めるようにしておきます。 ちょっとした配慮ですが…前画面が入力画面でキーボード操作をしているので対応しておくのが望ましいと思います。

/public/scripts/shop/regist/protect-double-submit.js

(function () {
  "use strict"

  var onsubmit = function (event) {
    $("form").off("submit", onsubmit).on("submit", false);
  };

  $("form").on("submit", onsubmit);
})();

2重送信防止スクリプトです。 フォームで一度サブミットが押されると2度目以降のサブミットが無効になるよう実装しています。

/views/shop/regist/input.ejs

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>登録</title>
    <style>
    .alert {
      color: #a94442;
      background-color: #f2dede;
      border-color: #ebccd1;
    }
    </style>
  </head>
  <body>
    <h1>登録</h1>
    <% if (locals.errors) { %>
    <ul class="alert">
    <%   for (var i = 0; i < errors.length; i++) { %>
      <li><%= errors[i]%></li>
    <%   } %>
    </ul>
    <% } %>
    <form method="POST" action="/shop/regist/confirm">
      <div>
        <label for="name">会社名：</label>
        <input type="text" id="name" name="name" value="<%= locals.name ? name : ""%>"/>
      </div>
      <div>
        <label for="location">所在地：</label>
        <input type="text" id="location" name="location" value="<%= locals.location ? location : ""%>"/>
      </div>
      <div>
        <label for="tel">電話：</label>
        <input type="text" id="tel" name="tel" value="<%= locals.tel ? tel : ""%>" />
      </div>
      <div>
        <input type="submit" value="確認" />
      </div>
    </form>
    <script type="text/javascript" src="/public/third_party/jquery/dist/jquery.min.js"></script>
    <script type="text/javascript" src="/public/scripts/shop/regist/protect-double-submit.js"></script>
  </body>
</html>

L16-22
入力画面の初回表示でエラーが出ることはありませんが、入力したデータを検証したとき問題があった場合にエラー内容をこの部分に表示します。 ejd へは errors オブジェクトを渡すようにしていますが、存在有無をチェックする際は errors とせず locals.erros で判定します。 単純な errors だとオブジェクトがないと怒られてしまいます…。。

L26,30,34
入力値を検証した後、戻ってくる際、入力済みの値があれば復元します。 上記と同じく locals のプロパティとしてアクセスするようにします。

/views/shop/regist/confirm.ejs

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>確認</title>
    <style>
      input[readonly] {
        background-color: #eee;
        color: #555;
        border: 1px solid #ccc;
      }
    </style>
  </head>
  <body>
    <h1>確認</h1>
    <form id="form" method="POST" action="">
      <div>
        <span>会社名：</span>
        <input type="text" id="name" name="name" value="<%= name%>" readonly />
      </div>
      <div>
        <span>所在地：</span>
        <input type="text" id="location" name="location" value="<%= location%>" readonly />
      </div>
      <div>
        <span>電話：</span>
        <input type="text" id="tel" name="tel" value="<%= tel%>" readonly />
      </div>
      <div>
        <input type="button" id="btn-back" value="戻る" />
        <input type="submit" id="btn-regist" value="登録" />
      </div>
    </form>
    <script type="text/javascript" src="/public/third_party/jquery/dist/jquery.min.js"></script>
    <script type="text/javascript" src="/public/scripts/shop/regist/confirm.js"></script>
    <script type="text/javascript" src="/public/scripts/shop/regist/protect-double-submit.js"></script>
  </body>
</html>

L34-36
単一JavaScriptは読み込まれた順に実行されるので、スクリプトの読み込み順が重要です。 すべての基本となる jQuery () が一番最初、 次にフォーム内に複数ボタン配置して遷移先を変更するスクリプト（ confirm.js ）、 最後に2重送信防止のスクリプト ( protect-double-submit.js ) を読み込みます。

/views/shop/regist/complete.ejs

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>完了</title>
  </head>
  <body>
    <h1>完了</h1>
    <p>登録が完了しました。</p>
  </body>
</html>

「完了」画面は単純なHTMLなので、残念ながらあまり説明することはありません…。

テスト

上記までの実装が終わったらテスト実行してみます。 以下では「テスト」と呼ばれるような内容ではなく単純に正常系の動作を確認してみます。

1. 入力画面

   

2. 確認画面

   

3. 完了画面

   

今回はデータ登録を行う画面の基本的な実装をテーマに Node.js + Express での実装をまとめてみました。 本記事（データ登録）におけるポイントは以下の通りです。

• CSRF対策
  • csrf ミドルウェア を利用
  • 登録完了したら CSRF 秘密文字 と トークン を破棄
• 同一フォーム内で複数遷移先へPOSTはJavaScriptで実装
• 2重送信防止は JavaScript で実装
• 完了画面はリダイレクト表示させることで F5 対策

関連記事

• 単一フォーム に 複数サブミット を配置して 遷移先 を切り替える 方法
• JavaScript で 二重送信防止 する 方法
• Node.js + Express で CSRF対策 を行う 方法

Node.js + Express 環境において CSRF対策 を行う方法について今回はまとめていきます。 ちなみに、本記事で CSRF対策 として利用するミドルウエアは csrf です。 他の記事で csurf を利用したものがあったので参考に実装してみたのですが… csurf は一度発行したトークンが再利用できた点がセキュリティ的に怪しい動作なので、使うのを止めました。。

CSRFとは

詳しい内容は別記事がかけそうなくらいなので、ここでは概要だけおさらいします。

CSRF (cross-site request forgeries) は 掲示板や問い合わせフォームなどを処理するWebアプリケーションが、 本来拒否すべき他サイトからのリクエストを受信し処理してしまう脆弱性。

主な対策はこの記事でも取り上げる「正規ページであることを示すトークンを検証する」方法になります。

対策すべき画面は「データ作成・更新・削除を行う画面」です。 例えば上記であげている「掲示板の書き込み」や「問い合わせフォームの送信」、「ユーザー登録」、「パスワード変更」などが対象になります。

csrf ミドルウェア の 使い方

csrf の使い方として、大まかな流れを以下に記載します。

var Tokens = new require("csrf");
var tokens = new Tokens();
var secret = tokens.secretSync();    // secret は セッション に保存
var token = tokens.create(secret);   // token は フォーム に返却
if (tokens.verify(secret, token) === false) {
  throw new Error("invalid token");
}

L1-2
まずは Tokens インスタンス を生成します。 生成した tokens を利用して実際に利用する 秘密文字 (secret) や トークン (token) の生成 および それらの検証(verify) を行います。

L3
秘密文字を生成します。 秘密文字の生成はユーザー毎（セッション毎）に生成します。 また、一度検証を行って通過させた秘密文字とトークンの組み合わせは破棄して新規に生成しなおす方が望ましいです（＝セッションで固定化すると悪意あるユーザーにバレる危険が増すため）。 生成した秘密文字は必ずセッションに保存するようにし、クライアントに返却は行いません。 ちなみに秘密文字は非同期生成できるので、実装できるなら非同期 ( tokens.secret(callback) または Promise ) で実装した方が良いかと思います。 ただし、この記事では分かりやすさを優先させるため同期で記載します。

L4
先に生成した秘密文字を利用してトークンを生成します。 生成したトークンはフォームに埋め込むかクッキーに埋め込んでクライアントに返しておき、クライアントからサーバーへ処理依頼をするときにあわせてトークンをサーバーへ戻してもらいます。

L5
tokens.verify(secret, token) で 秘密文字 と トークン の検証を行います。

csrf ミドルウェア を使った 実装例

Node.js + Express を使って CSRF対策 を行う実装例を以下に載せます…が、すべてのコードを載せると長くなるので一部抜粋です。。 以下の実装例では 秘密文字をセッション に、トークンをクッキーに 保存するよう実装しています。 以下のコードには出てきませんが、セッションとクッキーを利用するので express-session および cookie-parser を事前に設定しておく必要があります。

var router = require("express").Router();
var Tokens = require("csrf");
var tokens = new Tokens();

// …中略 (extract, validate, commit 処理) …

// GET: /shop/regist/input
router.get("/regist/input", function (request, response) {
  // 新規に 秘密文字 と トークン を生成
  var secret = tokens.secretSync();
  var token = tokens.create(secret);

  // 秘密文字はセッションに保存
  request.session._csrf = secret;

  // トークンはクッキーに保存
  response.cookie("_csrf", token);

  // 入力画面の表示
  response.render("./shop/regist/input.ejs");
});

// POST: /shop/regist/complete
router.post("/regist/complete", function (request, response) {
  // 秘密文字 と トークン を取得
  var secret = request.session._csrf;
  var token = request.cookies._csrf;

  // 秘密文字 と トークン の組み合わせが正しいか検証
  if (tokens.verify(secret, token) === false) {
    throw new Error("Invalid Token");
  }

  // 入力データを取得
  var data = extract(request);

  // 入力データの検証
  if (validate(data) === false) {
    return response.render("./shop/regist/input.ejs", data);
  }

  // 登録処理
  commit(data);

  // 使用済み 秘密文字 と トークン の無効化
  delete request.session._csrf;
  response.clearCookie("_csrf");

  // 完了画面へリダイレクト
  response.redirect("/shop/regist/complete");
});

module.exports = router;

L10, 11
入力画面が最初に表示されたタイミングで新規秘密文字とトークンを生成します。

L14
生成した秘密文字はセッションに保存します。

L17
生成したトークンはクッキーに保存します。 クッキーでなければクライアントのフォームへ返してもよいです。 WebAPI を考えるとクッキーへ返すのが良いきがしますが…。

L26, 27
完了処理では秘密文字をセッションから取り出し、トークンはクッキーから取り出します。

L30-32
取り出した秘密文字とトークンを検証します。 検証して適切な組み合わせでない場合、エラーを発生させて以後の処理を停止します。

L46,47
一度使った秘密文字とトークンの組み合わせは完了時に初期化します。 初期化しておかないと再利用される懸念が出てきてしまいます。

今回のサンプルは参考になったでしょうか？ CSRF対策でポイントは以下になります。

• 対策を行う処理はデータ作成・変更・削除を行う画面
• 入力画面の表示時に新規秘密文字と新規トークンを生成
• 作成・変更・削除の実処理が呼び出されたとき秘密文字とトークンの組み合わせを検証
• 一度使った秘密文字とトークンは初期化

Node.js + Express + MongoDB を使った「検索」機能のサンプルを作ってみます。 今回はサンプルとして「店舗検索」を行うような機能を実装してみます。

概要

店舗検索として、検索条件入力で入力した条件にマッチする店舗一覧が表示されるような機能を作ります。 検索結果画面には検索結果総数、ページネーション（ページング）を実装します。

以下、基本設計…とまではいきませんが、本記事で作ろうとしている機能の概要をまとめます。

画面

「検索条件入力」画面と「検索結果出力」画面の2画面を作成します。 以下には画面ごとに作成する項目もあわせて記載しています。

• 検索条件入力 (/search/index.ejs)

  

  • 検索テキスト
  • 検索ボタン

• 検索結果出力 (/search/result-list.ejs)

  

  • 検索テキスト
  • 検索ボタン
  • 検索結果総数
  • 検索結果リスト
    • 店舗名
    • 店舗所在地
    • 店舗電話番号
  • ページネーション

データベース

以下のようなドキュメントスキーマを想定します。

test

shops

shop = {
  name:     { type: string },
  location: { type: string },
  tel:      { type: string }
}

何はともあれ試すにはデータが必要なので、以下のコードをコピペして MongoDB に追加しておきます。

db.shops.insert({name: "abc shop1", location: "shibuya", tel: "0120-111-1111"});
db.shops.insert({name: "bcd shop2", location: "shinagawa", tel: "0120-111-2222"});
db.shops.insert({name: "cde shop3", location: "shinjuku", tel: "0120-111-3333"});
db.shops.insert({name: "def shop4", location: "ikebukuro", tel: "0120-111-4444"});
db.shops.insert({name: "efg shop5", location: "akihabara", tel: "0120-111-5555"});

実装

それでは、Node.js + Express + MongoDB を使って実装を行っていきます。 作成するファイルおよび実装は以下の通りです。 ファイルごとに実装の内容を見ていきます。

• /app.js
• /search/index.ejs
• /search/result-list.ejs
• /search/result-item.ejs

/app.js

var express = require("express");
var bodyParser = require("body-parser");
var MongoClient = require("mongodb").MongoClient;

// expressインスタンス生成
var app = express();

// テンプレートエンジンの設定
app.set("views", "./views");
app.set("view engine", "ejs");

// ミドルウエアの設定
app.use("/public", express.static("public"));
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

// ルーティング設定
app.use("/shop", (function () {
  var router = express.Router();

  // GET: /shop/search
  router.get("/search", function (request, response) {
    var URL = "mongodb://localhost:27017/test";
    var MAX_ITEMS_PER_PAGE = 1;
    var query = request.query.q;
    var page =request.query.pg ? parseInt(request.query.pg) : 1;

    // 検索クエリがない場合、初期表示
    if (!query) {
      return response.render("./search/index.ejs");
    }

    // 検索クエリがある場合、データベースを検索して結果リストを表示
    MongoClient.connect(URL).then((db) => {
      return Promise.all([
        // 検索総ヒット数
        db.collection("shops").find({
          name: new RegExp(`.*${query}.*`)
        }).count(),
        // 現在ページに表示する内容
        db.collection("shops").find({
          name: new RegExp(`.*${query}.*`)
        }).skip((page - 1) * MAX_ITEMS_PER_PAGE).limit(MAX_ITEMS_PER_PAGE).toArray()
      ]);
    }).then((results) => {
      // ビューへ渡すデータを整形
      var data = {
        count: results[0],
        list: results[1],
        pagination: {
          max: Math.ceil(results[0] / MAX_ITEMS_PER_PAGE),
          current: page,
          isFirst: page === 1,
          isLast: page === Math.ceil(results[0] / MAX_ITEMS_PER_PAGE)
        },
        query: query
      };
      // ビューを表示
      return response.render("./search/result-list.ejs", data);
    }).catch((reason) => {
      // エラー処理
      console.log(reason);
    });

  return router;
})());

// サーバー起動
app.listen(3000);

メインとなる処理です。 Node.js、Express、MongoDB の基本的な処理についてはここでは割愛します。

L.29-31: 検索クエリの有無はクエリパラメーター q に値が設定されているかどうかで判定しています。 値が設定されていなければ初期表示を行います。 全件策したいところですが…データが多くなった時に応答時間が長くなりそうなので止めておきます。。

L35-44: データベースから取得する情報は「検索結果総数」と「現在ページに表示する内容」の2種類です。 それぞれのデータは非同期で取得するので Promise.all() を使ってすべての処理が完了するのを保証します。

L47-57: ビューへ渡すデータを整形します。 ページネーション（ページング）に必要な情報はここで整形しておきます。 ページネーションを作るにはループで作成するので、「ページ総数 (max)」と「現在ページ番号 (current)」は最低でも準備しておきます。

/views/search/index.ejs

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>search</title>
  </head>
  <body>
    <h1>検索</h1>
    <form action="/shop/search" method="GET">
      <input type="text" id="q" name="q" />
      <input type="submit" value="検索" />
    </form>
  </body>
</html>

検索条件入力画面の初期表示ページ。 結果はないので検索条件を入力するだけの単純なページです。 検索条件クエリ―の有無で表示ページを出しわけしているので、フォームのメソッドは GET としています。

/views/search/result-list.ejs

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>search</title>
    <style>
      .result-item { border: 1px solid #666; margin: 0.5em 1em; }
      .pagination { list-style: none; display: flex; }
      .pagination li { display: inline-block; width: 2em; }
    </style>
  </head>
  <body>
    <h1>検索</h1>
    <form action="/shop/search" method="GET">
      <input type="text" id="q" name="q" value="<%= query %>"/>
      <input type="submit" value="検索" />
    </form>
    <p>結果：<%= count %>件</p>
    <p>
<% for(var i = 0; i < list.length; i++) {%>
<%- include("result-item.ejs", list[i]); %>
<% }%>
    </p>
    <p>
      <ul class="pagination">
<% for (var i = 1; i <= pagination.max; i++) {%>
<%   if (i !== pagination.current) {%>
        <li><a href="/shop/search?q=<%= query %>&pg=<%= i %>"><%= i %></a></li>
<%   } else {%>
        <li><%= i %></li>
<% }}%>
      </ul>
    </p>
  </body>
</html>

検索結果表示画面。 リストの外枠だけを記述して個別検索結果は include で読み込むようにします。

L18: 検索結果総数の表示は count に保持しているのでそれを表示します。

L20-22: 検索結果リストを for でループしながら include に値を入れて表示を行います。 具体的な表示内容はこの後の result-item.ejs を確認してください。 include を利用するときは <%- include("VIEW_FILEPATH") %> と記述する点に注意です。

L26-31: ページネーション（ページング）の表示です。 表示する「ページ総数」と「現在ページ」はサーバー側 (app.js) で算出しているので、それらを利用して表示を行います。

/views/search/result-item.ejs

<div>
  <table class="result-item">
    <tr>
      <th>name</th>
      <td><%= name%></td>
    </tr>
    <tr>
      <th>location</th>
      <td><%= location%></td>
    </tr>
    <tr>
      <th>tel</th>
      <td><%= tel%></td>
    </tr>
  </table>
</div>

検索結果の各項目を定義しています。 MongoDB から取得した値がそのまま流れてきているので、表示したいデータを埋め込んでいきます。

テスト

上記の実装がすべて終われば動作するはずなので、動作確認を行います。

• 検索条件入力

  

• 検索結果出力

  

スタイルの実装を最低限としたので、最初の 概要 のイメージとは少しデザインが異なりますが…機能としては必要なものが盛り込まれているかと思います。

今回の記事は参考になったでしょうか？ 一般的な検索ページの作成をテーマに Node.js + Express でどのように実装するかをまとめてみました。 本記事（検索ページ作成）のポイントは以下の通りです。

• 検索リクエストは GET
• 検索結果画面には「検索入力」、「検索結果総数」、「検索結果」、「ページネーション」を表示
• MongoDB への複数リクエストは Promise.all() で非同期ですべて取得
• 「ページネーション」に必要な値はサーバー側で準備

Node.js + Express において URLルーティング 、特に名前付きパラメーターをどのように指定するかまとめました。

基本

基本のルーティング指定方法は以下の通りです。

構文

app.METHOD(PATH, CALLBACK);

METHOD

HTTPリクエストメソッドを小文字で指定します。例：get, post, put, delete

PATH

URLルーティングを指定します。

CALLBACK

URLルーティングが一致したときに実行する処理を指定します。

たとえば、ルートパス / へのルーティングを指定する場合、以下のように指定します。

app.get("/", function (request, response) {
  // GET: /
  response.send("Hello World");
});

応用

「応用」では上記「基本」の設定における PATH の指定方法をもう少し掘り下げます。 PATH は特殊な記法を用いることで柔軟な URLルーティング を実現できるようになっています。 以下に具体的な方法を見ていきます。

• 名前付き パラメーター
• カスタムマッチ パラメーター
• 名前なし パラメーター

名前付き パラメーター

コロン ( : ) のプレフィックスで始まる文字列はパラメータとして認識されます。 パラメータ文字列は次のパスセグメントまでをパラメータ文字列として認識します。 パラメータ文字列として利用可能な文字列はアルファベット大文字小文字、数字、アンダースコア [A-Za-z0-9_] になります。

名前付きパラメーターは request.params.PARAMETER_NAME で値を取り出すことができます。

オプション

サフィックスに クエスチョンマーク ? を付けることで、パラメーターがオプションでることを指定できます。

0 以上

サフィックスに アスタリスク * を付けることで、0 以上のパラメーターと一致させることができます。

1 以上

サフィックスに プラス + を付けることで、1 以上のパラメーターと一致させることができるハズ…ですが、 実際試してみると動作的にはサフィックスにプラス + があってもなくても通常の動作と変わらない動作でした。

カスタムマッチ パラメーター

名前付きパラメーターに対して正規表現で条件指定することができます。 以下の例では数値だけを受け付けるカスタムマッチパラメーターを設定しています。

名前なし パラメーター

グループマッチさせる正規表現は名前なしパラメーターとして指定できます。 グループマッチ (.*) の指定は アスタリスク * の省略表記も使えます。 無名なため rquest.params で値を取り出すことはできません。

参考記事

• Express - Basic routing
• Express - Routing
• npm - path-to-regexp

Node.js + Exprss で HTTPSサーバー 構築した際、http でアクセスしてきた通信を https 強制リダイレクトさせる方法を考えました。 といっても難しいことはせずできるだけ単純な実装にしています。

自動リダイレクト の サンプルコード

var express = require("express");
var fs = require("fs");
var http = require("http");
var https = require("https");

var app = express();

var options = {
    pfx: fs.readFileSync("./private/localhost.pfx"),
    passphrase: "Passw0rd"
};

app.get("/", function (request, response) {
    response.writeHead(200);
    response.end("Hello World.");
});

http.createServer((express()).all("*", function (request, response) {
    response.redirect(`https://${request.hostname}${request.url}`);
})).listen(80);
https.createServer(options, app).listen(443);

httpへのアクセスはすべてリダイレクトしたいので Express の 別インスタンス を準備してすべて https へリダイレクトするよう設定しています。 単純ですが抜けもれなくすべてリダイレクトできるのでこの方法が便利かな、と思います。

Node.js + Express の環境で HTTPS 通信できるようにする方法を整理しました。 あまり複雑な要素は含めずできるだけシンプルなサンプルコードを掲載します。

HTTPS サーバー 構築

Windows の IIS で自己署名入り証明書 をエクスポートすると PKCS#12 の証明書 (拡張子 pfx のファイル) になっているので、 今回は pfx を指定してHTTPSサーバーを構築してみます。

IIS で 自己署名入り証明書 を作成、エクスポートする方法は以下の「自己署名証明書の作成」を参照してください。

var express = require("express");
var fs = require("fs");
var https = require("https");

var app = express();

var options = {
    pfx: fs.readFileSync("./private/localhost.pfx"),
    passphrase: "Passw0rd"    
};

app.get("/", (request, response)=>{
    response.writeHead(200);
    response.end("Hello World.");
});

https.createServer(options, app).listen(443);

httpsサーバー構築する場合、署名済み公開鍵と秘密鍵をオプションで設定してあげる必要があります。 上記のコードは 署名済み公開鍵と秘密鍵 の両方を含む pfx ファイル を指定しています。

http で良ければ app.listen() とできるところですが…、 https の場合、 https.createServer() に 証明書情報 と Express のインスタンス を渡すことで実現します。 ポート番号に 443 を指定しておくことも注意です。

上記コードを実行して https://localhost/ へ接続すると "Hello World." の応答が表示されることが確認できます。

HTTP と HTTPS を共存させた サーバー 構築

上記の HTTPSサーバー構築 に加えて http 用のサーバーを同時に生成、実行することで共存させることができます。 追加するコードはハイライトしている部分です。

var express = require("express");
var fs = require("fs");
var http = require("http");
var https = require("https");

var app = express();

var options = {
    pfx: fs.readFileSync("./private/localhost.pfx"),
    passphrase: "Passw0rd"    
};

app.get("/", (request, response)=>{
    response.writeHead(200);
    response.end("Hello World.");
});

http.createServer(app).listen(80);
https.createServer(options, app).listen(443);

[おまけ] 自己署名証明書の作成

OpenSSL を利用して自己署名証明書作成はよく見かけるので… ここでは IIS を使った Windows の開発環境で簡単に自己署名証明書を作成する方法を見てみます。

1. IIS の 管理コンソール を開く

   

2. 「サーバー証明書」をダブルクリックして開く

   

3. 操作ペインの「自己署名入り証明書の作成」を選択

   

4. フレンドり名を指定して「OK」を選択

   

5. 作成した「自己署名入り証明書」が選択されているので、操作ペインの「エクスポート」を選択

   

6. 出力先、パスワードを指定して「OK」を選択

   

参考記事

• Express - APIリファレンス
• MINKO GECHEV'S BLOG - Express over HTTPS
• StackOverflow - I'm using .pfx certification in my node.js https server and I can't use 'passphrase' in option

Node.js + Express で Webアプリケーション開発 を行うとき困ったのがルーティング。 そこで ASP.NET MVC のような実装ができる Express 向け ミドルウェア "express-junction" を作成しました。

概要

"express-junction" は Express上 で動くミドルウェアです。

「開発時に一定ルール」を設けることで URLルーティング を /コントローラー名/アクション名 へ自動で割り振られるようにできます。

「開発時の一定ルール」とは具体的に以下の2点です。

• Controller の配置場所は "/controllers" フォルダ配下
• View テンプレート の配置場所は "/views/{コントローラー名}" フォルダ配下

詳しい実装はこの後の 使い方 で解説します。

インストール

npm install express-junction

依存関係に "express" が入っているので、 上記をいきなり実行することで "express" 含めてまとめてインストールできます。

使い方

簡単な実装例を以下で見ていきます。

ディレクトリ、ファイル

ディレクトリ構成は以下の通りです。 作成するのは 3ファイル のみです。 ディレクトリ構成とファイル保存場所が決まっている点が要注意です。 コントローラー名、アクション名は自由に設定できます。

%PROJECT_ROOT%
│  app.js
│  package.json
│  
├─controllers
│      home.js
│      
├─node_modules
│  ├─express
│  ├─express-junction
│  └─express-session
│          
└─views
    └─home
            index.ejs

/app.js

var express = require("express");
var session = require("express-session");
var junction = require("express-junction");

// Expressインスタンス作成
var app = express();

// テンプレートエンジンの設定
app.set("views", "./views");
app.set("view engine", "ejs");

// ミドルウエアの設定
app.use("/public", express.static("public"));
app.use(session({
    secret: "YOUR SECRET KEY IS HERE",
    resave: false,
    saveUninitialized: true,
    name: "sid"
}));
app.use(junction());
app.use("/", junction.router());

// サーバー開始
app.listen(3000);

"express-junction" は "express-session" を使用していることを前提としているので、"express-session" ミドルウェアよりあとに設定します。

/controllers/home.js

var {Controller, Action, allow, deny} = require("express-junction");

// Controller の生成
var controller = new Controller("home");

// GET: /home/index
controller.add(new Action(
    "GET",
    "index",
    function (request, response) {
        return this.view({ title: "/home/index" });
    }
));

// Controller のエクスポート
module.exports = controller;

コントローラー、アクションともにインスタンス生成時に各種設定を行います。

Controller インスタンス生成時の引数は以下の通りです。

name

string コントローラー名を指定します。 URLの一部になります。

Action インスタンス生成時の引数は以下の通りです。

method

string HTTPリクエストメソッドを指定します。

name

string アクション名を指定します。 URLの一部になります。

[rules]

Validator[] オプションでアクセス制御を指定できます。 指定しなければすべてのユーザーに対してアクセス許可になります。

process

function(Request, Response) アクションが呼ばれたときに実行する処理を記述します。 Viewテンプレートでレスポンスする場合、this.view() を使用します。 JSONでレスポンスする場合、this.json() を使用します。 リダイレクトは this.redirect() です。

/views/home/index.ejs

<!DOCTYPE html>
<html>
    <head>
        <title><%= title %></title>
        <meta charset="utf-8">
    </head>
    <body>
        <h1>Hello World</h1>
        <p>This is a sample page.</p>
    </body>
</html>

何の変哲もない ejs ファイル…。 コントローラーで this.view() が実行された際に呼び出されます。

Node.js + Express で WebAPI を作成してみます。 最近だと モバイルアプリ や SPA (Single Page Appliction) などで利用されるような機能を実装するイメージです。 あまり難しいことはせず、単純な GET と POST の例でまとめました。

概要

画面を返さず JSON を返却する WebAPI を作成してみます。 今回は 単純な GET と POST を行うサンプルです。 具体的なパスは以下のようなものを作る予定です。

• GET: /api/user/:id
• POST: /api/user

上記の POST URLにリクエストしたときの動きのイメージは以下のようなものです。

実装

今回は以下のミドルウェアを利用するのであらかじめ npm install <PACKAGE> --save でインストールしておきます。

• express
• body-parser

app.js

それでは実装に…といっても単純なものなので、何はともあれ実装の全体像は以下に載せます。 ハイライト下部分について、詳しくは後ほど説明していきます。

var express = require("express");
var bodyParser = require("body-parser");

// express application
var app = express();

// add body-parser
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

// set routing.
app.use("/api/", (function () {
    var router = express.Router();

    // GET: /api/user/:id
    router.get("/user/:id", (request, response) => {
        var user = {
            id: request.params.id,
            name: "tanaka",
            role: "group1"
        }
        response.json(user);
    });

    // POST: /api/user
    router.post("/user", (request, response) => {
        var body = request.body;
        if (!body.name || !body.role) {
            return response.json(false);
        }
        var user = {
            id: 0,
            name: body.name,
            role: body.role
        };
        response.json(true);
    });

    return router;
})());

// start web applicaiton.
app.listen(3000);

GET: /api/user/:id

L.16-23

コロン「:」 を利用することで URL 中 にパラメータを埋め込むことができます。 埋め込まれたパラメータの取り出しは request.params.パラメータ名 でできます。 このパラメータ指定にはいくつかオプション設定（?, +, *, regexp）が使えます。 詳しくは 「Node.js + Express の URLルーティング」 を参照してください。

POST: /api/user

L.8-9 および L.26-37

POSTの場合、リクエストボディー に JSON を入れて情報を伝達するのが通常かと思います。 リクエストボディーに埋め込まれた JSON を取り出す場合 body-parser を使うと便利です。 body-parser ミドルウェアの設定および登録は L8-9 に記載の通りです。 この登録をしておけば、body-parser にはリクエストボディーに埋め込まれた文字列を JSONオブジェクト に変換して request.body へセットしてくれます。

テスト

GET と POST の両方をテストしてみます。 作成した Webアプリケーション を実行した状態で localhost:3000 に向かってリクエストを投げてみます。

リクエスト生成するツールはいろいろありますが…私は Fiddler の Composer をよく使うので、 ここでも Fiddler を利用してリクエストを投げています。 Fiddler を利用しているのでリクエストサンプルの User-Agent は Fiddler となてっていますがテストには関係ないので無視で良いです。

以下は Fiddler の Composer でリクエストを投げている画面のキャプチャです。

GET: /api/user/:id

リクエスト

GET http://localhost:3000/api/user/123 HTTP/1.1
User-Agent: Fiddler
Host: localhost:3000
Content-Length: 0

レスポンス

HTTP/1.1 200 OK
X-Powered-By: Express
Content-Type: application/json; charset=utf-8
Content-Length: 44
ETag: W/"2c-yyXPiEPxROPhaVRftHE4bQ"
Date: Sun, 12 Feb 2017 08:48:35 GMT
Connection: keep-alive

{"id":"123","name":"tanaka","role":"group1"}

POST: /api/user

リクエスト

POST http://localhost:3000/api/user HTTP/1.1
User-Agent: Fiddler
Host: localhost:3000
Content-Length: 35
Content-Type: application/json

{"name":"tanaka", "role": "group1"}

レスポンス

HTTP/1.1 200 OK
X-Powered-By: Express
Content-Type: application/json; charset=utf-8
Content-Length: 4
ETag: W/"4-sya1BisvDmkEaBBxdTTLCQ"
Date: Sun, 12 Feb 2017 08:49:12 GMT
Connection: keep-alive

true

参考記事

• Express - Express での ルーティング
• npm - path-to-regexp
• Express 4.x - API リファレンス

ESLint ルール を一通り日本語訳して一覧化してみました。 記載はできるだけ「デフォルトがどのような状態か」という内容で記載しています。

なお、最新情報および詳細情報は ESLint - Rules を参照してください。

エラーになりやすい

ベストプラクティス

strictモード

変数

Node.js と CommonJS

表記法

ECMAScript 6

参考記事

• ESLint - Rules

Node.js + Express + Passport + MongoDB を利用したユーザー認証 および アクセス制御 の実装を行ってみます。 今回は3画面作成するので、少し前置き（全体像）から入っていきます。

概要

今回は認証認可処理の基本的な実装として、以下のようなフローを実現したいと思います。 作成する画面、画面遷移、機能は以下のようなものになります。 …なんだかんだと書いていますが、作成するのは「機能一覧」にある機能を実装していきます。

フロー

画面一覧

画面遷移

機能一覧

プロジェクト準備

フォルダ構成

<PROJECT_ROOT>
│  .bowerrc
│  app.js
│  bower.json
│  package.json
│
├─models
│      user.js
│
├─node_modules
│  ├─body-parser
│  ├─connect-flash
│  ├─cookie-parser
│  ├─express-session
│  ├─mongoose
│  ├─passport
│  └─passport-local
│
├─public
│  └─third_party
│      ├─bootstrap
│      ├─font-awesome
│      └─jquery
│
└─views
    ├─account
    │      login.ejs
    │      profile.ejs
    │
    └─home
            index.ejs

初期化

npm と bower を使うので、まずはそれぞれ初期化（npm init , bower init）します。 bower については保存先を /public/third_party/ 配下としたいので .bowerrc ファイルも作成します。

.bowerrc

{
  "directory": "public/third_party"
}

詳しくは以下のページに記載していますので、参照してください。

• Node.js プロジェクト の 作成
• Node.js プロジェクト に Bower 設定 を 追加する

パッケージの追加

利用するパッケージおよびそれぞれの依存関係は以下の通りです。 記載のモジュールを一通り取り込んでおきます。

npm

bower

データベース作成

スキーマ

id と email が意味合いとして重複してそうですが…以下のようなスキーマを考えます。

sample

user

{
    "id":       String,
    "email":    String,
    "name":     String,
    "password": String,
    "role":     String
}

データ作成

サンプルデータとして投入するユーザーは、ユーザー名:tanaka@sample.com 、 パスワード:password 、ロール：group1 のユーザーです。 その他は使っていないので適当です。

> use sample

> db.createCollection("user");

> db.user.insert({
...   id: "tanaka",
...   email: "tanaka@sample.com",
...   name: "tanaka",
...   password: "password",
...   role: "group1"
... })

Webアプリケーション作成

アプリケーションルート作成 ( /app.js )

var express = require("express");
var cookieParser = require("cookie-parser");
var bodyParser = require("body-parser");
var flash = require("connect-flash");
var session = require("express-session");
var mongoose = require("mongoose");
var passport = require("passport");
var LocalStrategy = require("passport-local").Strategy;
var User = require("./models/user.js");

// MongoDB 接続先設定
mongoose.connect("mongodb://localhost/sample");

// passport が ユーザー情報をシリアライズすると呼び出されます
passport.serializeUser(function (id, done) {
    done(null, id);
});

// passport が ユーザー情報をデシリアライズすると呼び出されます
passport.deserializeUser(function (id, done) {
    User.findById(id, (error, user) => {
        if (error) {
            return done(error);
        }
        done(null, user);
    });
});

// passport における具体的な認証処理を設定します。
passport.use(
    "local-login",
    new LocalStrategy({
        usernameField: "username",
        passwordField: "password",
        passReqToCallback: true
    }, function (request, username, password, done) {
        process.nextTick(() => {
            User.findOne({ "email": username }, function (error, user) {
                if (error) {
                    return done(error);
                }
                if (!user || user.password != password) {
                    return done(null, false, request.flash("message", "Invalid username or password."));
                }
                // 保存するデータは必要最低限にする
                return done(null, user._id);
            });
        });
    })
);

// 認可処理。指定されたロールを持っているかどうか判定します。
var authorize = function (role) {
    return function (request, response, next) {
        if (request.isAuthenticated() &&
            request.user.role === role) {
            return next();
        }
        response.redirect("/account/login");
    };
};

// express の実態 Application を生成
var app = express();

// テンプレートエンジンを EJS に設定
app.set("views", "./views");
app.set("view engine", "ejs");

// ミドルウェアの設定
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(cookieParser());
app.use(flash());
app.use("/public", express.static("public"));

// passport設定
app.use(session({ secret: "some salt", resave: true, saveUninitialized: true }));
app.use(passport.initialize());
app.use(passport.session());

// ルーティング設定
app.use("/", (function () {
    var router = express.Router();
    router.get("/home/index", function (request, response) {
        response.render("./home/index.ejs");
    });
    router.get("/account/login", function (request, response){
        response.render("./account/login.ejs", { message: request.flash("message") });
    });
    router.post("/account/login", passport.authenticate(
            "local-login", {
                successRedirect: "/account/profile",
                failureRedirect: "/account/login"
            }));
    router.post("/account/logout", authorize("group1"), function (request, response){
        request.logout();
        response.redirect("/home/index");
    });
    router.get("/account/profile", authorize("group1"), function (request, response){
        response.render("./account/profile.ejs");
    });
    return router;
})());

// サーバーをポート 3000 で起動
app.listen(3000);

アプリケーションルートの実装。 本記事の主題になるところなので、ポイントになる箇所をピックアップして説明していきます。

L12: mongoose.connect()

MongoDB への接続を設定します。 接続先はテスト用なので ホスト が local 、 データベース が sample となっています。 ここではサンプルなので接続文字列をべた書きにしていますが、本来は設定ファイルとして切り出した方が良いと思います。

L15-17, L20-27: passport.serializeUser(), passport.deserializeUser()

passport.js は cookie に ユーザー情報を保存するときシリアライズを行って保存しています。 これらのメソッドはコールバックで、それぞれシリアライズしたときに呼び出し、デシリアライズしたときに呼び出しとなっています。 よく見る記事ではデシリアライズする際（＝ユーザー認証が終わった後にアクセスされた場合）、データベースからユーザー情報を取り直して再設定しているコードをよく見ます。

L30-50: passport.use()

第1引数にはあとからストラテジーを呼び出すために使う一意な名前を指定します（今回のサンプルだと L96 で passport.authenticate() の引数に指定している）。 第2引数にはストラテジーを指定します。 第2引数に、今回は一番よくつかわれると思われる LocalStrategy を指定します。 この LocalStrategy はインスタンス生成時に2津引数を取ります。 1つ目にはログイン画面のフォームに指定しているユーザー名およびパスワードのテキストボックスの名前を指定します。 usernameField には ユーザー名を示すテキストボックスの名前を、 passwordField には パスワード を示す テキストボックスの名前を指定します。 2つ目は認証処理を定義します。 mongoose を利用してユーザーを検索して存在しておりパスワードが一致しているかどうかをチェックします。 認証出来たら必要なデータだけに絞って done() へ引き渡します。 ここで渡した値は passport.serializeUser() のコールバックの第1引数にわたっていきます。

L53-61: authorize()

認可処理を実現するための補助関数を定義します。 利用方法は Express のミドルウェアとして認可処理が必要な処理の手前に差し込みます。 今回のサンプルであれば POST: /account/logout 、 GET: /account/profile に挿入しています。

L78-80: app.use()

passport を利用できるように express のミドルウェアとして追加します。 passport は express-session を利用しているので、session() → passport.initialize() → passport.session() の順で追加します。

L91-95: router.post("/account/login", ...)

ログイン処理を定義します。 passport.authenticate() にストラテジー名を指定することで実現できます。

L96-99: router.post("/account/logout", ...)

ログアウト処理を定義します。 ログアウトは request.logout() で行えます。

ユーザーモデル作成 ( /models/user.js )

var mongoose = require("mongoose");

var schema = mongoose.Schema({
    "id":       String,
    "email":    String,
    "name":     String,
    "password": String,
    "role":     String
});

module.exports = mongoose.model("User", schema, "user");

トップ画面作成 ( /views/home/index.ejs )

<!DOCTYPE html>
<html lang="ja">
  <head>
    <%- include("../_head.ejs", {title: "/home/index"}) %>
  </head>
  <body>

    <%- include("../_nav.ejs") %>

    <div class="container">
      <div class="starter-template">
        <h1>Authenticate / Authorize Sample Project</h1>
        <p class="lead"><br>
          This sample use Node.js, Express, Passport, MongoDB.
          You can learn how to build authn/authz function.
        </p>
        <p class="lead">
          <a type="button" class="btn btn-primary btn-lg" href="/account/login">Sign-in</a>
        </p>
      </div>
    </div><!-- /.container -->
 
    <%- include("../_scripts.ejs") %>
  </body>
</html>

ログイン画面作成 ( /views/account/login.ejs )

<!DOCTYPE html>
<html lang="ja">
  <head>
    <%- include("../_head.ejs", {title: "/account/login"}) %>
  </head>
  <body>

    <%- include("../_nav.ejs") %>

    <div class="container">
      <div class="col-sm-offset-3 col-sm-6">
        <h1><i class="fa fa-sign-in"></i> Login</h1>
        <div class="panel panel-default">
          <div class="panel-body">
            <form class="form-horizontal" method="POST" action="/account/login">
              <div class="form-group">
                <label for="username" class="col-sm-4 control-label">User Name</label>
                <div class="col-sm-8">
                  <input type="text" class="form-control" id="username" name="username" />
                </div>
              </div>
              <div class="form-group">
                <label for="password" class="col-sm-4 control-label">Password</label>
                <div class="col-sm-8">
                  <input type="password" class="form-control" id="password" name="password" />
                </div>
              </div>
              <div class="form-group">
                <div class="col-sm-offset-4 col-sm-8">
                  <input type="submit" class="btn btn-default btn-lg" value="Sign-in" />
                </div>
              </div>
              <% if (message && message.length !== 0) {%>
              <div class="alert alert-danger" role="alert">
                <i class="fa fa-"></i>
                <span class="sr-only">ERROR: </span>
                <%= message %>
              </div>
              <%}%>
            </form>
          </div>
        </div>
      </div>
    </div><!-- /.container -->
 
    <%- include("../_scripts.ejs") %>
  </body>
</html>

ユーザー名、パスワードを示すテキストボックスの名前は app.js 中の usernameField および passwordField に一致させます。 エラーメッセージは message として受け取るので、存在していれば表示するようにします。

プロフィール画面作成 ( /views/home/profile.ejs )

<!DOCTYPE html>
<html lang="ja">
  <head>
    <%- include("../_head.ejs", {title: "/account/login"}) %>
  </head>
  <body>

    <%- include("../_nav.ejs") %>

    <div class="container">
      <div class="col-sm-offset-3 col-sm-6">
        <h1><i class="fa fa-user"></i> profile page</h1>
        <table class="table table-bordered">
        <% for (var key in user) { %>
          <tr>
            <th class="col-sm-3"><%= key %></th>
            <td class="col-sm-9"><%= user[key] %></td>
          </tr>
        <% }%>
        </table>
        <form class="text-right" method="POST" action="/account/logout">
          <input type="submit" class="btn btn-default btn-lg" value="sign-out" />
        </form>
      </div>
    </div><!-- /.container -->
 
    <%- include("../_scripts.ejs") %>
  </body>
</html>

ログアウトは POST: /account/logout なので、フォームで呼び出すように実装します。

テスト

ここまでくればアプリは完成しているので実際に実行してみます。 Visual Studio Code であれば F5 でデバッグ実行します。

デバッグ実行状態でブラウザを立ち上げて //localhost:3000/home/index へアクセスするとトップ画面が表示します。 ログイン画面へ移動して tanaka@sample.com / password でログインします。 きっとうまく動くハズ…

参考記事

• Passport.js
• scotch.io - Easy Node Authentication: Setup and Local
• RisingStack Engineering - Node Hero - Node.js Authentication using Passport.js
• CenturyLink - Build User Authentication with Node.js, Express, Passport, and MongoDB
• Kikuchy's Second Memory - Express + Passport でお手軽ユーザー認証