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

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.

UTILISEZ LA VIDÉO DU JOUR

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 utilisant cré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.

comment trouver le titre d'une vidéo youtube supprimée

const API_KEY = process.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.

const apiURL = process.env.API_URL 
app.get('/data', async (req, res) => { 
	const response = await fetch(apiURL) 
	const data = response.json() 
	res.json({data}) 
})

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

const data = await fetch('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.

comment débloquer iphone 6 sprint gratuit

Ci-dessous un exemple.

export async function getStaticProps() { 
    const res = await fetch(process.env.API_URL) 
    const data = res.json() 
    return {props: { data }} 
}

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

function Home({ data }) { 
  return ( 
    <div> 
      // render data 
    </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.

4B479C8FF1390AFADECE0CFFD337D1B5229075

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.

comment supprimer un compte cashapp

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.