Edited at

OAuth.ioを使うとJavaScriptたった2行でOAuth認証が出来た

More than 1 year has passed since last update.

Chrome-extensionでTwitter認証をしようとしたがcallbackURLの設定がchrome-extension://だと怒られるので探してたら「OAuth.io使うやで」みたいな回答があったので使ってみました

GitHub、Facebook、Twitterなど100種類ほどのSNSの認証を中継してくれるサービスです。

今回はTwitterの認証でやります。


OAuth.io準備

まずは登録してください。

いくつかのSNSでログインも出来ました。


アプリを作成

最初から「Default app」というのが用意されてるのでそちらを使っても問題ないです!

Application name ... お好みの名前を!

Domains available ... 後で説明するので今はデフォルトのままで大丈夫です

左のバーの「Default app」をクリックすると「New app」があるのでそこからアプリを作成します

スクリーンショット 2016-12-30 18.52.25.png


TwitterのKeyを設定

Twitterから取ってきたConsumer KeyConsumer SecretをOAuth.ioに設定します

Twitterの側CallbackURLはhttps://oauth.io/authと設定しておいてください。

左のバーの「Integrated APIs」 → 右上の「Add APIs」をクリック → ポップアップの中で「Twitter」を選択

スクリーンショット 2016-12-30 19.07.20.png

client_idにTwitterのConsumer Key

client_secretにTwitterのConsumer Secret

を入力して保存

スクリーンショット 2016-12-30 19.08.23.png

「Try Auth」をクリックしてTwitterの認証画面が出てくればOAuth.io側の準備は完了です


ドメインの設定

左のバーの「General」から「Domains & URLs whitelist」に書いていきます

今回Chrome extensionから使いたかったのでchrome-extension://と設定します。

また、自分のchrome拡張以外からはアクセスさせたくないので chrome://extensions/から使いたいChrome拡張のIDを取ってきてchrome-extension://xxxxxxxxxxxxxxと設定しました

httpやhttpsでも使えます


JavaScriptから扱う


必要ライブラリを読み込む

$ bower install oauth-js 

bowerでインストールし、それを読み込んで使います


manifest.json

Chrome extensionから使う場合はmanifest.jsonに以下を追記してください

それ以外なら必要ないです

"externally_connectable": {

"matches": ["https://oauth.io/*"]
}


access tokenを取得

たった2行です

OAuth.ioの「General」の「App keys」からPublic Keyを取得し1行目に入れてあげます

OAuth.initialize("public key");

OAuth.popup("twitter", function(err, res) { /* 処理 */});

認証が終わるとコールバックのres.oauth_tokenres.oauth_token_secretに入ってます

1483093435592.jpg

以上になります


APIを叩いてみる

ちなみにコールバック関数内で以下のようにAPIを叩くことができます

OAuth.popup("twitter", function(err, res) {

res.get('/1.1/account/verify_credentials.json')
.done(function(result) {
console.log(result.screen_name);
});
});

これで認証ユーザーのスクリーンネームが取れます