Passportを使用してログイン認証（Node.js）

※この記事は2019/10/24に更新されました。

Passport.jsを使ってNode.jsのWebアプリケーションにログイン画面（ユーザID、パスワード認証）を実装する方法を解説します。

以下のような画面を実装できます。

Passport.jsはNode.jsミドルウェアを利用することで、自分で一から作らなくてもログイン画面が実装できます。

WebアプリケーションはExpress.jsを使用して構築しています。

手軽にログイン画面を実装したい
セキュリティを強化したい

という方向けの記事です。

Passport.jsの公式サイト（英語）

Contents

1 Passportの使用方法（事前準備）
- 1.1 インストール
2 Passportの使用方法（ログイン画面実装）
3 Passportの使用方法（各画面にログイン認証を実装）
- 3.1 それぞれの画面でログイン認証チェックをさせる
4 まとめ
5 オススメ記事

Passportの使用方法（事前準備）

インストール

まずはnpm経由でインストールします。

Passport.jsではStrategiesという項目を定義するためにpassport-localも必要となるのでinstallしておきます。

セッション管理用にexpress-sessionもinstallしておきます。

npm install passport passport-local express-session --save

Passportの使用方法（ログイン画面実装）

ログイン画面を実装する手順は以下となります。
それぞれ解説していきます。

Express.jsで新規でログイン画面を作成
app.jsにpassportを定義
app.jsにStrategiesを定義
routes/index.jsにログイン画面遷移の処理を追加

ログイン画面作成

ログイン画面を作成します。以下のサンプルコードではExpress.jsのテンプレートエンジンとしてEJSを利用しています。

<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<h1><%= title %></h1>
<form action="/login" method="POST">
<input type="text" name="username" placeholder="Username"/>
<input type="password" name="password" placeholder="Password"/>
<input type="submit"></button>
</form>
</body>
</html>

app.jsでpassportを定義

app.jsにpassport, passport-localを定義しておきます。

ログイン状態（セッション）を管理させるためのpassport.sessionをapp.use(session())定義後の順で書きます。

//app.js
const passport = require('passport')
const LocalStrategy = require('passport-local').Strategy;
const session = require('express-session')
~~~
app.use(session({secret:'好きな文字列'}))
app.use(passport.initialize()) //Expressを使用している場合はInitializeが必要
app.use(passport.session())

app.jsにStrategiesを定義

Passport.jsの利用にはpassport.use()でStrategiesという項目を定義する必要があります。

今回はユーザ名、パスワードのログイン認証のためのLocalStrategyを使用します。

他にもgoogle認証やgithub認証も可能です。Passport.js公式サイトのStrategiesを参照ください。

//app.js
passport.use(new LocalStrategy({
    userNameField:'username',
    passwordField:'password',
    passReqToCallback: true
},function(req, username, password, done){
    process.nextTick(function(){
    //処理書く
      　//ユーザ名、パスワード不正時の処理を記述する
        if(!username){
            return done(null, false, { message: 'Username is incorrect' })
        //↓にはPasswordチェック処理を実装してください。
        } else if(password !== result[0].password){
            return done(null, false, { message: 'Username is incorrect' })
        } else{
            console.log("username"+username)
            return done(null, username);
        }
    })
}));

Routeにログイン画面遷移処理を記述

Express.jsのroutes/index.jsにログイン画面遷移の処理を追加します。

//index.js
router.get('/login', function(req, res) {
res.render('login', { title : 'login' });
});

先ほど作成したログイン画面からログインボタンを押下（Submit）した際の処理を記述します。

//index.js
router.post('/login', passport.authenticate('local',
{successRedirect: '/xxx',　//ログイン成功時に遷移したい画面
failureRedirect: '/login', //ログイン失敗時に遷移したい画面
session: true}));

ここまででログイン画面の実装は完了です。

Passportの使用方法（各画面にログイン認証を実装）

それぞれの画面でログイン認証チェックをさせる

ログイン画面の実装ができたので、それぞれの画面にログイン認証済みであるかのチェックを実装していきます。

ログイン状態でない場合、ログイン画面に遷移させます。

この例ではsample.jsの画面のroutesファイルにisLoginedというフラグを持たせて画面表示の際にチェックしています。

//routes/sample.js
let isLogined = function(req, res, next){
    if(req.isAuthenticated()){
        return next();
    }else{
        res.redirect("/login");
    }
};
router.get('/', isLogined, function(req, res, next) {
~~~画面表示時の通常処理~~~
});