ตรวจสอบคำขอ Places API ด้วย Firebase AppCheck และ reCAPTCHA  |  Google Codelabs (2025)

Table of Contents
1. ก่อนเริ่มต้น สิ่งที่คุณจะสร้าง 2. ข้อกำหนดเบื้องต้น ผลิตภัณฑ์ Google Cloud ที่จําเป็น ผลิตภัณฑ์ Google Maps Platform ที่จําเป็น ข้อกำหนดอื่นๆ สำหรับ Codelab นี้ 3. เตรียมตัว ตั้งค่า Google Maps Platform ข้อมูลเข้าสู่ระบบเริ่มต้นของแอปพลิเคชัน ข้อมูลเข้าสู่ระบบอื่น (ไม่แนะนำ) 4. การผสานรวม Firebase AppCheck สร้างแอปพลิเคชันใน Firebase โค้ดเริ่มต้น Firebase 5. แอปพลิเคชันสาธิต การตั้งค่า Node.js การกําหนดค่า: ตัวแปรสภาพแวดล้อมสําหรับโปรเจ็กต์ Google Cloud 6. ภาพรวมโค้ด index.html script.js server.js 7. เรียกใช้แอปพลิเคชัน การแก้ปัญหา: ตรวจสอบว่ารหัสโปรเจ็กต์ Google ที่สอดคล้องกันในการตั้งค่า อื่นๆ ข้อมูลเข้าสู่ระบบ ADC 8. เยี่ยมไปเลย ขั้นตอนติดตามผล Connect Programs Developer consoles

ตรวจสอบคำขอ Places API ด้วย Firebase AppCheck และ reCAPTCHA | Google Codelabs (2) หน้านี้ได้รับการแปลโดย Cloud Translation API

1. ก่อนเริ่มต้น

คุณจะใช้ Firebase App Check เพื่อตรวจสอบความถูกต้องของผู้ใช้ที่โต้ตอบกับเว็บแอปพลิเคชัน โดยใช้ประโยชน์จากโทเค็น JWT ของ reCAPTCHA เพื่อยืนยันเซสชันของผู้ใช้ การตั้งค่านี้จะช่วยให้คุณจัดการคําขอจากแอปพลิเคชันไคลเอ็นต์ไปยัง Places API (ใหม่) ได้อย่างปลอดภัย

ตรวจสอบคำขอ Places API ด้วย Firebase AppCheck และ reCAPTCHA | Google Codelabs (3)

ลิงก์แบบเรียลไทม์

สิ่งที่คุณจะสร้าง

ในการสาธิตนี้ คุณจะต้องสร้างเว็บแอปที่แสดงแผนที่เมื่อโหลด และจะสร้างโทเค็น reCAPTCHA โดยใช้ Firebase SDK อย่างรอบคอบ จากนั้นระบบจะส่งโทเค็นนี้ไปยังเซิร์ฟเวอร์ Node.js ซึ่ง Firebase จะตรวจสอบโทเค็นดังกล่าวก่อนที่จะดำเนินการตามคำขอไปยัง Places API

หากโทเค็นถูกต้อง Firebase App Check จะจัดเก็บโทเค็นไว้จนกว่าจะหมดอายุ ซึ่งจะช่วยลดความจำเป็นในการสร้างโทเค็นใหม่สำหรับคำขอไคลเอ็นต์ทุกรายการ หากโทเค็นไม่ถูกต้อง ระบบจะแจ้งให้ผู้ใช้ยืนยัน reCAPTCHA อีกครั้งเพื่อรับโทเค็นใหม่

2. ข้อกำหนดเบื้องต้น

คุณจะต้องทำความคุ้นเคยกับรายการด้านล่างเพื่อทํา Codelab นี้ให้เสร็จสมบูรณ์ ตรวจสอบคำขอ Places API ด้วย Firebase AppCheck และ reCAPTCHA | Google Codelabs (4)

