Firebase AppCheck और reCAPTCHA की मदद से, Places API के अनुरोधों की पुष्टि करना

1. शुरू करने से पहले

आपके वेब ऐप्लिकेशन से इंटरैक्ट करने वाले उपयोगकर्ताओं की पहचान की पुष्टि करने के लिए, आपको Firebase ऐप्लिकेशन की जांच की सुविधा लागू करनी होगी. साथ ही, उपयोगकर्ता सेशन की पुष्टि करने के लिए, reCAPTCHA JWT टोकन का इस्तेमाल करना होगा. इस सेटअप की मदद से, क्लाइंट ऐप्लिकेशन से Places API (नया) को भेजे गए अनुरोधों को सुरक्षित तरीके से मैनेज किया जा सकता है.

b40cfddb731786fa.png

लाइव लिंक

आपको क्या बनाना है.

इसे दिखाने के लिए, आपको एक वेब ऐप्लिकेशन बनाना होगा, जो लोड होने पर मैप दिखाता है. यह Firebase SDK टूल का इस्तेमाल करके, reCAPTCHA टोकन भी चुपचाप जनरेट करेगा. इसके बाद, यह टोकन आपके Node.js सर्वर पर भेजा जाता है. यहां Firebase, Places API के किसी भी अनुरोध को पूरा करने से पहले, इसकी पुष्टि करता है.

अगर टोकन मान्य है, तो Firebase App Check उसे तब तक सेव करेगा, जब तक उसकी समयसीमा खत्म नहीं हो जाती. इससे हर क्लाइंट अनुरोध के लिए नया टोकन बनाने की ज़रूरत नहीं पड़ेगी. अगर टोकन अमान्य है, तो उपयोगकर्ता को नया टोकन पाने के लिए, reCAPTCHA की मदद से दोबारा पुष्टि करने के लिए कहा जाएगा.

2. ज़रूरी शर्तें

इस कोडलैब को पूरा करने के लिए, आपको नीचे दिए गए आइटम के बारे में जानकारी होनी चाहिए. daea823b6bc38b67.png

Google Cloud के ज़रूरी प्रॉडक्ट

  • Google Cloud Firebase App Check: टोकन मैनेजमेंट के लिए डेटाबेस
  • Google reCAPTCHA: टोकन बनाना और पुष्टि करना. यह एक टूल है, जिसका इस्तेमाल वेबसाइटों पर लोगों और बॉट के बीच अंतर करने के लिए किया जाता है. यह उपयोगकर्ता के व्यवहार, ब्राउज़र एट्रिब्यूट, और नेटवर्क की जानकारी का विश्लेषण करके, उपयोगकर्ता के बॉट होने की संभावना का स्कोर जनरेट करता है. अगर स्कोर काफ़ी ज़्यादा है, तो उपयोगकर्ता को मानव माना जाता है और आगे कोई कार्रवाई करने की ज़रूरत नहीं होती. अगर स्कोर कम है, तो उपयोगकर्ता की पहचान की पुष्टि करने के लिए, उसे कैप्चा पहेली दिखाई जा सकती है. यह तरीका, कैप्चा के पारंपरिक तरीकों से कम परेशान करने वाला है. इससे उपयोगकर्ता अनुभव बेहतर होता है.
  • (ज़रूरी नहीं) Google Cloud App Engine: डिप्लॉयमेंट एनवायरमेंट.

Google Maps Platform के ज़रूरी प्रॉडक्ट

इस कोडलैब में, आपको Google Maps Platform के इन प्रॉडक्ट का इस्तेमाल करना होगा:

  • वेब ऐप्लिकेशन में लोड और दिखाया गया Maps JavaScript API
  • बैकएंड सर्वर से भेजा गया Places API (नया) अनुरोध

इस कोडलैब के लिए अन्य ज़रूरी शर्तें

इस Codelab को पूरा करने के लिए, आपको ये खाते, सेवाएं, और टूल चाहिए होंगे:

  • बिलिंग की सुविधा वाला Google Cloud Platform खाता
  • Maps JavaScript API और Places की सुविधा वाला Google Maps Platform API पासकोड
  • JavaScript, एचटीएमएल, और सीएसएस की बुनियादी जानकारी
  • Node.js के बारे में बुनियादी जानकारी
  • आपकी पसंद का टेक्स्ट एडिटर या आईडीई

3. सेट अप करना

Google Maps Platform सेट अप करना

अगर आपके पास Google Cloud Platform खाता और बिलिंग की सुविधा वाला प्रोजेक्ट नहीं है, तो बिलिंग की सुविधा वाला खाता और प्रोजेक्ट बनाएं. ऐसा करने का तरीका जानने के लिए, कृपया Google Maps Platform का इस्तेमाल शुरू करना देखें.

  1. Cloud Console में, प्रोजेक्ट वाले ड्रॉप-डाउन मेन्यू पर क्लिक करें. इसके बाद, उस प्रोजेक्ट को चुनें जिसे इस कोडलैब के लिए इस्तेमाल करना है.

