Firebase AppCheck এবং reCAPTCHA দিয়ে Places API অনুরোধগুলিকে যাচাই করুন,Firebase AppCheck এবং reCAPTCHA দিয়ে Places API অনুরোধগুলিকে বৈধ করুন

1. আপনি শুরু করার আগে

ব্যবহারকারীদের আপনার ওয়েব অ্যাপ্লিকেশনের সাথে ইন্টারঅ্যাক্ট করার বৈধতা নিশ্চিত করতে, আপনি ব্যবহারকারীর সেশন যাচাই করতে reCAPTCHA JWT টোকেন ব্যবহার করে Firebase অ্যাপ চেক প্রয়োগ করবেন। এই সেটআপ আপনাকে ক্লায়েন্ট অ্যাপ্লিকেশন থেকে স্থান API (নতুন) এর অনুরোধগুলিকে নিরাপদে পরিচালনা করতে সক্ষম করবে৷

b40cfddb731786fa.png

লাইভ লিঙ্ক

যা আপনি নির্মাণ করবেন।

এটি প্রদর্শন করতে, আপনি একটি ওয়েব অ্যাপ তৈরি করবেন যা লোড করার সময় একটি মানচিত্র প্রদর্শন করে। এটি Firebase SDK ব্যবহার করে বিচক্ষণতার সাথে একটি reCAPTCHA টোকেন তৈরি করবে। এই টোকেনটি তারপর আপনার Node.js সার্ভারে পাঠানো হয়, যেখানে ফায়ারবেস প্লেস এপিআই-তে যেকোনো অনুরোধ পূরণ করার আগে এটিকে যাচাই করে।

টোকেনটি বৈধ হলে, ফায়ারবেস অ্যাপ চেক এটিকে মেয়াদ শেষ না হওয়া পর্যন্ত সংরক্ষণ করবে, প্রতিটি ক্লায়েন্ট অনুরোধের জন্য একটি নতুন টোকেন তৈরি করার প্রয়োজনীয়তা দূর করবে। যদি টোকেনটি অবৈধ হয়, ব্যবহারকারীকে একটি নতুন টোকেন পেতে পুনরায় reCAPTCHA যাচাইকরণ সম্পূর্ণ করতে বলা হবে।

2. পূর্বশর্ত

এই কোডল্যাবটি সম্পূর্ণ করতে আপনাকে নীচের আইটেমগুলির সাথে নিজেকে পরিচিত করতে হবে। daea823b6bc38b67.png

প্রয়োজনীয় Google ক্লাউড পণ্য

  • গুগল ক্লাউড ফায়ারবেস অ্যাপ চেক : টোকেন পরিচালনার জন্য ডাটাবেস
  • Google reCAPTCHA : টোকেন তৈরি এবং যাচাইকরণ। এটি একটি টুল যা ওয়েবসাইটগুলিতে বট থেকে মানুষকে আলাদা করতে ব্যবহৃত হয়। এটি ব্যবহারকারীর আচরণ, ব্রাউজার বৈশিষ্ট্য এবং নেটওয়ার্ক তথ্য বিশ্লেষণ করে একটি স্কোর তৈরি করে যা ব্যবহারকারীর বট হওয়ার সম্ভাবনা নির্দেশ করে। স্কোর যথেষ্ট বেশি হলে, ব্যবহারকারীকে মানুষ হিসেবে বিবেচনা করা হয় এবং আর কোনো পদক্ষেপের প্রয়োজন নেই। স্কোর কম হলে, ব্যবহারকারীর পরিচয় নিশ্চিত করতে একটি ক্যাপচা ধাঁধা উপস্থাপন করা হতে পারে। এই পদ্ধতিটি প্রচলিত ক্যাপচা পদ্ধতির তুলনায় কম অনুপ্রবেশকারী, ব্যবহারকারীর অভিজ্ঞতাকে আরও মসৃণ করে তোলে।
  • (ঐচ্ছিক) গুগল ক্লাউড অ্যাপ ইঞ্জিন : স্থাপনার পরিবেশ।

প্রয়োজনীয় Google Maps প্ল্যাটফর্ম পণ্য

এই কোডল্যাবে, আপনি নিম্নলিখিত Google মানচিত্র প্ল্যাটফর্ম পণ্যগুলি ব্যবহার করবেন:

  • Maps JavaScript API লোড করা হয়েছে এবং ওয়েব অ্যাপে প্রদর্শিত হয়েছে
  • ব্যাকএন্ড সার্ভার দ্বারা জারি করা স্থান API (নতুন) অনুরোধ

