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

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

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

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: टोकन बनाना और उसकी पुष्टि करना. यह एक ऐसा टूल है जिसका इस्तेमाल वेबसाइटों पर, लोगों और बॉट के बीच अंतर करने के लिए किया जाता है. यह कुकी, उपयोगकर्ता के व्यवहार, ब्राउज़र एट्रिब्यूट, और नेटवर्क की जानकारी का विश्लेषण करके स्कोर जनरेट करती है. इससे पता चलता है कि उपयोगकर्ता के बॉट होने की कितनी संभावना है. अगर स्कोर काफ़ी ज़्यादा है, तो उपयोगकर्ता को इंसान माना जाता है. इसके बाद, कोई और कार्रवाई करने की ज़रूरत नहीं होती. अगर स्कोर कम है, तो उपयोगकर्ता की पहचान की पुष्टि करने के लिए, उसे CAPTCHA पज़ल दिखाया जा सकता है. यह तरीका, पारंपरिक CAPTCHA के तरीकों की तुलना में कम दखल देने वाला है. इससे उपयोगकर्ता को बेहतर अनुभव मिलता है.
  • (ज़रूरी नहीं) Google Cloud App Engine: डिप्लॉयमेंट एनवायरमेंट.

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

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

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

इस कोडलैब को पूरा करने के लिए, आपको इन खातों, सेवाओं, और टूल की ज़रूरत होगी:

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

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

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

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

परिभाषा: ऐप्लिकेशन के डिफ़ॉल्ट क्रेडेंशियल (एडीसी) एक ऐसा तरीका है जिसे 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

क्रेडेंशियल

  • बनाए गए सेवा खाते पर क्लिक करें
  • कुंजी बनाने के लिए, KEYS टैब में जाएं > JSON > डाउनलोड किए गए JSON क्रेडेंशियल सेव करें. अपने रूट फ़ोल्डर में अपने-आप डाउनलोड हुई xxx.json फ़ाइल को मूव करें
  • (अगला चैप्टर) इसे nodejs फ़ाइल 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 v3 टोकन का इस्तेमाल कर सके

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

da7efe203ce4142c.png

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

b47eab131617467.png e6bddef9d5cf5460.png

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

a63bbd533a1b5437.png

  • ऐप्लिकेशन की स्थिति हरे रंग में दिखनी चाहिए

4f7962b527b78ee5.png

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

  • क्लाइंट वेब ऐप्लिकेशन: एचटीएमएल, JavaScript, सीएसएस फ़ाइलें
  • सर्वर: Node.js फ़ाइल
  • Environment (.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 कंसोल में कॉन्फ़िगर किया जाता है. टोकन को रीफ़्रेश करने के लिए मजबूर करके, इसे बदला नहीं जा सकता.

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

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
  • आखिर में, लोकल लेवल पर एडीसी की जांच करें. इसके लिए, नीचे दी गई स्क्रिप्ट को 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 के प्रॉडक्ट इंटिग्रेट करें:

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

मोबाइल पर बड़ा करें:

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