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.
Ajout de variables d'environnement dans une application CRA
UN React application 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 avec REACT_APP comme ça:
REACT_APP_API_KEY="your_api_key"
Vous pouvez désormais accéder à la clé API dans n'importe quel fichier de l'application React à l'aide de process.env.
constante API_KEY = processus.env. REACT_APP_API_KEY
Assurez-vous d'ajouter .env au fichier .gitignore pour empêcher git de le suivre.
Pourquoi vous ne devriez pas stocker les clés secrètes dans .env
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.
Stockage des variables d'environnement dans le code backend
Comme mentionné ci-dessus, vous devez créer une application backend distincte pour stocker les variables secrètes.
Par exemple, le Le point de terminaison de l'API ci-dessous récupère les données à partir d'une URL secrète.
constante apiURL = processus.env. API_URL
app.get('/data', asynchrone (req, res) => {
constante réponse = attendre récupérer (apiURL)
constante données = réponse.json()
res.json({données})
})
Appelez ce point de terminaison d'API pour récupérer et utiliser les données dans le frontal.
constante données = attendre récupérer('http://backend-url/data')
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.
Utilisation de Next.js pour stocker des variables d'environnement
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.
exporterasynchronefonctiongetStaticProps() {
constante res = attendre récupérer (process.env. API_URL)
constante data = res.json()
revenir {accessoires: { Les données }}
}
Les données seront disponibles sur la page via des accessoires, et vous pouvez y accéder comme suit.
fonctionMaison({ Les données }) {
revenir (
<div>
// rend les données
</div>
);
}
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 :
API_URL=https ://secret-url/de3ed3f
Next.js vous permet également de créer des points de terminaison d'API dans le pages/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 le pages/api/getData.js fichier en tant que route API.
exporterdéfautasynchronefonctiongestionnaire(demande, résolution) {
constante réponse = attendre récupérer (process.env. API_URL)
constante données = réponse.json()
revenir res.json({données})
}Vous pouvez maintenant accéder aux données renvoyées via le /pages/api/getData.js point final.
Garder les clés API secrètes
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.