1. Trước khi bắt đầu
Sản phẩm bạn sẽ tạo ra.
Trong lớp học lập trình này, bạn sẽ sử dụng App Check để thêm một lớp bảo vệ khác cho khoá API được dùng trong môi trường web.
Cụ thể, bạn sẽ làm theo các bước sau trong Lớp học lập trình để liên kết các chức năng với nhau:
- Tạo một trang web để lưu trữ Bản đồ bằng API JavaScript của Google Maps Platform.
- Lưu trữ trang để người dùng có thể truy cập trực tuyến.
- Hạn chế các miền và API có thể sử dụng API này bằng Cloud Console.
- Thêm và khởi chạy thư viện Kiểm tra ứng dụng thông qua Firebase.
- Thêm trình cung cấp chứng thực để kiểm tra tính hợp lệ của ứng dụng.
- Thực thi việc kiểm tra trên ứng dụng và màn hình.
Khi kết thúc lớp học lập trình, bạn sẽ có một trang web hoạt động, trang web này sẽ thực thi tính bảo mật trên cả khoá API đang được sử dụng, các miền mà từ đó những khoá này được truy cập và các loại ứng dụng có thể sử dụng chúng.
2. Điều kiện tiên quyết
Để bật App Check, bạn cần sử dụng 3 dịch vụ của Google để cung cấp biện pháp bảo vệ. Bạn nên tìm hiểu kỹ về những dịch vụ này.
Firebase – Cung cấp việc thực thi các dịch vụ kiểm tra để đảm bảo rằng khoá API được tham chiếu từ các miền thích hợp. Thao tác này cũng sẽ cung cấp chức năng lưu trữ và triển khai thông qua việc sử dụng Firebase Studio.
reCAPTCHA – Cung cấp chức năng kiểm tra xem người dùng có phải là người thật đang sử dụng ứng dụng hay không, đồng thời cung cấp khoá công khai và khoá riêng tư để kết nối Firebase với miền ứng dụng khách.
Google Cloud Platform – Nền tảng này cung cấp các khoá API mà cả Google Maps Platform và Firebase đều sử dụng, cũng như hạn chế đối với miền sử dụng khoá Maps.
Bạn có thể xem cách tất cả các thành phần này hoạt động cùng nhau trong sơ đồ kiến trúc sau:
Khi sử dụng App Check và Google Maps Platform, các phần tử sau đây sẽ hoạt động cùng nhau để xác định xem các yêu cầu có đến từ một ứng dụng và người dùng hợp lệ hay không, bằng cách sử dụng chứng thực do một trình cung cấp chứng thực (trong trường hợp này là reCAPTCHA) cung cấp.
Việc này được thực hiện thông qua việc sử dụng App Check SDK do Firebase cung cấp. SDK này sẽ kiểm tra tính hợp lệ của ứng dụng gọi, sau đó cung cấp một mã thông báo cho ứng dụng mà các lệnh gọi tiếp theo đến API JavaScript của Google Maps Platform sẽ được thực hiện. Đến lượt, Google Maps Platform Javascript API sẽ kiểm tra tính hợp lệ của mã thông báo được cung cấp bằng Firebase để đảm bảo mã thông báo đó đến từ cả miền chính xác và thông qua nhà cung cấp chứng thực của một người dùng hợp lệ.
Bạn có thể tìm thêm thông tin chi tiết về cách sử dụng App Check và Maps JavaScript API tại vị trí sau đây. Bạn nên tìm hiểu kỹ các bước cần thiết.
https://developers.google.com/maps/documentation/javascript/maps-app-check
3. Bắt đầu thiết lập
Nếu chưa có tài khoản Google Cloud, bạn cần thiết lập một tài khoản có tính năng thanh toán ngay từ đầu. Hãy làm theo hướng dẫn để tạo trước khi bắt đầu.
Thiết lập Nền tảng Google Maps
Nếu bạn chưa có tài khoản Google Cloud Platform và dự án có bật tính năng thanh toán, vui lòng xem hướng dẫn Bắt đầu sử dụng Google Maps Platform để tạo tài khoản thanh toán và dự án.
- Trong Cloud Console, hãy nhấp vào trình đơn thả xuống dự án rồi chọn dự án mà bạn muốn sử dụng cho lớp học lập trình này.
- Bật các API và SDK của Google Maps Platform cần thiết cho lớp học lập trình này trong Google Cloud Marketplace. Để làm như vậy, hãy làm theo các bước trong video này hoặc tài liệu này.
- Tạo khoá API trong trang Thông tin xác thực của Cloud Console. Bạn có thể làm theo các bước trong video này hoặc tài liệu này. Tất cả yêu cầu đối với Nền tảng Google Maps đều cần có khoá API.
Các yêu cầu khác đối với Lớp học lập trình này
Để hoàn tất lớp học lập trình này, bạn cần có các tài khoản, dịch vụ và công cụ sau:
- Kiến thức cơ bản về JavaScript, HTML và CSS
- Tài khoản Google Cloud có bật tính năng thanh toán (như đã đề cập)
- Khoá API Google Maps Platform có API JavaScript của Maps được bật (Bạn sẽ thực hiện việc này trong lớp học lập trình).
- Có kiến thức cơ bản về việc lưu trữ và triển khai web (Bạn sẽ được hướng dẫn về vấn đề này trong lớp học lập trình). Việc này sẽ được thực hiện thông qua bảng điều khiển của Firebase và Firebase Studio.
- Một trình duyệt web để xem các tệp trong khi bạn làm việc.
4. Tạo trang trong Firebase Studio
Lớp học lập trình này không giả định rằng bạn đã tạo một ứng dụng và lớp học lập trình này sử dụng Firebase Studio để tạo một trang lưu trữ ứng dụng Bản đồ và triển khai trang đó lên Firebase cho mục đích kiểm thử. Nếu đã có ứng dụng, bạn cũng có thể sử dụng ứng dụng đó thay vì tạo ứng dụng mới, bằng cách thay đổi các miền máy chủ lưu trữ, đoạn mã và khoá API thích hợp để đảm bảo triển khai đúng cách.
Chuyển đến Firebase Studio (bạn cần có Tài khoản Google) rồi tạo một ứng dụng HTML đơn giản mới. Bạn có thể phải nhấp vào nút "Xem tất cả các mẫu" để hiển thị lựa chọn này hoặc chỉ cần nhấp vào đường liên kết này để truy cập trực tiếp.
Đặt tên phù hợp cho không gian làm việc, chẳng hạn như myappcheck-map (cộng thêm một số ngẫu nhiên để đảm bảo tính duy nhất, hệ thống sẽ thêm một số cho bạn). Sau đó, Firebase Studio sẽ tạo không gian làm việc.
Sau khi điền tên, bạn có thể nhấp vào nút tạo để bắt đầu quy trình tạo dự án.
Sau khi tạo, bạn có thể thay thế văn bản trong tệp index.html bằng mã sau đây để tạo một trang có bản đồ.
<!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>
Khi chạy, should sẽ cho ra một trang hiển thị bản đồ của ứng dụng đang hoạt động như trong hình, nhưng!
Mặc dù trang sẽ được tải thực tế nhưng một lỗi sẽ xuất hiện vì trang sẽ cần một khoá API Google Maps Platform. Khoá này sẽ được thêm vào trong một phần tiếp theo.
Bạn có thể xem thông báo lỗi thực tế trong bảng điều khiển web trong Firebase Studio.
Để khắc phục vấn đề này, chúng ta cần thêm một khoá API vào trang. Khoá API là cách trang và việc triển khai API JavaScript của Maps được liên kết với nhau. Đây cũng là một điểm yếu, vì khoá này cần được chứa trong trang theo cách không mã hoá, trong đó khoá API có thể được lấy và sử dụng trên nhiều trang web.
Một phương pháp bảo vệ là thông qua việc sử dụng các hạn chế về ứng dụng, cho dù thông qua loại ứng dụng đang được sử dụng hay thông qua miền hoặc địa chỉ IP giới thiệu đang được gọi. Bạn có thể tìm hiểu thêm về các phương pháp hay nhất tại trang web sau:
https://developers.google.com/maps/api-security-best-practices#rec-best-practices
hoặc thông qua việc sử dụng các lệnh gọi trực tiếp từ dòng lệnh hoặc máy chủ, các ứng dụng này không có cách nào cung cấp thông tin về nguồn giới thiệu hoặc được theo dõi, vì vậy, chúng có thể là một lỗ hổng bảo mật.
5. Tạo một ứng dụng Firebase
Firebase được dùng để cung cấp chức năng liên kết trình cung cấp chứng thực nhằm kiểm tra những nội dung sau:
- Các yêu cầu bắt nguồn từ ứng dụng xác thực của bạn
- Các yêu cầu bắt nguồn từ một thiết bị và phiên người dùng xác thực, không bị giả mạo.
Trong lớp học lập trình này, reCAPTCHA phiên bản 3 sẽ được dùng làm trình cung cấp chứng thực này.
Tạo một ứng dụng và máy chủ lưu trữ Firebase.
Truy cập vào https://firebase.google.com/ rồi tạo một dự án Firebase mới bằng cách nhấp vào đường liên kết "Chuyển đến bảng điều khiển".
Tạo một dự án mới bằng cách nhấp vào khu vực sau.
Chọn tên cho dự án, chẳng hạn như My App Check Project (Dự án App Check của tôi). Bạn không cần phải dùng tên giống như trước đây vì đây chỉ là tên tham chiếu. Bạn có thể chỉnh sửa tên thực tế của dự án ngay bên dưới văn bản. Tên này sẽ bao gồm tên bạn đã nhập và nếu không phải là tên duy nhất, thì tên này sẽ có thêm một số.
Nếu được nhắc thêm các dịch vụ khác (chẳng hạn như Google Analytics) vào ứng dụng, bạn có thể chấp nhận hoặc không chấp nhận. Tuy nhiên, đối với lớp học lập trình này, bạn không cần thêm các dịch vụ đó nên có thể bỏ qua.
Nhấp vào nút "tạo dự án" rồi đợi dự án được tạo. Bạn sẽ nhận được thông báo khi quá trình này hoàn tất.
Nhấp vào "Tiếp tục" khi bạn đã sẵn sàng bắt đầu tương tác với dự án.
Trên trang chính, bạn có thể chọn bắt đầu bằng cách thêm Firebase vào ứng dụng và chọn lựa chọn web.
Chọn thiết lập tính năng Lưu trữ Firebase cho trang web của bạn để các tệp có thể chuyển đến một nơi nào đó sau khi được triển khai (đối với trang web thực tế, bạn có thể sử dụng lựa chọn của riêng mình, nhưng để làm theo Codelab này, bạn sẽ triển khai cho tính năng Lưu trữ Firebase).
Nhấp vào Register app (Đăng ký ứng dụng) để tạo ứng dụng. Tiếp theo, bạn sẽ lấy tập lệnh đã tạo và dùng tập lệnh đó để tham chiếu dự án trong Firebase từ ứng dụng web của chúng ta.
Mã cấu hình firebase trong thẻ tiếp theo sẽ được dùng trong ứng dụng để kết nối firebase và các API bản đồ với nhau. Vì vậy, bạn nên sao chép mã này từ phần "Sử dụng thẻ tập lệnh". Bạn sẽ dán mã này vào tệp index.html của dự án.
Nhấp vào "Tiếp theo" cho các phần khác, sau đó xem ứng dụng đã tạo trong phần cài đặt dự án của trang web.
Nếu cần quay lại và tìm thông tin chi tiết về cấu hình vào một ngày sau đó, bạn cũng có thể tìm thông tin chi tiết về ứng dụng bằng nút "Cài đặt", như minh hoạ:
Trước khi rời khỏi phần này, bạn cần lưu ý đến miền của trang web lưu trữ Firebase đã tạo để sử dụng sau này với reCAPTCHA. Điều này cho phép tên trang web được liên kết với nhà cung cấp chứng thực, tức là chỉ những yêu cầu từ trang web đó mới được xác minh.
Chuyển đến phần lưu trữ trong lối tắt dự án hoặc trình đơn Bản dựng ở bên trái
hoặc 
Trong phần này, hãy tìm miền đã được tạo cho ứng dụng. Bạn có thể phải nhấp qua một vài màn hình để thiết lập nếu chưa thiết lập.
6. Khoá API bảo mật
Truy cập vào Cloud Console bằng chính tài khoản mà bạn đang sử dụng Firebase để xem dự án đã được tạo,
Nếu có nhiều dự án, bạn có thể cần sử dụng trình đơn thả xuống hoặc hộp tìm kiếm để chọn dự án phù hợp, có tên dự án Firebase của bạn.
Thao tác này sẽ mở dự án mới tạo. Bây giờ, bạn sẽ thêm Maps JavaScript API vào dự án này để có thể sử dụng trong dự án, bao gồm cả việc hạn chế sử dụng API này cho một khoá API và miền lưu trữ cụ thể.
Sử dụng trình đơn ở bên trái để bật Maps API cho dự án. Chọn mục "API và dịch vụ" rồi chọn "API và dịch vụ đã bật".
Chọn "BẬT API VÀ DỊCH VỤ"
Nhập "Maps JavaScript API" vào hộp tìm kiếm.
Chọn kết quả phù hợp.
Sau đó, hãy nhấp vào nút bật trên API để thêm API đó vào dự án của bạn (bạn có thể đã thực hiện việc này nếu trước đây đã dùng dự án này).
Sau khi bật tính năng này, bạn có thể chọn thêm một khoá API và hạn chế khoá đó, nhưng hiện tại, bạn có thể bỏ qua bước này.
Tiếp tục sử dụng các lựa chọn trong trình đơn bên trái, quay lại phần API và dịch vụ rồi chọn khoá trình duyệt đã được tạo cho bạn.
Thêm Maps JavaScript API vào một trong các quy tắc hạn chế API.
Đối với các khoá trong một ứng dụng đang hoạt động, bạn cũng sẽ đặt ra giới hạn về miền đang lưu trữ ứng dụng. Hãy làm việc này ngay bây giờ bằng cách sử dụng miền được tạo cho bạn trong Firebase. Bạn cũng nên thêm /* vào cuối miền để đảm bảo miền đó bao gồm tất cả các đường dẫn bên dưới.
Bạn có thể tìm thêm thông tin về cách bật chế độ này tại vị trí sau đây để biết thêm thông tin về việc hạn chế khoá API.
https://developers.google.com/maps/api-security-best-practices#restricting-api-keys
7. Tạo khoá bí mật reCAPTCHA
Bước tiếp theo là tạo một dự án reCAPTCHA để cung cấp chứng thực và khoá cho cả ứng dụng khách và máy chủ.
Truy cập vào trang web reCAPTCHA tại https://www.google.com/recaptcha/ rồi nhấp vào nút bắt đầu.
Tiếp theo, hãy đăng ký một trang web mới và đảm bảo bạn nhập đúng miền cần hạn chế.
Ngoài ra, hãy nhớ chọn cùng một Dự án trên Google Cloud mà Firebase đã tạo trong trường hợp bạn có nhiều dự án.
Thao tác này sẽ tạo ra hai khoá, một khoá bí mật mà bạn sẽ nhập vào bảng điều khiển Firebase (không bao giờ được đưa khoá này vào bất kỳ trang hoặc ứng dụng nào mà mọi người có thể xem công khai) và một khoá trang web mà bạn sẽ sử dụng trong ứng dụng web.
Hãy giữ trang này mở vì bạn sẽ cần đến nó. Nhấp vào nút sao chép Khoá bí mật rồi quay lại trang web firebase.
8. Thêm reCAPTCHA vào Firebase
Trong bảng điều khiển Quản trị viên Firebase, hãy chuyển đến các mục trong trình đơn bên trái. Trong mục trình đơn Build (Tạo), hãy chọn App Check.
Bạn không thể bật danh sách dịch vụ cho đến khi có một Ứng dụng đã đăng ký (ứng dụng này được tạo trước đó khi bạn thêm dịch vụ lưu trữ vào trang web), hãy nhấp vào Bắt đầu nếu bạn cần thiết lập danh sách này.
Nhấp vào thẻ Ứng dụng rồi mở Ứng dụng web, sau đó nhập bí mật mà bạn đã sao chép từ trang web reCAPTCHA rồi nhấp vào Lưu.
Lúc này, sẽ có một dấu kiểm màu xanh lục bên cạnh nhà cung cấp reCAPTCHA. Giờ đây, ứng dụng web này có thể sử dụng reCAPTCHA để chứng thực xem người dùng hoặc trang web có đang gọi dịch vụ một cách chính xác hay không.
Trên thẻ API, bạn sẽ thấy rằng Google Maps Platform API đang hoạt động nhưng hiện không được thực thi.
Giờ đây, bạn đã liên kết khoá bí mật reCAPTCHA với dự án Firebase và có thể thêm mã vào trang web để so khớp khoá trang web với nhà cung cấp phù hợp để sử dụng với ứng dụng Maps.
reCAPTCHA sẽ kiểm tra khoá trang web để so khớp với khoá bí mật. Sau khi hoàn tất, reCAPTCHA sẽ xác nhận rằng trang gọi là chính xác và App Check sẽ cung cấp một mã thông báo mà các lệnh gọi tiếp theo đến Maps JavaScript API có thể sử dụng. Nếu không có chứng thực này, mã thông báo sẽ không được cung cấp và các yêu cầu sẽ không được xác thực.
9. Thêm quy trình xác minh vào trang và triển khai.
Quay lại bảng điều khiển đám mây rồi sao chép khoá API cần thiết để sử dụng cho Maps API.
Bạn có thể tìm thấy thông tin này trong trình đơn bên của bảng điều khiển, trong trình đơn bên của API và dịch vụ, trong mục Thông tin đăng nhập.
Từ đây, bạn có thể chọn Khoá trình duyệt hiện có (mặc dù như đã lưu ý, bạn có thể sử dụng một khoá hiện có khác hoặc tạo một khoá mới).
Nhấp vào nút hiện khoá rồi sao chép khoá từ cửa sổ hộp thoại xuất hiện.
Quay lại dự án Firebase Studio mà bạn đã mở trang HTML bạn tạo trước đó. Giờ đây, bạn có thể thêm khoá API vào trang để API Maps hoạt động ở nơi trang có "YOUR_API_KEY".
Khi bạn chạy lại trang, giờ đây sẽ có một thông báo lỗi khác.
Điều này có nghĩa là miền phát triển mà bạn đang lưu trữ trang không được phép (chúng tôi chỉ thêm miền đã triển khai). Chúng ta sẽ cần xuất bản trang web này lên miền chính xác bằng tính năng lưu trữ Firebase. Bạn có thể xem thêm thông tin tại vị trí sau:
Triển khai bằng dịch vụ lưu trữ Firebase
và video này
Tạo, kiểm thử và triển khai ứng dụng web Firebase nhanh hơn trong Project IDX
Bạn có thể xem thêm thông tin chi tiết trong phần Lỗi tải bản đồ trên trang web Maps JavaScript API.
Nếu gặp lỗi RefererNotAllowedMapError, bạn có thể khắc phục bằng cách triển khai trang đến đúng miền.
Quay lại Firebase Studio rồi nhấp vào biểu tượng "Firebase Studio" (biểu tượng này có thể nằm ở phía bên trái hoặc bên phải, tuỳ thuộc vào lựa chọn bạn đã thiết lập) để mở các lựa chọn lưu trữ.
Trong lớp học lập trình này, bạn sẽ cần "Lưu trữ ứng dụng bằng Firebase" để kết nối phiên bản Firebase với ứng dụng phòng thu.
Sau đó , hãy nhấp vào "Xác thực Firebase" để bắt đầu quá trình xác thực. Thao tác này cho phép tài khoản của bạn có thể tự động hoá việc lưu trữ bằng phần phụ trợ trong Studio.
Làm theo hướng dẫn trong cửa sổ lệnh để uỷ quyền triển khai.
Làm theo hướng dẫn trên màn hình (bao gồm cả việc mở một cửa sổ mới), sao chép mã uỷ quyền khi hệ thống yêu cầu và dán mã đó vào cửa sổ lệnh trong Firebase Studio.
Bạn có thể xem thêm thông tin về quy trình này tại:
https://firebase.google.com/docs/studio/deploy-app
Sau khi hoàn tất, bạn có thể nhấp vào "initialize firebase hosting" (khởi động dịch vụ lưu trữ Firebase) để liên kết dự án với dự án Firebase.
Chọn "Sử dụng một dự án hiện có" rồi chọn dự án mà bạn đã tạo trong phần trước. Chấp nhận các giá trị mặc định còn lại (ví dụ của bạn có thể khác tuỳ thuộc vào tên mà bạn chọn khi thiết lập dự án).
Quay lại chế độ xem trình khám phá và thay thế tệp index.html đã tạo trong thư mục công khai bằng tệp bạn đã có trong thư mục gốc.
Giờ đây, bạn có thể quay lại thanh bên của Firebase Studio và triển khai trang web cho bản phát hành công khai.
Thao tác này sẽ cho thấy các bước triển khai trong bảng điều khiển.
Mở trang web đã triển khai từ "URL lưu trữ" xuất hiện (được ghi chú ở đây là https://my-app-check-project.web.app/ nhưng sẽ khác đối với dự án của bạn).
Giờ đây, ứng dụng sẽ hiển thị bản đồ trên trang khi các API hoạt động cho những miền đang được sử dụng.
Giờ đây, bạn đã có một trang hoạt động, với các quy tắc hạn chế đối với loại API có thể dùng với khoá API và cả những miền mà khoá API có thể dùng. Bước tiếp theo là hạn chế quyền truy cập chỉ vào miền đó. Để làm việc này, bạn cần thêm phần tập lệnh Firebase đã tạo trước đó để bảo mật trang bằng tính năng Kiểm tra ứng dụng. Việc này sẽ được thực hiện trong phần tiếp theo.
10. Trang bảo mật
Mặc dù trang hiện tại bảo mật khoá API cho miền, nhưng trang này không thêm bước chứng thực để đảm bảo rằng khoá API đang được ứng dụng phù hợp và một người dùng. Kẻ xấu vẫn có thể đánh cắp và sử dụng khoá này. Để dừng cấu hình Firebase này, bạn cần thêm khoá nhà cung cấp và khoá trang vào trang để nhận mã thông báo chính xác cho ứng dụng.
Bạn cũng có thể thấy rằng việc sử dụng Maps API đang được theo dõi trong Firebase. Vì không sử dụng mã thông báo chính xác nào, nên yêu cầu này là yêu cầu chưa được xác minh.
Bạn có thể lấy thông tin kết nối bắt buộc từ dự án Firebase.
Lấy thông tin chi tiết về Firebase từ bảng điều khiển có chứa thông tin chi tiết về cấu hình Firebase. Chuyển đến trang cài đặt dự án trong Firebase và trong phần CDN của ứng dụng, hãy lấy phần mã để thiết lập CDN (đơn giản nhất).
Trong dự án Firebase, hãy chọn biểu tượng bánh răng để hiện phần cài đặt dự án.
Thao tác này sẽ mở trang sau đây, trong đó có thông tin chi tiết trong phần chung, bên dưới ứng dụng của bạn.
Sao chép mã này vào trang Firebase Studio (public/index.html) có chứa bản đồ và được lưu trữ. Tệp này sẽ có dạng như sau (với thông tin chi tiết của bạn chứ không phải thông tin trong tệp này):
<!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>
Giờ đây, Firebase đã được thêm vào ứng dụng của chúng ta, các lệnh gọi đến thư viện reCAPTCHA bằng khoá trang web được cung cấp mà bạn đã nhận được trước đó từ trang web reCAPTCHA (từ trước).
Bạn có thể xem thêm thông tin về cách thêm các phần này trên trang tài liệu sau đây của Maps:
https://developers.google.com/maps/documentation/javascript/maps-app-check
Thêm thư viện Kiểm tra ứng dụng vào trang, sau đó tải các hàm để khởi chạy tính năng kiểm tra ứng dụng bằng cấu hình firebase và nhận mã thông báo bằng ReCaptchaV3Provider.
Trước tiên, hãy nhập thư viện Kiểm tra ứng dụng:
import {
getToken,
initializeAppCheck,
ReCaptchaV3Provider,
} from "https://www.gstatic.com/firebasejs/12.2.1/firebase-app-check.js";
Tiếp theo, bạn thêm mã để khởi chạy App Check bằng cấu hình Firebase và trình cung cấp reCAPTCHA bằng mã thông báo trang web.
// Get App Check Token
const appCheck = initializeAppCheck(app, {
provider: new ReCaptchaV3Provider('<INSERT SITE KEY>'),
isTokenAutoRefreshEnabled: true,
});
Cuối cùng, hãy đính kèm một hàm vào Map Control bằng cách sử dụng hàm cài đặt của thư viện Maps Core để lấy mã thông báo. Việc này sẽ tạo ra các yêu cầu về mã thông báo theo yêu cầu của chế độ kiểm soát bản đồ, tuỳ thuộc vào thời gian tồn tại của mã thông báo.
const { Settings } = await google.maps.importLibrary('core');
Settings.getInstance().fetchAppCheckToken = () =>
getToken(appCheck, /* forceRefresh = */ false);
Sau đây là nội dung đầy đủ của tệp:
<!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>
Triển khai trang này lên trang web Firebase bằng Firebase Studio và chạy trang.
11. Thực thi giám sát
Giờ đây, trang đã được thiết lập, khi chạy, bạn có thể thấy rằng trang đang được kiểm tra. Quay lại bảng điều khiển của Firebase rồi mở lại phần App Check. Giờ đây, App Check sẽ giám sát Maps JavaScript API.
Khi bạn mở cửa sổ này, bạn sẽ thấy rằng các ứng dụng đang đưa ra yêu cầu và chứng thực đang hoạt động (thể hiện bằng các yêu cầu "đã xác minh" màu xanh dương đậm trên biểu đồ). Các yêu cầu khác sẽ cho thấy các lệnh gọi trong giai đoạn phát triển trước khi quá trình xác minh hoàn tất.
Giờ đây, khi thấy các ứng dụng đang hoạt động, bạn có thể bật chế độ thực thi trên trang web để đảm bảo rằng các khoá API không thể được dùng từ một ứng dụng không hợp lệ. Nhấp vào nút Thực thi để bắt đầu thực thi.
Khi nhấp vào nút này, bạn sẽ thấy một dấu hiệu cảnh báo lớn cho biết thao tác này sẽ khoá ứng dụng của bạn. Trong thực tế, bạn chỉ nên thực hiện thao tác này khi biết rằng tất cả các ứng dụng đều có đúng khoá và đang hoạt động. Nếu không, người dùng có thể không truy cập được vào trang web.
Cũng có thể mất một khoảng thời gian để thực thi. Điều này được ghi trên màn hình. Nếu bạn kiểm tra việc thực thi ngay lập tức, thì có thể quy tắc chưa có thời gian để lan truyền.
Khi đưa ra yêu cầu cho trang, bạn sẽ thấy trang hoạt động như trước đây, không có gì thay đổi trên trang web.
Giờ đây, theo thời gian, bạn sẽ thấy số lượng yêu cầu đã xác minh trong bảng điều khiển tăng lên, như có thể thấy ở đây:
Bạn có thể kiểm thử xem chức năng này có hoạt động hay không bằng cách quay lại mẫu ban đầu trong lớp học lập trình và tạo một trang mới mà không có chức năng kiểm tra ứng dụng. Gọi trang này là nocheck.html và đặt trang này vào thư mục công khai ở cùng vị trí với 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>
Sau khi thực hiện việc này và nhập đúng khoá API, khi yêu cầu trang (sử dụng yourdomain/nocheck.html), bạn sẽ thấy hộp lỗi màu xám sau đây.
Khi kiểm tra bảng điều khiển, bạn sẽ thấy một thông báo lỗi như sau:
Tính năng kiểm tra ứng dụng đã chặn thành công yêu cầu về bản đồ trên trang vì trang này không còn nhận được mã thông báo kiểm tra ứng dụng cho trang web được thực thi nữa.
12. Xin chúc mừng!
Xin chúc mừng, bạn đã bật thành công App Check trên trang web của mình!
Bạn đã tạo thành công một ứng dụng sử dụng tính năng Kiểm tra ứng dụng Firebase để đảm bảo rằng các yêu cầu đến từ một miền và người dùng hợp lệ.
Kiến thức bạn học được
- Cách sử dụng Firebase Studio để lưu trữ và triển khai một trang web.
- Cách sử dụng Cloud Console để bật và bảo mật các API của Google Maps Platform.
- Cách sử dụng reCAPTURE để tạo khoá có thể dùng để chứng thực các lệnh gọi.
- Cách sử dụng Firebase App Check và tích hợp tính năng này vào Maps JavaScript API.
- Xem cách thực thi và giám sát các lệnh gọi đến các trang web được bảo vệ bằng Firebase Studio.