ผลิตภัณฑ์ Google Cloud ที่จําเป็น

  • Firebase App Check ของ Google Cloud: ฐานข้อมูลสําหรับการจัดการโทเค็น
  • Google reCAPTCHA: การสร้างและการยืนยันโทเค็น ซึ่งเป็นเครื่องมือที่ใช้แยกแยะมนุษย์ออกจากบ็อตในเว็บไซต์ โดยทำงานโดยวิเคราะห์พฤติกรรมของผู้ใช้ แอตทริบิวต์เบราว์เซอร์ และข้อมูลเครือข่ายเพื่อสร้างคะแนนที่บ่งบอกถึงความเป็นไปได้ที่ผู้ใช้จะเป็นบ็อต หากคะแนนสูงพอ ระบบจะถือว่าผู้ใช้เป็นมนุษย์และไม่จำเป็นต้องดำเนินการใดๆ เพิ่มเติม หากคะแนนต่ำ ระบบอาจแสดงภาพ CAPTCHA เพื่อยืนยันตัวตนของผู้ใช้ วิธีการนี้รบกวนผู้ใช้น้อยกว่าวิธีการ CAPTCHA แบบดั้งเดิม จึงช่วยให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ราบรื่นยิ่งขึ้น
  • (ไม่บังคับ) Google Cloud App Engine: สภาพแวดล้อมการทําให้ใช้งานได้

ผลิตภัณฑ์ Google Maps Platform ที่จําเป็น

ใน Codelab นี้ คุณจะใช้ผลิตภัณฑ์ Google Maps Platform ต่อไปนี้

  • โหลด Maps JavaScript API และแสดงในเว็บแอป
  • คำขอ Places API (ใหม่) ที่ออกโดยเซิร์ฟเวอร์แบ็กเอนด์

ข้อกำหนดอื่นๆ สำหรับ Codelab นี้

คุณต้องมีบัญชี บริการ และเครื่องมือต่อไปนี้จึงจะทำ Codelab นี้ให้เสร็จสมบูรณ์ได้

  • บัญชี Google Cloud Platform ที่เปิดใช้การเรียกเก็บเงิน
  • คีย์ API ของ Google Maps Platform ที่เปิดใช้ Maps JavaScript API และ Places
  • ความรู้พื้นฐานเกี่ยวกับ JavaScript, HTML และ CSS
  • ความรู้พื้นฐานเกี่ยวกับ Node.js
  • เครื่องมือแก้ไขข้อความหรือ IDE ที่คุณเลือก

3. เตรียมตัว

ตั้งค่า Google Maps Platform

หากคุณยังไม่มีบัญชี Google Cloud Platform และโปรเจ็กต์ที่เปิดใช้การเรียกเก็บเงิน โปรดดูคู่มือเริ่มต้นใช้งาน Google Maps Platform เพื่อสร้างบัญชีการเรียกเก็บเงินและโปรเจ็กต์

  1. ใน Cloud Console ให้คลิกเมนูแบบเลื่อนลงของโปรเจ็กต์ แล้วเลือกโปรเจ็กต์ที่ต้องการใช้สำหรับโค้ดแล็บนี้

ตรวจสอบคำขอ Places API ด้วย Firebase AppCheck และ reCAPTCHA | Google Codelabs (5)

  1. เปิดใช้ Google Maps Platform API และ SDK ที่จําเป็นสําหรับโค้ดแล็บนี้ใน Google Cloud Marketplace โดยทำตามขั้นตอนในวิดีโอนี้หรือเอกสารประกอบนี้
  2. สร้างคีย์ API ในหน้าข้อมูลเข้าสู่ระบบของ Cloud Console คุณสามารถทำตามขั้นตอนในวิดีโอนี้หรือเอกสารประกอบนี้ คำขอทั้งหมดที่ส่งไปยัง Google Maps Platform ต้องใช้คีย์ API

ข้อมูลเข้าสู่ระบบเริ่มต้นของแอปพลิเคชัน

คุณจะใช้ Firebase Admin SDK เพื่อโต้ตอบกับโปรเจ็กต์ Firebase รวมถึงส่งคําขอไปยัง Places API และจะต้องระบุข้อมูลเข้าสู่ระบบที่ถูกต้องเพื่อให้ใช้งานได้

เราจะใช้การตรวจสอบสิทธิ์ ADC (ข้อมูลเข้าสู่ระบบเริ่มต้นอัตโนมัติ) เพื่อตรวจสอบสิทธิ์เซิร์ฟเวอร์ของคุณในการส่งคำขอ หรือ (ไม่แนะนำ) คุณอาจสร้างบัญชีบริการและจัดเก็บข้อมูลเข้าสู่ระบบไว้ในโค้ดก็ได้

