node_js-twitter-oauth

いままで、FlashのActionScript3.0や、Ajaxを使ったり、PHPなんかも駆使してOAuthを実装していました。node.jsではnode-oauthというモジュールを使えば、いとも簡単にOAuth認証ができてしまいます。いとも簡単とはいえ、はまったところがありましたので、今回はnode-oauthを使ってTwitterをOAuth認証する方法と、はまってしまったポイントを抑える内容にしたいと思います。下記の参考サイトに載っていたソースを元に補足します。

検証、制作環境など

  • Mac OS 10.6 山ライオンって強いの?(´・ω・`)
  • ターミナル.app
  • node.js -v v0.8.4
  • express version 3.0.0rc3
  • node-oauth node_modules
  • localhost:3000で検証

TwitterのOAuth認証ができるまでの手順

  1. dev.twitter.comで「Create an app」します。
  2. Website:にはlocalhost:3000を入力したいところですが、Twitterの入力フォームで弾かれるので、localhostと同じURLのhttp://127.0.0.1:3000を入力します。
  3. Callback URL:には、http://127.0.0.1:3000/auth/twitter/callbackと入力しておきます。
  4. 必要な情報を入力して、Consumer keyConsumer secretを取得します。※1
  5. ターミナル.appを開いて、express -sセッションオプションを付けて雛形を作ります。※2
  6. node-oauthをnpm installします。
  7. app.jsを開いて、コーディングします。
  8. $ node app.js でサーバーを立ちあげてアクセスします。
  • ※1:Consumer keyとConsumer secretの扱いは大切に。
  • ※2:expressでセッションを使うオプションを使うところが重要なポイントです。

node-oauthのインストール方法

やはり毎度おなじみnpmを使います。expressを使って雛形を作るまでやってみましょう。

//-e はejs、-sはセッションを使うオプション
$ express -e -s oauth_sample

   create : oauth_sample
   create : oauth_sample/package.json
   create : oauth_sample/app.js
   create : oauth_sample/public
   create : oauth_sample/public/javascripts
   create : oauth_sample/public/images
   create : oauth_sample/public/stylesheets
   create : oauth_sample/public/stylesheets/style.css
   create : oauth_sample/routes
   create : oauth_sample/routes/index.js
   create : oauth_sample/views
   create : oauth_sample/views/index.ejs

   install dependencies:
     $ cd oauth_sample && npm install

   run the app:
     $ node app

$ cd oauth_sample
$ npm install
npm WARN package.json application-name@0.0.1 No README.md file found!
npm http GET https://registry.npmjs.org/express/3.0.0rc3
npm http GET https://registry.npmjs.org/ejs
npm http 304 https://registry.npmjs.org/express/3.0.0rc3
npm http 304 https://registry.npmjs.org/ejs
npm http GET https://registry.npmjs.org/connect/2.4.3
npm http GET https://registry.npmjs.org/commander/0.6.1
npm http GET https://registry.npmjs.org/range-parser/0.0.4
npm http GET https://registry.npmjs.org/mkdirp/0.3.3
npm http GET https://registry.npmjs.org/cookie/0.0.4
npm http GET https://registry.npmjs.org/crc/0.2.0
npm http GET https://registry.npmjs.org/fresh/0.1.0
npm http GET https://registry.npmjs.org/methods/0.0.1
npm http GET https://registry.npmjs.org/send/0.0.3
npm http GET https://registry.npmjs.org/debug
npm http 304 https://registry.npmjs.org/connect/2.4.3
npm WARN package.json connect@2.4.3 No README.md file found!
npm http 304 https://registry.npmjs.org/cookie/0.0.4
npm http 304 https://registry.npmjs.org/commander/0.6.1
npm http 304 https://registry.npmjs.org/range-parser/0.0.4
npm http 304 https://registry.npmjs.org/mkdirp/0.3.3
npm http 304 https://registry.npmjs.org/crc/0.2.0
npm http 304 https://registry.npmjs.org/fresh/0.1.0
npm http 304 https://registry.npmjs.org/methods/0.0.1
npm WARN package.json methods@0.0.1 No README.md file found!
npm http 304 https://registry.npmjs.org/send/0.0.3
npm http 304 https://registry.npmjs.org/debug
npm http GET https://registry.npmjs.org/mime/1.2.6
npm http GET https://registry.npmjs.org/qs/0.4.2
npm http GET https://registry.npmjs.org/formidable/1.0.11
npm http GET https://registry.npmjs.org/bytes/0.1.0
npm http GET https://registry.npmjs.org/pause/0.0.1
npm http 304 https://registry.npmjs.org/mime/1.2.6
npm http 304 https://registry.npmjs.org/formidable/1.0.11
npm http 304 https://registry.npmjs.org/bytes/0.1.0
npm http 304 https://registry.npmjs.org/qs/0.4.2
npm http 304 https://registry.npmjs.org/pause/0.0.1
ejs@0.8.2 node_modules/ejs

express@3.0.0rc3 node_modules/express
├── methods@0.0.1
├── fresh@0.1.0
├── range-parser@0.0.4
├── cookie@0.0.4
├── crc@0.2.0
├── commander@0.6.1
├── debug@0.7.0
├── mkdirp@0.3.3
├── send@0.0.3 (mime@1.2.6)
└── connect@2.4.3 (pause@0.0.1, bytes@0.1.0, qs@0.4.2, formidable@1.0.11)

//node-oauthをインストールします。
$ npm install oauth
npm WARN package.json application-name@0.0.1 No README.md file found!
npm http GET https://registry.npmjs.org/oauth
npm http 304 https://registry.npmjs.org/oauth
oauth@0.9.8 node_modules/oauth

必要なモジュールなどの準備ができました。では、app.jsを編集して行きましょう。

app.jsを編集

/**
 * Module dependencies.
 */

var express = require('express')
  , routes = require('./routes')
  , http = require('http')
  , path = require('path')
  , OAuth = require('oauth').OAuth; //node-oauthをrequire


var app = express();

app.configure(function(){
  app.set('port', process.env.PORT || 3000);
  app.set('views', __dirname + '/views');
  app.set('view engine', 'ejs');
  app.use(express.favicon());
  app.use(express.logger('dev'));
  app.use(express.bodyParser());
  app.use(express.methodOverride());
  //express -s をつけると以下の2行が付きます。
  app.use(express.cookieParser('your secret here'));
  app.use(express.session());
  app.use(app.router);
  app.use(express.static(path.join(__dirname, 'public')));
});

app.configure('development', function(){
  app.use(express.errorHandler());
});

app.get('/', routes.index);

http.createServer(app).listen(app.get('port'), function(){
  console.log("Express server listening on port " + app.get('port'));
});


//aouth
var oa = new OAuth(
  "https://api.twitter.com/oauth/request_token",
  "https://api.twitter.com/oauth/access_token",
  "Consumer key", //twitter appで発行されたConsumer keyを入力。
  "Consumer secret", //twitter appで発行されたConsumer secretを入力。
  "1.0",
  "http://127.0.0.1:3000/auth/twitter/callback",
  "HMAC-SHA1"
);

//auth/twitterにアクセスするとTwitterアプリケーション認証画面に遷移します。
app.get('/auth/twitter', function(req, res){
  oa.getOAuthRequestToken(function(error, oauth_token, oauth_token_secret, results){
    if (error) {
      console.log(error);
      res.send("yeah no. didn't work.");
    } else {
      req.session.oauth = {};
      req.session.oauth.token = oauth_token;
      console.log('oauth.token: ' + req.session.oauth.token);
      req.session.oauth.token_secret = oauth_token_secret;
      console.log('oauth.token_secret: ' + req.session.oauth.token_secret);
      res.redirect('https://twitter.com/oauth/authenticate?oauth_token='+oauth_token);
    }
  });
});

app.get('/auth/twitter/callback', function(req, res, next){
  if (req.session.oauth) {
    req.session.oauth.verifier = req.query.oauth_verifier;
    var oauth = req.session.oauth;
    oa.getOAuthAccessToken(oauth.token,oauth.token_secret,oauth.verifier, 
    function(error, oauth_access_token, oauth_access_token_secret, results){
      if (error){
        console.log(error);
        res.send("yeah something broke.");
      } else {
        req.session.oauth.access_token = oauth_access_token;
        req.session.oauth.access_token_secret = oauth_access_token_secret;
        console.log(results);
        res.send("worked. nice one.");
      }
    });
  } else {
    next(new Error("you're not supposed to be here."));
  }
});

これで準備が完了しました。node.jsを実行して、127.0.0.1:3000にアクセスしましょう。

node.jsを実行

$ node app.js
Express server listening on port 3000
http://127.0.0.1:3000にアクスします。
http://127.0.0.1:3000

expressのデフォルト画面が見えれば、正しくnode.jsが起動しています。では、次にTwitter アプリケーション認証画面へ行きます。下記のURLにアクセスしてみて下さい。

http://127.0.0.1:3000/auth/twitter/にアクスします。
http://127.0.0.1:3000/auth/twitter/

アクセスすると、Twitterアプリケーション認証画面へ遷移します。画面右側には、先ほど作ったTwittr Appの名前がついていると思います。

Twitterのユーザー名とパスワードを入力してログインします。すると「worked. nice one.」と書いているページにリダイレクトして、URLにTwitterアカウントのAccess tokenAccess token secretcallbackで返って来ていると思います。OAuth認証できましたね!

ここで一度、ターミナルに戻ってログを確認してみましょう。

ターミナルのログにも、ちゃんとログインしたユーザー名が表示しています。お見せできませんが、oauth_tokenとoauth_verifierも表示されています。色々長くなりましたが、とても簡単にnode.jsでTwitterのOAuth認証ができたと思います。

まとめ

このnode-oauthは、Twitterだけではなく、facebook, github, foursquare, google, Janrainをサポートしているとマニュアルには書いてあります。これを使うことで、簡易ログインシステムを大手SNSに代行してもらう形もできますし、巨大なソーシャルグラフを有効活用することもできます。今度はチャットウェブアプリに、node-oauthを用いた、簡易ログイン機能を追加してみたいと思います。あと、よかったらこの記事をつぶやいて、ついでにTwitterフォローして下さい。;)

follow me!
https://twitter.com/creatorcotapon
【Node.js】node-oauthを使ってTwitterのOAuth認証する方法
Pocket

Tagged on:             

One thought on “【Node.js】node-oauthを使ってTwitterのOAuth認証する方法

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です