GOODTABLE鎌倉オープン
GOODTABLE鎌倉オープン
2015.09.01

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

まろ

passport-google-oauthのインストール

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

$ npm install passport-google-oauth --save

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

ログインボタンの作成

ここから前回のソースに手を加えていきます。まずはログイン画面にFacebookログインボタンを作成しましょう。
views/index.ejsを編集していきます。
Facebookログインボタンの下に、以下のコードを記述します。

<a href="/goauth" class="btn-large waves-effect waves-light" style="text-transform: none;">Googleでログイン</a>

Googleだと、アイコン画像も取得できます。

ログインボタンができました。

認証の実装

前回、前々回を読んでいただいている方々にはもう、同じようなことしかしていないとお気づきでしょう。
ここからも、同じ処理で少し名称を変えていくだけです。しかし、ここがモジュールを通した実装による最大のメリットなのです。

---中略---
//モジュールの読み込み
var GoogleStrategy = require('passport-google-oauth').OAuth2Strategy;

---中略---
//取得したキーの記述
var GOOGLE_CONSUMER_KEY = 'XXXXXXXXXXX';
var GOOGLE_CONSUMER_SECRET = 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX';

---中略---
//ルーターの設定
var goauth = require('./routes/goauth');

---中略---
//passport-google-oauthの使用
passport.use(new GoogleStrategy({
    clientID: GOOGLE_CONSUMER_KEY,
    clientSecret: GOOGLE_CONSUMER_SECRET,
    callbackURL: "http://localhost:3000/goauth/callback" //ココをクライアントID取得時に指定したURLと一致させる。
  },
  function(token, tokenSecret, profile, done) {
    process.nextTick(function () {
            return done(null, profile);
        });
  }
));
---中略---

rooter/にfboauth.jsとoauth.jsをコピーして'twitter'と記述したところを'google'に書き換えます。このファイルとの結びつきは先ほどルーターの設定で記述したので、フレームワーク側が裏側で処理してくれます。

戻り先はindexのままとしておき、セッションに取得できた情報を入れてどのSNSでログインしても表示できるようにします。

ここまでが、実装部分です。

実行

実行も、もう慣れましたね。

$ cd {project_dir}
$ DEBUG=./:* ./bin/www

http://localhost:3000にアクセスして、Googleでログインボタンをクリックします。

ログインを選択して、

承認すると、

スクリーンショット 2015-08-26 11.57.59

ログインできました!

まとめ

ここまで、第3回にわたってoauth認証を実装してきました。
その他のサービスで認証を実装する場合、passcodeのサイトから、passportを介してログイン認証を実装できるモジュールが検索できます。
例えばInstagram、Dropbox、Tumblr。有名ドコロはほとんど守備範囲です。

そして、基本的には第1回からここまで作成してきたやり方で実装が可能です。どちらかと言えば、各サービスのクライアントIDの取得に手間がかかったかもしれませんね。
サービスの気分で画面が変わったりするので、こちらは執筆時の情報として、もし変わっていた場合はご了承ください。

それでは、いい認証ライフを!

  • 1
  • 2