Google Calender API v3をChrome Extensionから使ってイベント登録する。

2015/10/27追記

現バージョンのRight Click to Calendarはこの記事で使用している方法で認証を実装していません。(chrome.identity APIを使用しています。)
詳細は次の記事を参照してください。 | Right-Click to CalendarのOAuth2認証系をchrome.identity APIで修正。 – return $lock;


GoogleカレンダーAPIバージョン3登場 – 今までのAPIは非推奨 | マイナビニュース
Google Calender API v1とv2が2014年の11月くらいに使えなくなることと、新しいAPIの勉強も兼ねて去年の10月末にカレンダー用の拡張を更新しました。
Chrome ウェブストア – Right-Click to Calendar
その時は時間がなかったのと、使ってるライブラリの仕様を理解しないで作ったので、何度も再認証が必要になるという意味が分からないことになってました。

今回は使用したライブラリの使い方も兼ねてイベント登録の方法を書きたいと思います。
ライブラリは以下を使用しました。
borismus/oauth2-extensions · GitHub

長いので続きで書きます。

あと、これとは別にカレンダー用のスクリプトを書いたのですが、自分が大学の時にいた研究室の共用カレンダーに謎の文字列を爆撃してて死にそうになりました。
カレンダーのIDを自動で取得+自動で投稿する際は気をつけないと大変なことになるので気をつけてください。
Continue Reading

Chrome ExtentionからOAuth.ioを使ってTwitterのAccessTokenを取得する。

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://の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://“を指定してください。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