GraphAIでのAPIKEYの扱いについて

APIキー管理の重要性

GraphAIに限らず、APIキーの適切な管理は非常に重要です。APIキーには 公開可能なもの と 公開してはいけないもの の2種類があります。

---

公開可能なAPIキー

公開可能なAPIキーはWebサイトに埋め込んでも問題のないキーです。
具体例として以下のものが挙げられます：

• Google MapsやFirebaseの公開キー
• StripeやShopifyの公開キー

これらのキーは公開されていても安全な理由：

• ブラウザのReferrer制限 によりアクセス範囲を制限できる
• 単なる 識別子 として使用され、データの書き込みなどの操作ができない

---

公開してはいけないAPIキー

一方で、StripeやShopifyのSecret Key など、他者に絶対に見せてはいけないAPIキーも存在します。
これらが漏洩した場合、以下の対応が必要です：

• サービスの即時停止
• APIキーの無効化と新しいキーへの速やかな更新

---

GraphAIにおけるAPIキーの取り扱い

GraphAIでは、OpenAIのAgentなど、APIキーが必要なAgentが存在します。また、GraphAIのAgentは サーバ と ブラウザ の両方で動作することが可能です（技術的制約がない限り）。
このため、APIキーの 公開可否 と GraphAI上での安全な取り扱い を理解する必要があります。

OpenAI Agentの例

GraphAIのOpenAI Agentでは、以下2つの方法でAPIキーを渡すことができます：

• 環境変数 を利用してnpmパッケージに直接APIキーを渡す（サーバのみ）
• params を指定してAPIキーを渡す（サーバ・ブラウザ両方で使用可能）

{ params: { apiKey: "xxx" } }

---

注意点: ブラウザ環境と環境変数

VueやReactのCLI環境では、APIキーを環境変数に設定してブラウザに渡す方法が一般的ですが、以下に注意が必要です：

• 環境変数はサーバサイドでのみ安全に扱える ものです。
• ブラウザ側にAPIキーを渡すと、ビルド後のJavaScriptにハードコードされてしまい、キーが露出するリスクがあります。
  これは、コードに直接APIキーを書き込むのと同じ危険性 があります。

---

利用シナリオごとのAPIキー管理方法

1. 運営側で用意したAPIキーを使い、不特定多数のユーザーが利用するサービス

• 環境変数 を使い、サーバ側でAPIキーを管理します。
• APIの利用料金は運営側が負担するため、ユーザーごとの利用制限を検討する必要があります。

2. 不特定多数のユーザーが個別のAPIキーを使うWebサービス

• 運営側はAPIキーを用意せず、ユーザーに個別のAPIキーを用意してもらいます。
• ユーザーがブラウザ上でAPIキーを入力し、Local Storage などに保存します。
• ブラウザから直接OpenAIへアクセス するため、運営側のサーバにはAPIキーを保存しません。
  ブラウザ側のセキュリティが保たれていれば安全です。

3. 個人向けソフトウェアや開発環境（React/Vueをブラウザで動作させる場合）

• params に直接APIキーを埋め込む方法が利用できます。
  ただし、APIキーがコードにハードコードされる ことになるため、第三者に渡らない状況でのみ使用することが推奨されます。

4. 個人向けデスクトップアプリケーション（Electronなど）

• アプリの設定値として、ユーザー自身にAPIキーを入力してもらいます（シナリオ2と同様）。
• サービス運営側がAPIキーを提供する場合 は、ユーザーごとに異なるAPIキーを発行することが推奨されます。
• APIキーが流出して他で転用される可能性も考慮し、適切な対策を講じる必要があります。

---

まとめ

APIキー管理は、シナリオに応じて適切な方法で取り扱うことが不可欠です。特に、公開・非公開の区別や利用者ごとの責任範囲を明確にし、安全な運用を徹底しましょう。