只有提供正確驗證憑證的使用者可以呼叫 API,這樣可以防止有人未經授權使用 Google 地圖平台產品。上述憑證採用 API 金鑰的形式,API 金鑰是不重複的英數字元字串,可將您的 Google 帳單帳戶與專案建立關聯,以及與特定 API 或 SDK 建立關聯。
本指南說明如何建立、限制及使用 Google 地圖平台的 API 金鑰。
事前準備
您必須擁有已連結帳單帳戶的專案,並啟用 Maps JavaScript API,才能開始使用 Maps JavaScript API。請參閱這篇文章,進一步瞭解如何在 Cloud 控制台中完成相關設定。
建立 API 金鑰
API 金鑰是一組專屬 ID,用於驗證與您專案有關的使用權限及帳單處理要求。您的專案至少要有一個相關聯的 API 金鑰。
建立 API 金鑰的方法如下:
控制台
-
前往「Google 地圖平台」>「憑證」頁面。
-
在「憑證」頁面上,點選「建立憑證」>「API 金鑰」。
「建立的 API 金鑰」對話方塊會顯示您新建立的 API 金鑰。 -
按一下「關閉」。
新建立的 API 金鑰會出現在「憑證」頁面的「API 金鑰」下方。
(別忘了先為 API 金鑰設定限制,然後才在正式環境中使用)
Cloud SDK
gcloud alpha services api-keys create \ --project "PROJECT" \ --display-name "DISPLAY_NAME"
進一步瞭解 Google Cloud SDK、Cloud SDK 安裝和下列指令:
限制 API 金鑰
Google 強烈建議您設定限制,只允許將 API 金鑰用於應用程式需要的 API。限制 API 金鑰可避免不必要的請求使用 API 金鑰,有助提升應用程式的安全性。詳情請參閱「API 安全性最佳做法」。
限制 API 金鑰的方法如下:
控制台
-
前往「Google 地圖平台」>「憑證」頁面。
- 選取要設定限制的 API 金鑰,畫面隨即顯示 API 金鑰屬性頁面。
- 在「金鑰限制」下方,設定下列限制:
- 應用程式限制:
- 如要接受由您提供的網站清單中所列的要求,請從「應用程式限制」清單中選取「HTTP 參照網址 (網站)」。
- 指定一或多個參照網址網站。您可以使用萬用字元為所有子網域授權 (舉例來說,
https://*.google.com
接受結尾為.google.com
的所有網站 (如果是透過 HTTPS 存取))。請注意,如果指定了 www.domain.com,系統就會將這個網址視為加上萬用字元的版本 www.domain.com/* 來使用,該主機名稱上的任何子路徑也都會獲得授權。依照原樣指定https://
和http://
參照網址配置。如果是其他網址通訊協定,您必須使用特別的表示法。舉例來說,您可以將file:///path/to/
的格式設為__file_url__//path/to/*
。啟用網站後,請務必監控您的使用情況,確保符合預期。支援的通訊協定如下:about://
、app://
、applewebdata://
、asset://
、chrome://
、content://
、file://
、ftp://
、ionic://
、local://
、ms-appx://
、ms-appx-web://
、ms-local-stream://
、prism://
、qrc://
、res://
、saphtmlp://
。 - API 限制:
- 如要完成變更,請按一下「儲存」。
Cloud SDK
列出現有金鑰。
gcloud services api-keys list --project="PROJECT"
清除現有金鑰的目前限制。
gcloud alpha services api-keys update "projects/PROJECT/keys/KEY_ID" \ --clear-restrictions
設定現有金鑰的新限制。
gcloud alpha services api-keys update "projects/PROJECT/keys/KEY_ID" \ --api-target="maps-backend.googleapis.com" --allowed-referrers="referer"
進一步瞭解 Google Cloud SDK、Cloud SDK 安裝和下列指令:
將 API 金鑰加進要求中
每個 Maps JavaScript API 要求都必須包含 API 金鑰。請將下例中的 YOUR_API_KEY
換成您的 API 金鑰。
<script> (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({ key: "YOUR_API_KEY", v: "weekly", // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.). // Add other bootstrap parameters as needed, using camel case. }); </script>