คําจํากัดความ: ข้อมูลเข้าสู่ระบบเริ่มต้นของแอปพลิเคชัน (ADC) คือกลไกที่ Google Cloud มีไว้เพื่อตรวจสอบสิทธิ์แอปพลิเคชันโดยอัตโนมัติโดยไม่ต้องจัดการข้อมูลเข้าสู่ระบบอย่างชัดเจน โดยจะค้นหาข้อมูลเข้าสู่ระบบในตำแหน่งต่างๆ (เช่น ตัวแปรสภาพแวดล้อม ไฟล์บัญชีบริการ หรือเซิร์ฟเวอร์ข้อมูลเมตาของ Google Cloud) และใช้ข้อมูลเข้าสู่ระบบรายการแรกที่พบ

  • ในเทอร์มินัล ให้ใช้คําสั่งด้านล่างที่อนุญาตให้แอปพลิเคชันเข้าถึงทรัพยากร Google Cloud อย่างปลอดภัยในนามของผู้ใช้ที่เข้าสู่ระบบอยู่ในขณะนี้
gcloud auth application-default login
  • คุณจะต้องสร้างไฟล์ .env ที่รูทซึ่งระบุตัวแปรโปรเจ็กต์ Google Cloud ดังนี้
GOOGLE_CLOUD_PROJECT="your-project-id"

ข้อมูลเข้าสู่ระบบอื่น (ไม่แนะนำ)

สร้างบัญชีบริการ

  • แท็บ Google Maps Platform > "+สร้างข้อมูลเข้าสู่ระบบ" > บัญชีบริการ
  • เพิ่มบทบาทผู้ดูแลระบบ Firebase AppCheck แล้วป้อนชื่อบัญชีบริการที่คุณเพิ่งพิมพ์ เช่น firebase-appcheck-codelab@yourproject.iam.gserviceaccount.com

ข้อมูลเข้าสู่ระบบ

  • คลิกบัญชีบริการที่สร้าง
  • ไปที่แท็บ "คีย์" เพื่อสร้างคีย์ > JSON > บันทึกข้อมูลเข้าสู่ระบบ JSON ที่ดาวน์โหลด ย้ายไฟล์ xxx.json ที่ดาวน์โหลดโดยอัตโนมัติไปยังโฟลเดอร์รูท
  • (บทถัดไป) ตั้งชื่อให้ถูกต้องในไฟล์ nodejs server.js (firebase-credentials.json)

4. การผสานรวม Firebase AppCheck

คุณจะได้รับรายละเอียดการกําหนดค่า Firebase และคีย์ข้อมูลลับ reCAPTCHA

คุณจะวางลงในแอปพลิเคชันเดโมและเริ่มเซิร์ฟเวอร์

สร้างแอปพลิเคชันใน Firebase

  • ไปที่ผู้ดูแลระบบโปรเจ็กต์ https://console.firebase.google.com (ค้นหาลิงก์)

เลือกโปรเจ็กต์ Google Cloud ที่สร้างไว้แล้ว (คุณอาจต้องระบุ "การเลือกทรัพยากรหลัก")"

ตรวจสอบคำขอ Places API ด้วย Firebase AppCheck และ reCAPTCHA | Google Codelabs (6) ตรวจสอบคำขอ Places API ด้วย Firebase AppCheck และ reCAPTCHA | Google Codelabs (7)

  • เพิ่มแอปพลิเคชันจากเมนูด้านซ้ายบน (รูปเฟือง)

ตรวจสอบคำขอ Places API ด้วย Firebase AppCheck และ reCAPTCHA | Google Codelabs (8) ตรวจสอบคำขอ Places API ด้วย Firebase AppCheck และ reCAPTCHA | Google Codelabs (9)

โค้ดเริ่มต้น Firebase

  • บันทึกโค้ดเริ่มต้น Firebase เพื่อวางใน script.js (บทถัดไป) สำหรับฝั่งไคลเอ็นต์

ตรวจสอบคำขอ Places API ด้วย Firebase AppCheck และ reCAPTCHA | Google Codelabs (10)

  • ลงทะเบียนแอปเพื่ออนุญาตให้ Firebase ใช้โทเค็น reCAPTCHA v3

https://console.firebase.google.com/u/0/project/YOUR_PROJECT/appcheck/apps

ตรวจสอบคำขอ Places API ด้วย Firebase AppCheck และ reCAPTCHA | Google Codelabs (11)

  • เลือก reCAPTCHA → สร้างคีย์ในเว็บไซต์ reCAPTCHA (กำหนดค่าโดเมนที่ถูกต้อง: localhost สําหรับนักพัฒนาแอป)

