高德JS API WEB認證方式-通過代理服務器解決秘鑰存儲問題

高德JS API的標准使用流程分為5步,但是實際與認證相關的可以縮減為兩步:

1. key申請
2. key使用

• key申請

1 為應用添加 Key，「服務平台」一項請選擇「 Web 端 ( JSAPI ) 」，設置域名白名單，可選（建議設置域名白名單）。
2 添加成功后，可獲取到key值和安全密鑰jscode（自2021年12月02日升級，升級之后所申請的 key 必須配備安全密鑰 jscode 一起使用)

注意：此次升級不會影響之前已獲得 key 的使用；升級之后的新增的key必須要配備安全密鑰一起使用，具體用法請您參看下文《JSAPI key和安全密鑰設置和使用》（本次key升級新增安全密鑰，是為了提升廣大用戶的對自己的key安全有效管理，降低明文傳輸被竊取的風險 。）

• key 使用

可以官方推薦采用JSAPI key搭配代理服務器並攜帶安全密鑰轉發（安全）的方式.這種方式主要是避免前端進行明文進行秘鑰存儲,通過代理服務器來存儲秘鑰,以避免秘鑰泄漏

1 引入地圖 JSAPI 腳本之前增加代理服務器設置腳本標簽，設置代理服務器域名或地址，將下面示例代碼中的「您的代理服務器域名或地址」替換為您的代理服務器域名或ip地址，其中_AMapService為代理請求固定前綴，不可省略或修改。（注意您這個設置必須是在 JSAPI 的腳本加載之前進行設置，否則設置無效。）

<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> 

2 以 Nginx 反向代理為例，參考以下三個location配置，進行反向代理設置，分別對應自定義地圖、海外地圖、Web服務，其中自定義地圖和海外地圖如果沒有使用到相關功能也可以不設置。需要將以下配置中的“您的安全密鑰”六個字替換為您剛剛獲取的jscode安全密鑰。

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 配置文件

• 參考資料

高德地圖 JS API web認證