[API]phpでAPIにアクセスしてgetJSON()で取得する。APIキーを隠蔽する方法。

カテゴリー:
jQuery

以前の投稿でぐるなびAPIを利用したSPAのサンプルをご紹介しましたが、JavaScriptで作ったため、本来公開すべきではないAPIキーを隠蔽できない、という問題がありました。

それを解決する方法として、PHPでAPIキーを使って情報を取得し、それをJavaScript側で取得する、という方法があるとわかったのでサンプルコードを書いてみました。

実際の動作は以下のdemoから確認できます。

サンプルコード

demoのコードを簡略化したものを以下にご紹介します。

html

ボタンをクリックするとイベントが発生し、.resultの中にAPIから取得したデータを表示させます。

PHP

APIのURLにパラメーターを付けてアクセスするとAPIからデータが戻ってくるのですが、(ぐるなびAPIの場合)必須のパラメーターのひとつにAPIキーがあります。

つまり、JavaScriptのイベントなどで非同期にAPIにアクセスする場合、jQueryを使うならajax()やgetJSON()などを使ってAPIキーを含んだパラメーター付きのURLにアクセスする必要があるのですが、jsファイルなどにAPIキーを埋め込むと当然隠蔽できません。

なので、phpなどでサーバー側でAPIにアクセスして処理結果を得られる仕様にすれば、APIキーが隠蔽できる、ということになります。

というわけで以下のphpでAPIを叩いてデータを取得。JavaScriptに戻す値を生成します。

JavaScript(jQuery)

getJSON()の戻り値として、(result)の中にproxy.phpで生成されたJSONデータが入っています。それを使ってhtmlを生成します。

まとめ

非同期通信の勉強を始めたばかりで、この投稿でご紹介したphpと連携するやり方も今まで知りませんでした。

慣れた方にとっては標準的なやり方なのだろうと思いますが、これはなかなかおもしろいですね。非同期通信関連の処理は他にもいろいろと面白い機能があるようで、今後も楽しみに勉強を続けて行きたいと思います!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です