ブラウザからTwitter APIを呼ぶためのCORSプロキシサーバを書いた

GitHub - slaypni/Corset: Twitter CORS proxy server

Twitter APIはCORSに対応しておらず、Access-Control-Allow-OriginなどのヘッダがHTTPレスポンスに付与されない。そのため、ブラウザはXHRを使って直接Twitter APIを叩くことができない。この問題を解決するひとつの方法が、Twitter APIを中継してクロスドメインを許可するレスポンスを返すサーバを用意することである。この記事で紹介するCorsètは、この中継を行うサーバ側プログラムである。

このコードはGithubからcloneして、すぐに利用できる。以下ではCorsètの特徴と使いかたを紹介する。

Heroku対応

CorsètはHerokuにデプロイして使うことができる。Herokuに関する設定は次のようになる。

heroku create
heroku addons:add redistogo:nano
heroku config:set URL=http://your-server-name.herokuapp.com

セッション管理で用いるRedisを有効にするのと、認証のコールバックで必要となる、自身のURLを環境変数に設定する。

OAuth認証

CorsètからAPIを呼ぶためには、まずCorsètを通じてTwitterの認証を行う。そのために必要な情報はsrc/config.coffeeに記述する。

module.exports =
    sessionSecret: 'Random string'
    oauthConsumerKey: 'Twitter OAuth Consumer key'
    oauthConsumerSecret: 'Twitter OAuth Consumer secret'
    firebaseSecret: 'Firebase Secret'
    originUrl: 'http://example.com'
    callbackUrl: 'http://example.com'

oauthConsumerKeyとoauthConsumerSecretにTwitterのConsumer keyとConsumer Secretを入力する。
callbackUrlには、認証の成功時のリダイレクト先を入力する。
またoriginUrlにAccess-Control-Allow-Originヘッダの値も設定しておく。この値は'*'ではだめで、呼び出し元のURLを入力する。そうしなければクレデンシャルの送信ができない(セッションを持てない)ためである。

src/config.coffeeを書き換えたらcake buildとしてコンパイルしてから、Herokuにpushする。これで認証を行うことができる。URLは"/auth"。

API Call

Corsètは、Consumer KeyやAccess Tokenなどをすべてサーバ側で持ち、ブラウザとはセッションを張ることでAPIの呼び出しを代行する。そのためブラウザはAPIを呼ぶとき、XHRでwithCredentials=trueとしてリクエストを送る必要がある。呼び出しURLは"https://api.twitter.com"を"http://your-server-name.herokuapp.com/api"と置き換えるだけでよい。

Firebase Auth Token

オプション機能。src/config.coffeeのfirebaseSecretを設定することで、FirebaseのCustom Loginで利用するTokenを取得できるようになる。URLは"/auth/firebase"。