Google dit [[Official Sample]](https://developers.google.com/maps/documentation/javascript/adding], malgré le fait que «les clés API ne doivent pas être intégrées directement dans le code» sur le site officiel. -a-google-map) est codé comme suit, et ** YOUR_API_KEY ** apparaît dans le HTML. Si vous créez une page Web avec cela, vous publierez la clé API dans le monde entier. C'est comme marcher sur une voie publique avec Frichin. L'échantillon officiel est-il un roi nu?
<script defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
Pour le moment, le document Google [Apply API key restrictions] indique "HTTP. Il dit que les restrictions par «références (sites Web)» sont essentielles, mais cela seul est extrêmement malheureux. Comme vous le savez tous, le nom d'une page Web peut être facilement usurpé en créant un serveur Web localement et en jouant avec les hôtes ... (je ne le fais pas, juste au cas où) Bien sûr, pour éviter d'être facturé à votre insu, [[Limiter l'utilisation de l'API]](https://cloud.google.com/apis/docs/capping-api-usage?authuser=1&authuser=1&hl=ja&visit_id=637360063115512101 -2429778502 & rd = 1) est implémenté, mais que se passe-t-il si quelqu'un quelque part utilise la clé API sans autorisation et y accède 1 million de fois? Je ne peux pas dormir la nuit ...
Après tout, je ne veux pas publier la clé API en HTML! !! J'ai donc décidé d'utiliser CGI pour cacher la clé API à l'intérieur du serveur.
Transmettez la clé API à CGI avec le jeu de variables d'environnement. Mon environnement exécute CGI avec nginx + fcgiwrap, alors définissez-le au bas de /etc/nginx/fcgiwrap.conf comme suit.
fcgiwrap.conf
location /cgi-bin/ {
・ ・ ・ ・ ・ ・
fastcgi_param GOOGLE_MAPS_API_KEY YOUR_API_KEY; ＜＝YOUR_API_Remplacez KEY par votre propre clé
}
La méthode de paramétrage ici diffère en fonction de votre environnement (apache, etc.), veuillez donc la définir en fonction de votre propre environnement.
En règle générale, remplacez la partie src =" https: // maps.googleapis.com / maps / api / js de l'exemple officiel par CGI.
J'utilise python dans mon environnement, donc ça ressemble à ça.
getapijs.py
#!/usr/bin/python
# -*- coding: utf-8 -*-
import requests
import os
url = 'https://maps.googleapis.com/maps/api/js' #L'exemple HTML officiel est src=J'ai lu dans l'url
key = os.environ['GOOGLE_MAPS_API_KEY'] #Extraire la clé API contenue dans la variable d'environnement
mysrc = url + "?key=" + key #Concaténer la clé API à l'URL
response = requests.get(mysrc) #Allez sur le site de google map et introduisez src
print("'Content-Type': 'text/javascript; charset=UTF-8'") #En-tête pour revenir au HTML
print("")
print(response.text)
Cette partie est également différente pour chaque environnement, veuillez donc l'écrire dans votre propre langue. Le fait est que ** apportez la clé API de la variable d'environnement du serveur **, spécifiez l'url et récupérez le javascript du site google. La partie d'en-tête doit être `` Content-Type ':' text / javascript; charset = UTF-8 ''.
main.js
function initMap() {
//Identique au contenu de l'échantillon officiel
// Initialize and add the map
// The location of Uluru
var uluru = {lat: -25.344, lng: 131.036};
// The map, centered at Uluru
var map = new google.maps.Map(document.getElementById('map'), {zoom: 4, center: uluru});
// The marker, positioned at Uluru
var marker = new google.maps.Marker({position: uluru, map: map});
}
window.onload = function() {
//Après avoir affiché la page, écrivez le processus que vous souhaitez exécuter. C'est le point d'ici!
fetch("/cgi-bin/getapijs.py").then(res=>{
//Exécutez CGI et ne passez que le TEXTE résultant ensuite
return res.text();
}).then(mytext => {
//Exécutez le javascript reçu avec EVAL.
eval(mytext);
}).then(() => {
//Traitement post-exécution. L'exemple HTML officiel&callback=La partie qui a été appelée
initMap();
}).catch(() =>{
//Veuillez gérer votre erreur préférée
});
}
En HTML, <script src =" main.js "> </ script> est décrit dans la partie en-tête. Le style ici varie d'une personne à l'autre, vous pouvez donc utiliser le style que vous aimez.
Le point est, après ** chargement de l'élément HTML ** (la partie différée de l'exemple HTML, window.onload dans mon exemple), ** exécuter CGI ** et recevoir le javascript en tant que TEXT ** avec EVAL La procédure consiste à exécuter **.
Étant donné que la clé API se trouve uniquement dans la variable d'environnement, vous pouvez publier la source sur GITHUB, et même si l'utilisateur du site Web regarde HTML ou JS avec les outils de développement de Chrome, la clé API est introuvable. Comparé à l'échantillon officiel marchant sur la voie publique à Frichin, le résultat est profane. La seule chose qui me met mal à l'aise est d'utiliser le "evil EVAL". Vous pourriez penser que c'est une page Web maléfique ... Ceux qui ont scellé EVAL en tant que personne interdite ne peuvent pas utiliser cette méthode, mais je pense qu'il est plus dangereux d'exposer la clé API au public que d'utiliser EVAL. Arrêtons-nous. Si votre entreprise interdit EVAL, veuillez abandonner et créer une application lourde avec JAVA. Je vais légèrement avec HTML + javascript + python.
index.html
<!DOCTYPE html>
<html>
<head>
<style>
/* Set the size of the div element that contains the map */
#map {
height: 400px; /* The height is 400 pixels */
width: 100%; /* The width is the width of the web page */
}
</style>
<title>Hello World</title>
<script src="main.js"></script>
</head>
<body>
<h3>My Google Maps Demo</h3>
<!--The div element for the map -->
<div id="map"></div>
</body>
</html>
De plus, je me référerai à cet article. [Comment lire le JS externe à partir de JS que j'utilise souvent]
Recommended Posts