JS API 安全密钥使用

本章将介绍关于安全密钥的使用，通过代理服务器转发方式来设置。

为了增强安全性，建议将安全密钥存储在服务器端，并通过服务器端生成地图 JS API 的请求 URL。这样可以避免将密钥直接以明文的方式暴露给 Web 端代码中，减少密钥被滥用的风险。

获取安全密钥

在使用滴图出行开放平台所提供的 JS API 能力之前，需提前获取 key 和安全密钥。按照要求，在程序中添加 key 和安全密钥后才可使用各项地图能力。请登录控制台，点击工单咨询（右下角问号按钮）获取。

通过代理服务器转发

以Nginx反向代理为例，参考以下两个location配置，进行反向代理设置，分别对应 Web 服务以及 Web 静态文件。需要将以下配置中的「你的安全密钥」六个字替换为你获取到的securityJsCode安全密钥。如果你使用了多个 key，需要在代理设置中根据 key 来映射不同的安全密钥。

<script>
  window._DiMapSecurityConfig = {
    serviceHost: "「你的代理服务器域名」"
    //例如 ：serviceHost:'http://1.1.1.1:80/api/v2/web/
  }
</script>

server {
  listen       80;             #nginx端口设置，可按实际端口修改
  server_name  127.0.0.1;      #nginx server_name 对应进行配置，可按实际添加或修改
  # Web服务API 代理
  location /api/v2/web/ {
    set $args "$args&jscode=你的安全密钥";
    proxy_pass https://lbs.xiaojukeji.com/api/v2/web/;
  }
  # Web静态文件 代理
  location /api/v2/static/ {
    set $args "$args&jscode=你的安全密钥";
    proxy_pass https://lbs.xiaojukeji.com/api/v2/static/;
  }
}

保存相关配置之后需要通过命令nginx -s reload命令重新加载nginx配置文件。

JS API 使用代码如下：

<div id="container"></div>
<script>
	window.DiMapLoader.load({
		key: "你申请的key"
	}).then(({ DiMap }) => {
		new DiMap.Map({
			container: "container",
			style: "dimap://styles/normal"
		})
	})
</script>

ℹ️ 提示： 本例使用Nginx为例，你也可以选择其他方式代理转发 如 Java、Node 服务等。

通过明文方式设置

⚠️ 注意： JS API 安全密钥以明文方式设置，不建议在生产环境使用（不安全）。

ℹ️ 提示： JS API 使用 script 标签同步加载增加安全密钥设置脚本，并将「你申请的安全密钥」替换为你的安全密钥（注意你这个设置必须是在 JS API 脚本加载之前进行设置，否则设置无效）。

JS API 脚本同步加载为例：

<div id="container"></div>
<script type="text/javascript">
  window._DiMapSecurityConfig = {
    securityJsCode: "你申请的安全密钥",
  };
</script>
<script type="text/javascript">
  //地图初始化应该在地图容器div已经添加到DOM树之后
  window.DiMapLoader.load({
		key: "你申请的key"
	}).then(({ DiMap }) => {
		new DiMap.Map({
			container: "container",
			style: "dimap://styles/normal"
		})
	})
</script>