ネットショップの機能を拡張するために多くのマーチャントが助けを必要としています。もしマーチャントの売上促進に役立つアプリのアイディアを持っているのであれば、Shopify APIを利用することで実現できるかもしれません。APIはショップの商品目録のダウンロードや、テーマの修正などを可能にします。
この記事では、1つのショップにアクセスしてAPIコールを作成するまでに必要なことを説明します。読者は開発の基礎知識があることを想定しています。例としてPHPのコードを掲載しますが、ここで扱う機能を実装するためにほとんどの開発言語を使用できます。
始める前に
このガイドでは、アプリを実行してShopify APIと連携させる各ステップを解説していきます。先に進む前に、(まだ準備ができていない場合には)まず以下のことを確認してください。
1. Shopifyパートナーアカウントに登録します。無料です!
2. ログインしたらこちらからAPIキーを作成します。ほとんどのオプションは自明の内容ですが、コールバックURLフィールドにはみなさんが作業するドメインを入力する必要があります。Shopifyはこのドメインのみにトークンを送信します。たとえばローカルマシンで開発をおこなう場合、http://localhost/と設定することになります。
3. ログイン後、左側のメニューの「アプリ管理」をクリックし、「アプリを作成する」をクリックします。
「カスタムアプリ」、または「公開アプリ」を選択した後、アプリに好きな名前を付けてください。「アプリURL」には作業ドメインに /install.php を付加したものを入力します。ローカル環境での開発の場合は、 http://localhost/install.phpとします。このとき必要に応じて、サーバーのポートナンバーを入力します(例:http://localhost:8888/install.php)。
※アプリの種類についてはこちらのブログも参照してください。
「ホワイトリストに登録されたリダイレクトURL」のフィールドには上記と同じドメインを入力しますが、今回は/generate_token.php を付加します。たとえば、ローカル環境での場合は、https://localhost/generate_token.phpとなります。
※注意:リダイレクトURLはhttpsが必須となります。ローカル環境での構築が難しい場合は、こちらのチュートリアルにあるようにngrokなどのトンネルコマンドを使うか、Paas環境(Herokuなど)にソースコードをデプロイしてご利用ください。
これらを入力後「アプリを作成する」を押します。
4. 「APIキー」と「APIシークレットキー」をメモします。この認証情報が、これから必要になります。
この記事のPHPコードのサンプルはこちらでダウンロードできます。これから以下で表示するサンプルコードは、すべてこのスクリプトからのものです。コアコンセプトを学びやすくするため、このコードは手続き的なスタイルで書いていますが、本番環境の場合にはチェックや最適化がもっと必要になるはずです。
アクセストークンを発行する
Shopify APIを使ってストアデータを利用するには、まずストアによる認証が必要です。つまり、マーチャントがある特定の目的のために(例:新規商品を作成するなど)アプリのインストールと承認をおこなう必要があるのです。このプロセスはOAuthと呼ばれるアプリ間でのコミュニケーションを実施する安全で一般的な方法によって処理されます。複雑そうに聞こえますが心配はいりません、だれでもすぐにマスターできます。
この記事ではアプリをユーザーが承認して最終的にAPIを介したショップへのアクセスを可能とするトークン発行のための特定のURLを、OAuthによって作成します。下記のフローチャートは、そのために必要なステップの概略を示しています。
ステップ1:ショップ情報の収集
Shopifyマーチャントがアプリのインストールをアプリストアでリクエストすると、そのリクエストはショップのパラメータを付加されてアプリURLに送られます。ショップパラメータの値は、そのマーチャントのmyshopifyドメイン名となります。例:http://localhost/install.php?shop=johns-apparel.myshopify.com
このインストールリクエストは、ブラウザに直接このURLを貼り付けることで再現可能です。ショップのパラメータの値は自分のShopify開発ストアのドメインで置き換えます。
ステップ2:インストールの承認
ストアオーナーの「myshopify.com」のURLを得たら、アプリをユーザーが承認できるURLにリダイレクトする必要があります。このURLのフォーマットは下記のようになります。
https://{shop}.myshopify.com/admin/oauth/authorize?client_id={api_key}&scope={scopes}&redirect_uri={redirect_uri}
{shop}
ユーザーの"myshopify.com" URLのサブドメインです。
{api_key}
前述した提供されたAPIキーです。
{scopes}
ストアオーナーに承認してほしい許可のリストです。たとえば注文の読み込みと商品の修正をする権限が欲しい場合、read_ordersとwrite_productsをリクエストします。
{redirect_uri}
ユーザーが次に移動するURLです。これは後述のステップ3でトークンを発行するスクリプトのURLとなります。
PHPコードサンプル
// Set variables for our request | |
$shop = "demo-shop"; | |
$api_key = "1r30mrvCFMfq2DLGuIXyY2veEJVgTtDD"; | |
$scopes = "read_orders,write_products"; | |
$redirect_uri = "http://localhost/generate_token.php"; | |
// Build install/approval URL to redirect to | |
$install_url = "https://" . $shop . ".myshopify.com/admin/oauth/authorize?client_id=" . $api_key . "&scope=" . $scopes . "&redirect_uri=" . urlencode($redirect_uri); | |
// Redirect | |
header("Location: " . $install_url); | |
die(); |
ステップ3:アクセスコードの取得
ユーザーがインストールを承認したら、認証コードがクエリの文字列として URLに返されます。下記がその例です。
http://localhost/generate_token.php?code=6a94694acf0339e9eb8068d8f4718eea&hmac=710205c27e7f780b0cd7ee58146388094be1b9e4762e3752840d1de21deeac5d&shop=johns-apparel.myshopify.com×tamp=1516399193 |
「?」の前の部分は$redirect_uriとマッチします。
「?」の後の部分はいくつかのパラメータで、「code」「hmac」「timestamp」といった要素が含まれています。「code」はOAuthのプロセスで使用する認証コードです。ほかの2つのパラメータは、リクエストが実際にShopifyからのものであることを検証するためのものです。はじめにそれに取り掛かります。
ステップ3.b:データの検証
上記と同じフォーマットで悪意のあるハッカーがリクエストの送信を試みたらどうなるでしょう? それが悪意ある攻撃なのか、実際のShopifyからのリクエストなのか、どうやって知ることができるのでしょうか? 「hmac」と「timestamp」が提供されるのは、そこに理由があります。HMAC SHA256ダイジェストがコンピュータ処理されることによって、送信される「hmac」パラメータと比較でき、そのリクエストが正当なものかどうか判断できます。
PHPコードサンプル
// Set variables for our request | |
$shared_secret = "TBB5wltKarRtKn5mUVZck9RxHePNN6Jo"; | |
$params = $_GET; // Retrieve all request parameters | |
$hmac = $_GET['hmac']; // Retrieve HMAC request parameter | |
$params = array_diff_key($params, array('hmac' => '')); // Remove hmac from params | |
ksort($params); // Sort params lexographically | |
// Compute SHA256 digest | |
$computed_hmac = hash_hmac('sha256', http_build_query($params), $shared_secret); | |
// Use hmac data to check that the response is from Shopify or not | |
if (hash_equals($hmac, $computed_hmac)) { | |
// VALIDATED | |
} else { | |
// NOT VALIDATED – Someone is trying to be shady! | |
} |
次のステップは「code」の値によってショップからアクセストークンを取得します。これをするには最初のAPIの呼び出しを行います。
ステップ4:アクセスコードをショップトークンに変換する
これまでのステップでトークンを発行するのに必要なものが手に入っています。APIキー、アプリのシークレットキー認証、そしてアクセスコードです。
Shopifyには特別なAPI呼び出しのエンドポイントがあり、アクセスコードをショップの永続的なAPIトークンに変換することができます。
/admin/oauth/access_token
PHPコードサンプル
// Set variables for our request | |
$query = array( | |
"client_id" => $api_key, // Your API key | |
"client_secret" => $shared_secret, // Your app credentials (secret key) | |
"code" => $params['code'] // Grab the access key from the URL | |
); | |
// Generate access token URL | |
$access_token_url = "https://" . $params['shop'] . "/admin/oauth/access_token"; | |
// Configure curl client and execute request | |
$ch = curl_init(); | |
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); | |
curl_setopt($ch, CURLOPT_URL, $access_token_url); | |
curl_setopt($ch, CURLOPT_POST, count($query)); | |
curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($query)); | |
$result = curl_exec($ch); | |
curl_close($ch); | |
// Store the access token | |
$result = json_decode($result, true); | |
$access_token = $result['access_token']; |
上記のコードでは、Shopifyサーバーへポストをおこない、 demo-shop.myshopify.comのためにOAuthが生成したトークンを、$tokenの変数に代入しています。これはショップのパスワードのようなものなので、安全な場所で管理することを忘れないでください。
ステップ5:APIの呼び出し
このステップをやり終えたらハードな部分はすべて完了したことになります!関連するスコープの承認がすでに得られていればショップのAPIを呼び出せます。
要約すると各APIの呼び出しには以下の詳細が必要です。
- ショップのAPIトークン
- ショップの「myshopify.com」URL
- 特別なパラメータと一緒にコールするAPIエンドポイント
このガイドでリクエストした許可(スコープ)の1つは、「商品情報の読み込みと書き込み」なのでこれを処理しましょう。必要なエンドポイントは次のようになります。
/admin/products.json
PHPコードサンプル
// Set variables for our request | |
$shop = "demo-shop"; | |
$token = "SWplI7gKAckAlF9QfAvv9yrI3grYsSkw"; | |
$query = array( | |
"Content-type" => "application/json" // Tell Shopify that we're expecting a response in JSON format | |
); | |
// Run API call to get all products | |
$products = shopify_call($token, $shop, "/admin/products.json", array(), 'GET'); | |
// Get response | |
$products = $products['response']; |
プロセスが正常に処理されれば、$productsの変数は以下のようなJSON文字列を含んでいることになります。
返されたJSONには、IDナンバーが370733088という商品1つだけが含まれています。この商品の修正をおこなうとしましょう。次のコードを書いてこのIDを自動で変数に組み入れ、この商品の作業ができるようにします。
// Convert product JSON information into an array | |
$products = json_decode($products['response'], TRUE); | |
// Get the ID of the first product | |
$product_id = $products['products'][0]['id']; |
これで前述のIDナンバーが$product_idの変数に保存されました。この商品の名前を変えたいとしましょう。既存の「Test」という名前ではユーザーフレンドリーではありません。$product_idの変数を利用してどの商品の作業をしようとしているのかをShopifyに知らせる必要があります。
// Modify product data | |
$modify_data = array( | |
"product" => array( | |
"id" => $product_id, | |
"title" => "My New Title" | |
) | |
); | |
// Run API call to modify the product | |
$modified_product = shopify_call($token, $shop, "/admin/products/" . $product_id . ".json", $modify_data, 'PUT'); | |
// Storage response | |
$modified_product_response = $modified_product['response']; |
$modify_data 配列にはShopifyに送信する必要な情報がすべてあります。この配列はshopify_call() 関数によってJSONに変換されます。より詳しいAPI呼び出しの要件はShopify API ドキュメントに記載されています。データトランザクションのメソッドがPUTであることにも気づかれたと思います。これはShopifyにダウンロードや削除ではなくデータの修正をするということを伝えています。
このAPI呼び出しが成功すると$modified_product_responseの変数として、アップデートされたJSON文字列が得られます。
ご覧のように商品の名前(product title)がアップデートされ、送信した$modify_dataの変数と一致しています。ShopifyはAPIを予測可能で一貫性のあるものにしているので、ほとんどのAPIエンドポイントで同様のやり方が可能です。
API呼び出しを簡単に行う方法
Shopifyは開発を行う際にAPI呼び出しをするためにGUIを使用し、大幅な時間節約をしています。そうすれば欲しいデータがAPIに含まれているかを確実に知る前に、PHPのコードを大量に書く必要がありません。
実践あるのみ
実際に少し使ってみればShopify APIがフレキシブルでアクセスしやすいものだと分かると思います。多くのことが実現出来て様々なエンドポイントの拡張もサポートされています。
何かご質問があれば、Shopifyコミュニティに書き込んでください!
原文:Alex Markov 翻訳:深津望
続きを読む
よくある質問
アクセストークンとは何ですか?
Shopifyの認証方法は独自の仕様ですか?
ShopifyのAPIはlocalhostでも利用できますか?
アクセストークンは、APIを使うたびに発行する必要がありますか?
Shopifyパートナープログラムでビジネスを成長させる
マーケティング、カスタマイズ、またはWebデザインや開発など提供するサービスに関係なく、Shopifyパートナープログラムはあなたを成功へと導きます。プログラムの参加は無料で、収益分配の機会が得られ、ビジネスを成長させる豊富なツールにアクセスできます。情熱的なコマースコミュニティに今すぐ参加しましょう!