高德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認證