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

まろ

2015.09.01

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でログインボタンをクリックします。




ログインを選択して、

承認すると、

ログインできました！
まとめ
ここまで、第3回にわたってoauth認証を実装してきました。

その他のサービスで認証を実装する場合、passcodeのサイトから、passportを介してログイン認証を実装できるモジュールが検索できます。

例えばInstagram、Dropbox、Tumblr。有名ドコロはほとんど守備範囲です。
そして、基本的には第1回からここまで作成してきたやり方で実装が可能です。どちらかと言えば、各サービスのクライアントIDの取得に手間がかかったかもしれませんね。

サービスの気分で画面が変わったりするので、こちらは執筆時の情報として、もし変わっていた場合はご了承ください。
それでは、いい認証ライフを！
         
                         LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
              Webサイト制作の実績・料金を見る