এই কোডল্যাবের জন্য অন্যান্য প্রয়োজনীয়তা

এই কোডল্যাবটি সম্পূর্ণ করতে, আপনার নিম্নলিখিত অ্যাকাউন্ট, পরিষেবা এবং সরঞ্জামগুলির প্রয়োজন হবে:

  • বিলিং সক্ষম সহ একটি Google ক্লাউড প্ল্যাটফর্ম অ্যাকাউন্ট৷
  • একটি Google মানচিত্র প্ল্যাটফর্ম API কী মানচিত্র জাভাস্ক্রিপ্ট API এবং স্থানগুলি সক্ষম করে৷
  • জাভাস্ক্রিপ্ট, এইচটিএমএল এবং সিএসএস এর প্রাথমিক জ্ঞান
  • Node.js এর প্রাথমিক জ্ঞান
  • আপনার পছন্দের একটি পাঠ্য সম্পাদক বা IDE

3. সেট আপ করুন

Google Maps প্ল্যাটফর্ম সেট আপ করুন

আপনার যদি ইতিমধ্যেই একটি Google ক্লাউড প্ল্যাটফর্ম অ্যাকাউন্ট না থাকে এবং বিলিং সক্ষম করা একটি প্রকল্প থাকে, তাহলে অনুগ্রহ করে একটি বিলিং অ্যাকাউন্ট এবং একটি প্রকল্প তৈরি করতে Google মানচিত্র প্ল্যাটফর্মের সাথে শুরু করা নির্দেশিকাটি দেখুন৷

  1. ক্লাউড কনসোলে , প্রকল্পের ড্রপ-ডাউন মেনুতে ক্লিক করুন এবং এই কোডল্যাবের জন্য আপনি যে প্রকল্পটি ব্যবহার করতে চান সেটি নির্বাচন করুন।

e7ffad81d93745cd.png

  1. Google ক্লাউড মার্কেটপ্লেসে এই কোডল্যাবের জন্য প্রয়োজনীয় Google মানচিত্র প্ল্যাটফর্ম API এবং SDK সক্ষম করুন৷ এটি করতে, এই ভিডিও বা এই ডকুমেন্টেশনের ধাপগুলি অনুসরণ করুন৷
  2. ক্লাউড কনসোলের শংসাপত্র পৃষ্ঠায় একটি API কী তৈরি করুন। আপনি এই ভিডিও বা এই ডকুমেন্টেশনের ধাপগুলি অনুসরণ করতে পারেন। Google মানচিত্র প্ল্যাটফর্মের সমস্ত অনুরোধের জন্য একটি API কী প্রয়োজন৷

অ্যাপ্লিকেশন ডিফল্ট শংসাপত্র

আপনি আপনার ফায়ারবেস প্রজেক্টের সাথে ইন্টারঅ্যাক্ট করতে Firebase অ্যাডমিন SDK ব্যবহার করবেন সেইসাথে Places API-তে অনুরোধ করতে এবং এটি কাজ করার জন্য বৈধ শংসাপত্র প্রদান করতে হবে।

অনুরোধ করার জন্য আপনার সার্ভারকে প্রমাণীকরণ করতে আমরা ADC প্রমাণীকরণ (স্বয়ংক্রিয় ডিফল্ট শংসাপত্র) ব্যবহার করব। বিকল্পভাবে (প্রস্তাবিত নয়) আপনি একটি পরিষেবা অ্যাকাউন্ট তৈরি করতে পারেন এবং আপনার কোডের মধ্যে শংসাপত্র সঞ্চয় করতে পারেন।

সংজ্ঞা : অ্যাপ্লিকেশন ডিফল্ট শংসাপত্র (ADC) হল একটি প্রক্রিয়া যা Google ক্লাউড স্পষ্টভাবে শংসাপত্রগুলি পরিচালনা না করেই আপনার অ্যাপ্লিকেশনগুলিকে স্বয়ংক্রিয়ভাবে প্রমাণীকরণ করার জন্য প্রদান করে৷ এটি বিভিন্ন অবস্থানে (যেমন এনভায়রনমেন্ট ভেরিয়েবল, সার্ভিস অ্যাকাউন্ট ফাইল, বা Google ক্লাউড মেটাডেটা সার্ভার) শংসাপত্রের সন্ধান করে এবং এটি প্রথম যেটি খুঁজে পায় সেটি ব্যবহার করে।

  • আপনার টার্মিনালে, নীচের কমান্ডটি ব্যবহার করুন যা আপনার অ্যাপ্লিকেশনগুলিকে বর্তমানে লগ-ইন করা ব্যবহারকারীর পক্ষে Google ক্লাউড সংস্থানগুলিকে নিরাপদে অ্যাক্সেস করতে দেয়: 
