【連載第1回】passportを使ってoauth認証を実装してみよう【Twitter編】

認証の実装

ログインボタンをクリックしたら、Twitterの認証画面に遷移して、ログイン後、元のページに遷移するイメージですすめていきましょう。

まずは、app.jsにpassportの設定と、セッションの設定、ルーターの設定を追記していきます。
var app = express();の前に以下を記述しました。

//中略
var passport = require('passport');
var TwitterStrategy = require('passport-twitter').Strategy;

//Twitter Appsにて取得したConsumer Key (API Key)とConsumer Secret (API Secret)を記述
var TWITTER_CONSUMER_KEY = "XXXXXXXXXXX";
var TWITTER_CONSUMER_SECRET = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX";

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

passport.deserializeUser(function (obj, done) {
    done(null, obj);
});

passport.use(new TwitterStrategy({
        consumerKey: TWITTER_CONSUMER_KEY,
        consumerSecret: TWITTER_CONSUMER_SECRET,
        callbackURL: "http://localhost:3000/oauth/callback/" //Twitterログイン後、遷移するURL
    },
    function (token, tokenSecret, profile, done) {
        console.log(token, tokenSecret, profile);
        process.nextTick(function () {
            return done(null, profile);
        });
    }
));
//中略

次にセッションを使う宣言とルーターの設定を行います。

var oauth = require('./routes/oauth');
//中略

app.use(require('express-session')({
    secret: 'keyboard cat',
    resave: false,
    saveUninitialized: false
}));


app.use('/oauth', oauth);
//中略

次にrooter/にoauth.jsを作成し、/oauthにアクセスした時の振る舞いを記述していきます。

var express = require('express');
var router = express.Router();
var passport = require('passport');

// /oauthにアクセスした時
router.get('/', passport.authenticate('twitter'), function (req, res, next) {
    console.log(req, res, next);
});

// /oauth/callbackにアクセスした時（Twitterログイン後）
router.get('/callback',    passport.authenticate('twitter', { failureRedirect: '/login' }), function(req, res) {
    res.redirect('/'); //indexへリダイレクトさせる
});

module.exports = router;

最後にroutes/index.jsでviewにsessionを渡すよう追記します。

res.render('index', {
     title: 'login demo',
     session: req.session.passport //passportでログイン後は、このオブジェクトに情報が格納されます。
});

passportを使用してのログイン情報は、req.session.passportに格納されます。

実行

DEBUG={project dir}:* ./bin/www

localhost:3000にアクセスし、ログインボタンをクリックすると、Twitterの画面に遷移し、ログインします。

成功すると、セッション（req.session.passport）にTwitterのアカウント情報が入っていることを確認できます。
画面でも自分の名前とアイコン画像を取得できています。

まとめ

無事にログインすることができました。
passportを使うことで、いくらか簡単にSNSログインが実装できたかと思います。
次回はFacebookもしくはGoogleでログインを実装してみましょう。

それでは。

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。