Merge pull request #36 from iDerekLi/dev

2.4.0
iDerekLi · Dec 7, 2021 · 8ff7f16 · 8ff7f16
2 parents ac44486 + 94c418a
commit 8ff7f16
Show file tree

Hide file tree

Showing 12 changed files with 126 additions and 12 deletions.
diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
@@ -47,7 +47,7 @@ module.exports = {
           title: "指南",
           collapsable: false,
           sidebarDepth: 0,
-          children: ["", "install", "quickstart", "changelog"]
+          children: ["", "install", "quickstart", "security", "changelog"]
         },
         {
           title: "文档",

diff --git a/docs/.vuepress/enhanceApp.js b/docs/.vuepress/enhanceApp.js
@@ -2,9 +2,12 @@ import AMapJS from "amap-js";
 const { pre, source } = require("./rootscope");
 
 function render(template) {
-  return eval(template.replace(pre.AMapKey, source.AMapKey));
+  template = template.replace(pre.AMapKey, source.AMapKey);
+  template = template.replace(pre.AMapSecurity, source.AMapSecurity);
+  return eval(template);
 }
 
+
 export default ({ Vue, options, router, siteData, isServer }) => {
   if (!isServer) {
     window.AMapJS = AMapJS;

diff --git a/docs/.vuepress/rootscope.js b/docs/.vuepress/rootscope.js
@@ -1,4 +1,5 @@
 const AMapKey = "您申请的Key值";
+const AMapSecurity = `{ serviceHost: '您的代理服务器域名或地址/_AMapService' }`;
 const AMapVersion = "1.4.15";
 const AMapUIVersion = "1.1";
 const LocaVersion = "1.3.2";
@@ -8,7 +9,8 @@ const AMapLoader = `
 new AMapJS.AMapLoader({
   key: '${AMapKey}',
   version: '${AMapVersion}',
-  plugins: []
+  plugins: [],
+  security: ${AMapSecurity}
 });
 `.trim();
 
@@ -37,6 +39,7 @@ module.exports = {
     AMapVersion,
     AMapUIVersion,
     AMapKey,
+    AMapSecurity,
     AMapLoader,
     AMapUILoader,
     LocaLoader,
@@ -45,7 +48,8 @@ module.exports = {
   source: {
     AMapVersion,
     AMapUIVersion,
-    AMapKey: "494c7b315d60937fb6d3b7102a9cb4c3",
+    AMapKey: "22df707490e7631397c9fbb02e52544e",
+    AMapSecurity: `{ securityJsCode: "300bfebf024085e4360118bd1712473d" }`,
     AMapLoader: "window.$AMapLoader",
     AMapUILoader: "window.$AMapUILoader",
     LocaLoader: "window.$LocaLoader",

diff --git a/docs/README.md b/docs/README.md
@@ -35,6 +35,7 @@ const loader = new AMapJS.AMapLoader({
   key: '您申请的高德Key值',
   version: '2.0',
   plugins: [],
+  security: { serviceHost: '您的代理服务器域名或地址/_AMapService' }
 });
 
 // 调用 load 方法完成加载并调用执行回调。

diff --git a/docs/guide/amap-loader.md b/docs/guide/amap-loader.md
@@ -11,7 +11,7 @@ AMap JSAPI 加载器。
 <script>
 // 创建AMap Loader
 const loader = $AMapLoader
-  
+
 loader.load()
   .then(({ AMap }) => {
     // 其他逻辑
@@ -26,6 +26,10 @@ loader.load()
 由于低版本 AMap JS API与 顶层作用域 `window.AMap` 进行强关联，这里建议相同 Loader 只创建一次实例并且保证唯一版本，可以避免加载异常与使用错误问题。
 :::
 
+## 安全密钥
+
+相关细节请请参见 [安全密钥](./security.md).
+
 ## 使用插件
 
 使用 loader 加载插件
@@ -103,6 +107,7 @@ entry();
 | key | 您申请的高德key值 | String | - |
 | version | 高德地图 JSAPI 版本号 | String | [1.4.15](https://lbs.amap.com/api/javascript-api/changelog) |
 | plugins | 加载 JSAPI 提供的众多的插件 | Array | [] |  
+| security | 高德地图安全配置 | Object | false |  
 
 ### Methods
 

diff --git a/docs/guide/changelog.md b/docs/guide/changelog.md
@@ -1,5 +1,11 @@
 # 更新日志
 
+## 2.4.0
+
+`2021-12-07`
+
+- 🌟 添加安全密钥配置
+
 ## 2.2.0
 
 `2020-09-17`

diff --git a/docs/guide/custom-loader.md b/docs/guide/custom-loader.md
@@ -80,7 +80,8 @@ loader
       AMap: {
         key: "$AMapKey",
         version: "$AMapVersion",
-        plugins: ["AMap.ToolBar"]
+        plugins: ["AMap.ToolBar"],
+        security: $AMapSecurity
       },
       AMapUI: {
         version: "$AMapUIVersion"

diff --git a/docs/guide/security.md b/docs/guide/security.md
@@ -0,0 +1,78 @@
+# 安全密钥 v2.3.0
+
+<p color="#f00">
+注意：此次升级不会影响之前已获得 key 的使用；
+升级之后的新增的key必须要配备安全密钥一起使用，
+具体用法请您参看下文《JSAPI key和安全密钥设置和使用》（本次key升级新增安全密钥，是为了提升广大用户的对自己的key安全有效管理，降低明文传输被窃取的风险 。）
+</p>
+
+
+## 方法一 通过代理服务器使用安全密钥 [推荐]
+
+### 1. key搭配代理服务器并携带安全密钥转发（安全）
+
+```JavaScript
+new AMapJS.AMapLoader({
+  version: '2.0',
+  key: '您申请的高德Key值',
+  security: {
+    serviceHost: '您的代理服务器域名或地址/_AMapService'
+  }
+});
+```
+
+### 2. 代理服务器的设置
+
+以 Nginx 反向代理为例，参考以下三个location配置，进行反向代理设置，分别对应自定义地图、海外地图、Web服务，其中自定义地图和海外地图如果没有使用到相关功能也可以不设置。需要将以下配置中的“您的安全密钥”六个字替换为您刚刚获取的jscode安全密钥。
+
+```yml
+server {
+    listen       80;             #nginx端口设置，可按实际端口修改
+    server_name  127.0.0.1;      #nginx server_name 对应进行配置，可按实际添加或修改
+
+    # 自定义地图服务代理
+    location /_AMapService/v4/map/styles {
+        set $args "$args&jscode=您的安全密钥";
+        proxy_pass https://webapi.amap.com/v4/map/styles;
+    }
+    # 海外地图服务代理
+    location /_AMapService/v3/vectormap {
+        set $args "$args&jscode=您的安全密钥";
+        proxy_pass https://fmap01.amap.com/v3/vectormap;
+    }
+    # Web服务API 代理
+    location /_AMapService/ {
+        set $args "$args&jscode=您的安全密钥";
+        proxy_pass https://restapi.amap.com/;
+    }
+}
+```
+
+保存相关配置之后需要通过命令nginx -s reload  命令重新加载 nginx 配置文件
+
+## 方法二 直接使用安全密钥
+此方式仅建议开发环境使用
+
+```JavaScript
+new AMapJS.AMapLoader({
+  version: '2.0',
+  key: '您申请的高德Key值',
+  security: {
+    securityJsCode: '您申请的安全密钥'
+  }
+});
+```
+
+## 传统方式
+
+具体细节参见[高德开发平台](https://lbs.amap.com/api/javascript-api/guide/abc/prepare).
+
+```html
+<script type="text/javascript">
+window._AMapSecurityConfig = {
+  serviceHost:'您的代理服务器域名或地址/_AMapService',  
+  // 例如 ：serviceHost:'http://1.1.1.1:80/_AMapService',
+}
+</script>
+<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script> 
+```
diff --git a/packages/amap-js/package.json b/packages/amap-js/package.json
@@ -1,6 +1,6 @@
 {
   "name": "amap-js",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "description": "AMap高德地图API加载器。",
   "main": "lib/index.js",
   "module": "es/index.js",

diff --git a/packages/amap-js/src/constants.js b/packages/amap-js/src/constants.js
@@ -1 +1 @@
-export const version = "2.3.0";
+export const version = "2.4.0";
diff --git a/packages/amap-js/src/loaders/AMapLoader.js b/packages/amap-js/src/loaders/AMapLoader.js
@@ -5,9 +5,9 @@ import ScriptLoader from "./ScriptLoader";
 const SymbolLoad = Symbol("Symbol.load");
 
 /**
- * callback count
+ * API Callback Counter
  */
-let count = 0;
+let callbackCounter = 0;
 
 /**
  * AMapLoader 加载器
@@ -18,7 +18,12 @@ class AMapLoader extends Loader {
     this.key = options.key || "";
     this.version = options.version || "1.4.15";
     this.plugins = options.plugins || [];
-    this.callback = options.callback || "__onAMapLoaded" + count++;
+    this.callback = options.callback || "__onAMapLoaded" + callbackCounter++;
+    this.security = options.security ? options.security : false;
+    // this.security = {
+    //   serviceHost: "您的代理服务器域名或地址/_AMapService"
+    //   securityJsCode: "您申请的安全密钥"
+    // };
     this.AMap = null;
     this.readyState = this.CREATED;
     this[SymbolLoad] = null;
@@ -44,6 +49,17 @@ class AMapLoader extends Loader {
       const url = this.getUrl();
       const callback = this.callback;
 
+      /**
+       * 自2021年12月02日升级，升级之后所申请的 key 必须配备安全密钥 jscode 一起使用
+       * 注意：此次升级不会影响之前已获得 key 的使用；升级之后的新增的key必须要配备安全密钥一起使用，
+       * 具体用法请您参看下文《JSAPI key和安全密钥设置和使用》（本次key升级新增安全密钥，是为了提升广大用户的对自己的key安全有效管理，降低明文传输被窃取的风险 。）
+       */
+      if (this.security) {
+        window._AMapSecurityConfig = this.security;
+      } else {
+        delete window._AMapSecurityConfig;
+      }
+
       const script = new ScriptLoader(url);
 
       const onScriptLoad = () => {

diff --git a/scripts/deploy.sh b/scripts/deploy.sh
@@ -13,7 +13,7 @@ cd amap-js
 
 # Merge code
 rm -rf *.html *.js *.css *.map assets guide
-rm -rf $AMapJSVersion/**
+rm -rf $AMapJSVersion
 cp -rf ../../docs/.vuepress/dist/last/** .
 mkdir $AMapJSVersion
 cp -rf  ../../docs/.vuepress/dist/$AMapJSVersion/** $AMapJSVersion/