ตรวจสอบคำขอ Places API ด้วย Firebase AppCheck และ reCAPTCHA | Google Codelabs (12) ตรวจสอบคำขอ Places API ด้วย Firebase AppCheck และ reCAPTCHA | Google Codelabs (13)

  • วางคีย์ลับ reCAPTCHA ใน Firebase AppCheck

ตรวจสอบคำขอ Places API ด้วย Firebase AppCheck และ reCAPTCHA | Google Codelabs (14)

  • สถานะแอปควรเปลี่ยนเป็นสีเขียว

ตรวจสอบคำขอ Places API ด้วย Firebase AppCheck และ reCAPTCHA | Google Codelabs (15)

5. แอปพลิเคชันสาธิต

  • เว็บแอปไคลเอ็นต์: ไฟล์ HTML, JavaScript, CSS
  • เซิร์ฟเวอร์: ไฟล์ Node.js
  • สภาพแวดล้อม (.env): คีย์ API
  • การกําหนดค่า (app.yaml): การตั้งค่าการติดตั้งใช้งาน Google App Engine

การตั้งค่า Node.js

  • ไปยังส่วนต่างๆ: เปิดเทอร์มินัลแล้วไปที่ไดเรกทอรีรากของโปรเจ็กต์ที่โคลน
  • ติดตั้ง Node.js (หากจำเป็น): เวอร์ชัน 18 ขึ้นไป
node -v # Check installed version
  • เริ่มต้นโปรเจ็กต์: เรียกใช้คำสั่งต่อไปนี้เพื่อเริ่มต้นโปรเจ็กต์ Node.js ใหม่โดยให้การตั้งค่าทั้งหมดเป็นค่าเริ่มต้น
npm init 
  • ติดตั้งการอ้างอิง: ใช้คำสั่งต่อไปนี้เพื่อติดตั้งการอ้างอิงที่จำเป็นของโปรเจ็กต์
npm install @googlemaps/places firebase-admin express axios dotenv

การกําหนดค่า: ตัวแปรสภาพแวดล้อมสําหรับโปรเจ็กต์ Google Cloud

  • การสร้างไฟล์สภาพแวดล้อม: สร้างไฟล์ชื่อ .env ในไดเรกทอรีรูทของโปรเจ็กต์ ไฟล์นี้จะจัดเก็บข้อมูลการกําหนดค่าที่ละเอียดอ่อนและไม่ควรทําการคอมมิตกับระบบควบคุมเวอร์ชัน
  • ป้อนข้อมูลตัวแปรสภาพแวดล้อม: เปิดไฟล์ .env แล้วเพิ่มตัวแปรต่อไปนี้ โดยแทนที่ตัวยึดตําแหน่งด้วยค่าจริงจากโปรเจ็กต์ Google Cloud
# Google Cloud Project IDGOOGLE_CLOUD_PROJECT="your-cloud-project-id"# reCAPTCHA Keys (obtained in previous steps) RECAPTCHA_SITE_KEY="your-recaptcha-site-key"RECAPTCHA_SECRET_KEY="your-recaptcha-secret-key"# Maps Platform API Keys (obtained in previous steps)PLACES_API_KEY="your-places-api-key"MAPS_API_KEY="your-maps-api-key"

6. ภาพรวมโค้ด

index.html

  • โหลดไลบรารี Firebase เพื่อสร้างโทเค็นในแอป
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Places API with AppCheck</title> <style></style> </head><body> <div id="map"></div> <!-- Firebase services --> <script src="https://www.gstatic.com/firebasejs/9.15.0/firebase-app-compat.js"></script> <script src="https://www.gstatic.com/firebasejs/9.15.0/firebase-app-check-compat.js"></script>  <script type="module" src="./script.js"></script>  <link rel="stylesheet" href="./style.css"></body></html>

script.js

  • ดึงข้อมูลคีย์ API: ดึงข้อมูลคีย์ API สําหรับ Google Maps และ Firebase App Check จากเซิร์ฟเวอร์แบ็กเอนด์
  • เริ่มต้น Firebase: ตั้งค่า Firebase สําหรับการตรวจสอบสิทธิ์และความปลอดภัย (แทนที่การกําหนดค่า → ดูบทที่ 4)

