認証情報と環境#
Visualizer SDK を使うオンラインストアと、必要に応じて Product Import API の認証情報を設定します。公開ドキュメントを読むだけでは、認証情報は作成されず、ストアへのアクセス権も付与されません。
認証情報の用途と配置場所#
| 連携 | 認証情報 | 配置場所 |
|---|---|---|
| オンラインストアの SDK | Shop ID と Publishable Key | オンラインストアの SDK スクリプト属性 |
| Product Import API | Client ID と Client Secret | バックエンドまたは安全なサーバー側ジョブ |
Publishable Key はブラウザーでの使用を想定しています。Client Secret はサーバー側で保管する必要があります。テーマ、公開 Markdown、クライアントのバンドル、サポートに送るスクリーンショットに貼り付けないでください。
認証情報の取得と設定#
マーチャントダッシュボードを開き、正しいストアを選択して、SDK 連携と設定を確認します。Client ID と Client Secret については、導入時の案内に従ってください。
Allowed Origins (CORS) の設定#
SDK のテストまたは公開の前に、正しいストアのダッシュボード → 設定を開き、Allowed Origins (CORS) を探します。
- SDK を読み込むオンラインストアのオリジンをカンマで区切って入力します。例:
https://example.com, https://www.example.com, https://shop.example.com。 - プロトコルとホスト名、必要に応じてポートを指定し、ページのパス、クエリ文字列、フラグメントは含めません。プレビュー環境やステージング環境で SDK をテストする場合は、そのオリジンも追加します。
http://localhost:3000は、実際のローカルテストのオリジンである場合にのみ使用してください。 - 保存 をクリックし、オンラインストアを再読み込みして SDK を再度テストします。
顧客が実際にアクセスする URL を確認してください。https://example.com と https://www.example.com は異なるオリジンです。ローカルやプレビューでのテストが成功しても、公開サイトのオリジンが設定されているとは限りません。
サンプル値の置き換え#
サンプルでは <SHOP_ID>、<PUBLISHABLE_KEY>、<YOUR_CLIENT_SECRET> などのプレースホルダーを使用します。意図した環境でのみ置き換えてください。HTML の例では、山かっこが < と > にエンコードされている場合があります。その表記も含めてプレースホルダー全体を置き換えます。
SDK と商品インポートの環境#
ブラウザーは同じストアの Shop ID と Publishable Key を指定して https://sdk.ideal.house/sdk.js を読み込みます。Product Import API は引き続き https://sdkapi.ideal.house を使用し、ドキュメントで指定されたサーバー側の認証を行います。
上記の説明に従って、プレビュー用と本番用のオンラインストアのオリジンをそれぞれ設定します。公開前に準備済みのテスト商品を使用し、公開前チェックリストを完了してください。