ガジェット通信

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

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

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

こんにちは。エンジニアのまろCです。
前回から始まったpassportを使ったoath認証実装コラムの第二弾です。
第一弾はこちら。

今回はFacebook認証を実装していきたいと思います。
前回のソースに追記していく形となりますので、node.jsの準備、プロジェクトの作成は前回の記事を参照ください。
それでは、早速進めていきましょう!

Facebook Developerにアプリケーション登録

まずは、こちらのURLにアクセスします。

https://developers.facebook.com/
※執筆時のアプリケーション取得方法です。変更があった場合は、適宜読み替えてください。

また、Facebook連携をするときのアプリケーション登録はほとんどこの方法でできるので、今回以外の場合にも役に立つかと思います。

 

新しく、アプリケーションを登録するので、上部メニューの「My Apps」から「Add a New App」を選択します。

 

プラットフォームはウェブサイトを選択します。

 

アプリ名は今回適当に設定しますが、本番ではドメインやサービス名を登録します。

 

カテゴリも同じく、サービスにあったものを選択します。

 

Tell us about your websiteの項目には、自分で持っているサイトを入力します。
ただし、ログイン画面のドメインと一致してる必要がありますので、ローカルでテストする場合は、http://localhost:3000と入力する必要があります。
今回は、「localhost:3000」と入力します。

ここまでが登録フローです。

 

実装に必要なものは、「App ID」と「App Seacret」になりますので、画面上部のメニューの「My Apps」から、先ほど登録したアプリケーション、「login-test」を選択します。すると、「App ID」と「App Seacret」が表示されますので、メモします。

passport-facebookのインストール

今回使用するモジュールはnpmからインストールします。
プロジェクトのディレクトリに移動して、以下のコマンドを叩きます。

$ npm install passport-facebook –save

こちらの準備はこれでOKです。

ログインボタンの作成

ここから前回のソースに手を加えていきます。まずはログイン画面に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の記事一覧をみる ▶
  • 誤字を発見した方はこちらからご連絡ください。
  • ガジェット通信編集部への情報提供はこちらから
  • 記事内の筆者見解は明示のない限りガジェット通信を代表するものではありません。

TOP