Blog

Aug 20, 2023

Comment stocker et accéder aux clés API dans une application React

Vous pouvez faire beaucoup avec les API, mais assurez-vous de garder vos clés et mots de passe en sécurité

Vous pouvez faire beaucoup avec les API, mais assurez-vous de garder vos clés et mots de passe en sécurité.

Les applications Web modernes s'appuient sur des API externes pour des fonctionnalités supplémentaires. Certaines API utilisent des identifiants tels que des clés et des secrets pour associer des requêtes à une application particulière. Ces clés sont sensibles et vous ne devez pas les transmettre à GitHub, car n'importe qui pourrait les utiliser pour envoyer une requête à l'API à l'aide de votre compte.

Ce tutoriel vous apprendra comment stocker et accéder en toute sécurité aux clés API dans une application React.

Une application React que vous créez en utilisantcréer-réagir-app prend en charge les variables d'environnement prêtes à l'emploi. Il lit les variables qui commencent par REACT_APP et les rend disponibles via process.env. Cela est possible car le package dotenv npm est installé et configuré dans une application CRA.

Pour stocker les clés API, créez un nouveau fichier appelé .env dans le répertoire racine de l'application React.

Ensuite, préfixez le nom de la clé API avecREACT_APPcomme ça:

Vous pouvez désormais accéder à la clé API dans n'importe quel fichier de l'application React à l'aide de process.env.

Assurez-vous d'ajouter .env au fichier .gitignore pour empêcher git de le suivre.

Tout ce que vous stockez dans un fichier .env est accessible au public dans la version de production. React l'intègre dans les fichiers de construction, ce qui signifie que n'importe qui peut le trouver en inspectant les fichiers de votre application. Utilisez plutôt un proxy principal qui appelle l'API au nom de votre application frontale.

Comme mentionné ci-dessus, vous devez créer une application backend distincte pour stocker les variables secrètes.

Par exemple, le point de terminaison d'API ci-dessous récupère les données d'une URL secrète.

Appelez ce point de terminaison d'API pour récupérer et utiliser les données dans le frontal.

Désormais, à moins que vous ne poussiez le fichier .env sur GitHub, l'URL de l'API ne sera pas visible dans vos fichiers de construction.

Une autre alternative consiste à utiliser Next.js. Vous pouvez accéder aux variables d'environnement privées dans la fonction getStaticProps().

Cette fonction s'exécute pendant la construction sur le serveur. Ainsi, les variables d'environnement auxquelles vous accédez dans cette fonction ne seront disponibles que dans l'environnement Node.js.

Ci-dessous un exemple.

Les données seront disponibles sur la page via des accessoires, et vous pouvez y accéder comme suit.

Contrairement à React, vous n'avez pas besoin de préfixer le nom de la variable avec quoi que ce soit et vous pouvez l'ajouter au fichier .env comme ceci :

Next.js vous permet également de créer des points de terminaison d'API dans lepages/API dossier. Le code de ces points de terminaison s'exécute sur le serveur, vous pouvez donc masquer les secrets du frontal.

Par exemple, l'exemple ci-dessus peut être réécrit dans lepages/api/getData.jsfichier en tant que route API.

Vous pouvez maintenant accéder aux données renvoyées via le/pages/api/getData.jspoint final.

Pousser les API vers GitHub n'est pas conseillé. N'importe qui peut trouver vos clés et les utiliser pour faire des requêtes API. En utilisant un fichier .env non suivi, vous empêchez que cela se produise.

Cependant, vous ne devez jamais stocker de secrets sensibles dans un fichier .env dans votre code frontal car n'importe qui peut le voir lorsqu'il inspecte votre code. Au lieu de cela, récupérez les données côté serveur ou utilisez Next.js pour masquer les variables privées.

Mary est rédactrice à MUO basée à Nairobi. Elle détient un B.Sc en physique appliquée et en informatique, mais aime davantage travailler dans le domaine de la technologie. Elle code et écrit des articles techniques depuis 2020.