gcloud auth application-default login
  • আপনি রুটে একটি .env ফাইল তৈরি করবেন যা একটি Google ক্লাউড প্রজেক্ট ভেরিয়েবল নির্দিষ্ট করে: 
GOOGLE_CLOUD_PROJECT="your-project-id"

একটি পরিষেবা অ্যাকাউন্ট তৈরি করুন

  • Google মানচিত্র প্ল্যাটফর্ম ট্যাব > "+প্রমাণপত্র তৈরি করুন" > পরিষেবা অ্যাকাউন্ট
  • Firebase AppCheck অ্যাডমিন ভূমিকা যোগ করুন, তারপর ইনপুট পরিষেবা অ্যাকাউন্টের নাম যা আপনি এইমাত্র টাইপ করেছেন, যেমন: firebase-appcheck-codelab@yourproject.iam.gserviceaccount.com

শংসাপত্র

  • তৈরি করা পরিষেবা অ্যাকাউন্টে ক্লিক করুন
  • একটি কী তৈরি করতে KEYS ট্যাবে যান > JSON > ডাউনলোড করা json শংসাপত্র সংরক্ষণ করুন। আপনার রুট ফোল্ডারে অটো ডাউনলোড হওয়া xxx.json ফাইলটি সরান
  • (পরবর্তী অধ্যায়) nodejs ফাইল server.js (firebase-credentials.json) এ এটির সঠিক নাম দিন

4. ফায়ারবেস অ্যাপচেক ইন্টিগ্রেশন

আপনি Firebase কনফিগারেশনের বিবরণ এবং reCAPTCHA গোপন কী পাবেন।

আপনি সেগুলিকে ডেমো অ্যাপ্লিকেশনে পেস্ট করবেন এবং সার্ভার চালু করবেন।

ফায়ারবেসে একটি অ্যাপ্লিকেশন তৈরি করুন

ইতিমধ্যে তৈরি করা Google ক্লাউড প্রকল্পটি নির্বাচন করুন (আপনাকে নির্দিষ্ট করতে হতে পারে: "মূল সম্পদ নির্বাচন করা")"

a6d171c6d7e98087.pnga16010ba102cc90b.png

  • উপরের বাম মেনু থেকে একটি অ্যাপ্লিকেশন যোগ করুন (কগ)

18e5a7993ad9ea53.png4632158304652118.png

ফায়ারবেস ইনিশিয়ালাইজেশন কোড

  • ক্লায়েন্ট সাইডের জন্য 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.pnge6bddef9d5cf5460.png

  • Firebase AppCheck-এ reCAPTCHA সিক্রেট পেস্ট করুন

a63bbd533a1b5437.png

  • অ্যাপের স্থিতি সবুজ হওয়া উচিত

4f7962b527b78ee5.png

5. ডেমো অ্যাপ্লিকেশন

  • ক্লায়েন্ট ওয়েব অ্যাপ: এইচটিএমএল, জাভাস্ক্রিপ্ট, সিএসএস ফাইল
  • সার্ভার: Node.js ফাইল
  • এনভায়রনমেন্ট (.env): API কী
  • কনফিগারেশন (app.yaml): গুগল অ্যাপ ইঞ্জিন স্থাপনের সেটিংস

Node.js সেটআপ:

  • নেভিগেট করুন : আপনার টার্মিনাল খুলুন এবং আপনার ক্লোন করা প্রকল্পের রুট ডিরেক্টরিতে নেভিগেট করুন।
  • Node.js ইনস্টল করুন (যদি প্রয়োজন হয়) : সংস্করণ 18 বা উচ্চতর। 
node -v  # Check installed version
  • প্রজেক্ট শুরু করুন: সমস্ত সেটিংস ডিফল্ট হিসাবে রেখে একটি নতুন Node.js প্রকল্প শুরু করতে নিম্নলিখিত কমান্ডটি চালান: 
