Backbone.jsでOAuth2.0のためのAuthorizationヘッダを仕込む

hasumikin is a programmer.


フロントにBackbone.js(今回の例ではMarionetteJSでも同様です)、バックエンドにRailsなどによるAPIサーバという構成を考えましょう。

OAuth2.0には、アクセストークンをAuthorizationヘッダに入れて認証状態をサーバに通知するという仕様があります(これ以外の仕様もありますがここでは触れません)。これを全リクエストに自動でセットするにはどうしたらよいでしょうか?

Backbone.Modelのインスタンスは、#fetch()、#save()、#destroy()のメソッド発行時に内部でかならず#sync()という関数を通ります、ですからこの部分でAuthorizationヘッダをセットするようにオーバライドしてあげればいいのです。

ファイル名:AuthedModel.coffee

# RequireJSを利用しています
define [
  "backbone"
  'jquery'
  'jquery.cookie' #jQueryクッキープラグインです
], (Backbone, $) ->
  Backbone.Model.extend
    sync: ->
      $.ajaxSetup
        #ここでは、アクセストークンをクッキーに保存していると仮定します
        headers: { 'Authorization': "Bearer #{$.cookie('access_token')}" }
      # ↓この行だけが本来のBackbone.Model.sync()の内容
      return Backbone.sync.apply(this, arguments);

上のようにBackbone.Modelを拡張したAuthedModelベースクラス的なものをつくり、各Modelではこれを継承します。このように:

ファイル名:SampleModel.coffee

define [
  'AuthedModel'
], (AuthedModel) ->
  SampleModel = AuthedModel.extend
    urlRoot: -> "/api/sample"
  
  Sample = new SampleModel()

これだけで、Sample.fetch() などのリクエストにかならずアクセストークンがくっついて飛んでいきます。あとはサーバ側で認証状態を確認すればOK。

この方法はOAuthに限らず、いろいろ応用できますね。

サーバサイドセッションを利用しないことによるステートレス設計、つまりスケールアウトのしやすさにもつながります(たぶん)。

しまもんとお約束だよ!

セキュリティ上の問題が発生しても責任は負いかねますので、各要件にあわせて適切にご利用ください。