หน้านี้ได้รับการแปลโดย Cloud Translation API
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 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 อยู่ในบันทึกของเซิร์ฟเวอร์ |
การแก้ปัญหา:
ตรวจสอบว่ารหัสโปรเจ็กต์ 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 เข้ากับแอปบนอุปกรณ์เคลื่อนที่ได้อย่างราบรื่น
เนื้อหาของหน้าเว็บนี้ได้รับอนุญาตภายใต้ใบอนุญาตที่ต้องระบุที่มาของครีเอทีฟคอมมอนส์ 4.0 และตัวอย่างโค้ดได้รับอนุญาตภายใต้ใบอนุญาต Apache 2.0 เว้นแต่จะระบุไว้เป็นอย่างอื่น โปรดดูรายละเอียดที่นโยบายเว็บไซต์ Google Developers Java เป็นเครื่องหมายการค้าจดทะเบียนของ Oracle และ/หรือบริษัทในเครือ
[[["เข้าใจง่าย","easyToUnderstand","thumb-up"],["แก้ปัญหาของฉันได้","solvedMyProblem","thumb-up"],["อื่นๆ","otherUp","thumb-up"]],[["ไม่มีข้อมูลที่ฉันต้องการ","missingTheInformationINeed","thumb-down"],["ซับซ้อนเกินไป/มีหลายขั้นตอนมากเกินไป","tooComplicatedTooManySteps","thumb-down"],["ล้าสมัย","outOfDate","thumb-down"],["ปัญหาเกี่ยวกับการแปล","translationIssue","thumb-down"],["ตัวอย่าง/ปัญหาเกี่ยวกับโค้ด","samplesCodeIssue","thumb-down"],["อื่นๆ","otherDown","thumb-down"]],[],[],[]]