npm init
  • নির্ভরতা ইনস্টল করুন: প্রয়োজনীয় প্রকল্প নির্ভরতা ইনস্টল করতে নিম্নলিখিত কমান্ডটি ব্যবহার করুন: 
npm install @googlemaps/places firebase-admin express axios dotenv

কনফিগারেশন: গুগল ক্লাউড প্রজেক্টের জন্য এনভায়রনমেন্ট ভেরিয়েবল

  • এনভায়রনমেন্ট ফাইল তৈরি: আপনার প্রকল্পের রুট ডিরেক্টরিতে, .env নামে একটি ফাইল তৈরি করুন। এই ফাইলটি সংবেদনশীল কনফিগারেশন ডেটা সঞ্চয় করবে এবং সংস্করণ নিয়ন্ত্রণে প্রতিশ্রুতিবদ্ধ হওয়া উচিত নয়।
  • এনভায়রনমেন্ট ভেরিয়েবলগুলি পপুলেট করুন: .env ফাইলটি খুলুন এবং আপনার Google ক্লাউড প্রকল্পের প্রকৃত মানগুলির সাথে স্থানধারকগুলিকে প্রতিস্থাপন করে নিম্নলিখিত ভেরিয়েবলগুলি যোগ করুন: 
# 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

  • অ্যাপে টোকেন তৈরি করতে ফায়ারবেস লাইব্রেরি লোড করে 
<!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 কীগুলি নিয়ে আসে: একটি ব্যাকএন্ড সার্ভার থেকে Google মানচিত্র এবং ফায়ারবেস অ্যাপ চেকের জন্য API কীগুলি উদ্ধার করে৷
  • Firebase শুরু করে: প্রমাণীকরণ এবং নিরাপত্তার জন্য Firebase সেট আপ করে। (কনফিগারেশন প্রতিস্থাপন করুন → অধ্যায় 4 দেখুন)।

Firebase অ্যাপ চেক টোকেনের বৈধতার সময়কাল, 30 মিনিট থেকে 7 দিন পর্যন্ত, Firebase কনসোলের মধ্যে কনফিগার করা হয় এবং জোর করে টোকেন রিফ্রেশ করার চেষ্টা করে পরিবর্তন করা যায় না।

  • অ্যাপ চেক সক্রিয় করে: আগত অনুরোধের সত্যতা যাচাই করতে Firebase অ্যাপ চেক সক্ষম করে।
  • Google Maps API লোড করে: মানচিত্র প্রদর্শনের জন্য গতিশীলভাবে Google Maps JavaScript লাইব্রেরি লোড করে।
  • মানচিত্রটি শুরু করে: একটি ডিফল্ট অবস্থানকে কেন্দ্র করে একটি Google মানচিত্র তৈরি করে।
  • ম্যাপ ক্লিকগুলি পরিচালনা করে: মানচিত্রে ক্লিকগুলির জন্য শোনে এবং সেই অনুযায়ী কেন্দ্র বিন্দু আপডেট করে৷
  • Queries Places API: একটি ব্যাকএন্ড API ( /api/data ) এ অনুরোধ পাঠায় যাতে ক্লিক করা অবস্থানের কাছাকাছি স্থানগুলি (রেস্তোরাঁ, পার্ক, বার) সম্পর্কে তথ্য আনতে, অনুমোদনের জন্য Firebase অ্যাপ চেক ব্যবহার করে।
  • মার্কারগুলি প্রদর্শন করে: মানচিত্রে আনা ডেটাকে চিহ্নিতকারী হিসাবে প্লট করে, তাদের নাম এবং আইকনগুলি দেখায়৷ 
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 ফাইল থেকে এনভায়রনমেন্ট ভেরিয়েবল (API কী, Google প্রজেক্ট আইডি) লোড করে।
  • সার্ভার শুরু করে, http://localhost:3000 এ অনুরোধের জন্য শোনা।
  • অ্যাপ্লিকেশন ডিফল্ট শংসাপত্র (ADC) ব্যবহার করে Firebase অ্যাডমিন 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

একটি টোকেন একটি গ্লোবাল ভেরিয়েবল হিসাবে তৈরি করা হয়, ব্যবহারকারীর ব্রাউজার উইন্ডো থেকে লুকানো হয় এবং প্রক্রিয়াকরণের জন্য সার্ভারে প্রেরণ করা হয়। টোকেনের বিশদ বিবরণ সার্ভার লগে পাওয়া যাবে।

