弊社独自で開発したAPI取得(Shopify以外)について

Topic summary

課題: 自社開発した外部APIをShopifyストアに連携させたい。このAPIはリクエストヘッダーに認証情報(CodeやKEY)を追加してデータを取得する仕組み。

技術的な懸念点:

  • JavaScriptのfetchを使用したサンプルコードが提示されているが、コード内にCodeやKEYなどの認証情報が直接記述されている
  • Liquidのように可視化される言語で実装すると、これらの機密情報が露出してしまうリスクがある

質問の焦点:

  • 認証情報を安全に扱いながら、外部APIからデータを取得してShopifyストアに出力する方法を模索している
  • Shopifyアプリ開発が必要かどうかについても確認を求めている

過去の類似質問を参照しつつ、より具体的な実装方法やドキュメントに関する情報を求めている状況。

Summarized with AI on November 11. AI used: claude-sonnet-4-5-20250929.

お世話になっております。
以下の質問と被ってしまいますが本件についてお伺いしたいことがあります。

https://community.shopify.com/topic/2493449

弊社独自で開発した外部のAPIをShopifyのストアにデータを出力できるようにしたいと思っております。

弊社独自で開発した外部のAPIはリクエストヘッダーに追加してデータを出力できるような仕様になっておりまして、JavaScriptの場合は以下のようにコードで記載すればいいのですが、Code・KEYなど可視化されそれを避けたい為、Liquidの様に可視化されない言語を利用してリクエストしてデータを出力できるようにしたいと思っております。

いろんなドキュメントをみているのですが、それに関しての情報が記載されておらずお伺いさせていただきました。

<script type="text/javascript">

const myHeaders = new Headers();
myHeaders.append("Code", "xxxx");
myHeaders.append("KEY", "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx");
const requestOptions = {
method: "GET",
headers: myHeaders,
redirect: "follow"
};

fetch("https://xxxxxxxxxxxxxxxxxxxxxxxxxx/test/", requestOptions)
.then((response) => response.json())
.then((result) => console.log(result))
.catch((error) => console.error(error));
</script>

それに関してのドキュメントが見当たらないので、やはり、アプリ開発しかないのでしょうか・・・?

以上、宜しくお願いします。