ブログ

Aug 20, 2023

React アプリケーションで API キーを保存およびアクセスする方法

Puoi fare molto con l'API, ma mantieni le chiavi e le password al sicuro

API を使用するとさまざまなことができますが、キーとパスワードは安全に保管してください。

最新の Web アプリケーションは、機能を追加するために外部 API に依存しています。 一部の API は、キーやシークレットなどの識別子を使用して、リクエストを特定のアプリケーションに関連付けます。 これらのキーは機密性が高く、あなたのアカウントを使用して API にリクエストを送信するために誰かがキーを使用する可能性があるため、GitHub にプッシュしないでください。

このチュートリアルでは、React アプリケーションに API キーを安全に保存してアクセスする方法を説明します。

を使用して作成した React アプリケーション反応アプリの作成すぐに使える環境変数をサポートします。 REACT_APP で始まる変数を読み取り、process.env を通じて使用できるようにします。 dotenv npm パッケージが CRA アプリにインストールされ構成されているため、これが可能になります。

API キーを保存するには、React アプリケーションのルート ディレクトリに .env という新しいファイルを作成します。

次に、API キー名に接頭辞を付けます。REACT_APPこのような：

process.env を使用して、React アプリ内の任意のファイルの API キーにアクセスできるようになりました。

git による追跡を防ぐために、.env を .gitignore ファイルに必ず追加してください。

.env ファイルに保存したものはすべて、運用ビルドで公開されます。 React はそれをビルド ファイルに埋め込みます。つまり、アプリのファイルを検査すれば誰でもそれを見つけることができます。 代わりに、フロントエンド アプリケーションの代わりに API を呼び出すバックエンド プロキシを使用します。

前述したように、シークレット変数を保存するには別のバックエンド アプリケーションを作成する必要があります。

たとえば、以下の API エンドポイントはシークレット URL からデータを取得します。

この API エンドポイントを呼び出して、フロントエンドでデータを取得して使用します。

これで、.env ファイルを GitHub にプッシュしない限り、API URL はビルド ファイルに表示されなくなります。

もう 1 つの方法は、Next.js を使用することです。 getStaticProps() 関数でプライベート環境変数にアクセスできます。

この関数はサーバー上のビルド時に実行されます。 したがって、この関数内でアクセスする環境変数は、Node.js 環境でのみ使用できます。

以下に例を示します。

データは prop を介してページ上で利用可能になり、次のようにアクセスできます。

React とは異なり、変数名に何かプレフィックスを付ける必要はなく、次のように .env ファイルに追加できます。

Next.js では、API エンドポイントを作成することもできます。ページ/APIフォルダ。 これらのエンドポイントのコードはサーバー上で実行されるため、フロントエンドからのシークレットをマスクできます。

たとえば、上記の例は次のように書き換えることができます。ページ/api/getData.jsファイルを API ルートとして保存します。

これで、返されたデータにアクセスできるようになります。/pages/api/getData.js終点。

API を GitHub にプッシュすることはお勧めできません。 誰でもあなたのキーを見つけて、それを使用して API リクエストを行うことができます。 追跡されていない .env ファイルを使用すると、このような事態が発生するのを防ぐことができます。

ただし、機密シークレットは、コードを検査するときに誰でも見ることができるため、フロントエンド コードの .env ファイルに決して保存しないでください。 代わりに、サーバー側でデータをフェッチするか、Next.js を使用してプライベート変数をマスクします。

Mary は、ナイロビに拠点を置く MUO のスタッフ ライターです。 彼女は応用物理学とコンピューター サイエンスの学士号を取得していますが、テクノロジーの分野で働くことをもっと楽しんでいます。 彼女は 2020 年からコーディングと技術記事の執筆を行っています。