หน้านี้ได้รับการแปลโดย Cloud Translation API

ตรวจสอบคำขอ Places API ด้วย Firebase AppCheck และ reCAPTCHA

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

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

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

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

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

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

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

คุณจะต้องทำความคุ้นเคยกับรายการด้านล่างเพื่อทํา Codelab นี้ให้เสร็จสมบูรณ์

ผลิตภัณฑ์ 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 เพื่อสร้างบัญชีการเรียกเก็บเงินและโปรเจ็กต์

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

เปิดใช้ Google Maps Platform API และ SDK ที่จําเป็นสําหรับโค้ดแล็บนี้ใน Google Cloud Marketplace โดยทำตามขั้นตอนในวิดีโอนี้หรือเอกสารประกอบนี้
สร้างคีย์ 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 ที่สร้างไว้แล้ว (คุณอาจต้องระบุ "การเลือกทรัพยากรหลัก")"

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

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

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

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

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

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

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

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

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 ID
GOOGLE_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 keys
let currentAppCheckToken = null; // AppCheck token

async 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 API
async 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 loads
let map; // Dynamic Map
let 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 variables
require('dotenv').config();

// Store sensitive API keys in environment variables
const 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 API
async 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 files
app.use(express.static('static'));

// Start the server
const port = process.env.PORT || 3000;
app.listen(port, () => {
  console.log(`Server listening on port ${port}`, '\n');
});

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

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

npm start

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

รายละเอียดเกี่ยวกับฟังก์ชันของเซิร์ฟเวอร์และการตอบสนองต่อคำขอการค้นหาใกล้เคียงของ Places API อยู่ในบันทึกของเซิร์ฟเวอร์

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

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

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

gcloud config set project your-project-id

ในการตั้งค่า reCAPTCHA

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

อื่นๆ

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

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 เข้ากับแอปบนอุปกรณ์เคลื่อนที่ได้อย่างราบรื่น