トラハ は現在ものすごくシンプルな作りになっている。

そこで以前使ったことがあるnuxt.jsで置き換えてみようと思って作り変えていてやっと認証周りの部分まで実装が進んできた。

Omniauthを使った現在のフローは極力崩さずに@nuxtjs/authを使えないかと思い試行錯誤した結果が今回の方法である。

基本的にOmniauthの時に行っていたコールバック時の処理などには全く手を付けていないのでその辺を再実装する手間は省けた。

シーケンス図

Nuxt.js(@nuxtjs/auth)とRails(omniauth)でTwitterとOAuth認証を行うシーケンス図

説明

ポイントはTwitterからRoRにコールバックが返ってきた時に有効期限の短い(ここでは1分)のJWTを付与してNuxt.js側にリダイレクトしている。

Nuxt.js側は受け取ったトークンを元に this.$auth.loginWith('local', { data: this.$route.query }) でログイン用APIにJWTを渡し、その値をもってログイン処理をし、有効期限が長いまたは無しのJWTを発行することによってログインを完了としている。

既にOmniauthの設定、コールバック時のユーザー登録等の処理を実装済みだったのでこのような設計になっている。

フロントエンドとバックエンドで基本的に同じドメインを使うようにしているので適宜nginx等で適切な方へプロキシしてあげる必要がある。

主にapi_sigパラメータの生成に関する注意点です。

api_sigというのは、Flickrアプリを登録した際にアプリ毎に提示されるAPI Secretと送信するパラメータをmd5で暗号化した文字列のことです。コレが正しくないと認証が必要なAPIは呼び出すことが出来ません。

jQueryでjsonpアクセス

今回はjQueryからflickr apiを呼び出し、画面へ表示するので、jsonpで呼び出すことになります。また、jqueryからjsonpを呼び出す際に$.ajaxメソッドを使います。簡単に書くと以下のようになります。

$.ajax({
  url: [APIのURL],
  data: [送信パラメータ],
  dataType: 'jsonp',
  jsonp: 'jsonpcallback' // flickr apiのcallback関数のキー名
})

もう少しapi_sigについて説明しておきたいと思います。

api_sigとは、API Secretに送信パラメータのキーを昇順にソートし、キーと値を文字列連結したをさらに連結した値をMD5で暗号化した値になります。簡単に書くとこんな感じになります。

MD5( [API Secret] + [キーと値を文字列連結した値] )

上記の方法で生成した値を送信パラメータの末尾に付与します。

何が問題か？

ココまで書いて、何が問題か分かった方はjQueryを普段から使っている方だと思います。具体的には以下の問題があります。

• callback関数名の動的生成
• cache無効化

これらは全て、jQueryがリクエスト送信時に動的にパラメータに付与する値で、api_sigを生成した時のパラメータと実際に送信した際のパラメータが異なってしまい、flickr側でapi_sigの正当性を検証した時に無効と判断されてしまいます。

以下、それぞれの問題に対する解決案を書いておきます。

callback関数名の動的生成

$.ajaxのオプションとして「jsonpCallback」というのがあり、callback関数を既に定義されている関数で実行したい場合に関数名を指定する事が出来ます。コレを利用します。

ただし、jquery内部の処理を見てみると、送信パラメータにjsonpcallback=[関数名]と指定されている場合にもさらに付与しようとします。コレを避ける為に$.ajaxメソッドに指定するパラメータには下記のような形式で指定します。

jsonpcallback=?

クエスチョンマークを指定すると、jqueryがリクエスト送信時にクエスチョンマークをjsonpCallbackの値で置換してくれます。

cache無効化

dataTypeにscriptもしくはjsonpを指定した場合には、cacheはfalseになってしまうので、jqueryがリクエスト送信時にリクエスト毎にURLが異なるように_=xxxxxのようなハッシュコードをパラメータに付与します。

コレを防ぐ場合には、$.ajaxメソッドのオプションにcache:trueを指定することにより、これらの問題は解決できます。

cacheを有効化しているため、毎回最新の値が欲しい場合には不具合が出てしまうかもしれません。なんとか、標準の方法でcache無効化用のハッシュコードを呼び出し側から指定することが出来ないか、jqueryのソースを追ってみたんですが、提供されていませんでした。hoge=aa&_=&foo=bbのようにアンダースコアをキーに空文字を値に指定することにより、そこが置換されるようです。

ただ、jQuery.now()をオーバーライドすることにより一応可能といえば、可能みたいですが、確実性は呼び出し側の状況に依存すると思います。

とまぁ、ココまで調べたりしたのですが、よくよく考えるとcache:trueを指定した上で、flickr apiとして意味のないパラメータ（アンダースコア等）に乱数を指定するようにすれば、cache:falseを指定した時と同じような効果は出せるかと思います。この方法は、現在は大丈夫のようですが、flickr側がapiとして意味のないパラメータを許容していることが前提になります。