1. আপনি শুরু করার আগে
আপনি কি নির্মাণ করবেন।
এই কোডল্যাবে, আপনি একটি ওয়েব পরিবেশে ব্যবহৃত আপনার API কী-তে সুরক্ষার আরেকটি স্তর যুক্ত করতে অ্যাপ চেক ব্যবহার করবেন।
কার্যকারিতা একসাথে বাঁধতে কোডল্যাবের মাধ্যমে বিশেষভাবে নিম্নলিখিত পদক্ষেপগুলি অনুসরণ করা হবে:
- Google মানচিত্র প্ল্যাটফর্ম জাভাস্ক্রিপ্ট API ব্যবহার করে একটি মানচিত্র হোস্ট করতে একটি ওয়েব পৃষ্ঠা তৈরি করুন৷
- পৃষ্ঠাটি হোস্ট করুন যাতে এটি অনলাইনে অ্যাক্সেস করা যায়।
- ক্লাউড কনসোল ব্যবহার করে API ব্যবহার করতে পারে এমন ডোমেন এবং APIগুলিকে সীমাবদ্ধ করুন৷
- Firebase এর মাধ্যমে অ্যাপ চেক লাইব্রেরি যোগ করুন এবং শুরু করুন।
- আবেদনের বৈধতা পরীক্ষা করতে প্রত্যয়ন প্রদানকারী যোগ করুন।
- আপনার অ্যাপ এবং মনিটরে চেকিং জোরদার করুন।
কোডল্যাবের শেষে আপনার একটি কার্যকরী সাইট থাকা উচিত যা ব্যবহার করা API কী, যে ডোমেনগুলি থেকে এগুলি অ্যাক্সেস করা হয় এবং সেগুলি ব্যবহার করতে পারে এমন অ্যাপ্লিকেশনের ধরন উভয়ের উপর নিরাপত্তা প্রয়োগ করে।
2. পূর্বশর্ত
অ্যাপ চেক সক্ষম করার জন্য সুরক্ষা প্রদানের জন্য তিনটি Google পরিষেবা ব্যবহার করা প্রয়োজন, আপনাকে এই ক্ষেত্রগুলির সাথে নিজেকে পরিচিত করতে হবে।
ফায়ারবেস - এটি সেই পরিষেবাগুলির এনফোর্সমেন্ট প্রদান করে যা যাচাই করে যে উপযুক্ত ডোমেনগুলি থেকে API কী রেফার করা হচ্ছে। এটি ফায়ারবেস স্টুডিও ব্যবহারের মাধ্যমে হোস্টিং এবং স্থাপনার কার্যকারিতা প্রদান করবে।
reCAPTCHA - এটি মানুষ অ্যাপ্লিকেশন ব্যবহার করছে কিনা তা পরীক্ষা করার কার্যকারিতা প্রদান করে এবং ক্লায়েন্ট অ্যাপ্লিকেশন ডোমেনে Firebase সংযোগ করার জন্য সর্বজনীন এবং ব্যক্তিগত কীগুলিও প্রদান করে।
Google ক্লাউড প্ল্যাটফর্ম - এটি Google ম্যাপ প্ল্যাটফর্ম এবং ফায়ারবেস উভয়ের দ্বারা ব্যবহৃত API কী এবং মানচিত্র কী ব্যবহার করে ডোমেনের উপর সীমাবদ্ধতা প্রদান করে।
নিচের আর্কিটেকচার ডায়াগ্রামে আপনি দেখতে পাচ্ছেন কিভাবে এই সব একসাথে কাজ করে:
অ্যাপ চেক এবং Google ম্যাপ প্ল্যাটফর্ম ব্যবহার করার সময়, এই ক্ষেত্রে reCAPTCHA, একটি সত্যায়ন প্রদানকারীর দ্বারা প্রদত্ত প্রত্যয়ন ব্যবহার করে অনুরোধগুলি একটি বৈধ অ্যাপ্লিকেশন এবং ব্যবহারকারীর কাছ থেকে আসছে কিনা তা নির্ধারণ করতে নিম্নলিখিত উপাদানগুলি একসাথে কাজ করে।
এটি Firebase দ্বারা প্রদত্ত অ্যাপ চেক SDK ব্যবহারের মাধ্যমে সঞ্চালিত হয়, যা কলিং অ্যাপ্লিকেশনটির বৈধতা পরীক্ষা করে এবং তারপরে Google মানচিত্র প্ল্যাটফর্ম জাভাস্ক্রিপ্ট এপিআই-এ পরবর্তী কলগুলি করা অ্যাপ্লিকেশনটিকে একটি টোকেন প্রদান করে৷ পরিবর্তে Google মানচিত্র প্ল্যাটফর্ম জাভাস্ক্রিপ্ট API Firebase-এর সাথে প্রদত্ত টোকেনের বৈধতা পরীক্ষা করে তা নিশ্চিত করে যে এটি সঠিক ডোমেন থেকে আসছে কিন্তু একজন বৈধ ব্যবহারকারীর কাছ থেকে প্রত্যয়ন প্রদানকারীর মাধ্যমেও আসছে।
আপনি নিম্নলিখিত অবস্থানে অ্যাপ চেক এবং মানচিত্র জাভাস্ক্রিপ্ট API ব্যবহার সম্পর্কে আরও বিশদ জানতে পারেন এবং আপনাকে প্রয়োজনীয় পদক্ষেপগুলির সাথে নিজেকে পরিচিত করতে হবে।
https://developers.google.com/maps/documentation/javascript/maps-app-check
3. সেট আপ করুন
আপনি যদি ইতিমধ্যে একটি Google ক্লাউড অ্যাকাউন্ট না পেয়ে থাকেন, তাহলে আপনাকে শুরুতে বিলিং সক্ষম করে একটি সেট আপ করতে হবে৷ আপনি শুরু করার আগে এটি তৈরি করতে নির্দেশাবলী অনুসরণ করুন।
Google Maps প্ল্যাটফর্ম সেট আপ করুন
আপনার যদি ইতিমধ্যেই একটি Google ক্লাউড প্ল্যাটফর্ম অ্যাকাউন্ট না থাকে এবং বিলিং সক্ষম করা একটি প্রকল্প থাকে, তাহলে অনুগ্রহ করে একটি বিলিং অ্যাকাউন্ট এবং একটি প্রকল্প তৈরি করতে Google মানচিত্র প্ল্যাটফর্মের সাথে শুরু করা নির্দেশিকাটি দেখুন৷
- ক্লাউড কনসোলে , প্রকল্পের ড্রপ-ডাউন মেনুতে ক্লিক করুন এবং এই কোডল্যাবের জন্য আপনি যে প্রকল্পটি ব্যবহার করতে চান সেটি নির্বাচন করুন।
- Google ক্লাউড মার্কেটপ্লেসে এই কোডল্যাবের জন্য প্রয়োজনীয় Google মানচিত্র প্ল্যাটফর্ম API এবং SDK সক্ষম করুন৷ এটি করতে, এই ভিডিও বা এই ডকুমেন্টেশনের ধাপগুলি অনুসরণ করুন৷
- ক্লাউড কনসোলের শংসাপত্র পৃষ্ঠায় একটি API কী তৈরি করুন। আপনি এই ভিডিও বা এই ডকুমেন্টেশনের ধাপগুলি অনুসরণ করতে পারেন। Google মানচিত্র প্ল্যাটফর্মের সমস্ত অনুরোধের জন্য একটি API কী প্রয়োজন৷
এই কোডল্যাবের জন্য অন্যান্য প্রয়োজনীয়তা
এই কোডল্যাবটি সম্পূর্ণ করতে, আপনার নিম্নলিখিত অ্যাকাউন্ট, পরিষেবা এবং সরঞ্জামগুলির প্রয়োজন হবে:
- জাভাস্ক্রিপ্ট, এইচটিএমএল এবং সিএসএস এর প্রাথমিক জ্ঞান
- বিলিং সক্ষম সহ একটি Google ক্লাউড অ্যাকাউন্ট (উল্লেখিত)
- Maps JavaScript API সক্ষম সহ একটি Google মানচিত্র প্ল্যাটফর্ম API কী (এটি কোডল্যাবের সময় করা হবে)।
- ওয়েব হোস্টিং এবং স্থাপনার প্রাথমিক ধারণা (আপনাকে কোডল্যাবে এর মাধ্যমে নির্দেশিত করা হবে)। এটি ফায়ারবেস কনসোল এবং ফায়ারবেস স্টুডিওর মাধ্যমে করা হবে।
- আপনি কাজ করার সাথে সাথে ফাইলগুলি দেখার জন্য একটি ওয়েব ব্রাউজার।
4. ফায়ারবেস স্টুডিওতে একটি পৃষ্ঠা তৈরি করুন৷
এই কোডল্যাবটি অনুমান করে না যে আপনি ইতিমধ্যে একটি অ্যাপ্লিকেশন তৈরি করেছেন এবং এটি ফায়ারবেস স্টুডিও ব্যবহার করে মানচিত্র অ্যাপ্লিকেশনটি হোস্ট করার জন্য একটি পৃষ্ঠা তৈরি করতে এবং পরীক্ষার উদ্দেশ্যে এটিকে ফায়ারবেসে স্থাপন করে। আপনার যদি একটি বিদ্যমান অ্যাপ্লিকেশন থাকে তবে আপনি সেটি ব্যবহার করতে পারেন, সঠিক বাস্তবায়ন নিশ্চিত করতে উপযুক্ত হোস্ট ডোমেন, কোড স্নিপেট এবং API কী পরিবর্তন করে।
Firebase স্টুডিওতে নেভিগেট করুন (একটি Google অ্যাকাউন্ট প্রয়োজন) এবং একটি নতুন সাধারণ HTML অ্যাপ্লিকেশন তৈরি করুন, আপনাকে এই বিকল্পটি প্রকাশ করতে "সব টেমপ্লেট দেখুন" বোতামে ক্লিক করতে হতে পারে বা সরাসরি অ্যাক্সেসের জন্য এই লিঙ্কটিতে ক্লিক করতে হতে পারে৷
ওয়ার্কস্পেসকে একটি উপযুক্ত নাম দিন, যেমন myappcheck-map (এছাড়া স্বতন্ত্রতার জন্য কিছু র্যান্ডম নম্বর, এটি আপনার জন্য একটি যোগ করবে)। Firebase স্টুডিও তারপর ওয়ার্কস্পেস তৈরি করবে।
একবার আপনি নামটি পূরণ করলে আপনি তৈরি বোতামটি ক্লিক করতে পারেন এবং এটি প্রকল্প তৈরির প্রক্রিয়া শুরু করবে।
এটি তৈরি হয়ে গেলে আপনি index.html ফাইলের পাঠ্যটিকে নিম্নলিখিত কোড দিয়ে প্রতিস্থাপন করতে পারেন যা এটিতে একটি মানচিত্র সহ একটি পৃষ্ঠা তৈরি করে।
<!doctype html>
<html>
<head>
<title>Secure Map</title>
<style>
#map {
height: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h3>App Check Security Demo</h3>
<!--The div element for the map -->
<div id="map"></div>
<script>
(g => { var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window; b = b[c] || (b[c] = {}); var d = b.maps || (b.maps = {}), r = new Set, e = new URLSearchParams, u = () => h || (h = new Promise(async (f, n) => { await (a = m.createElement("script")); e.set("libraries", [...r] + ""); for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]); e.set("callback", c + ".maps." + q); a.src = `https://maps.${c}apis.com/maps/api/js?` + e; d[q] = f; a.onerror = () => h = n(Error(p + " could not load.")); a.nonce = m.querySelector("script[nonce]")?.nonce || ""; m.head.append(a) })); d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)) })({
key: "YOUR_API_KEY",
v: "weekly",
// Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
// Add other bootstrap parameters as needed, using camel case.
});
</script>
<script>
let map;
async function initMap() {
const { Map } = await google.maps.importLibrary("maps");
map = new Map(document.getElementById("map"), {
center: { lat: 51.5208, lng: -0.0977 },
zoom: 17,
});
}
initMap();
</script>
</body>
</html>
এটি চালানোর সময় একটি পৃষ্ঠা দেওয়া উচিত যা চিত্রে দেখানো কাজের অ্যাপ্লিকেশনটির মানচিত্র দেখাচ্ছে, কিন্তু!
পৃষ্ঠাটি আসলে লোড করা হলে একটি ত্রুটি প্রদর্শিত হবে কারণ এটির জন্য পৃষ্ঠায় একটি Google মানচিত্র প্ল্যাটফর্ম API কী প্রয়োজন, যা পরবর্তী বিভাগে যোগ করা হবে।
Firebase স্টুডিওর ওয়েব কনসোলে প্রকৃত ত্রুটির বার্তা দেখা যেতে পারে।
এটি ঠিক করার জন্য আমাদের পৃষ্ঠায় একটি API কী যোগ করতে হবে। API কী হল যেভাবে পৃষ্ঠা এবং মানচিত্র জাভাস্ক্রিপ্ট API-এর বাস্তবায়ন একসঙ্গে বাঁধা। এটি শোষণের একটি ক্ষেত্রও, কারণ এটি একটি এনক্রিপ্টেড পদ্ধতিতে পৃষ্ঠায় থাকা প্রয়োজন, যেখানে API কী নেওয়া যেতে পারে এবং বিভিন্ন সাইটে ব্যবহার করা যেতে পারে।
সুরক্ষার একটি পদ্ধতি হল অ্যাপ্লিকেশন বিধিনিষেধ ব্যবহারের মাধ্যমে, হয় অ্যাপ্লিকেশনের প্রকারের মাধ্যমে বা রেফারিং ডোমেন বা আইপি ঠিকানার মাধ্যমে কল করা হচ্ছে। আপনি নিম্নলিখিত সাইটে সেরা অনুশীলন সম্পর্কে আরও জানতে পারেন:
https://developers.google.com/maps/api-security-best-practices#rec-best-practices
অথবা কমান্ড লাইন বা সার্ভার থেকে সরাসরি কল ব্যবহারের মাধ্যমে, যে অ্যাপ্লিকেশনগুলিকে রেফারার প্রদান করার বা ট্র্যাক করার কোন উপায় নেই, তাই সম্ভাব্য নিরাপত্তা গর্ত।
5. একটি ফায়ারবেস অ্যাপ্লিকেশন তৈরি করুন৷
নিম্নলিখিতগুলি পরীক্ষা করার জন্য প্রমাণীকরণ প্রদানকারীকে টাই করার কার্যকারিতা প্রদান করতে Firebase ব্যবহার করা হয়:
- আপনার খাঁটি অ্যাপ থেকে অনুরোধগুলি আসে
- অনুরোধগুলি একটি খাঁটি, অপ্রত্যাশিত ডিভাইস এবং ব্যবহারকারীর সেশন থেকে উদ্ভূত হয়।
এই কোডল্যাবে reCAPTCHA v3 এই প্রত্যয়ন প্রদানকারী হিসাবে ব্যবহার করা হবে।
একটি ফায়ারবেস অ্যাপ্লিকেশন এবং হোস্ট তৈরি করুন।
https://firebase.google.com/ এ যান এবং "কনসোলে যান" লিঙ্ক থেকে একটি নতুন ফায়ারবেস প্রকল্প তৈরি করুন৷
নিম্নলিখিত এলাকায় ক্লিক করে একটি নতুন প্রকল্প তৈরি করুন।
প্রকল্পের জন্য একটি নাম চয়ন করুন, যেমন মাই অ্যাপ চেক প্রজেক্ট , এটিকে আগে ব্যবহার করা একই নাম হতে হবে না কারণ এটি কেবলমাত্র রেফারেন্সের জন্য, প্রকল্পের প্রকৃত নামটি পাঠ্যের ঠিক নীচে সম্পাদনা করা যেতে পারে, এটি আপনার প্রবেশ করানো নাম দিয়ে তৈরি করা হবে এবং অনন্য না হলে এটিতে একটি নম্বর যোগ করা হবে।
যদি আপনাকে আপনার অ্যাপ্লিকেশনে অন্যান্য পরিষেবা (যেমন Google Analytics) যোগ করার জন্য অনুরোধ করা হয় তবে আপনি সেগুলি গ্রহণ করতে পারেন বা না করতে পারেন, কিন্তু এই কোডল্যাবের জন্য তাদের প্রয়োজন নেই তাই ছেড়ে দেওয়া যেতে পারে।
"প্রকল্প তৈরি করুন" বোতামে ক্লিক করুন এবং প্রকল্পটি তৈরি হওয়ার জন্য অপেক্ষা করুন। এটি সম্পন্ন হলে এটি আপনাকে অবহিত করবে।
এটি প্রজেক্টের সাথে ইন্টারঅ্যাক্ট শুরু করার জন্য প্রস্তুত হলে অবিরত ক্লিক করুন।
মূল পৃষ্ঠা থেকে আপনি আপনার অ্যাপে Firebase যোগ করে এবং ওয়েব বিকল্পটি বেছে নিয়ে শুরু করতে বেছে নিতে পারেন।
আপনার সাইটে ফায়ারবেস হোস্টিং সেট আপ করতে বেছে নিন যাতে ফাইলগুলি একবার স্থাপন করা হয়ে যায় (আপনার আসল সাইটের জন্য আপনি নিজের বিকল্প ব্যবহার করতে পারেন তবে এই কোডল্যাবটি অনুসরণ করার জন্য আপনি Firebase হোস্টিং-এ স্থাপন করতে যাচ্ছেন)।
অ্যাপ্লিকেশন তৈরি করতে অ্যাপ্লিকেশন নিবন্ধন ক্লিক করুন. এরপর আপনি তৈরি করা স্ক্রিপ্টটি নেবেন এবং আমাদের ওয়েব অ্যাপ্লিকেশন থেকে ফায়ারবেসে প্রজেক্টের রেফারেন্স করতে এটি ব্যবহার করবেন।
পরবর্তী ট্যাবে থাকা ফায়ারবেস কনফিগার কোডটি ফায়ারবেস এবং ম্যাপ এপিআইকে একসাথে সংযুক্ত করতে অ্যাপ্লিকেশনটিতে ব্যবহার করা হবে তাই এটি "স্ক্রিপ্ট ট্যাগ ব্যবহার করুন" বিভাগ থেকে অনুলিপি করা মূল্যবান। যা আপনি প্রজেক্ট index.html এ পেস্ট করবেন।
অন্যান্য বিভাগগুলির জন্য পরবর্তী ক্লিক করুন এবং তারপরে সাইটের প্রকল্প সেটিং বিভাগে তৈরি অ্যাপটি দেখুন।
যদি আপনাকে ফিরে যেতে হয় এবং পরবর্তী তারিখে কনফিগারেশনের বিশদটি খুঁজে পেতে হয় তবে আপনি "সেটিংস" বোতাম থেকে অ্যাপের বিশদ বিবরণও খুঁজে পেতে পারেন, যেমন দেখানো হয়েছে:
এই বিভাগটি ছেড়ে যাওয়ার আগে, আপনাকে তৈরি করা Firebase হোস্টিং সাইটের ডোমেনটি নোট করতে হবে যা পরে reCAPTCHA-এর সাথে ব্যবহারের জন্য তৈরি করা হয়েছে। এটি সাইটের নামটিকে সত্যায়ন প্রদানকারীর সাথে সংযুক্ত করার অনুমতি দেয়, যার অর্থ শুধুমাত্র সেই সাইটের অনুরোধগুলি যাচাই করা হবে৷
প্রজেক্ট শর্টকাট বা বাম দিকে বিল্ড মেনু থেকে হোস্টিং বিভাগে যান
বা 
এবং বিভাগ থেকে অ্যাপ্লিকেশনটির জন্য তৈরি করা ডোমেনটি সন্ধান করুন। এটি সেট আপ করার জন্য আপনাকে কয়েকটি স্ক্রীনে ক্লিক করতে হতে পারে যদি এটি ইতিমধ্যে করা না হয়ে থাকে।
6. সুরক্ষিত API কী
আপনি যে অ্যাকাউন্টে ফায়ারবেস ব্যবহার করছেন সেই একই অ্যাকাউন্টে ক্লাউড কনসোলে যান যে প্রকল্পটি তৈরি করা হয়েছে,
আপনার যদি একাধিক প্রকল্প থাকে তাহলে আপনার Firebase প্রকল্পের নামের সাথে সঠিক একটি নির্বাচন করতে ড্রপ-ডাউন বা অনুসন্ধান বাক্স ব্যবহার করতে হতে পারে।
এটি নতুন তৈরি প্রকল্পটি খুলবে। আপনি এখন এই প্রকল্পে মানচিত্র জাভাস্ক্রিপ্ট API যোগ করবেন যাতে এটি একটি নির্দিষ্ট API কী এবং হোস্টিং ডোমেনে এর ব্যবহার সীমাবদ্ধ করা সহ প্রকল্পের মধ্যে ব্যবহার করা যেতে পারে।
প্রকল্পে মানচিত্র API সক্রিয় করতে বাম দিকের মেনু ব্যবহার করুন৷ "APIs & Services" অপশন এবং "Enabled APIs & Services" নির্বাচন করুন।
"এপিআইএস এবং পরিষেবাগুলি সক্ষম করুন" বিকল্পটি নির্বাচন করুন৷
অনুসন্ধান বাক্সে "Maps Javascript API" লিখুন।
মিলে যাওয়া ফলাফল নির্বাচন করুন।
তারপরে এটিকে আপনার প্রকল্পে যুক্ত করতে API-তে সক্ষম ক্লিক করুন (আপনি যদি এই প্রকল্পটি আগে ব্যবহার করে থাকেন তবে এটি ইতিমধ্যেই হয়ে থাকতে পারে)।
একবার এটি সক্ষম হলে আপনি একটি API কী যোগ করতে এবং এটিকে সীমাবদ্ধ করতে বেছে নিতে পারেন, কিন্তু আপাতত এটি এড়িয়ে যাবে৷
আবার বাম মেনু বিকল্পগুলি ব্যবহার করে, API এবং পরিষেবা বিভাগে ফিরে যান এবং আপনার জন্য তৈরি করা ব্রাউজার কীটি নির্বাচন করুন৷
এপিআই সীমাবদ্ধতার একটিতে মানচিত্র জাভাস্ক্রিপ্ট API যোগ করুন।
লাইভ অ্যাপ্লিকেশানে কীগুলির জন্য আপনি যে ডোমেনে অ্যাপ্লিকেশনটি হোস্ট করছে তার উপর একটি সীমাবদ্ধতাও রাখতে হবে, Firebase-এ আপনার জন্য তৈরি করা ডোমেন ব্যবহার করে এখনই এটি করুন। এটি ডোমেনের অধীনে সমস্ত পথ কভার করে তা নিশ্চিত করতে আপনার ডোমেনের শেষে /* যোগ করা উচিত।
API কীগুলি সীমাবদ্ধ করার বিষয়ে আরও তথ্যের জন্য আপনি নিম্নলিখিত অবস্থানে এটি সক্ষম করার বিষয়ে আরও বিশদ জানতে পারেন৷
https://developers.google.com/maps/api-security-best-practices#restricting-api-keys
7. reCAPTCHA গোপনীয়তা তৈরি করুন
পরবর্তী ধাপ হল ক্লায়েন্ট এবং সার্ভার উভয়ের জন্য প্রত্যয়ন এবং কী প্রদান করার জন্য একটি reCAPTCHA প্রকল্প তৈরি করা।
https://www.google.com/recaptcha/ এ reCAPTCHA সাইটে যান এবং শুরু করুন বোতামে ক্লিক করুন৷
পরবর্তীতে একটি নতুন সাইট নিবন্ধন করুন, নিশ্চিত করুন যে আপনি সীমাবদ্ধ করার জন্য সঠিক ডোমেনটি প্রবেশ করেছেন৷
এছাড়াও নিশ্চিত করুন যে আপনি একই Google ক্লাউড প্রকল্প নির্বাচন করেছেন যেটি Firebase তৈরি করেছে যদি আপনার একাধিক থাকে।
এটি দুটি কী তৈরি করে, একটি গোপন কী যা আপনি Firebase কনসোলে প্রবেশ করবেন, এটি কখনই এমন কোনো পৃষ্ঠা বা অ্যাপ্লিকেশনে রাখা উচিত নয় যা সর্বজনীনভাবে দেখা যায় এবং একটি সাইট কী যা ওয়েব অ্যাপ্লিকেশনে ব্যবহার করবে।
এই পৃষ্ঠাটি আপনার প্রয়োজন হিসাবে খোলা রাখুন। কপি সিক্রেট কী বোতামে ক্লিক করুন এবং তারপর ফায়ারবেস সাইটে ফিরে যান।
8. Firebase এ reCAPTCHA যোগ করুন
Firebase অ্যাডমিন কনসোলে বাম দিকের মেনু আইটেমগুলিতে যান৷ বিল্ড মেনু আইটেমের অধীনে অ্যাপ চেক নির্বাচন করুন।
একটি অ্যাপ নিবন্ধিত না হওয়া পর্যন্ত পরিষেবাগুলির তালিকা সক্রিয় করা যাবে না (সাইটে হোস্টিং যোগ করার সময় এটি আগে তৈরি করা হয়েছিল), আপনার যদি এটি সেট আপ করার প্রয়োজন হয় তবে শুরু করুন ক্লিক করুন৷
অ্যাপ ট্যাবে ক্লিক করুন এবং ওয়েব অ্যাপ খুলুন এবং তারপরে আপনি reCAPTCHA সাইট থেকে যে গোপনীয়তাটি কপি করেছেন সেটি লিখুন এবং সংরক্ষণ করুন ক্লিক করুন।
এখন reCAPTCHA প্রদানকারীর দ্বারা একটি সবুজ টিক দেওয়া উচিত। এই ওয়েব অ্যাপ্লিকেশনটি এখন reCAPTCHA ব্যবহার করে প্রমাণ করতে পারে যে কোনও ব্যবহারকারী বা সাইট পরিষেবাটিকে সঠিকভাবে কল করছে কিনা।
APIs ট্যাবে এটি এখন দেখানো উচিত যে Google মানচিত্র প্ল্যাটফর্ম API সক্রিয় কিন্তু এখন অপ্রয়োগ করা হয়েছে।
আপনি এখন Firebase প্রকল্পের সাথে reCAPTCHA সিক্রেট লিঙ্ক করেছেন এবং এখন Maps অ্যাপ্লিকেশনের সাথে ব্যবহারের জন্য সঠিক প্রদানকারীর সাথে সাইট কী মেলে ওয়েব পৃষ্ঠায় কোডটি যোগ করতে পারেন।
গোপন কী এর সাথে মেলে reCAPTCHA দ্বারা সাইট কী চেক করা হয়, একবার হয়ে গেলে এটি নিশ্চিত করে যে কলিং পৃষ্ঠাটি সঠিক এবং অ্যাপ চেক একটি টোকেন প্রদান করে যা মানচিত্র জাভাস্ক্রিপ্ট API এ পরবর্তী কলগুলির দ্বারা ব্যবহার করা যেতে পারে, এই প্রত্যয়ন ব্যতীত টোকেন দেওয়া হবে না এবং অনুরোধগুলি বৈধ করা যাবে না৷
9. পৃষ্ঠায় যাচাইকরণ যোগ করুন এবং স্থাপন করুন।
ক্লাউড কনসোলে ফিরে যান এবং এপিআই কীটি অনুলিপি করুন যা মানচিত্র API-এর জন্য ব্যবহার করা প্রয়োজন।
আপনি এটি কনসোলের পাশের মেনু থেকে খুঁজে পেতে পারেন, API এবং পরিষেবার সাইড মেনুর অধীনে, শংসাপত্র বিকল্পের অধীনে।
এটি থেকে আপনি বিদ্যমান ব্রাউজার কী নির্বাচন করতে পারেন (যদিও উল্লেখ করা হয়েছে আপনি একটি ভিন্ন বিদ্যমান কী ব্যবহার করতে পারেন বা একটি নতুন তৈরি করতে পারেন)।
শো কী বোতামে ক্লিক করুন এবং প্রদর্শিত ডায়ালগ উইন্ডো থেকে কীটি অনুলিপি করুন।
Firebase স্টুডিও প্রকল্পে ফিরে যান যেখানে আপনার তৈরি করা HTML পৃষ্ঠাটি আগে খোলা হয়েছিল। এখন আপনি পৃষ্ঠাটিতে API কী যোগ করতে পারেন যাতে পৃষ্ঠাটির "YOUR_API_KEY" থাকে সেখানে মানচিত্র API কাজ করে।
আপনি একটি পৃষ্ঠাটি পুনরায় চালু করবেন সেখানে এখন একটি ভিন্ন ত্রুটি বার্তা থাকবে।
এর মানে হল যে আপনি যে ডেভেলপমেন্ট ডোমেন থেকে পৃষ্ঠাটি হোস্ট করছেন সেটি অনুমোদিত নয় (আমরা শুধুমাত্র স্থাপন করা ডোমেন যোগ করেছি)। Firebase হোস্টিং ব্যবহার করে আমাদের এই সাইটটিকে সঠিক ডোমেনে প্রকাশ করতে হবে। আপনি নিম্নলিখিত অবস্থানে আরো বিস্তারিত পেতে পারেন:
Firebase হোস্টিং এর সাথে স্থাপন করুন
এবং এই ভিডিও
Project IDX-এ আপনার ফায়ারবেস ওয়েব অ্যাপগুলিকে আরও দ্রুত তৈরি করুন, পরীক্ষা করুন এবং স্থাপন করুন
ম্যাপ জাভাস্ক্রিপ্ট এপিআই সাইটে ম্যাপ লোডিং ত্রুটির অধীনে আরও বিশদ বিবরণ পাওয়া যাবে।
আপনার যদি RefererNotAllowedMapError থাকে, তাহলে আপনি সঠিক ডোমেনে পৃষ্ঠাটি স্থাপন করে এটি ঠিক করতে পারেন।
ফায়ারবেস স্টুডিওতে ফিরে যান এবং হোস্টিং বিকল্পগুলি খুলতে "ফায়ারবেস স্টুডিও" আইকনে ক্লিক করুন (এটি আপনার সেট আপ করা বিকল্পের উপর নির্ভর করে খুব বাম বা ডান দিকে হতে পারে)।
এই কোডল্যাবে আপনাকে স্টুডিও অ্যাপ্লিকেশনের সাথে আপনার ফায়ারবেস ইন্সট্যান্সকে সংযুক্ত করতে "Firebase সহ অ্যাপ হোস্ট" করতে হবে।
তারপরে প্রমাণীকরণ প্রক্রিয়া চালু করতে "প্রমাণিত করুন ফায়ারবেস" এ ক্লিক করুন, এটি আপনার অ্যাকাউন্টকে স্টুডিওর মধ্যে থেকে ব্যাকএন্ড সহ হোস্টিং স্বয়ংক্রিয় করতে সক্ষম করে।
স্থাপনা অনুমোদন করতে কমান্ড উইন্ডোতে নির্দেশাবলী অনুসরণ করুন।
অন স্ক্রীন নির্দেশাবলী অনুসরণ করুন (একটি নতুন উইন্ডো খোলা সহ) এবং অনুমোদন কোডটি অনুলিপি করুন যেখানে এটি অনুরোধ করে এবং Firebase স্টুডিওতে কমান্ড উইন্ডোতে পেস্ট করুন।
আপনি নিম্নলিখিত অবস্থানে এই প্রক্রিয়া সম্পর্কে আরও বিশদ পেতে পারেন:
https://firebase.google.com/docs/studio/deploy-app
একবার এটি হয়ে গেলে আপনি তারপরে ফায়ারবেস প্রকল্পের সাথে প্রকল্পটিকে লিঙ্ক করতে "ফায়ারবেস হোস্টিং শুরু করুন" এ ক্লিক করতে পারেন।
"একটি বিদ্যমান প্রকল্প ব্যবহার করুন" নির্বাচন করুন এবং পূর্ববর্তী বিভাগে আপনার তৈরি করা প্রকল্পটি নির্বাচন করুন। বাকি ডিফল্টগুলি গ্রহণ করুন (প্রজেক্ট সেট আপ করার সময় আপনি যে নামটি চয়ন করেন তার উপর নির্ভর করে আপনার উদাহরণ পরিবর্তিত হতে পারে)।
এক্সপ্লোরার ভিউতে ফিরে যান এবং তৈরি করা index.html ফাইলটিকে পাবলিক ডিরেক্টরিতে প্রতিস্থাপন করুন যেটি আপনার ইতিমধ্যে রুট ডিরেক্টরিতে ছিল৷
আপনি এখন Firebase স্টুডিও সাইডবারে ফিরে যেতে পারেন এবং সাইটটিকে উৎপাদনে স্থাপন করতে পারেন।
এটি কনসোলে স্থাপনার পদক্ষেপগুলি দেখাবে।
প্রদর্শিত "হোস্টিং URL" থেকে স্থাপন করা সাইটটি খুলুন (এখানে https://my-app-check-project.web.app/ হিসাবে উল্লেখ করা হয়েছে তবে আপনার প্রকল্পের জন্য আলাদা হবে)।
অ্যাপ্লিকেশনটি এখন পৃষ্ঠায় মানচিত্রটি দেখাবে কারণ APIগুলি ব্যবহৃত ডোমেনের জন্য কাজ করে৷
এখন একটি কার্যকরী পৃষ্ঠা রয়েছে, যেখানে API-এর প্রকারের সীমাবদ্ধতা রয়েছে যা API কী এবং ডোমেনগুলির জন্য যেগুলির জন্য API কী ব্যবহার করা যেতে পারে। পরবর্তী পদক্ষেপটি হল শুধুমাত্র সেই ডোমেনে অ্যাক্সেস লক করা। এটি করার জন্য আপনাকে অ্যাপ চেক ব্যবহার করে পৃষ্ঠাটি সুরক্ষিত করতে পূর্বে তৈরি করা ফায়ারবেস স্ক্রিপ্ট বিভাগটি যোগ করতে হবে। এটি পরবর্তী বিভাগে করা হবে।
10. সুরক্ষিত পৃষ্ঠা
যদিও বর্তমান পৃষ্ঠাটি ডোমেনের API কী সুরক্ষিত করে, এটি সঠিক অ্যাপ্লিকেশন এবং একজন ব্যক্তির দ্বারা ব্যবহার করা হচ্ছে তা নিশ্চিত করার জন্য এটি সত্যায়নের পদক্ষেপ যোগ করে না। চাবিটি এখনও চুরি হতে পারে এবং একজন দূষিত অভিনেতা ব্যবহার করতে পারে৷ এটি বন্ধ করার জন্য ক্লায়েন্টের জন্য সঠিক টোকেন পেতে Firebase কনফিগারেশন, প্রদানকারী এবং সাইট কী যোগ করতে হবে।
এছাড়াও আপনি দেখতে পারেন যে ম্যাপ এপিআই-এর জন্য ব্যবহার ফায়ারবেসে ট্র্যাক করা হচ্ছে। যেহেতু এটি কোনো সঠিক টোকেন ব্যবহার করছে না তাই এটি যাচাই না করা অনুরোধ করছে।
প্রয়োজনীয় সংযোগের বিশদ বিবরণ Firebase প্রকল্প থেকে প্রাপ্ত করা যেতে পারে।
Firebase কনফিগারেশনের বিশদ রয়েছে এমন কনসোল থেকে Firebase বিবরণ পান। ফায়ারবেসের অধীনে প্রজেক্ট সেটিং পৃষ্ঠায় যান এবং অ্যাপের CDN বিভাগের অধীনে CDN সেটআপের জন্য কোড বিভাগটি ধরুন (সরলতম)।
ফায়ারবেস প্রকল্পে, প্রকল্প সেটিংস দেখানোর জন্য কগ নির্বাচন করুন।
যা নিম্নলিখিত পৃষ্ঠাটি খোলে যা আপনার অ্যাপের অধীনে সাধারণ বিভাগে বিশদ বিবরণ ধারণ করে।
এটিকে Firebase স্টুডিও পৃষ্ঠায় ( public/index.html ) কপি করুন যাতে মানচিত্রটি রয়েছে এবং হোস্ট করা হয়েছে৷ যা নিচের মত দেখাবে (আপনার বিশদ বিবরণ সহ এবং ঠিক এই ফাইলটিতে নয়):
<!doctype html>
<html>
<head>
<title>Secure Map</title>
<style>
#map {
height: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h3>App Check Security Demo</h3>
<!--The div element for the map -->
<div id="map"></div>
<script>
(g => { var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window; b = b[c] || (b[c] = {}); var d = b.maps || (b.maps = {}), r = new Set, e = new URLSearchParams, u = () => h || (h = new Promise(async (f, n) => { await (a = m.createElement("script")); e.set("libraries", [...r] + ""); for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]); e.set("callback", c + ".maps." + q); a.src = `https://maps.${c}apis.com/maps/api/js?` + e; d[q] = f; a.onerror = () => h = n(Error(p + " could not load.")); a.nonce = m.querySelector("script[nonce]")?.nonce || ""; m.head.append(a) })); d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)) })({
key: "YOUR_API_KEY",
v: "weekly",
// Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
// Add other bootstrap parameters as needed, using camel case.
});
</script>
<script type="module">
// Import the functions you need from the SDKs you need
import { initializeApp } from "https://www.gstatic.com/firebasejs/12.2.1/firebase-app.js";
const firebaseConfig = {
apiKey: "YOUR_API_KEY",
authDomain: "appcheck-map.firebaseapp.com",
projectId: "appcheck-map",
storageBucket: "appcheck-map.firebasestorage.app",
messagingSenderId: "YOUR_SENDER_KEY",
appId: "YOUR_APP_ID"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
let map;
async function initMap() {
const { Map } = await google.maps.importLibrary("maps");
map = new Map(document.getElementById("map"), {
center: { lat: 51.5208, lng: -0.0977 },
zoom: 17,
});
}
initMap();
</script>
</body>
</html>
এখন আমাদের অ্যাপ্লিকেশনে Firebase যোগ করা হয়েছে, reCAPTCHA সাইট থেকে (আগে থেকে) আপনি আগে পাওয়া সাইট কী ব্যবহার করে reCAPTCHA লাইব্রেরিতে কলগুলি।
আপনি নিম্নলিখিত মানচিত্র ডকুমেন্টেশন পৃষ্ঠায় এই বিভাগগুলি যুক্ত করার বিষয়ে আরও বিশদ পেতে পারেন:
https://developers.google.com/maps/documentation/javascript/maps-app-check
পৃষ্ঠায় অ্যাপ চেক লাইব্রেরি যোগ করুন, তারপর ফায়ারবেস কনফিগারেশন দিয়ে অ্যাপ চেক শুরু করতে ফাংশনগুলি লোড করুন এবং ReCaptchaV3Provider ব্যবহার করে টোকেন পান।
প্রথমে অ্যাপ চেক লাইব্রেরি আমদানি করুন:
import {
getToken,
initializeAppCheck,
ReCaptchaV3Provider,
} from "https://www.gstatic.com/firebasejs/12.2.1/firebase-app-check.js";
এর পরে আপনি সাইট টোকেন ব্যবহার করে Firebase কনফিগারেশন এবং reCAPTCHA প্রদানকারীর সাথে অ্যাপ চেক শুরু করতে কোডটি যোগ করুন।
// Get App Check Token
const appCheck = initializeAppCheck(app, {
provider: new ReCaptchaV3Provider('<INSERT SITE KEY>'),
isTokenAutoRefreshEnabled: true,
});
অবশেষে একটি টোকেন পেতে মানচিত্র কোর লাইব্রেরির সেটিংস ফাংশন ব্যবহার করে মানচিত্র নিয়ন্ত্রণে একটি ফাংশন সংযুক্ত করুন। এটি টোকেন লাইফ দৈর্ঘ্যের উপর নির্ভর করে মানচিত্র নিয়ন্ত্রণ দ্বারা প্রয়োজনীয় টোকেন অনুরোধ করবে।
const { Settings } = await google.maps.importLibrary('core');
Settings.getInstance().fetchAppCheckToken = () =>
getToken(appCheck, /* forceRefresh = */ false);
সম্পূর্ণ ফাইলটি নিম্নরূপ:
<!doctype html>
<html>
<head>
<title>Secure Map</title>
<style>
#map {
height: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h3>App Check Security Demo</h3>
<!--The div element for the map -->
<div id="map"></div>
<script>
(g => { var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window; b = b[c] || (b[c] = {}); var d = b.maps || (b.maps = {}), r = new Set, e = new URLSearchParams, u = () => h || (h = new Promise(async (f, n) => { await (a = m.createElement("script")); e.set("libraries", [...r] + ""); for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]); e.set("callback", c + ".maps." + q); a.src = `https://maps.${c}apis.com/maps/api/js?` + e; d[q] = f; a.onerror = () => h = n(Error(p + " could not load.")); a.nonce = m.querySelector("script[nonce]")?.nonce || ""; m.head.append(a) })); d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)) })({
key: "YOUR_API_KEY",
v: "weekly",
// Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
// Add other bootstrap parameters as needed, using camel case.
});
</script>
<script type="module">
import { initializeApp } from "https://www.gstatic.com/firebasejs/12.2.1/firebase-app.js";
import {
getToken,
initializeAppCheck,
ReCaptchaV3Provider,
} from "https://www.gstatic.com/firebasejs/12.2.1/firebase-app-check.js";
const firebaseConfig = {
apiKey: "YOUR_API_KEY",
authDomain: "appcheck-map.firebaseapp.com",
projectId: "appcheck-map",
storageBucket: "appcheck-map.firebasestorage.app",
messagingSenderId: "YOUR_SENDER_KEY",
appId: "YOUR_APP_ID"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
// Get App Check Token
const appCheck = initializeAppCheck(app, {
provider: new ReCaptchaV3Provider('<INSERT SITE KEY>'),
isTokenAutoRefreshEnabled: true,
});
let map;
async function initMap() {
const { Map } = await google.maps.importLibrary("maps");
const { Settings } = await google.maps.importLibrary('core');
Settings.getInstance().fetchAppCheckToken = () =>
getToken(appCheck, /* forceRefresh = */ false);
map = new Map(document.getElementById("map"), {
center: { lat: 51.5208, lng: -0.0977 },
zoom: 17,
});
}
initMap();
</script>
</body>
</html>
Firebase স্টুডিও ব্যবহার করে Firebase সাইটে এটি স্থাপন করুন এবং পৃষ্ঠাটি চালান।
11. মনিটরিং প্রয়োগ করুন
এখন পৃষ্ঠাটি সেট আপ করা হয়েছে, এটি চালানো হলে আপনি এখন দেখতে পাবেন যে এটি পরীক্ষা করা হচ্ছে। Firebase কনসোলে ফিরে যান এবং অ্যাপ চেক বিভাগটি আবার খুলুন। অ্যাপ চেক এখন মানচিত্র জাভাস্ক্রিপ্ট API নিরীক্ষণ করা উচিত.
উইন্ডো খুললে এখন দেখাবে যে ক্লায়েন্টরা অনুরোধ করছে এবং প্রত্যয়ন কাজ করছে (গ্রাফে গাঢ় নীল "যাচাইকৃত" অনুরোধ দ্বারা দেখানো হয়েছে)। অন্যান্য অনুরোধগুলি যাচাইকরণ সম্পন্ন হওয়ার আগে বিকাশের পর্যায়ে কল দেখাবে।
এখন যেহেতু ক্লায়েন্টদের কাজ করতে দেখা যায়, একটি অবৈধ ক্লায়েন্ট অ্যাপ্লিকেশন থেকে API কীগুলি ব্যবহার করা যাবে না তা নিশ্চিত করতে সাইটে এনফোর্সমেন্ট সক্রিয় করা যেতে পারে। এনফোর্সমেন্ট শুরু করতে এনফোর্স বোতামে ক্লিক করুন।
এটিতে ক্লিক করা আপনাকে একটি বড় সতর্কতা চিহ্ন দেবে যা দেখায় যে এটি আপনার অ্যাপ্লিকেশনটি লক করে দেবে, বাস্তব জগতে আপনি তখনই এটি করতে পারবেন যখন আপনি জানেন যে আপনার সমস্ত ক্লায়েন্টের কাছে সঠিক কী আছে এবং কাজ করছে, অন্যথায় আপনার ব্যবহারকারীরা সাইটে অ্যাক্সেস পেতে সক্ষম হবেন না।
এটি প্রয়োগ করতে কিছুটা সময়ও লাগতে পারে। যা স্ক্রিনে উল্লেখ করা হয়েছে, আপনি যদি সরাসরি প্রয়োগের জন্য পরীক্ষা করেন তবে এটি প্রচার করার সময় নাও থাকতে পারে।
পৃষ্ঠাটির জন্য অনুরোধ করার সময়, আপনি এটিকে আগের মতো কাজ করতে দেখতে সক্ষম হবেন, সাইটে আসলে কিছুই পরিবর্তন হয়নি।
এখন সময়ের সাথে সাথে আপনি কনসোলে যাচাইকৃত অনুরোধের সংখ্যা দেখতে পাবেন, যেমনটি এখানে দেখা যেতে পারে:
আপনি কোডল্যাবে মূল নমুনায় ফিরে গিয়ে এবং অ্যাপ চেক কার্যকারিতা ছাড়াই একটি নতুন পৃষ্ঠা তৈরি করে এটি কাজ করছে তা পরীক্ষা করতে পারেন। এই পৃষ্ঠাটিকে nocheck.html এর মতো কিছু কল করুন এবং index.html এর মতো একই জায়গায় এটিকে সর্বজনীন ফোল্ডারে রাখুন।
<!doctype html>
<html>
<head>
<title>Secure Map</title>
<style>
#map {
height: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h3>App Check Security Demo</h3>
<!--The div element for the map -->
<div id="map"></div>
<script>
(g => { var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window; b = b[c] || (b[c] = {}); var d = b.maps || (b.maps = {}), r = new Set, e = new URLSearchParams, u = () => h || (h = new Promise(async (f, n) => { await (a = m.createElement("script")); e.set("libraries", [...r] + ""); for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]); e.set("callback", c + ".maps." + q); a.src = `https://maps.${c}apis.com/maps/api/js?` + e; d[q] = f; a.onerror = () => h = n(Error(p + " could not load.")); a.nonce = m.querySelector("script[nonce]")?.nonce || ""; m.head.append(a) })); d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)) })({
key: "YOUR_API_KEY",
v: "weekly",
// Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
// Add other bootstrap parameters as needed, using camel case.
});
</script>
<script>
let map;
async function initMap() {
const { Map } = await google.maps.importLibrary("maps");
map = new Map(document.getElementById("map"), {
center: { lat: 51.5208, lng: -0.0977 },
zoom: 17,
});
}
initMap();
</script>
</body>
</html>
একবার আপনি এটি করে ফেললে এবং সঠিক API কী রাখলে, তারপর পৃষ্ঠাটির অনুরোধ করার সময় (আপনার ডোমেইন/nocheck.html ব্যবহার করুন) আপনার নিম্নলিখিত ধূসর ত্রুটির বাক্সটি থাকা উচিত।
কনসোলটি পরীক্ষা করে আপনি নিম্নলিখিতগুলির মতো একটি ত্রুটি বার্তা দেখতে পাবেন:
অ্যাপ চেক সফলভাবে পৃষ্ঠায় মানচিত্রের জন্য অনুরোধটিকে ব্লক করেছে কারণ এটি প্রয়োগ করা সাইটের জন্য আর অ্যাপ চেক টোকেন পাচ্ছে না।
12. অভিনন্দন!
অভিনন্দন আপনি আপনার সাইটে অ্যাপ চেক সফলভাবে সক্ষম করেছেন!
আপনি সফলভাবে একটি অ্যাপ্লিকেশন তৈরি করেছেন যা Firebase অ্যাপ চেক ব্যবহার করে তা নিশ্চিত করতে অনুরোধগুলি একটি বৈধ ডোমেন এবং ব্যবহারকারীর কাছ থেকে এসেছে।
আপনি যা শিখেছেন
- একটি ওয়েব পৃষ্ঠা হোস্ট এবং স্থাপন করতে Firebase স্টুডিও কীভাবে ব্যবহার করবেন।
- Google মানচিত্র প্ল্যাটফর্ম এপিআই সক্ষম এবং সুরক্ষিত করতে ক্লাউড কনসোল কীভাবে ব্যবহার করবেন।
- কল প্রত্যয়িত করতে ব্যবহার করা যেতে পারে এমন কী তৈরি করতে কীভাবে reCAPTURE ব্যবহার করবেন।
- কিভাবে ফায়ারবেস অ্যাপ ব্যবহার করবেন চেক করুন এবং এটিকে মানচিত্র জাভাস্ক্রিপ্ট এপিআই-এ একীভূত করুন।
- Firebase স্টুডিওর সাহায্যে সুরক্ষিত সাইটগুলিতে কলগুলি কীভাবে প্রয়োগ ও নিরীক্ষণ করবেন তা দেখুন।
এরপর কি?
- Google Maps Javascript API-এর জন্য অ্যাপ চেক-এর ডকুমেন্টেশন দেখুন
- Firebase-এ অ্যাপ চেক সম্পর্কে আরও জানুন।
- অ্যাপ চেক এবং গুগল ম্যাপ প্লেস এপিআই সহ অন্য কোডল্যাব ব্যবহার করে দেখুন।
- reCAPTCHA সম্পর্কে আরও জানুন।