Node.JSとPassportを使って認証処理を実装する方法

よくある認証処理をつくります。

https://loginsample.glitch.me/

こういうページがでてきて認証を求められる仕組みです。
Passportモジュールを使うと割と簡単に作ることができます。

最初に環境を準備します

npm init -y
npm install express --save
npm install express-session --save
npm install passport --save
npm install passport-local --save
npm install body-parser --save

たくさんのモジュールを入れる必要があります。
このまま実行すれば大丈夫です。

app.js

var express = require('express');
var app = express();

var passport = require('passport');
app.use(passport.initialize());

var session = require('express-session');
app.use(session({secret: '123456'}))
app.use(passport.session());

passport.serializeUser(function(user, done) {
    done(null, user);
});

passport.deserializeUser(function(user, done) {
    User.findById(id, function(err, user) {
        done(err, user);
    });
});

var bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({extended:true}));

var LocalStrategy = require('passport-local').Strategy;

// 認証処理の定義
passport.use(new LocalStrategy(function(username, password, done){
    if (username == 'admin' && password == 'password') {
        return done(null, username);
    } else {
        return done(null, false);
    }
}))

// EJS設定
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');

// ログインページ
app.get('/', function (req, res) {
    res.render('login', {});
});

// 認証処理
app.post('/auth', passport.authenticate('local', { successRedirect: '/secret', failureRedirect: '/', failureFlash: true }));

// 認証後ページ
app.get('/secret', function (req, res) {
    if ('passport' in req.session && 'user' in req.session.passport) {
        res.render('secret', {});
    } else {
        res.redirect('/');
    }
});

app.listen(3000, function () {
});

簡単とはいっても、やはり難しいです。

重要なのは「認証処理の定義」と「認証処理」の部分です。

認証後ページではセッションの内容をチェックして、ログインされていなければログイン画面に飛ばしています。

動かしてみれば、なんとなく理解できるはずです。

ユーザ登録の仕組みはありません

プログラム上にも書いてあるとおり

ユーザ名は「admin」
パスワードは「password」

でログインできます。

login.ejs

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <title>ログイン</title>
</head>

<body>
    <div class="container" style="padding: 1.25rem;">
        <div class="card">
            <h5 class="card-header">ログイン</h5>
            <div class="card-body">
                    <form action="/auth" method="post" autocomplete="off">
                        <div class="form-group">
                            <label for="text1">ユーザID</label>
                            <input type="text" id="username" name="username" class="form-control" autofocus>
                        </div>
                        <div class="form-group">
                            <label for="password">パスワード</label>
                            <input type="password" id="password" name="password" class="form-control">
                        </div>
                        <div class="form-group">
                            <input type="submit" value="ログイン" class="form-control" />
                        </div>
                    </form>          
            </div>
            <div class="card-footer">ユーザ名とパスワードを入力してください。</div>
            </div>
        </div>
    </div>
</body>
</html>

ログイン画面はこんな感じになりました。
デザインはお好みで調整してください。
inputタグの名前はあわせてください。

secret.ejs

<html>
    <body>
        <p>おめでとうございます。ログインできました。</p>
    </body>
</html>

いわゆるログイン後の個人ページです。

まとめ

これでログインページを作れるようになりました。

新規ユーザ登録の画面も作れば、いろいろ応用できますね。

システム開発

Posted by @erestage