ระยะเวลาที่โทเค็น Firebase App Check ใช้งานได้มีตั้งแต่ 30 นาทีถึง 7 วัน โดยกำหนดค่าไว้ในคอนโซล Firebase และไม่สามารถเปลี่ยนแปลงได้ด้วยการพยายามบังคับให้รีเฟรชโทเค็น

  • เปิดใช้งาน App Check: เปิดใช้ Firebase App Check เพื่อยืนยันความถูกต้องของคําขอขาเข้า
  • โหลด Google Maps API: โหลดไลบรารี JavaScript ของ Google Maps แบบไดนามิกเพื่อแสดงแผนที่
  • เริ่มต้นแผนที่: สร้าง Google Maps ที่กําหนดศูนย์กลางเป็นตําแหน่งเริ่มต้น
  • จัดการการคลิกแผนที่: คอยฟังการคลิกบนแผนที่และอัปเดตจุดศูนย์กลางตามความเหมาะสม
  • ค้นหา Places API: ส่งคําขอไปยังแบ็กเอนด์ API (/api/data) เพื่อดึงข้อมูลเกี่ยวกับสถานที่ (ร้านอาหาร สวนสาธารณะ บาร์) ที่อยู่ใกล้กับตําแหน่งที่คลิก โดยใช้ Firebase App Check ในการให้สิทธิ์
  • แสดงเครื่องหมาย: แสดงข้อมูลที่ดึงข้อมูลบนแผนที่เป็นเครื่องหมาย พร้อมแสดงชื่อและไอคอน
let mapsApiKey, recaptchaKey; // API keyslet currentAppCheckToken = null; // AppCheck tokenasync function init() { try { await fetchConfig(); // Load API keys from .env variable /////////// REPLACE with your Firebase configuration details const firebaseConfig = { apiKey: "AIza.......", authDomain: "places.......", projectId: "places.......", storageBucket: "places.......", messagingSenderId: "17.......", appId: "1:175.......", measurementId: "G-CPQ.......", }; /////////// REPLACE  // Initialize Firebase and App Check await firebase.initializeApp(firebaseConfig); await firebase.appCheck().activate(recaptchaKey); // Get the initial App Check token currentAppCheckToken = await firebase.appCheck().getToken(); // Load the Maps JavaScript API dynamically const scriptMaps = document.createElement("script"); scriptMaps.src = `https://maps.googleapis.com/maps/api/js?key=${mapsApiKey}&libraries=marker,places&v=beta`; scriptMaps.async = true; scriptMaps.defer = true; scriptMaps.onload = initMap; // Create the map after the script loads document.head.appendChild(scriptMaps); } catch (error) { console.error("Firebase initialization error:", error); // Handle the error appropriately (e.g., display an error message) }}window.onload = init()// Fetch configuration data from the backend APIasync function fetchConfig() { const url = "/api/config"; try { const response = await fetch(url); const config = await response.json(); mapsApiKey = config.mapsApiKey; recaptchaKey = config.recaptchaKey; } catch (error) { console.error("Error fetching configuration:", error); // Handle the error (e.g., show a user-friendly message) }}// Initialize the map when the Maps API script loadslet map; // Dynamic Maplet center = { lat: 48.85557501, lng: 2.34565006 };function initMap() { map = new google.maps.Map(document.getElementById("map"), { center: center, zoom: 13, mapId: "b93f5cef6674c1ff", zoomControlOptions: { position: google.maps.ControlPosition.RIGHT_TOP, }, streetViewControl: false, mapTypeControl: false, clickableIcons: false, fullscreenControlOptions: { position: google.maps.ControlPosition.LEFT_TOP, }, }); // Initialize the info window for markers infoWindow = new google.maps.InfoWindow({}); // Add a click listener to the map map.addListener("click", async (event) => { try { // Get a fresh App Check token on each click const appCheckToken = await firebase.appCheck().getToken(); currentAppCheckToken = appCheckToken; // Update the center for the Places API query center.lat = event.latLng.lat(); center.lng = event.latLng.lng(); // Query for places with the new token and center queryPlaces(); } catch (error) { console.error("Error getting App Check token:", error); } });}function queryPlaces() { const url = '/api/data'; // "http://localhost:3000/api/data" const body = { request: { includedTypes: ['restaurant', 'park', 'bar'], excludedTypes: [], maxResultCount: 20, locationRestriction: { circle: { center: { latitude: center.lat, longitude: center.lng, }, radius: 4000, }, }, }, }; // Provides token to the backend using header: X-Firebase-AppCheck fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-Firebase-AppCheck': currentAppCheckToken.token, }, body: JSON.stringify(body), }) .then((response) => response.json()) .then((data) => { // display if response successful displayMarkers(data.places); }) .catch((error) => { alert('No places'); // eslint-disable-next-line no-console console.error('Error:', error); });}//// display places markers on map...

