[NodeJS] Google、Facebook、TwitterのOAuth認証を実装する

こんにちは、@yoheiMuneです。
今日は、node.jsのpassportというモジュールを用いて、Google, Facebook, TwitterのOAuth認証を実装する方法をブログに書きたいと思います。

OAuth認証を簡単に実装できるPassportモジュール

node.jsでOAuthを実装するにはいくつかの方法がありますが、Passportというnpmモジュールが大変便利です。
有名どころの認証も含め140種類以上をサポートしているらしく、各種認証の実装も似たように行うことができるので、 学習コストが低く簡単に導入できると感じました。

Passportは、本体モジュールが１つと、あとは使う認証先毎にモジュールが用意されています。
例えば、GoogleのOAuthを使う場合には、以下の2つをインストールします。

$ npm install passport -- save

$ npm install passport-google --save

それでは、具体的なOAuthの認証を見て行きましょー。

GoogleのOAuth認証を行う

以下で記載している手順の最新版は、http://passportjs.org/guide/google/を確認ください。

とさっそくですが、Passportで行うGoogle認証は、OAuthではなくOpenIDを利用した形式です。 OAuthではないですが、認証を他サービスを利用できるので、OAuthの代替として使っていけると思います。

PassportでGoogleの認証をするために、以下のモジュールをインストールします。

$ npm install passport-google --save

これで準備は完了です。
続いて実装方法ですが、以下の3ステップで行います。

• １、Configurationの実装
• ２、Routingの実装
• ３、HTMLの実装

１つずつ見て行きます。

１、Configurationの実装

passportを利用する部分を以下のように実装します。

// モジュール準備
var passport = require('passport');
var GoogleStrategy = require('passport-google').Strategy;

// Passportを利用する実装
passport.use(new GoogleStrategy({
    // 以下のreturnURL先をRoutingで実装します
    returnURL: 'http://www.example.com/auth/google/return',
    realm: 'http://www.example.com/'
  },
  // 認証が終わったら呼び出される関数です
  function(identifier, profile, done) {
    // identifierがopenID
    // profileがユーザー情報（例：profile.displayName）
    // done関数を実行して処理終了を通知

    // 以下例では、openIdを元にサイト内でユーザーを特定して、
    // 次の処理（=Routing）へ移るように実装されています。
    User.findOrCreate({ openId: identifier }, function(err, user) {
      done(err, user);
    });
  }
));

PassportのGoogle認証用のStrategyクラスを利用して、認証を実装します。

２、Routingの実装

続いてNode.jsのExpressなどを使った場合の、ルーティング設定を行います。

// 認証を開始する為のURL
app.get('/auth/google', passport.authenticate('google'));

// 認証終了後のGoogleからのコールバックに対応するURL
app.get('/auth/google/return', 
  passport.authenticate('google', { successRedirect: '/',
                                    failureRedirect: '/login' }));

もし、上記の実装でdone(err, user)で設定したuserを扱いたい場合には、以下のように実装します。

// 認証終了後のGoogleからのコールバックに対応するURL
app.get('/auth/google/return', function (req, res, next) {
    passport.authenticate('google', function (err, user) {
        // 必要に応じてresponseを作ったり、cookieの制御を行う。
    })(req, res, next);
});

３、HTMLの実装

最後にGoogle認証を開始するHTMLを作成します。

<a href="/auth/google">Sign In with Google</a>

このリンクをクリックすることで、上記に実装したGoogle認証を実行することが出来ます。
いい感じに簡単です☆

FacebookのOAuth認証を行う

以下で記載している手順の最新版は、http://passportjs.org/guide/facebook/を確認ください。

FacebookのOAuth認証を行う為には、まずFacebookアプリ登録ページでアプリとして登録する必要があります。
登録すると、「AppID」と「App Secret」という値が提供されるので、その値を後続の処理で利用します。
またFacebookアプリ登録では、ログイン可能なURLを１つしか指定できない？ようなので、開発と本番など環境毎にアプリ登録する必要があるようです（勘違いだったらすみません）。

アプリの登録が終わったらPassportを用いた実装を行います。実装内容はGoogle認証と同じ手順となります。

１、Configurationの実装

Passportを利用して、FacebookのOAuth認証のリクエストを扱う部分を実装します。

