カラーミーショップでAPIをjavascriptを使って取得する方法

カラーミーショップでAPIをjavascriptを使って取得する方法が分かりません。どなたかご教授願います。

カラーミーショップではphpは書けないのでjavascriptで書かないといけないらしいのですが、書き方が分かりません。

私はプログラマー初心者です。
ググってコピペを弄ってというのを毎日繰り返している程度の超初心者です。
調べ方は日付の新しいものを読むようにしております。

業務としてプログラマーをするようになってまだ2カ月程度です。

以下のPHPではデータの出力表示に成功しましたが、同じことをjavascriptで書かないといけないのです。
どうぞよろしくお願いします。

尚以下のPHPは
http://shop-pro.blogspot.jp/2014/04/api-1.html
を参考にさせていただきました。

<?php
header("Content-Type:text/html; charset=UTF-8");// 文字化け対策
$request_options = array(
    'http' => array(
        'method'  => 'GET',
        'header'=> "Authorization: Bearer xxxxx\r\n"
    )
);
$context = stream_context_create($request_options);

$url = 'https://api.shop-pro.jp/v1/products.json?category_id_big=xxxxxxx';
$response_body = file_get_contents($url, false, $context);

$response_json = json_decode($response_body, true);// 連想配列に
//print_r($response_json);// 配列の構造と中身が見られます

//商品名（昇順）& 価格（降順）
foreach ($response_json['products'] as $key => $row) {
    $name[$key]  = $row['name'];
    $sales_price[$key] = $row['sales_price'];
}
array_multisort($name, SORT_ASC, $sales_price, SORT_NUMERIC, SORT_DESC, $response_json['products']);
/*
//更新日時順（降順）
foreach ($response_json['products'] as $key => $row) {
    $update_date[$key]  = $row['update_date'];
}
array_multisort($update_date, SORT_NUMERIC, SORT_DESC, $response_json['products']);
*/

for($i=0; $i<count($response_json['products']); $i++) {
    echo $response_json['products'][$i]['name'];//商品名
    echo "   ";
    echo number_format($response_json['products'][$i]['sales_price']);// カンマ
    echo "円";
    echo "<br />";
    echo "http://xxxxxxx.jp/?pid=";// 商品URL
    echo $response_json['products'][$i]['id'];
    echo "<br />";
    echo $response_json['products'][$i]['simple_expl'];// 商品の簡易説明
    echo "<br />";
    echo "<br />";
}

kei344

2016/07/22 02:20 編集

コードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。

yusan

2016/07/22 02:24

編集致しました。ご指摘ありがとうございます

tanat

2016/07/22 02:32

現在のPHPのソースはご自身で書かれた（内容を正確に理解しているのか）ものですか？どこか参考にしたサイトや書籍があるならその出展と、ソースをどこまで理解されているのか記載されるとより適切な回答があるかと思います。

yusan

2016/07/22 02:42

訂正致しました。ほとんど理解はしておりません。コピペを弄って思うようになればよしみたいな感じでやっております。申訳ありません。

行動規範の内容に同意します

回答1件

ベストアンサー

クライアントサイトだけで同様の動作をするコードは書いてはいけませんし、技術的に書けないこともありえます。

「書いてはいけない」理由

ヘッダーに「Authorization: Bearer xxxxx」のようなトークンを入れることになりますが、JavaScriptという性質上、このページにアクセスできる誰もがこのアクセストークンを入手できてしまいます。つまり、このアクセストークンに紐付いた権限を全世界へ開放することになります。他人のサービスである以上、こんなことをしてはいけません。

「書けないかもしれない」理由

JavaScriptから、特殊なヘッダをつけたリクエストを投げる場合、CORSに則って、クロスドメインでのアクセスを認めているかのチェックが行われます。

もとからJavaScriptアクセスを前提としているようなサーバならともかく、トークンを必要とするようなAPIサーバということを考えると、クロスドメインでのブラウザアクセスは許可する設定でない可能性も大きいです。

投稿2016/07/22 02:35

maisumakun

総合スコア145183

yusan

2016/07/22 03:07

初心者でたいへん申訳ありません。つまり、公開されているHTML内に個人情報→「Authorization: Bearer xxxxx」のようなものをjavascriptで記述してはならないということでだいたい認識はあっていますでしょうか？クロスドメインでデータを受け渡せばいいんですよね？以下のサイトで書いている意味があんまり分からないのですが、こちらを参考にすればできるのでしょうか？ http://shop-pro.blogspot.jp/2014/04/api2.html