kansiho's memo

ruby, python, javascript. Rails, wordpress, OpenCV, heroku...

OAuthの仕組みとchrome拡張機能への利用

OAuthとは?

facebookの自分のアカウントを今使っているサービスと連携したいと考えている花子」を例に出すと,

facebookに花子が登録した情報や投稿、花子がアクセス権限を持つ各種機能(facebookの友達の情報を見たり投稿を読む)に対し、

花子の許可を受けたほかのサービスがアクセスする ために

花子がサービスに対して許可を与え サービスがfacebookの提供するAPIにアクセスする際に許可を受けていることを証明する

…という一連のフローを、セキュアに実現することを目的とした「アクセス権限の付与」のためのプロトコルです。

ポイントは、連携しようとしているサービスじたいには、facebook の認証情報(パスワードとeメール)を教えなくて良いこと。facebookが、かわりに、「そうだよー、この人はfacebookでこのアカウントを使っているよ。保証するよ。直接パスワードを教えたくないから、代わりに固有のアクセストークンをあげて、これを送ってくれれば今度から花子を通さなくても、連携しているサービスだと連携するよ。」と言ってくれるわけです。

http://image.itmedia.co.jp/ait/articles/1208/27/r20_zu01.jpg ちなみに、OAuthの用語で、

  • 花子のような連携サービスのアカウントの持ち主(主人公):Resource Owner
  • いま使っている, facebookと連携したいサービス:OAuth Client
  • 他サービスの要請によって連携してくれるfacebookのような、OAuthをサポートしたAPIを提供しているサービス:OAuth Server

といいます。

1) Authorization Request

OAuth ClientはユーザーをOAuth Serverにリダイレクトさせます。

2) Authenticate User & Get Approval

リダイレクトを受けたOAuth Serverは、ユーザーを認証し、その後ユーザーに対して該当Clientへのアクセス権限付与を許可するかどうかを尋ねます。

3) Authorization Response(認可レスポンス)

ユーザーがアクセス権限の付与を許可すると、OAuth ServerはユーザーをOAuth Clientにリダイレクトして戻します。この際、リダイレクトURLには、アクセス権限付与を示すトークンが含まれます。

4) Obtain Access Token

アクセストークンを受け取ると、それが期限切れになるか、あるいは無効化されるまでは、(基本的には何度でも)それを使ってAPIにアクセスできます。

ステップバイステップで体験できるサイト

説明を読んでもわかりにくい場合はこちらを。体験しながら学ぶことができます。

f:id:serendipity4u:20170708223451p:plain

OAuthの仕組み丸分かり体験サイト

chrome extensionでOAuth

1) chrome extension OAuth ライブラリをダウンロードしextensionファイルに置く

以下からとってくる。

oauth2-extensions/lib at master · borismus/oauth2-extensions · GitHub

2) Content Scriptに挿入する

"content_scripts": [
  {
    "matches": ["http://www.google.com/robots.txt*"],
    "js": ["oauth2/oauth2_inject.js"],
    "run_at": "document_start"
  }
],

3) access token URL を許可する

"permissions": [
  "https://accounts.google.com/o/oauth2/token"
]

4) background.htmlにて, OAuthライブラリを追加

<script src="/oauth2/oauth2.js"></script>

5) OAuth 2.0 のエンドポイントを設定

クライアントID, クライアントシークレット, APIスコープを明確にして, authorize() メソッドを利用します。Authorize メソッドは新しいウィンドウをポップアップで開いてくれます。

var googleAuth = new OAuth2('google', {
  client_id: '17755888930840',
  client_secret: 'b4a5741bd3d6de6ac591c7b0e279c9f',
  api_scope: 'https://www.googleapis.com/auth/tasks'
});

googleAuth.authorize(function() {
  // Ready for action
});

アクセストークンを利用

step 5 によってユーザーはauth.getAccessToken()メソッドでアクセストークンを得ることができます。

xhr.setRequestHeader('Authorization', 'OAuth ' + myAuth.getAccessToken())

もしくはURLに付加する形

myUrl + '?oauth_token=' + myAuth.getAccessToken();

でOAuthサーバーのAPIを叩くことができます。

参考

OAuth 2.0 from chrome extensions | Boris Smus

Tutorial: OAuth - Google Chrome