メインコンテンツまでスキップ

APIキーを秘密にする

公開済みウィジェットのコードは誰でも読めるため、APIキー、パスワード、トークンをコードに書き込まないでください。秘密の値をどこに置くかは、それが誰のものかによって決まります。

自分のキー：非公開入力項目​

天気サービスの自分のアカウントのように、全員に共通の1つのキーをウィジェットで使う場合は、非公開入力項目として保存します。読み取れるのは、自分のウィジェットだけです。保存した後は自分も含めて誰も値を見られず、ウィジェットを追加する人が入力する必要もありません。

  1. ウィジェットスタジオで、ファイル > 入力項目を選びます。
  2. 非公開入力項目タブを開き、新しいシークレットを作成を選びます。
  3. API_KEYなどの名前と、値を入力して、シークレットを追加を選びます。
入力項目ダイアログの非公開入力項目タブ。API_KEYという名前の新しいシークレットとその値、シークレットを追加ボタンがある入力項目ダイアログの非公開入力項目タブ。API_KEYという名前の新しいシークレットとその値、シークレットを追加ボタンがある

ほかの入力項目と同じようにuseInputsで読み取り、ヘッダーに入れてAPIに送ります。

import { useFetch } from "~lib/use-fetch";
import { useInputs } from "~lib/use-inputs";

const { API_KEY } = useInputs();

const { data } = useFetch<Weather>("https://api.example.com/weather", {
  headers: { "X-Api-Key": API_KEY },
});

知っておきたいこと：

  • 保存した値は表示も編集もできません。変更するには、いったん削除してから追加し直してください。
  • 変更はすぐに反映されます。公開しなくても、すべてのフレームに反映されます。ウィジェットのすべてのバージョンで、同じ非公開入力項目を共有します。
  • リミックスには引き継がれません。ウィジェットをリミックスした人は、自分で値を追加する必要があります。

利用者のキー：機密入力項目​

自分のアカウントの情報を表示する場合など、利用者一人ひとりに自分のキーが必要なときは、機密タイプの入力項目で入力してもらいます。ほかの入力項目と同じように動作しますが、パスワード欄のように入力した内容が隠されます。

サービスへのサインイン​

Google、GitHub、Spotifyなど、利用者がサインインして使うサービスには、代わりに連携を使います。利用者が一度サインインすると、ウィジェットはその人の代わりにサービスを呼び出すためのトークンを受け取ります。