e7ffad81d93745cd.png

  1. इस कोडलैब के लिए ज़रूरी Google Maps Platform API और SDK को Google Cloud Marketplace में जाकर चालू करें. ऐसा करने के लिए, इस वीडियो या इस दस्तावेज़ में बताया गया तरीका अपनाएं.
  2. Cloud Console के क्रेडेंशियल पेज पर जाकर, एक एपीआई पासकोड जनरेट करें. ऐसा करने के लिए, इस वीडियो या इस दस्तावेज़ में बताया गया तरीका अपनाएं. Google Maps Platform का इस्तेमाल करने के लिए, एपीआई पासकोड ज़रूरी है.

ऐप्लिकेशन के डिफ़ॉल्ट क्रेडेंशियल

Firebase प्रोजेक्ट के साथ इंटरैक्ट करने के साथ-साथ, Places API को अनुरोध करने के लिए, आपको Firebase Admin SDK टूल का इस्तेमाल करना होगा. साथ ही, इसके काम करने के लिए, आपको मान्य क्रेडेंशियल देने होंगे.

अनुरोध करने के लिए, हम आपके सर्वर की पुष्टि करने के लिए एडीसी ऑथेंटिकेशन (ऑटोमैटिक डिफ़ॉल्ट क्रेडेंशियल) का इस्तेमाल करेंगे. इसके अलावा, सेवा खाता बनाया जा सकता है और अपने कोड में क्रेडेंशियल सेव किए जा सकते हैं. हालांकि, हमारा सुझाव है कि ऐसा न करें.

परिभाषा: ऐप्लिकेशन के लिए डिफ़ॉल्ट क्रेडेंशियल (एडीसी), 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 फ़ाइल को ले जाएं
  • (अगला चैप्टर) node.js फ़ाइल server.js (​​firebase-credentials.json) में इसे सही नाम दें

4. Firebase AppCheck इंटिग्रेशन

आपको Firebase कॉन्फ़िगरेशन की जानकारी और reCAPTCHA की सीक्रेट कुंजियां मिलेंगी.

आपको उन्हें डेमो ऐप्लिकेशन में चिपकाना होगा और सर्वर को शुरू करना होगा.

Firebase में ऐप्लिकेशन बनाना

पहले से बना Google Cloud प्रोजेक्ट चुनें (आपको यह बताना पड़ सकता है: "पैरंट रिसॉर्स चुनना")"

a6d171c6d7e98087.png a16010ba102cc90b.png

  • सबसे ऊपर बाईं ओर मौजूद मेन्यू (पहिया) से कोई ऐप्लिकेशन जोड़ना

18e5a7993ad9ea53.png 4632158304652118.png

Firebase को शुरू करने के लिए कोड

  • क्लाइंट साइड के लिए script.js (अगला चैप्टर) में चिपकाने के लिए, Firebase इनीशियलाइज़ेशन कोड सेव करें

f10dcf6f5027e9f0.png

  • Firebase को reCAPTCHA वर्शन 3 के टोकन इस्तेमाल करने की अनुमति देने के लिए, अपना ऐप्लिकेशन रजिस्टर करना

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

da7efe203ce4142c.png

  • reCAPTCHA चुनें → reCAPTCHA वेबसाइट में कुंजी बनाएं (सही डोमेन कॉन्फ़िगर करके: ऐप्लिकेशन डेवलपर के लिए localhost)

b47eab131617467.png e6bddef9d5cf5460.png

  • Firebase AppCheck में reCAPTCHA का सीक्रेट पासकोड चिपकाएं

a63bbd533a1b5437.png

  • ऐप्लिकेशन की स्थिति हरी हो जाएगी

4f7962b527b78ee5.png

