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

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

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

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

サンプルコード

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

html

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

<html>
<head>
	<script type='text/javascript' src="jquery.js"></script>
	<script type='text/javascript' src='api.js'></script>
</head>
<body>
<div class="main-content">
	<section>
		<ul class="result"></ul>
		<input type="button" class="btn" value="表示する" />
	</section>
</div>
</body>
</html>

PHP

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

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

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

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

<?php
//proxy.php

	mb_http_output('utf-8');
	mb_internal_encoding('utf-8');
	header('Content=Type: text/xml;charset=UTF-8');

	//エンドポイントのURIとフォーマットパラメータを変数に入れる
	$uri_rest = "http://api.gnavi.co.jp/RestSearchAPI/20150630/"; //レストラン検索API

	//APIアクセスキーを変数に入れる
	$acckey = "a6154b84e515ec****************************";

	//返却値のフォーマットを変数に入れる
	$format = "json";

	//キーワード設定
	$freeword = 'コーヒー,カフェ,珈琲,喫茶,喫茶店'; 

	//get送信されたデータを取得
	if (isset($_GET["pref"])) {
		$pref = $_GET['pref'];
	} else {
		$pref = 'PREF13';
	}

	//URL組み立て
	$url = sprintf("%s%s%s%s%s%s%s%s%s%s%s", $uri_rest, "?keyid=", $acckey, "&format=", $format, "&freeword=", $freeword, "&pref=", $pref);

	//API実行
	echo file_get_contents($url);

JavaScript(jQuery)

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


//api.js

jQuery(function() {

	jQuery('.btn').on('click', function(){

		//get送信、戻り値取得
		jQuery.getJSON('proxy.php', {
			//必要に応じてAPI用のパラメータをセットする
			pref:PREF01
		})
		.done(function(result){
			//データ表示
			for ( var i in result.rest ){
				shop_image1: result.rest[i].image_url.shop_image1
				jQuery('.result').append('');
			}
		})

	});

});

まとめ

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

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

サンプルコード

html

PHP

JavaScript(jQuery)

まとめ

関連

コメントをどうぞ！コメントをキャンセル