JS API 安全密钥使用

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

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

获取安全密钥

在使用滴图出行开放平台所提供的 JS API 能力之前，需提前获取 JS API 相关的安全密钥。其安全密钥包含一个 key，和一个 js安全密钥，需要配合使用。

请您登录【官网控制台】，在【创建 key】中自助完成申请。

通过代理服务器转发

以Nginx反向代理为例，参考以下两个location配置，进行反向代理设置，分别对应 Web 服务以及 Web 静态文件。需要将以下代码配置中的 js安全密钥 替换为你获取到的对应密钥。如果你使用了多个 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=js安全密钥";
    proxy_pass https://lbs.xiaojukeji.com/api/v2/web/;
  }
  # Web静态文件 代理
  location /api/v2/static/ {
    set $args "$args&jscode=js安全密钥";
    proxy_pass https://lbs.xiaojukeji.com/api/v2/static/;
  }
}

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

JS API 使用代码如下：

<div id="container" style="width:100vw; height:100vh"></div>
<script>
	window.DiMapLoader.load({
		key: "您申请的key"
	}).then(({ DiMap }) => {
		new DiMap.Map({
			container: "container",
			style: "dimap://styles/normal"
		})
	})
</script>

TIP

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

通过明文方式设置

WARNING

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

INFO

JS API 使用 script 标签同步加载增加密钥设置脚本，并将「js安全密钥」替换为您对应的信息（注意你这个设置必须是在 JS API 脚本加载之前进行设置，否则设置无效）。

JS API 脚本同步加载为例：

<div id="container" style="width:100vw; height:100vh"></div>

<script type="text/javascript">
  window._DiMapSecurityConfig = {
    securityJsCode: "js安全密钥",
  };
</script>

<script src="https://lbs.xiaojukeji.com/api/v2/static/loader.js"></script>

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