C# & JavaScript

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

Windowsサーバー で稼働中のWebアプリケーションを別の Windowsサーバー へ移す場合、証明書も移す必要があります。 ここでは証明書をバックアップして復元する手順をまとめます。

署名済みサーバー証明書のバックアップ

以下に載せる手順で行うバックアップでは「署名済み公開鍵」と「秘密鍵」の両方を含んだファイルを出力できます。

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

   

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

   

3. バックアップしたい「署名済みサーバー証明書」を選択

   

4. 操作にある「エクスポート」を選択

   

5. 出力先、パスワードを設定して「署名済み公開鍵」と「秘密鍵」をバックアップ

   

署名済みサーバー証明書のリストア

上記バックアップ方法でバックアップされたファイルから証明書の復元を行います。

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

   

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

   

3. 操作パネルの「インポート」を選択

   

4. バックアップしていたファイル、パスワードを指定して「OK」を選択

   

ファイル形式について

IISで管理される署名済みサーバー証明書のバックアップファイルは、「拡張子が pfx であること」と「中身がバイナリ形式」であったことから、「 PKCS#12 に従った DERエンコーディング ファイル」です。 OpenSSL と相互に鍵交換する場合、上記内容に即しているか注意します。

参考記事

• CSPSSL - SSLサーバ証明書をエクスポートする
• CrossTrust - Microsoft IIS7.x SSLサーバ証明書エクスポート方法
• GeoTrust - 秘密鍵、公開鍵形式からPKCS#12（pfx）形式への変換方法

最近の Webサービス の流れとして HTTPS対応 が当たり前になってきたので、SSL/TLS化 を考えようと思ったのですが… 公開鍵関連はよく分からなくなるので、概要だけを本記事まとめました。

この記事では 公開鍵基盤 において環境構築に関する全体像をざっくりとつかみます。 その上で、具体的な手順は個別に関連記事へのリンクを掲載しているのでそちらを参照すると理解しやすくなっていると思います。

証明書ファイル形式

証明書ファイルは「 [規格] × [エンコード] 」の組み合わせで決まるようです。 以下に載せる拡張子は「エンコード形式」ベースで記載しているので、中身（規格）については考慮していません。 エンコード方法の違いなので、基本は相互に変換可能です。

CA構築 と ルート証明書登録

CAサーバー構築からクライアントにルート証明書登録するまでの概略です。

1. CAサーバー構築

   • CAサーバー構築時には以下のような公開鍵と秘密鍵のペアを作成します。

     公開鍵

     ca_cert.pem

     秘密鍵

     ca_key.pem

   • 秘密鍵作成時、 CN には FQDN を指定します。

2. クライアントにルート証明書登録

   • 公開鍵 ca_cert.pem の拡張子を書き換えて ca_cert.cer にして登録します。

関連記事

• Windows Servier 2012 で 証明書サービス(認証局) の 構築
• Active Directory 証明書サービス(AD CA) の ルート証明書 を エクスポート する 方法
• 信頼されたルート証明機関 に 電子証明書 を インポート する方法

サーバー証明書要求作成 と 署名

CAサーバー構築が完了している前提で、SSL/TLS化 (HTTPS化) したいサーバーで 証明書要求(CSR) を作成するところから署名された公開鍵を登録するところまでの概略です。

1. サーバー側で証明書要求 (CSR) 作成

   • SSL/TLS化したいサーバーで以下のような証明書要求(CSR) と 秘密鍵を作成します。

     証明書要求 (CSR)

     server_csr.pem

     秘密鍵

     server_key.pem

2. CAサーバー側で証明書要求(CSR) に署名
   • 受領した証明書要求(CSR)に署名して公開鍵を作成します。

     公開鍵

     server_cert.pem

3. サーバー側に公開鍵登録
   • 受領した署名済み公開鍵をWebサーバーに登録します。

関連記事

• IIS で SSL/TLS を AD CA 発行の証明書 で 設定 する方法
• IIS で SSL/TLS を 自己署名入り証明書 で 設定 する方法

参考記事

• Qiita - RSA鍵、証明書のファイルフォーマットについて
• MSDN - 証明書のファイル形式
• デジタル証明書の仕組み
• Wiki - X.509
• Wiki - X.690

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 でお手軽ユーザー認証