ログインボタンの作成
ここから前回のソースに手を加えていきます。まずはログイン画面にFacebookログインボタンを作成しましょう。
views/index.ejsを編集していきます。
Twitterログインボタンの下に以下のコードを記述します。
<a href="/fboauth" class="btn-large waves-effect waves-light" style="text-transform: none;">Facebookでログイン</a>実行してみて気づいたのですが、Facebookログイン時、自身のアイコン画像が取得できませんでしたので画像の有無の条件も追記しておきます。
<div><% if(typeof session.user.photos !== "undefined"){ %><img src="<%= session.user.photos[0].value %>"><% } %></div>Twitterの場合はアイコン画像が取得できますので表示されます。
Facebookログインボタンができました。
認証の実装
表の画面を作成したので、裏側を進めていきます。
まずは、app.jsで下記のように追記していきます。
---中略---
//モジュールの読み込み
var FacebookStrategy = require('passport-facebook').Strategy;
---中略---
//取得したキーの記述
var FACEBOOK_APP_ID = 'XXXXXXXXXXX';
var FACEBOOK_APP_SECRET = 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX';
---中略---
//ルーターの設定
var fboauth = require('./routes/fboauth');
---中略---
//passport-facebookの使用
passport.use(new FacebookStrategy({
clientID: FACEBOOK_APP_ID,
clientSecret: FACEBOOK_APP_SECRET,
callbackURL: "http://localhost:3000/fboauth/callback",
enableProof: false
},
function(accessToken, refreshToken, profile, done) {
process.nextTick(function () {
return done(null, profile);
});
}
));
---中略---基本的は流れはTwitterのときと同じです。
モジュールをかますことのメリットは、それぞれのサービスの仕様を吸収して同じように記述できること。
rooter/にfboauth.jsをoauth.jsをコピーして'twitter'と記述したところを'facebook'に書き換えます。このファイルとの結びつきは先ほどルーターの設定で記述したので、フレームーク側が裏側で処理してくれます。
戻り先はindexのままとしておき、どのSNSでログインしてもセッションに取得できた情報を入れて情報を表示できるようにします。
実行
ここまでで、プログラムの部分は完成です。
実行コマンドで実行してみましょう。
$ cd {project_dir} $ DEBUG=./:* ./bin/www
ログインして・・・
ログインに成功し、セッションから名前を表示することができました。
まとめ
文中にも書きましたが、passportのようにモジュールを介してoauth認証をするメリットは、どのSNSからログインしてもキーの名称を吸収するなどして、サービス間で差異のないようにしてくれるところ。
つまり、開発者がサービスごとの仕様に合わせてコードを書く手間が省けるということです。それによって、コードの簡略化と開発速度の向上が見込めますね。
今回はここまでとし、次回も別のサービスでのログインを実装していきたいと思います。それでは。
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