server.js

  • โหลดตัวแปรสภาพแวดล้อม (คีย์ API, รหัสโปรเจ็กต์ Google) จากไฟล์ .env
  • เริ่มเซิร์ฟเวอร์เพื่อรอรับคำขอใน http://localhost:3000
  • เริ่มต้น Firebase Admin SDK โดยใช้ข้อมูลเข้าสู่ระบบเริ่มต้นของแอปพลิเคชัน (ADC)
  • ได้รับโทเค็น reCAPTCHA จาก script.js
  • ยืนยันความถูกต้องของโทเค็นที่ได้รับ
  • หากโทเค็นถูกต้อง ระบบจะส่งคําขอ POST ไปยัง Google Places API พร้อมพารามิเตอร์การค้นหาที่รวมอยู่ด้วย
  • ประมวลผลและแสดงผลลัพธ์จาก Places API ไปยังไคลเอ็นต์
const express = require('express');const axios = require('axios');const admin = require('firebase-admin');// .env variablesrequire('dotenv').config();// Store sensitive API keys in environment variablesconst recaptchaSite = process.env.RECAPTCHA_SITE_KEY;const recaptchaSecret = process.env.RECAPTCHA_SECRET_KEY;const placesApiKey = process.env.PLACES_API_KEY;const mapsApiKey = process.env.MAPS_API_KEY;// Verify environment variables loaded (only during development)console.log('recaptchaSite:', recaptchaSite, '\n');console.log('recaptchaSecret:', recaptchaSecret, '\n');const app = express();app.use(express.json());// Firebase Admin SDK setup with Application Default Credentials (ADC)const { GoogleAuth } = require('google-auth-library');admin.initializeApp({ // credential: admin.credential.applicationDefault(), // optional: explicit ADC});// Main API Endpoint app.post('/api/data', async (req, res) => { const appCheckToken = req.headers['x-firebase-appcheck']; console.log("\n", "Token", "\n", "\n", appCheckToken, "\n") try { // Verify Firebase App Check token for security const appCheckResult = await admin.appCheck().verifyToken(appCheckToken); if (appCheckResult.appId) { console.log('App Check verification successful!'); placesQuery(req, res); } else { console.error('App Check verification failed.'); res.status(403).json({ error: 'App Check verification failed.' }); } } catch (error) { console.error('Error verifying App Check token:', error); res.status(500).json({ error: 'Error verifying App Check token.' }); }});// Function to query Google Places APIasync function placesQuery(req, res) { console.log('#################################'); console.log('\n', 'placesApiKey:', placesApiKey, '\n'); const queryObject = req.body.request; console.log('\n','Request','\n','\n', queryObject, '\n') const headers = { 'Content-Type': 'application/json', 'X-Goog-FieldMask': '*', 'X-Goog-Api-Key': placesApiKey, 'Referer': 'http://localhost:3000', // Update for production(ie.: req.hostname) }; const myUrl = 'https://places.googleapis.com/v1/places:searchNearby'; try { // Authenticate with ADC const auth = new GoogleAuth(); const { credential } = await auth.getApplicationDefault(); const response = await axios.post(myUrl, queryObject, { headers, auth: credential });  console.log('############### SUCCESS','\n','\n','Response','\n','\n', ); const myBody = response.data; myBody.places.forEach(place => { console.log(place.displayName);  }); res.json(myBody); // Use res.json for JSON data } catch (error) { console.log('############### ERROR'); // console.error(error); // Log the detailed error for debugging res.status(error.response.status).json(error.response.data); // Use res.json for errors too }}// Configuration endpoint (send safe config data to the client)app.get('/api/config', (req, res) => { res.json({ mapsApiKey: process.env.MAPS_API_KEY,  recaptchaKey: process.env.RECAPTCHA_SITE_KEY,  });});// Serve static filesapp.use(express.static('static'));// Start the serverconst port = process.env.PORT || 3000;app.listen(port, () => { console.log(`Server listening on port ${port}`, '\n');});

7. เรียกใช้แอปพลิเคชัน

จากสภาพแวดล้อมที่เลือก ให้เรียกใช้เซิร์ฟเวอร์จากเทอร์มินัลและไปที่ http://localhost:3000

npm start 

