JS API Security Key Usage
This chapter will introduce the use of security keys, including two methods: forwarding through a proxy server and setting in plain text.
To enhance security, it is recommended to store the security key on the server side and generate the request URL for the map JS API through the server side. This can avoid exposing the key directly in plain text in the web-side code, reducing the risk of key misuse. If you only want convenient development, you can configure it in plain text.
Forward through a proxy server
JS API security keys are forwarded through a proxy server, highly recommended (secure).
Taking Nginx reverse proxy as an example, refer to the following three location configurations to set up the reverse proxy, corresponding to custom maps, overseas maps, and web services, respectively. If the custom map and overseas map are not used for relevant functions, they do not need to be set up. You need to replace the six characters 'your security key' in the following configuration with the securityJsCode security key you just obtained. If you use multiple keys, you need to map different security keys according to the key in the proxy settings.
server {
listen 80; #nginx Port settings can be modified according to the actual port
server_name 127.0.0.1; #nginx server_name Configure accordingly, add or modify as needed
# Web Service API Proxy
location /_AMapService/ {
set $args "$args&jscode=Your security key";
proxy_pass https://sg-restapi.opnavi.com/;
}
}JS API uses the <script> tag to synchronously load a proxy server setup script, set the proxy server domain or address, and replace 'your proxy server domain or address' in the example code below with your proxy server domain or IP address,The _AMapService is a fixed prefix for proxy requests, which cannot be omitted or modified (note that this setting must be made before the JS API script is loaded, otherwise it will be invalid)
After saving the relevant configurations, you need to reload the nginx configuration file using the command nginx -s reload.
Taking JS API script synchronous loading as an example:
<div id="container"></div>
<script type="text/javascript">
window._AMapSecurityConfig = {
serviceHost: "Your proxy server domain name or address/_AMapService",
//For example ：serviceHost:'http://1.1.1.1:80/_AMapService',
};
window._AMapServiceConfig = {
type: 'oversea', // Deployment Environment Setup
};
</script>
<script
type="text/javascript"
src="https://sg-webapi.opnavi.com/maps?v=2.0&key=The key value you applied for"
></script>
<script type="text/javascript">
//Map initialization should occur after the map container div has been added to the DOM tree
var map = new AMap.Map("container", {
zoom: 12,
showOversea: true, //Enable world Map
});
</script>This example uses Nginx as an example, and you can also choose other methods of proxy forwarding such as Java, Node services, etc.
Set in plaintext
The JS API security key is set in plain text, which is not recommended for use in production environments (insecure).
The JS API uses the <script> tag to synchronously load the security key setup script, and replaces 'your applied security key' with your security key (note that this setup must be done before the JS API script is loaded, otherwise it will be invalid).
Taking the synchronous loading of JS API scripts as an example:
<div id="container"></div>
<script type="text/javascript">
window._AMapSecurityConfig = {
securityJsCode: "「The security key you applied for」",
};
window._AMapServiceConfig = {
type: 'oversea', // Deployment Environment Setup
};
</script>
<script
type="text/javascript"
src="https://sg-webapi.opnavi.com/maps?v=2.0&key=The security key you applied for"
></script>
<script type="text/javascript">
//The map initialization should occur after the map container div has been added to the DOM tree
var map = new AMap.Map("container", {
zoom: 12,
showOversea: true, //Enable world Map
});
</script>