ガジェット通信

見たことのないものを見に行こう

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

DATE:
  • ガジェット通信を≫

こんにちは。夏のにおいほど切ないものはないですね。楽しい思い出も、本当にただそれだけでしかなくて、人は離れ離れになって。そこにあるはずないのに何かありそうな、蜃気楼だけを眺めているんです。まろCです。

passportは、node.js用の認証モジュールです。Twitter、Facebookをはじめとした、主要なSNSログインを実装できるのはもちろん、その他多くの認証に対応しています。
その認証を連載でご紹介していきたいと思います。

今回は、第一弾として、Twitterでのログインをnode.jsで実装していきたいと思います。

初回なのでnode.jsとexpressをインストール

expressフレームワークを使用して実装を進めていきたいと思います。

node.jsのインストール

node.jsをインストールしていない環境の方はまず、こちらの記事を参考にインストールします。

せっかくなので話題のiojsを選択すると調子がいいですね。

Twitter Appsにアプリケーションを登録

Twitter Appsからログインさせるアプリケーションを登録していきます。

右上のCreate News Appをクリックして登録していきます。

注意すべきはCallback URLの設定です。
今回はサンプルのため、ドメイン以外は適当な値を入れました。ここを入れておかないと、エラーとなり、Twitterのログイン画面にリダイレクトしません。
そのため、全ての項目に入力して保存すると、「Keys ans Access Tokens」のタブにConsumer Key(API Key)とConsumer Secret(API Secret)とが表示されますので、メモしておきます。アプリケーションに組み込みます。

expressのインストール

以下の手順でアプリケーションのひな形を生成していきます。

$ cd {project dir}
$ npm init //今回は名前を任意にきめたら後はエンター連打でOKです
$ npm install express –save //フレームワークをインストール
$ npm install express-generator -g //ジェネレーターのインストール
$ npm install express -e //ejsのテンプレートでアプリケーションを作成
$ npm install //パッケージをインストール

passportのインストール

認証ライブラリである、passportをnpmからインストールしていきます。
今回はTwitterで認証するため、passport-twitterもインストールします。
セッション管理のモジュールも一緒にインストールしておきましょう。

$ npm install passport –save //passport本体のインストール
$ npm install passport-twitter –save //twitter認証用のインストール
$ npm install express-session –save //セッションモジュール

 

ここまでのディレクトリ構造は以下のようになるかと思います。

├── app.js
├── bin
│ └── www
├── node_modules

├── package.json
├── public
│ ├── images
│ ├── javascripts
│ └── stylesheets
│ └── style.css
├── routes
│ ├── index.js
│ ├── oauth.js //後で追加します。
│ └── users.js
└── views
├── error.ejs
└── index.ejs

ログインボタン画面の作成

この章から、実際にコードを書いていきましょう。
まずは、views/index.ejsを編集してログインボタンを設置。
ちなみに装飾はmaterializecss.comで装飾していきます。
こちらはcdnからの読み込みです。
また、ログイン後はボタンを非表示にして、自身の画像と表示名を表示するようにします。

<% if(Object.keys(session).length > 0) { %>
<div><img src="<%= session.user.photos[0].value %>"></div>
<div><%= session.user.displayName %></div>
<% } else { %>
<a href="/oauth" class="btn-large waves-effect waves-light" style="text-transform: none;">Twitterでログイン</a>
<% } %>

認証の実装

ログインボタンをクリックしたら、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の記事一覧をみる ▶
  • 誤字を発見した方はこちらからご連絡ください。
  • ガジェット通信編集部への情報提供はこちらから
  • 記事内の筆者見解は明示のない限りガジェット通信を代表するものではありません。