ระบบจะสร้างโทเค็นเป็นตัวแปรส่วนกลาง ซ่อนจากหน้าต่างเบราว์เซอร์ของผู้ใช้ และส่งไปยังเซิร์ฟเวอร์เพื่อประมวลผล ดูรายละเอียดของโทเค็นได้ในบันทึกของเซิร์ฟเวอร์ตรวจสอบคำขอ Places API ด้วย Firebase AppCheck และ reCAPTCHA | Google Codelabs (16)

รายละเอียดเกี่ยวกับฟังก์ชันของเซิร์ฟเวอร์และการตอบสนองต่อคำขอการค้นหาใกล้เคียงของ Places API อยู่ในบันทึกของเซิร์ฟเวอร์ตรวจสอบคำขอ Places API ด้วย Firebase AppCheck และ reCAPTCHA | Google Codelabs (17)

การแก้ปัญหา:

ตรวจสอบว่ารหัสโปรเจ็กต์ Google ที่สอดคล้องกันในการตั้งค่า

  • ในไฟล์ .env (ตัวแปร GOOGLE_CLOUD_PROJECT)
  • ในการกำหนดค่า gcloud ของเทอร์มินัล ให้ทำดังนี้
gcloud config set project your-project-id
  • ในการตั้งค่า reCAPTCHA

ตรวจสอบคำขอ Places API ด้วย Firebase AppCheck และ reCAPTCHA | Google Codelabs (18)

  • ในการตั้งค่า Firebase

ตรวจสอบคำขอ Places API ด้วย Firebase AppCheck และ reCAPTCHA | Google Codelabs (19)

อื่นๆ

  • สร้างโทเค็นแก้ไขข้อบกพร่องที่ใช้แทนคีย์ของเว็บไซต์ reCAPTCHA ได้ภายใน script.js เพื่อวัตถุประสงค์ในการทดสอบและการแก้ปัญหา

ตรวจสอบคำขอ Places API ด้วย Firebase AppCheck และ reCAPTCHA | Google Codelabs (20)

