1. 事前準備
建構目標
在本程式碼研究室中，您將使用 App Check，為網路環境中使用的 API 金鑰新增一層保護措施。
具體來說，您將在 Codelab 中完成下列步驟，將功能連結在一起：
- 使用 Google 地圖平台 JavaScript API 建立網頁，以便代管地圖。
- 代管網頁，以便線上存取。
- 使用 Cloud 控制台限制可使用 API 的網域和 API。
- 透過 Firebase 新增及初始化 App Check 程式庫。
- 新增認證供應商，檢查應用程式是否有效。
- 強制檢查應用程式和螢幕。
完成本程式碼研究室後，您應該就能建立可正常運作的網站，並對使用的 API 金鑰、存取這些金鑰的網域，以及可使用這些金鑰的應用程式類型強制執行安全性。
2. 必要條件
啟用 App Check 時，需要使用三項 Google 服務來提供保護，因此請先熟悉這些領域。
Firebase：這項服務會強制執行檢查，確保 API 金鑰是從適當網域參照而來。這也會透過 Firebase Studio 提供託管和部署功能。
reCAPTCHA - 提供檢查應用程式是否由真人使用的功能，並提供公開和私密金鑰，用於將 Firebase 連線至用戶端應用程式網域。
Google Cloud Platform：提供 Google 地圖平台和 Firebase 使用的 API 金鑰，以及使用地圖金鑰的網域限制。
您可以在下列架構圖中，查看這些元件如何協同運作：
使用應用程式檢查和 Google 地圖平台時，下列元素會共同運作，透過認證服務供應商 (本例中為 reCAPTCHA) 提供的認證，判斷要求是否來自有效的應用程式和使用者。
這項作業是透過 Firebase 提供的 App Check SDK 執行，該 SDK 會檢查呼叫應用程式的有效性，然後提供權杖給應用程式，後續對 Google 地圖平台 JavaScript API 的呼叫都會使用這個權杖。接著，Google 地圖平台 JavaScript API 會向 Firebase 檢查所提供權杖的有效性，確保權杖來自正確網域，且是透過認證供應商由有效使用者提供。
如要進一步瞭解如何使用應用程式檢查和 Maps JavaScript API，請參閱下列網頁，並熟悉必要步驟。
https://developers.google.com/maps/documentation/javascript/maps-app-check
3. 做好準備
如果您還沒有 Google Cloud 帳戶，請先設定帳戶並啟用計費功能。請按照操作說明建立這個項目，再開始進行後續步驟。
設定 Google 地圖平台
如果您尚未建立 Google Cloud Platform 帳戶，以及啟用計費功能的專案，請參閱「開始使用 Google 地圖平台」指南，建立帳單帳戶和專案。
- 在 Cloud 控制台中，按一下專案下拉式選單，然後選取要用於本程式碼研究室的專案。
- 在 Google Cloud Marketplace 中，啟用本程式碼研究室所需的 Google 地圖平台 API 和 SDK。如要瞭解如何操作，請觀看這部影片或參閱這份文件。
- 在 Cloud Console 的「憑證」頁面中產生 API 金鑰。你可以按照這部影片或這份文件中的步驟操作。所有 Google 地圖平台要求都需要 API 金鑰。
本程式碼研究室的其他規定
如要完成本程式碼研究室，您需要下列帳戶、服務和工具：
- 具備 JavaScript、HTML 和 CSS 的基礎知識
- 已啟用計費功能的 Google Cloud 帳戶 (如上所述)
- 已啟用 Maps JavaScript API 的 Google Maps Platform API 金鑰 (將在程式碼研究室中完成)。
- 對網站代管和部署有基本瞭解 (您將在程式碼研究室中逐步瞭解)。這項操作將透過 Firebase 控制台和 Firebase Studio 進行。
- 網路瀏覽器，可在您工作時查看檔案。
4. 在 Firebase Studio 建立頁面
本程式碼研究室假設您尚未建立應用程式，並使用 Firebase Studio 建立網頁來代管地圖應用程式，然後部署至 Firebase 進行測試。如果您有現有應用程式，也可以使用該應用程式，並變更適當的主機網域、程式碼片段和 API 金鑰，確保實作正確。
前往 Firebase Studio (需要 Google 帳戶)，然後建立新的簡易 HTML 應用程式。您可能需要點選「查看所有範本」按鈕，才能顯示這個選項，或直接點選這個連結存取。
為工作區命名，例如 myappcheck-map (加上一些隨機數字，確保名稱不重複，系統會為您新增)。Firebase Studio 隨即會建立工作區。
填寫名稱後，按一下「建立」按鈕，系統就會開始建立專案。
建立完成後，您可以使用下列程式碼取代 index.html 檔案中的文字，建立內含地圖的網頁。
<!doctype html>
<html>
<head>
<title>Secure Map</title>
<style>
#map {
height: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h3>App Check Security Demo</h3>
<!--The div element for the map -->
<div id="map"></div>
<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>
<script>
let map;
async function initMap() {
const { Map } = await google.maps.importLibrary("maps");
map = new Map(document.getElementById("map"), {
center: { lat: 51.5208, lng: -0.0977 },
zoom: 17,
});
}
initMap();
</script>
</body>
</html>
執行這項 should 應該會顯示一個頁面，其中包含運作中應用程式的地圖，如圖片所示，但！
網頁實際載入時會顯示錯誤，因為網頁需要 Google 地圖平台 API 金鑰，這會在後續章節中新增。
您可以在 Firebase Studio 的網路控制台中查看實際的錯誤訊息。
如要修正這個問題，我們需要在頁面中加入 API 金鑰。API 金鑰是將網頁和 Maps JavaScript API 實作項目連結在一起的方式。此外，由於 API 金鑰必須以未加密的方式包含在網頁中，因此也可能遭到有心人士利用，在其他網站上盜用。
其中一種保護方法是使用應用程式限制，無論是透過使用的應用程式類型，還是透過呼叫的參照網域或 IP 位址，都能達到保護效果。如要進一步瞭解最佳做法，請前往下列網站：
https://developers.google.com/maps/api-security-best-practices#rec-best-practices
或透過指令列或伺服器直接呼叫，這些應用程式本身無法提供參照網址或追蹤，因此可能存在安全漏洞。
5. 建立 Firebase 應用程式
Firebase 用於提供功能，將認證供應商與下列檢查項目建立關聯：
- 要求來自您驗證過的應用程式
- 要求來自未經竄改的裝置和使用者工作階段。
在本程式碼研究室中，reCAPTCHA v3 會做為這項認證的供應商。
建立 Firebase 應用程式和主機。
前往 https://firebase.google.com/，然後透過「前往控制台」連結建立新的 Firebase 專案。
按一下下列區域，即可建立新專案。
為專案選擇名稱，例如「My App Check Project」，不必與先前使用的名稱相同，因為這只是參考名稱，專案的實際名稱可以在文字下方編輯，名稱會由您輸入的名稱組成，如果名稱不重複，系統會加上數字。
如果系統提示您在應用程式中新增其他服務 (例如 Google Analytics)，您可以接受或拒絕，但本程式碼研究室不需要這些服務，因此可以略過。
按一下「建立專案」按鈕，然後等待專案建立完成。完成後，系統會通知你。
準備好開始與專案互動時，請按一下「繼續」。
在主要頁面中，您可以選擇將 Firebase 新增至應用程式，然後選擇網頁選項，即可開始使用。
選擇為網站設定 Firebase 託管，以便在部署檔案後將檔案傳送至該處 (實際網站可使用自己的選項，但如要繼續進行本 Codelab，請部署至 Firebase 託管)。
按一下「註冊應用程式」建立應用程式。接著，您將使用建立的指令碼，從網頁應用程式參照 Firebase 中的專案。
下一個分頁中的 Firebase 設定程式碼會用於應用程式，將 Firebase 和 Maps API 連結在一起，因此建議從「使用指令碼標記」部分複製。您將在專案的 index.html 中貼上這段程式碼。
按一下「下一步」前往其他部分，然後在網站的專案設定部分查看建立的應用程式。
如需日後返回查看設定詳細資料，也可以點選「設定」按鈕查看應用程式詳細資料，如下所示：
離開這個部分前，請記下為 reCAPTCHA 建立的 Firebase 代管網站網域，以供日後使用。這樣一來，網站名稱就會與認證供應商綁定，只有來自該網站的要求會獲得驗證。
透過專案捷徑或左側的「建構」選單前往「主機」部分
或 
然後從該部分查閱為應用程式建立的網域。如果尚未設定，你可能需要點選幾個畫面才能完成設定。
6. 保護 API 金鑰
使用 Firebase 的同一個帳戶登入 Cloud Console，查看已建立的專案，
如果您有多個專案，可能需要使用下拉式選單或搜尋方塊，選取正確的 Firebase 專案名稱。
系統會開啟新建立的專案。您現在要將 Maps JavaScript API 新增至這個專案，以便在專案中使用，包括限制特定 API 金鑰和代管網域的使用權。
使用左側選單啟用專案的 Maps API。選取「API 和服務」選項和「已啟用的 API 和服務」。
選取「啟用 API 和服務」選項
在搜尋框中輸入「Maps Javascript API」。
選取相符結果。
然後按一下 API 上的「啟用」，將其新增至專案 (如果您先前使用過這個專案，可能已完成這項操作)。
啟用後，您可以選擇新增 API 金鑰並加以限制，但目前會略過這個步驟。
再次使用左選單選項，返回「API 和服務」部分，然後選取為您建立的瀏覽器金鑰。
在其中一項 API 限制中加入 Maps JavaScript API。
如果是正式版應用程式中的金鑰，您也應限制代管應用程式的網域。現在請使用您在 Firebase 中建立的網域，進行這項操作。此外，請在網域結尾加上 /*，確保涵蓋網域下的所有路徑。
如要進一步瞭解如何啟用這項功能，請參閱下列位置，進一步瞭解如何限制 API 金鑰。
https://developers.google.com/maps/api-security-best-practices#restricting-api-keys
7. 建立 reCAPTCHA 密鑰
下一步是建立 reCAPTCHA 專案，為用戶端和伺服器提供認證和金鑰。
前往 reCAPTCHA 網站 (https://www.google.com/recaptcha/)，然後按一下「開始使用」按鈕。
接著註冊新網站，請務必輸入要限制的正確網域。
如果有多個專案，請務必選取 Firebase 建立的 Google Cloud 專案。
這會建立兩組金鑰：一組是您將輸入 Firebase 控制台的私密金鑰，請勿將這組金鑰放在任何可公開檢視的網頁或應用程式中；另一組是您將在 Web 應用程式中使用的網站金鑰。
請勿關閉這個頁面，因為您會需要用到。按一下「複製密鑰」按鈕，然後返回 Firebase 網站。
8. 在 Firebase 中新增 reCAPTCHA
在 Firebase 管理中心，前往左側選單項目。在「Build」選單項目下方，選擇「App Check」。
必須先註冊應用程式，才能啟用服務清單 (先前新增代管服務至網站時已建立應用程式)，如需設定，請按一下「開始使用」。
按一下「應用程式」分頁標籤，開啟網頁應用程式，然後輸入從 reCAPTCHA 網站複製的密鑰，並按一下「儲存」。
現在 reCAPTCHA 供應商旁應該會顯示綠色勾號。這個網路應用程式現在可以使用 reCAPTCHA，確認使用者或網站是否正確呼叫服務。
在「API」分頁中，現在應該會顯示 Google 地圖平台 API 處於啟用狀態，但未強制執行。
您已將 reCAPTCHA 密鑰連結至 Firebase 專案，現在可以將程式碼新增至網頁，將網站金鑰與正確的供應商配對，以便搭配 Maps 應用程式使用。
reCAPTCHA 會檢查網站金鑰是否與私密金鑰相符，確認呼叫頁面正確無誤後，應用程式檢查會提供權杖，供後續呼叫 Maps JavaScript API 時使用。如果沒有這項認證，系統就不會提供權杖，且無法驗證要求。
9. 在網頁中新增驗證並部署。
返回 Cloud 控制台，複製使用 Maps API 時所需的 API 金鑰。
您可以在控制台的側邊選單中找到這項資訊，方法是依序點選「API 和服務」側邊選單和「憑證」選項。
您可以從中選取現有的瀏覽器金鑰 (但如前所述，您可以使用其他現有金鑰或建立新金鑰)。
按一下「顯示金鑰」按鈕，然後從顯示的對話方塊視窗複製金鑰。
返回 Firebase Studio 專案，您先前建立的 HTML 網頁已在此開啟。現在您可以將 API 金鑰新增至網頁，讓 Maps API 在網頁有「YOUR_API_KEY」的位置運作。
重新執行頁面後，現在會顯示不同的錯誤訊息。
也就是說，您用來代管網頁的開發網域不符合規定 (我們只新增了已部署的網域)。我們需要使用 Firebase 託管服務，將這個網站發布至正確的網域。如要瞭解詳情，請前往以下網址：
這部影片
在 Project IDX 中，更快建構、測試及部署 Firebase 網頁應用程式
如需更多詳細資料，請參閱 Maps JavaScript API 網站上的「地圖載入錯誤」。
如果遇到 RefererNotAllowedMapError，請將網頁部署至正確網域，即可修正這個問題。
返回 Firebase Studio，然後點選「Firebase Studio」圖示 (視您設定的選項而定，這個圖示可能位於最左側或最右側)，開啟託管選項。
在本程式碼研究室中，您接下來需要「使用 Firebase 託管應用程式」，將 Firebase 執行個體連結至 Studio 應用程式。
然後按一下「驗證 Firebase」，開始進行驗證程序，這樣一來，您的帳戶就能在 Studio 中，透過後端自動執行代管作業。
按照指令視窗中的指示授權部署作業。
按照畫面上的指示操作 (包括開啟新視窗)，在系統要求時複製授權碼，然後貼到 Firebase Studio 的指令視窗中。
如要進一步瞭解這項程序，請參閱以下網頁：
https://firebase.google.com/docs/studio/deploy-app
完成後，即可點選「initialize firebase hosting」，將專案連結至 Firebase 專案。
選取「使用現有專案」，然後選取您在稍早章節中建立的專案。接受其餘預設值 (範例可能會因您設定專案時選擇的名稱而有所不同)。
返回檔案總管檢視畫面，並將公開目錄中建立的 index.html 檔案，替換為根目錄中原有的檔案。
現在可以返回 Firebase Studio 側欄，將網站部署至正式環境。
控制台會顯示部署步驟。
開啟顯示的「Hosting URL」(主機代管網址) (本例為 https://my-app-check-project.web.app/，但您的專案會有所不同)。
現在應用程式會在頁面上顯示地圖，因為 API 適用於使用的網域。
現在您已建立可用的頁面，並限制可搭配 API 金鑰使用的 API 類型，以及 API 金鑰可使用的網域。下一步是將存取權限制在該網域內。如要這麼做，您必須新增先前產生的 Firebase 指令碼區段，使用 App Check 保護網頁。我們將在下一節中完成這項作業。
10. 安全網頁
雖然目前頁面會保護網域的 API 金鑰，但不會新增認證步驟，確保 API 金鑰是由正確的應用程式和使用者使用。惡意行為人仍可能竊取並使用金鑰。如要停止這項 Firebase 設定，必須在網頁中新增供應商和網站金鑰，才能取得用戶端的正確權杖。
您也可以看到 Firebase 正在追蹤 Maps API 的用量。由於未使用任何正確權杖，因此會發出未經驗證的要求。
您可以從 Firebase 專案取得必要的連線詳細資料。
從包含 Firebase 設定詳細資料的控制台取得 Firebase 詳細資料。前往 Firebase 的專案設定頁面，然後在應用程式的 CDN 部分下方，擷取 CDN 設定的程式碼部分 (最簡單)。
在 Firebase 專案中，選擇齒輪圖示即可顯示專案設定。
這會開啟下列頁面，其中包含應用程式一般部分中的詳細資料。
將這段程式碼複製到包含地圖且已代管的 Firebase Studio 頁面 (public/index.html)。如下所示 (包含您的詳細資料，而非這個檔案中的詳細資料)：
<!doctype html>
<html>
<head>
<title>Secure Map</title>
<style>
#map {
height: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h3>App Check Security Demo</h3>
<!--The div element for the map -->
<div id="map"></div>
<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>
<script type="module">
// Import the functions you need from the SDKs you need
import { initializeApp } from "https://www.gstatic.com/firebasejs/12.2.1/firebase-app.js";
const firebaseConfig = {
apiKey: "YOUR_API_KEY",
authDomain: "appcheck-map.firebaseapp.com",
projectId: "appcheck-map",
storageBucket: "appcheck-map.firebasestorage.app",
messagingSenderId: "YOUR_SENDER_KEY",
appId: "YOUR_APP_ID"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
let map;
async function initMap() {
const { Map } = await google.maps.importLibrary("maps");
map = new Map(document.getElementById("map"), {
center: { lat: 51.5208, lng: -0.0977 },
zoom: 17,
});
}
initMap();
</script>
</body>
</html>
Firebase 已新增至應用程式，現在可以使用先前從 reCAPTCHA 網站取得的網站金鑰，呼叫 reCAPTCHA 程式庫。
如要進一步瞭解如何新增這些版面，請參閱下列 Google 地圖說明文件頁面：
https://developers.google.com/maps/documentation/javascript/maps-app-check
在頁面中加入 App Check 程式庫，然後載入函式，使用 Firebase 設定初始化 App Check，並使用 ReCaptchaV3Provider 取得權杖。
首先，請匯入 App Check 程式庫：
import {
getToken,
initializeAppCheck,
ReCaptchaV3Provider,
} from "https://www.gstatic.com/firebasejs/12.2.1/firebase-app-check.js";
接著，您會新增程式碼，使用網站權杖初始化 Firebase 設定和 reCAPTCHA 提供者，藉此初始化 App Check。
// Get App Check Token
const appCheck = initializeAppCheck(app, {
provider: new ReCaptchaV3Provider('<INSERT SITE KEY>'),
isTokenAutoRefreshEnabled: true,
});
最後，使用 Maps Core 程式庫的設定函式，將函式附加至地圖控制項，即可取得權杖。視符記效期長度而定，地圖控制項會視需要提出符記要求。
const { Settings } = await google.maps.importLibrary('core');
Settings.getInstance().fetchAppCheckToken = () =>
getToken(appCheck, /* forceRefresh = */ false);
完整檔案如下：
<!doctype html>
<html>
<head>
<title>Secure Map</title>
<style>
#map {
height: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h3>App Check Security Demo</h3>
<!--The div element for the map -->
<div id="map"></div>
<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>
<script type="module">
import { initializeApp } from "https://www.gstatic.com/firebasejs/12.2.1/firebase-app.js";
import {
getToken,
initializeAppCheck,
ReCaptchaV3Provider,
} from "https://www.gstatic.com/firebasejs/12.2.1/firebase-app-check.js";
const firebaseConfig = {
apiKey: "YOUR_API_KEY",
authDomain: "appcheck-map.firebaseapp.com",
projectId: "appcheck-map",
storageBucket: "appcheck-map.firebasestorage.app",
messagingSenderId: "YOUR_SENDER_KEY",
appId: "YOUR_APP_ID"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
// Get App Check Token
const appCheck = initializeAppCheck(app, {
provider: new ReCaptchaV3Provider('<INSERT SITE KEY>'),
isTokenAutoRefreshEnabled: true,
});
let map;
async function initMap() {
const { Map } = await google.maps.importLibrary("maps");
const { Settings } = await google.maps.importLibrary('core');
Settings.getInstance().fetchAppCheckToken = () =>
getToken(appCheck, /* forceRefresh = */ false);
map = new Map(document.getElementById("map"), {
center: { lat: 51.5208, lng: -0.0977 },
zoom: 17,
});
}
initMap();
</script>
</body>
</html>
使用 Firebase Studio 將這個檔案部署至 Firebase 網站，然後執行該網頁。
11. 強制執行監控
現在頁面已設定完成，執行時您會看到系統正在檢查。返回 Firebase 控制台，再次開啟「應用程式檢查」部分。App Check 現在應該會監控 Maps JavaScript API。
開啟視窗後，您會看到用戶端正在提出要求，且認證機制運作正常 (圖表上會顯示深藍色的「已驗證」要求)。在驗證完成前，其他要求會顯示開發階段的呼叫。
確認用戶端可正常運作後，即可在網站上啟用強制執行功能，確保 API 金鑰無法用於無效的用戶端應用程式。按一下「強制執行」按鈕，即可開始強制執行。
按一下這個按鈕會顯示大型警告標誌，指出這會鎖定應用程式。在實際情況中，只有在您確定所有用戶端都有正確的鍵且運作正常時，才會執行這項操作，否則使用者可能無法存取網站。
這項作業也可能需要一段時間才會生效。如果立即測試強制執行，可能還來不及傳播，因此畫面上會顯示相關附註。
要求網頁時，您應該會發現網頁運作方式與先前相同，網站實際上沒有任何變更。
現在，您應該會看到控制台中的已驗證要求數量增加，如下所示：
如要測試這項功能是否正常運作，請返回程式碼研究室中的原始範例，然後建立不含應用程式檢查功能的新網頁。將這個網頁命名為 nocheck.html，並放在 public 資料夾中，與 index.html 位於相同位置。
<!doctype html>
<html>
<head>
<title>Secure Map</title>
<style>
#map {
height: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h3>App Check Security Demo</h3>
<!--The div element for the map -->
<div id="map"></div>
<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>
<script>
let map;
async function initMap() {
const { Map } = await google.maps.importLibrary("maps");
map = new Map(document.getElementById("map"), {
center: { lat: 51.5208, lng: -0.0977 },
zoom: 17,
});
}
initMap();
</script>
</body>
</html>
完成上述步驟並輸入正確的 API 金鑰後，要求網頁 (使用 yourdomain/nocheck.html) 時，您應該會看到下列灰色錯誤方塊。
檢查控制台，您應該會看到類似下列內容的錯誤訊息：
應用程式檢查已成功封鎖網頁上的地圖要求，因為該網頁不再取得強制執行的網站適用的應用程式檢查權杖。
12. 恭喜！
恭喜，您已成功在網站上啟用 App Check！
您已成功建構應用程式，並使用 Firebase App Check 確保要求來自有效網域和使用者。
您學到的內容
- 瞭解如何使用 Firebase Studio 託管及部署網頁。
- 瞭解如何使用 Cloud Console 啟用及保護 Google 地圖平台 API。
- 如何使用 reCAPTURE 產生可用於驗證通話的金鑰。
- 如何使用 Firebase App Check，並將其整合至 Maps JavaScript API。
- 瞭解如何透過 Firebase Studio，強制執行及監控對受保護網站的呼叫。