সার্ভারের কার্যাবলী এবং স্থান API কাছাকাছি অনুসন্ধান অনুরোধের প্রতিক্রিয়া সম্পর্কে বিশদ বিবরণ সার্ভার লগগুলিতে পাওয়া যাবে৷

সমস্যা সমাধান:

Google প্রজেক্ট আইডি সেটআপে সামঞ্জস্যপূর্ণ কিনা তা নিশ্চিত করুন:

  • .env ফাইলে (GOOGLE_CLOUD_PROJECT পরিবর্তনশীল)
  • টার্মিনাল gcloud কনফিগারেশনে: 
gcloud config set project your-project-id
  • reCaptcha সেটআপে

e6bddef9d5cf5460.png

  • ফায়ারবেস সেটআপে

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);
}
  • অনেকগুলি অসফল প্রমাণীকরণ চেষ্টা করা, যেমন: মিথ্যা রিক্যাপচা সাইট কী ব্যবহার করা, একটি অস্থায়ী থ্রটলিং ট্রিগার করতে পারে৷ 
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
  • ছদ্মবেশী: 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. এটা, ভাল কাজ!

ফলো-আপ পদক্ষেপ

অ্যাপ ইঞ্জিনে স্থাপনা:

  • প্রয়োজনীয় কনফিগারেশন পরিবর্তন করে Google অ্যাপ ইঞ্জিনে স্থাপনার জন্য আপনার প্রকল্প প্রস্তুত করুন।
  • আপনার অ্যাপ্লিকেশন স্থাপন করতে gcloud কমান্ড-লাইন টুল বা অ্যাপ ইঞ্জিন কনসোল ব্যবহার করুন।

ফায়ারবেস প্রমাণীকরণ উন্নত করুন:

  • ডিফল্ট বনাম কাস্টম টোকেন: ফায়ারবেস পরিষেবাগুলির গভীর ব্যবহারের জন্য ফায়ারবেস কাস্টম টোকেনগুলি প্রয়োগ করুন৷
  • টোকেন লাইফটাইম: উপযুক্ত টোকেন লাইফটাইম সেট করুন, সংবেদনশীল ক্রিয়াকলাপগুলির জন্য ছোট (এক ঘণ্টা পর্যন্ত কাস্টম ফায়ারবেস টোকেন), সাধারণ সেশনের জন্য দীর্ঘ (reCAPTCHA টোকেন: 30 মিনিট থেকে 7 ঘন্টা)।
  • reCAPTCHA-এর বিকল্পগুলি অন্বেষণ করুন: ডিভাইসচেক (iOS), SafetyNet (Android), বা অ্যাপ অ্যাটেস্ট আপনার নিরাপত্তার প্রয়োজনের জন্য উপযুক্ত কিনা তা তদন্ত করুন।

ফায়ারবেস পণ্য একত্রিত করুন:

  • রিয়েলটাইম ডেটাবেস বা ফায়ারস্টোর: যদি আপনার অ্যাপ্লিকেশনের রিয়েল-টাইম ডেটা সিঙ্ক্রোনাইজেশন বা অফলাইন ক্ষমতার প্রয়োজন হয়, তাহলে রিয়েলটাইম ডেটাবেস বা ফায়ারস্টোরের সাথে একীভূত করুন।
  • ক্লাউড স্টোরেজ: ছবি বা ভিডিওর মতো ব্যবহারকারীর তৈরি সামগ্রী সংরক্ষণ এবং পরিবেশনের জন্য ক্লাউড স্টোরেজ ব্যবহার করুন।
  • প্রমাণীকরণ: ব্যবহারকারীর অ্যাকাউন্ট তৈরি করতে, লগইন সেশন পরিচালনা করতে এবং পাসওয়ার্ড রিসেট পরিচালনা করতে ফায়ারবেস প্রমাণীকরণের সুবিধা নিন।

মোবাইলে প্রসারিত করুন:

  • অ্যান্ড্রয়েড এবং আইওএস: আপনি যদি একটি মোবাইল অ্যাপ রাখার পরিকল্পনা করেন তবে অ্যান্ড্রয়েড এবং আইওএস উভয় প্ল্যাটফর্মের জন্য সংস্করণ তৈরি করুন।
  • Firebase SDKs: আপনার মোবাইল অ্যাপে Firebase বৈশিষ্ট্যগুলিকে নির্বিঘ্নে সংহত করতে Android এবং iOS-এর জন্য Firebase SDK ব্যবহার করুন৷