try { // Initialize Firebase first await firebase.initializeApp(firebaseConfig); // Set the debug token if (window.location.hostname === 'localhost') { // Only in development await firebase.appCheck().activate( 'YOUR_DEBUG_FIREBASE_TOKEN', // Replace with the token from the console true // Set to true to indicate it's a debug token ); } else { // Activate App Check await firebase.appCheck().activate(recaptchaKey);}
  • การพยายามตรวจสอบสิทธิ์ไม่สำเร็จหลายครั้งเกินไป เช่น การใช้คีย์เว็บไซต์ ReCaptcha ที่ไม่ถูกต้อง อาจทริกเกอร์การจำกัดชั่วคราว
FirebaseError: AppCheck: Requests throttled due to 403 error. Attempts allowed again after 01d:00m:00s (appCheck/throttled).

ข้อมูลเข้าสู่ระบบ ADC

  • ตรวจสอบว่าคุณใช้บัญชี gcloud ที่ถูกต้อง
gcloud auth login 
  • ตรวจสอบว่าติดตั้งไลบรารีที่จำเป็นแล้ว
npm install @googlemaps/places firebase-admin
  • ตรวจสอบว่าโหลดไลบรารี Firebase ใน server.js แล้ว
const {GoogleAuth} = require('google-auth-library');
  • การพัฒนาในเครื่อง: ตั้งค่า ADC
gcloud auth application-default login
  • การสวมรอย: บันทึกข้อมูลเข้าสู่ระบบ ADC แล้ว
gcloud auth application-default login --impersonate-service-account your_project@appspot.gserviceaccount.com
  • ทดสอบ ADC ในเครื่องโดยบันทึกสคริปต์ต่อไปนี้เป็น test.js และเรียกใช้ในเทอร์มินัล node test.js
const {GoogleAuth} = require('google-auth-library');async function requestTestADC() { try { // Authenticate using Application Default Credentials (ADC) const auth = new GoogleAuth(); const {credential} = await auth.getApplicationDefault(); // Check if the credential is successfully obtained if (credential) { console.log('Application Default Credentials (ADC) loaded successfully!'); console.log('Credential:', credential); // Log the credential object } else { console.error('Error: Could not load Application Default Credentials (ADC).'); } // ... rest of your code ... } catch (error) { console.error('Error:', error); }}requestTestADC();

8. เยี่ยมไปเลย

ขั้นตอนติดตามผล

การทำให้ใช้งานได้กับ App Engine:

  • เตรียมโปรเจ็กต์ให้พร้อมสำหรับการติดตั้งใช้งานใน Google App Engine โดยทำการเปลี่ยนแปลงการกำหนดค่าที่จำเป็น
  • ใช้gcloudเครื่องมือบรรทัดคำสั่งหรือคอนโซล App Engine เพื่อทำให้แอปพลิเคชันใช้งานได้

เพิ่มประสิทธิภาพการตรวจสอบสิทธิ์ Firebase:

  • โทเค็นเริ่มต้นกับโทเค็นที่กำหนดเอง: ใช้โทเค็นที่กำหนดเองของ Firebase เพื่อใช้บริการ Firebase ได้อย่างละเอียดยิ่งขึ้น
  • อายุการใช้งานของโทเค็น: ตั้งค่าอายุการใช้งานของโทเค็นที่เหมาะสม โดยให้สั้นลงสําหรับการดำเนินการที่มีความละเอียดอ่อน (โทเค็น Firebase ที่กําหนดเองสูงสุด 1 ชั่วโมง) และนานขึ้นสําหรับเซสชันทั่วไป (โทเค็น reCAPTCHA: 30 นาทีถึง 7 ชั่วโมง)
  • สำรวจทางเลือกอื่นๆ นอกเหนือจาก reCAPTCHA: ตรวจสอบว่า DeviceCheck (iOS), SafetyNet (Android) หรือ App Attest เหมาะกับความต้องการด้านความปลอดภัยของคุณหรือไม่

ผสานรวมผลิตภัณฑ์ Firebase:

  • Realtime Database หรือ Firestore: หากแอปพลิเคชันต้องการการซิงค์ข้อมูลแบบเรียลไทม์หรือความสามารถในการทำงานแบบออฟไลน์ ให้ผสานรวมกับ Realtime Database หรือ Firestore
  • พื้นที่เก็บข้อมูลระบบคลาวด์: ใช้พื้นที่เก็บข้อมูลระบบคลาวด์สำหรับจัดเก็บและแสดงเนื้อหาที่ผู้ใช้สร้างขึ้น เช่น รูปภาพหรือวิดีโอ
  • การตรวจสอบสิทธิ์: ใช้ประโยชน์จากการตรวจสอบสิทธิ์ Firebase เพื่อสร้างบัญชีผู้ใช้ จัดการเซสชันการเข้าสู่ระบบ และจัดการการรีเซ็ตรหัสผ่าน

ขยายไปยังอุปกรณ์เคลื่อนที่:

  • Android และ iOS: หากวางแผนที่จะมีแอปบนอุปกรณ์เคลื่อนที่ ให้สร้างเวอร์ชันสำหรับทั้งแพลตฟอร์ม Android และ iOS
  • Firebase SDK: ใช้ Firebase SDK สําหรับ Android และ iOS เพื่อผสานรวมฟีเจอร์ Firebase เข้ากับแอปบนอุปกรณ์เคลื่อนที่ได้อย่างราบรื่น

เนื้อหาของหน้าเว็บนี้ได้รับอนุญาตภายใต้ใบอนุญาตที่ต้องระบุที่มาของครีเอทีฟคอมมอนส์ 4.0 และตัวอย่างโค้ดได้รับอนุญาตภายใต้ใบอนุญาต Apache 2.0 เว้นแต่จะระบุไว้เป็นอย่างอื่น โปรดดูรายละเอียดที่นโยบายเว็บไซต์ Google Developers Java เป็นเครื่องหมายการค้าจดทะเบียนของ Oracle และ/หรือบริษัทในเครือ

ตรวจสอบคำขอ Places API ด้วย Firebase AppCheck และ reCAPTCHA  |  Google Codelabs (2025)
Top Articles
Latest Posts
Recommended Articles
Article information

Author: Reed Wilderman

Last Updated:

Views: 5474

Rating: 4.1 / 5 (52 voted)

Reviews: 83% of readers found this page helpful

Author information

Name: Reed Wilderman

Birthday: 1992-06-14

Address: 998 Estell Village, Lake Oscarberg, SD 48713-6877

Phone: +21813267449721

Job: Technology Engineer

Hobby: Swimming, Do it yourself, Beekeeping, Lapidary, Cosplaying, Hiking, Graffiti

Introduction: My name is Reed Wilderman, I am a faithful, bright, lucky, adventurous, lively, rich, vast person who loves writing and wants to share my knowledge and understanding with you.