5. डेमो ऐप्लिकेशन

  • क्लाइंट वेब ऐप्लिकेशन: एचटीएमएल, JavaScript, सीएसएस फ़ाइलें
  • सर्वर: Node.js फ़ाइल
  • एनवायरमेंट (.env): एपीआई पासकोड
  • कॉन्फ़िगरेशन (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

  • एपीआई पासकोड फ़ेच करता है: यह बैकएंड सर्वर से, Google Maps और Firebase App Check के लिए एपीआई पासकोड फ़ेच करता है.
  • Firebase को शुरू करता है: पुष्टि करने और सुरक्षा के लिए, Firebase को सेट अप करता है. (कॉन्फ़िगरेशन बदलें → चौथा चैप्टर देखें).

Firebase App Check टोकन की समयसीमा, 30 मिनट से लेकर सात दिन तक की हो सकती है. इसे Firebase कंसोल में कॉन्फ़िगर किया जाता है. टोकन को जबरदस्ती रीफ़्रेश करके, इस समयसीमा में बदलाव नहीं किया जा सकता.

  • ऐप्लिकेशन की जांच करने की सुविधा चालू करता है: आने वाले अनुरोधों की पुष्टि करने के लिए, Firebase ऐप्लिकेशन की जांच करने की सुविधा चालू करता है.
  • Google Maps API को लोड करता है: मैप दिखाने के लिए, Google Maps JavaScript लाइब्रेरी को डाइनैमिक तौर पर लोड करता है.
  • मैप को शुरू करता है: डिफ़ॉल्ट जगह के बीच में Google Maps बनाता है.
  • मैप पर क्लिक मैनेज करता है: यह मैप पर क्लिक को सुनता है और उसके हिसाब से सेंटर पॉइंट को अपडेट करता है.
  • Places 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

  • .env फ़ाइल से एनवायरमेंट वैरिएबल (एपीआई पासकोड, Google प्रोजेक्ट आईडी) लोड करता है.
  • http://localhost:3000 पर अनुरोधों को सुनने के लिए,सर्वर को शुरू करता है.
  • ऐप्लिकेशन डिफ़ॉल्ट क्रेडेंशियल (ADC) का इस्तेमाल करके, Firebase Admin SDK टूल को शुरू करता है.
  • script.js से reCAPTCHA टोकन पाता है.
  • मिले टोकन की पुष्टि करता है.
  • अगर टोकन मान्य है, तो खोज के लिए शामिल पैरामीटर के साथ 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
  • में जाकर

e6bddef9d5cf5460.png

  • Firebase सेटअप में

7e17bfbcb8007763.png

अन्य

  • डीबग टोकन बनाएं. इसका इस्तेमाल, script.js में reCAPTCHA साइट कुंजी की जगह, जांच करने और समस्या हल करने के लिए किया जा सकता है.

9c0beb760d13faef.png

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).

एडीसी के क्रेडेंशियल

  • पक्का करें कि आप सही gcloud खाते में हों
gcloud auth login
  • पक्का करें कि ज़रूरी लाइब्रेरी इंस्टॉल हों
npm install @googlemaps/places firebase-admin
  • पक्का करें कि server.js में Firebase लाइब्रेरी लोड हो
const {GoogleAuth} = require('google-auth-library');

gcloud auth application-default login
  • किसी दूसरे के नाम पर काम करना: एडीसी के क्रेडेंशियल सेव किए गए
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 Authentication को बेहतर बनाना:

  • डिफ़ॉल्ट बनाम कस्टम टोकन: Firebase की सेवाओं का बेहतर तरीके से इस्तेमाल करने के लिए, Firebase कस्टम टोकन लागू करें.
  • टोकन का लाइफ़टाइम: टोकन का लाइफ़टाइम तय करें. संवेदनशील ऑपरेशन के लिए कम (कस्टम Firebase टोकन एक घंटे तक) और सामान्य सेशन के लिए ज़्यादा (reCAPTCHA टोकन: 30 मिनट से सात घंटे) लाइफ़टाइम सेट करें.
  • reCAPTCHA के विकल्पों के बारे में जानें: जांचें कि DeviceCheck (iOS), SafetyNet (Android) या App Attest, आपकी सुरक्षा से जुड़ी ज़रूरतों के हिसाब से सही हैं या नहीं.

Firebase प्रॉडक्ट इंटिग्रेट करना:

  • रीयलटाइम डेटाबेस या Firestore: अगर आपके ऐप्लिकेशन को रीयल-टाइम डेटा सिंक करने या ऑफ़लाइन काम करने की सुविधाओं की ज़रूरत है, तो उसे रीयलटाइम डेटाबेस या Firestore के साथ इंटिग्रेट करें.
  • Cloud Storage: इमेज या वीडियो जैसे यूज़र जनरेटेड कॉन्टेंट को सेव करने और दिखाने के लिए, Cloud Storage का इस्तेमाल करें.
  • पुष्टि करना: उपयोगकर्ता खाते बनाने, लॉगिन सेशन मैनेज करने, और पासवर्ड रीसेट करने के लिए, Firebase Authentication का इस्तेमाल करें.

मोबाइल पर भी उपलब्ध कराना:

  • Android और iOS: अगर आपको मोबाइल ऐप्लिकेशन बनाना है, तो Android और iOS, दोनों प्लैटफ़ॉर्म के लिए वर्शन बनाएं.
  • Firebase SDK टूल: अपने मोबाइल ऐप्लिकेशन में Firebase की सुविधाओं को आसानी से इंटिग्रेट करने के लिए, Android और iOS के लिए Firebase SDK टूल का इस्तेमाल करें.