リクエスト内のパラメータ名と値をURLエンコード

広告

続いてリクエストのパラメータ名と値をURLエンコードします。ここでパラメータが以下であったとします。 

http://webservices.amazon.com/onca/xml
?Service=AWSECommerceService
&AWSAccessKeyId=00000000000000000000
&Operation=ItemLookup
&ItemId=0679722769
&ResponseGroup=ItemAttributes,Offers,Images,Reviews
&Version=2009-03-31
&Timestamp=2009-01-01T12:00:00Z

※タイムスタンプの値は最終的に前のページで解説した方法で取得しますが、取り合えずサンプルページに載っている値を使って同じ署名を取得できるかどうかを試していきます。

パラメータにだけを取り出した以下のようなオブジェクトを作成します。 

var para = {
  "Service":"AWSECommerceService",
  "AWSAccessKeyId":"00000000000000000000",
  "Operation":"ItemLookup",
  "ItemId":"0679722769",
  "ResponseGroup":"ItemAttributes,Offers,Images,Reviews",
  "Version":"2009-01-06",
  "Timestamp":"2009-01-01T12:00:00Z"
};

パラメータ名はアルファベットのみなので値だけをURLエンコードします。今回はencodeURIComponent関数を使っています。 

var para = {
  "Service":"AWSECommerceService",
  "AWSAccessKeyId":"00000000000000000000",
  "Operation":"ItemLookup",
  "ItemId":"0679722769",
  "ResponseGroup":"ItemAttributes,Offers,Images,Reviews",
  "Version":"2009-01-06",
  "Timestamp":"2009-01-01T12:00:00Z"
};

for(var pname in para){
  para[pname] = encodeURIComponent(para[pname]);
}

これで必要なURLエンコードが完了しました。

ただしTitleプロパティなどに「(」や「!」が含まれる値を指定した場合、これらの文字もURLエンコードしておかないと認証に失敗しました。encodeURIComponent関数ではこれらの文字をエンコードしないため手動で変換するためのものを「完成形」に掲載してあります。

サンプル

では簡単なサンプルで試してみます。

sample2_1.html 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>署名認証テスト</title>
<script type="text/javascript" src="./js/script2_1.js"></script>
</head>
<body>

<p>
ボタンを押して下さい
</p>

<p>
<input type="button" name="checkbutton" value="check" onclick="getSignature()" />
</p>

<div id="output" style="width: 500px; height: 100px"></div>

</body>
</html>

script2_1.js 

function getSignature(){
  var para = {
    "Service":"AWSECommerceService",
    "AWSAccessKeyId":"00000000000000000000",
    "Operation":"ItemLookup",
    "ItemId":"0679722769",
    "ResponseGroup":"ItemAttributes,Offers,Images,Reviews",
    "Version":"2009-01-06",
    "Timestamp":"2009-01-01T12:00:00Z"
  };

  var html = "";

  html += "<p>";
  for(var pname in para){
    html += pname + ":" + para[pname] + "<br />";
  }
  html += "</p>";

  for(var pname in para){
    para[pname] = encodeURIComponent(para[pname]);
  }

  html += "<p>URLエンコード後</p>";

  html += "<p>";
  for(var pname in para){
    html += pname + ":" + para[pname] + "<br />";
  }
  html += "</p>";

  document.getElementById('output').innerHTML = html;
}

上記を実際にブラウザ見てみると次のように表示されます。

リクエスト内のカンマ(,)とコロン(:)をURLエンコード

ボタンを押すと次のように表示されます。

リクエスト内のカンマ(,)とコロン(:)をURLエンコード

( Written by Tatsuo Ikura )