Tutorial: OAuth – Google Chrome
chrome_ex_oauth.jsがTwitterで使えなくなっていたので、OAuth.ioのoauth-jsを利用してChrome拡張からTwitterのAccessTokenとSecretを取得してみました。
作業自体は10分あれば完了するというお手軽さです。あまりに簡単だったので感動しました。
ライブラリは以下を使用します。
oauth-io/oauth-js · GitHub
1. OAuth.ioでアプリケーション用のpublic keyを取得する。
OAuth.io – OAuth that just works.
OAuth.ioに登録してPublic keyを取得してください。特にこだわりがない人はDefault appのkeyをそのまま使えばいいと思います。
2. 自分のChrome ExtensionのIDを調べる。
OAuth.ioからOAuth認証を行う場合、当然ながら自分が指定したドメインからのアクセスしか受け付けないため、chrome-extension://<ExtensionのID>のIDの部分を確定させないと認証が実施できません。
chrome://extensions/にアクセスした後、デベロッパーモードでパッケージ化してないアプリをとりあえずなんでもいいので読み込んでIDを確定させてください。
ストアに公開予定の場合は、デバッグ用のローカル内拡張とは別にストアに非公開状態で登録してIDを確定させてください。
3. OAuth.ioにTwitterのConsumer Keyとsecretを設定する。
OAuth.ioのKey Managerから自分が使用したいTwitterアプリケーションのコンシューマーキーとシークレットを登録します。
Key Manager配下のTwitter > addボタンから、”client_id”にConsumer Keyを、”client_secret”にConsumer Secretを設定してください。
4. OAuth.ioのAPIにアクセスできるドメインを設定する。
public keyを使用しているOAuth.ioのアプリケーション（Default app等）のeditをクリックして、ドメインの設定を行います。
ドメインには”chrome-extension://<ExtensionのID>“を指定してください。httpとかhttps以外でもいけるのすごいなと思います。
設定後にTry Authを試してみて、oauth_tokenとsecretが取得できていればOAuth.io側の設定は終了です。
5. Chrome Extension側からOAuth.ioのAPIを使用する。
background.htmlでもoptions.htmlでも自分が使用したいところからAPIを叩けます。
最初にmanifest.jsonを設定しないと認証画面まで飛べないので編集を行ってください。
//manifest.jsonに以下を追加
"externally_connectable": {
"matches": ["https://oauth.io/*"]
}
quick install通りにOAuth.jsまでのパスを指定した後、呼び出したいjsに以下のコードを記述するとOAuth.io経由でTwitterの認証ができてしまいます。
OAuth.initialize("OAuth.ioで取得したpublic key");
OAuth.popup("twitter", function(error, result) {
console.log("oauth_token: " + result.oauth_token); //トークン取得
console.log("oauth_token_secret: " + result.oauth_token_secret);
result.get('/1.1/account/verify_credentials.json').done(function(data) {
alert('Hello ' + data.screen_name); //ユーザーアカウント名取得
});
});
スクリプトは以下のURLを参考にしました。ものすごくお手軽で素敵なのですが、OAuth.io自体がサービス継続してくれないと使えなくなっちゃうのでそこは心配です。
Using OAuth.io within a Chrome Extension · Issue #52 · oauth-io/oauthd · GitHub