// モジュールロード
// passport-facebookモジュールを事前にnpm installしておく必要があります。
var passport = require('passport')
  , FacebookStrategy = require('passport-facebook').Strategy;

// リクエスト送信とコールバックの処理
passport.use(new FacebookStrategy({

    // アプリ登録した際のAppIdとAppSecretを指定します。
    clientID: FACEBOOK_APP_ID,
    clientSecret: FACEBOOK_APP_SECRET,
    // ログイン許可のあるドメインでコールバックを指定する必要があります。
    callbackURL: "http://www.example.com/auth/facebook/callback"
  },
  function(accessToken, refreshToken, profile, done) {
    User.findOrCreate(..., function(err, user) {
      if (err) { return done(err); }
      done(null, user);
    });
  }
));

２、Routingの実装

続いてRoutingの実装です。Google認証の場合と、同じ感じです。

// このURLが呼ばれたら、Facebook認証を開始します。
app.get('/auth/facebook', passport.authenticate('facebook'));

// もし認証時にFacebookで利用する権限を拡大したい場合には、以下のように拡大したい権限を指定します。
// passport.authenticate('facebook', { scope: ['read_stream', 'publish_actions'] });

// コールバックに対応する処理を記載します。
app.get('/auth/facebook/callback', 
  passport.authenticate('facebook', { successRedirect: '/',
                                      failureRedirect: '/login' }));

３、HTMLの実装

最後に、上記認証を開始する為の入り口となるHTMLを記載します。

<a href="/auth/facebook">Login with Facebook</a>

これで、FacebookのOAuth認証の実装が完了です。

TwitterのOAuth認証を行う

以下で記載している手順の最新版は、http://passportjs.org/guide/twitter/を確認ください。

最後にTwitterのOAuth認証を行う方法です。手順はFacebookとだいたい同じ感じです。
まずはTwitterへアプリケーション登録を行います。Twitterアプリケーション登録で、アプリケーションを登録する必要があります。 Facebookと異なり、開発環境や本番環境が違えど、１つの登録があれば大丈夫のようです。

Webアプリケーションで使いたいため、コールバックURLの指定を行います。 指定を行わない場合は、認証コードが発行され、そのコードをユーザーがアプリに登録する必要が出てくるようです。

アプリ登録が終わったら、実装を行います。

１、Configurationの実装

Passportを通して、OAuth認証を行う部分を実装します。

// モジュールロード
// passport-twitterモジュールを事前にnpm installしておく必要があります。
var passport = require('passport')
  , TwitterStrategy = require('passport-twitter').Strategy;

passport.use(new TwitterStrategy({
    // 上記アプリ登録で取得したキーを指定します。
    consumerKey: TWITTER_CONSUMER_KEY,
    consumerSecret: TWITTER_CONSUMER_SECRET,
    // callbackで受け取りたいURLを指定します。
    callbackURL: "http://www.example.com/auth/twitter/callback"
  },
  // Callback時の処理を記載します。
  function(token, tokenSecret, profile, done) {
    User.findOrCreate(..., function(err, user) {
      if (err) { return done(err); }
      // ここではユーザーが存在すれば、次の処理へ移ります。
      done(null, user);
    });
  }
));

２、Routingの実装

続いてRoutingの設定です。

// 認証を開始する処理を記載します。
app.get('/auth/twitter', passport.authenticate('twitter'));

// コールバックで呼び出された際の処理を記載します。
app.get('/auth/twitter/callback', 
  passport.authenticate('twitter', { successRedirect: '/',
                                     failureRedirect: '/login' }));

３、HTMLの実装

最後に上記の認証開始URLを踏む為の、HTMLを記載します。

<a href="/auth/twitter">Sign in with Twitter</a>

これでTwitterのOAuth認証の実装が完了しました。

最後に

各種サービスを用いた認証処理は、各サービス毎に採用している企画が違うし、 同じOAuthでも少しずつ違いがあったりと、それぞれを実装するのはものすごく大変です。 このPassportはそんなめんどくさいところを隠蔽してくれているので、大変ありがたいライブラリです。 またコールバック時の情報の受け取り方も一貫しているので、１つ実装すると他のも実装しやすくて大変助かります。

node.jsでOAuth認証を実装する場合には、今後ぜひ使って行きたいライブラリだと感じました。

最後までご覧頂きましてありがとうございました。