Je suis nouveau pour réagir des applications et je veux stocker la clé de l'API Google Places. Pour le moment, j'ai ces scripts avec des clés dans mon fichier index.html, où dois-je placer ces clés?
3 Réponses :
Vous pouvez créer un fichier Si vous utilisez et vous pouvez accéder à la clé de réaction en utilisant si vous N'utilisez pas Create-React-APP, vous pouvez intégrer le package DOTENV à partir de Ceci Link .env dans la racine de votre projet et charger les touches à l'aide de processus.env. {Nom_name} par exemple Créer-réact-app .env est automatiquement chargé
A-t-il besoin d'être une chaîne comme «quelque chose»?
@Fazalkarim Oui, événement Si vous déclarez un numéro dans .env Cela vous donnera une chaîne elle-même
Idéalement, vos clés devraient provenir de vos fichiers de configuration / environnement. Cette volonté vous donner la flexibilité d'utiliser différentes clés pour différents environnements.
Créer un fichier appelé .env.development.local / .env.Production et ajouter des clés Là comme 'réact_app_google_places_api_key'.
Maintenant, créez un fichier de configuration nommé config.js et ajoutez la ligne suivante à celle-ci 'Export const google_places_api_key = processus.env.react_app_google_places_api_key'.
Maintenant, importez ce fichier de configuration dans vos composants et utilisez les valeurs exportées.
De cette façon, vous pouvez conduire vos clés juste à partir des fichiers de l'environnement.
Ne devrais-je pas utiliser React_app_ Prefix avec elle??
Je vous recommanderais d'utiliser le package Les données habituellement sensibles (touches API) doivent être injectées en tant que variables d'environnement.
Soit-les dans votre environnement d'hébergement ou pendant le temps de construction.
Étant donné que vous construisez une application réagissante, vous utilisez probablement la page Web, je suppose.
Webpack vous permet de les injecter dans votre code: https://webpack.js.org/guides / Variables d'environnement /
Comme alternative, vous pouvez également utiliser ce plugin pratique: https://www.npmjs.com/package / dotenv-webpack qui vous permet d'utiliser Si vous utilisez IMPORTANT: Comme il s'agit d'une application côté client, vous exposez toujours vos informations d'identification de l'API et qu'il n'y a aucun moyen de cela. Assurez-vous de blanchir votre environnement Dev / Prod dans le service Google si possible ou exécutez votre propre serveur proxy (qui est un peu plus compliqué et prend une certaine configuration). Googleapi sur NPM:
https://www.npmjs.com/package/googleaps
.env fichiers
Créer-réact-app Il prend déjà en charge une telle fonctionnalité. Assurez-vous de préfixer vos variables d'environnement avec réacteur_app : https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables
J'ai la clé dans un fichier .env et à l'aide de ce script dans index.html, mais obtenez un invalidkeymaperror