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);
        });
});

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

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.