Passportを使用してログイン認証(Node.js)

Node.jsアプリケーションをWebサーバ化させるためにログイン画面を実装することにしました。

個人用Webサーバであればログイン画面は不要なのですが、不要な情報を不特定多数に晒さないことがセキュリティにつながるため実装します。

Passportっていうライブラリを使うことで簡単にログイン画面が実装できます。

WebサーバはExpress.jsを使用して構築しています。

Passportの公式サイト

Passportの使用方法

インストール

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

passportではstrategy項目を定義する必要があるので、passport-localもinstallしておきます。

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

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

現状のバージョンは0.4.0です。

passport@0.4.0

ログイン画面作成

続いてログイン画面を作成します。テンプレートエンジンはEJSです。
username、passwordを入力するinputタグを記述します。

login.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の利用にはpassport.use()でStrategiesを定義する必要があります。

今回はLocalStrategyを使用。ユーザ名、パスワードのログイン方法です。

他にもgoogle認証やgithub認証も可能です。Passportの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)
     //↓にはPasswordチェック処理を実装してください。
    } else if(password !== result[0].password){ 
      return done(null, false)
    } else{
      console.log("username"+username)
      return done(null, username);
    }
  })
}));


注意:ここではユーザを想定していないためログイン失敗時のエラーメッセージは表示していません。
return doneにメッセージをつけた方がユーザフレンドリーです。

return done(null, false, { message: 'Username is incorrect' })

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

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}));

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

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

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

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

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) {
  ~~~画面表示時の通常処理~~~
});

まとめ

簡単にログイン画面が実装できるし、便利ですね!

www.kennejs.com