ガジェット通信

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

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

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

こんにちは。最近インタラクティブなできごとに心を震わされてoFさわっています。まろCです。

passportを使ったoauth認証のコラムも、今回で最終回です。

最後にGoogleアカウントでの認証を実装して、主要なSNSからのログインを締めたいと思います。

これまで通り、前回のソースに追記していく形です。
この記事が初めてという方で、どのようなアプリケーション構成なのか知りたい方は第1回の記事を参照してみてください。

それでは、早速進めていきましょう。

Google Developer登録

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

https://console.developers.google.com/

こちらから、認証に必要な「クライアント ID」、「クライアント シークレット」を取得しましょう。

 

まずは、画面上部のプロジェクト一覧のプルダウンから、「プロジェクトの作成…」をクリックします。

 

プロジェクト名を決めます。今回はlogintestという名称とします。

 

アプリケーションを登録できたら、現在のアプリケーションが、先ほど登録した「logintest」になっていることを確認し、左メニューのAPIと認証メニュー内の認証情報をクリックします。
追加のボタンから、「OAuth2.0 クライアントID」を選択します。

 

クライアントID作成画面が表示されると思います。初めて作成する場合、同意画面を設定するように促されるので、作成していきます。

 

サービス名はプロジェクト名と合わせておきましょう。上のような入力となります。

 

クライアントIDを作成する画面に戻りますので、「ウェブアプリケーション」を選択します。
つづいて、認証済のリダイレクトURIにログイン後、戻ってくるURLを指定します。今回は「http://localhost:3000/goauth/callback」を設定します。ここは、それぞれのアプリケーションの実在するURLを設定しましょう。

作成すると、上のように表示されますので、メモしておきます。

続いて実装フェーズに進みましょう。

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

TOP