1. शुरू करने से पहले
आपको क्या बनाना है.
इस कोडलैब में, वेब एनवायरमेंट में इस्तेमाल किए गए एपीआई पासकोड में सुरक्षा की एक और लेयर जोड़ने के लिए, App Check का इस्तेमाल किया जाएगा.
खास तौर पर, इस सुविधा को एक साथ जोड़ने के लिए, Codelab में यह तरीका अपनाया जाएगा:
- Google Maps Platform JavaScript API का इस्तेमाल करके, मैप को होस्ट करने के लिए एक वेब पेज बनाएं.
- पेज को होस्ट करें, ताकि इसे ऑनलाइन ऐक्सेस किया जा सके.
- Cloud Console का इस्तेमाल करके, उन डोमेन और एपीआई पर पाबंदी लगाएं जो एपीआई का इस्तेमाल कर सकते हैं.
- Firebase के ज़रिए, App Check लाइब्रेरी को जोड़ें और शुरू करें.
- आवेदन की वैधता की जांच करने के लिए, पुष्टि करने वाली कंपनी को जोड़ें.
- अपने ऐप्लिकेशन पर जांच करने की सुविधा लागू करें और उस पर नज़र रखें.
कोड लैब के आखिर में, आपके पास एक ऐसी साइट होनी चाहिए जो इस्तेमाल की जा रही दोनों एपीआई कुंजियों, उन डोमेन जिनसे इन्हें ऐक्सेस किया जाता है, और उन ऐप्लिकेशन के टाइप पर सुरक्षा लागू करती हो जो इनका इस्तेमाल कर सकते हैं.
2. ज़रूरी शर्तें
App Check को चालू करने के लिए, सुरक्षा से जुड़ी तीन Google सेवाओं का इस्तेमाल करना ज़रूरी है. आपको इन सेवाओं के बारे में जानकारी होनी चाहिए.
Firebase - यह उन सेवाओं को लागू करता है जो यह जांच करती हैं कि एपीआई पासकोड, सही डोमेन से रेफ़र किए जा रहे हैं. इससे Firebase Studio का इस्तेमाल करके, होस्टिंग और डिप्लॉयमेंट की सुविधा भी मिलेगी.
reCAPTCHA - इससे यह पता चलता है कि ऐप्लिकेशन का इस्तेमाल इंसान कर रहे हैं या नहीं. साथ ही, यह Firebase को क्लाइंट ऐप्लिकेशन डोमेन से कनेक्ट करने के लिए, सार्वजनिक और निजी कुंजियां उपलब्ध कराता है.
Google Cloud Platform - यह Google Maps Platform और Firebase, दोनों के लिए इस्तेमाल किए जाने वाले एपीआई पासकोड उपलब्ध कराता है. साथ ही, Maps पासकोड का इस्तेमाल करने वाले डोमेन पर पाबंदी लगाता है.
आर्किटेक्चर के इस डायग्राम में दिखाया गया है कि ये सभी फ़ंक्शन एक साथ कैसे काम करते हैं:
App Check और Google Maps Platform का इस्तेमाल करते समय, ये एलिमेंट एक साथ काम करते हैं. इनसे यह पता चलता है कि अनुरोध किसी मान्य ऐप्लिकेशन और उपयोगकर्ता से आ रहे हैं या नहीं. इसके लिए, पुष्टि करने वाली कंपनी से मिले एटेस्टेशन का इस्तेमाल किया जाता है. इस मामले में, पुष्टि करने वाली कंपनी reCAPTCHA है.
यह प्रोसेस, Firebase की ओर से उपलब्ध कराए गए App Check SDK टूल का इस्तेमाल करके की जाती है. यह टूल, कॉल करने वाले ऐप्लिकेशन की वैधता की जांच करता है. इसके बाद, ऐप्लिकेशन को एक टोकन उपलब्ध कराता है. इस टोकन की मदद से, Google Maps Platform JavaScript API को बाद में कॉल किए जाते हैं. इसके बाद, Google Maps Platform Javascript API, Firebase के साथ दिए गए टोकन की वैधता की जांच करता है. इससे यह पक्का किया जाता है कि टोकन सही डोमेन से आ रहा है. साथ ही, यह भी पक्का किया जाता है कि पुष्टि करने वाली कंपनी से, मान्य उपयोगकर्ता के ज़रिए टोकन भेजा गया है.
App Check और Maps JavaScript API को इस्तेमाल करने के बारे में ज़्यादा जानकारी यहां दी गई है. आपको ज़रूरी चरणों के बारे में भी पता होना चाहिए.
https://developers.google.com/maps/documentation/javascript/maps-app-check
3. सेट अप करें
अगर आपके पास Google Cloud खाता नहीं है, तो आपको बिलिंग की सुविधा चालू करके एक खाता सेट अप करना होगा. शुरू करने से पहले, इसे बनाने के लिए निर्देशों का पालन करें.
Google Maps Platform सेट अप करना
अगर आपके पास Google Cloud Platform खाता और बिलिंग की सुविधा वाला प्रोजेक्ट नहीं है, तो बिलिंग की सुविधा वाला खाता और प्रोजेक्ट बनाएं. ऐसा करने का तरीका जानने के लिए, कृपया Google Maps Platform का इस्तेमाल शुरू करना देखें.
- Cloud Console में, प्रोजेक्ट वाले ड्रॉप-डाउन मेन्यू पर क्लिक करें. इसके बाद, उस प्रोजेक्ट को चुनें जिसे इस कोडलैब के लिए इस्तेमाल करना है.
- इस कोडलैब के लिए ज़रूरी Google Maps Platform API और एसडीके को Google Cloud Marketplace में जाकर चालू करें. ऐसा करने के लिए, इस वीडियो या दस्तावेज़ में बताया गया तरीका अपनाएं.
- Cloud Console के क्रेडेंशियल पेज पर जाकर, एक एपीआई पासकोड जनरेट करें. ऐसा करने के लिए, इस वीडियो या दस्तावेज़ में बताया गया तरीका अपनाएं. Google Maps Platform का इस्तेमाल करने के लिए, एपीआई पासकोड ज़रूरी है.
इस कोडलैब के लिए अन्य ज़रूरी शर्तें
इस कोडलैब को पूरा करने के लिए, आपको इन खातों, सेवाओं, और टूल की ज़रूरत होगी:
- JavaScript, एचटीएमएल, और सीएसएस की बुनियादी जानकारी
- बिलिंग की सुविधा वाला Google Cloud खाता (जैसा कि बताया गया है)
- Maps JavaScript API की सुविधा वाला Google Maps Platform API पासकोड (यह कोडलैब के दौरान किया जाएगा).
- वेब होस्टिंग और डिप्लॉयमेंट के बारे में बुनियादी जानकारी (कोडलैब में आपको इसके बारे में बताया जाएगा). यह काम Firebase कंसोल और Firebase Studio के ज़रिए किया जाएगा.
- काम करते समय फ़ाइलें देखने के लिए, वेब ब्राउज़र.
4. Firebase Studio में पेज बनाना
इस कोडलैब में यह नहीं माना गया है कि आपने पहले से ही कोई ऐप्लिकेशन बनाया है. इसमें Firebase Studio का इस्तेमाल करके, मैप ऐप्लिकेशन को होस्ट करने के लिए एक पेज बनाया जाता है. साथ ही, इसे जांच के लिए Firebase पर डिप्लॉय किया जाता है. अगर आपके पास पहले से कोई ऐप्लिकेशन है, तो उसका भी इस्तेमाल किया जा सकता है. हालांकि, आपको सही तरीके से लागू करने के लिए, होस्ट डोमेन, कोड स्निपेट, और एपीआई कुंजियों में बदलाव करना होगा.
Firebase Studio पर जाएं. इसके लिए, Google खाता होना ज़रूरी है. इसके बाद, एक नया Simple HTML ऐप्लिकेशन बनाएं. इस विकल्प को देखने के लिए, आपको "सभी टेंप्लेट देखें" बटन पर क्लिक करना पड़ सकता है. इसके अलावा, सीधे तौर पर ऐक्सेस करने के लिए, इस लिंक पर क्लिक करें.
वर्कस्पेस को कोई सही नाम दें, जैसे कि myappcheck-map. साथ ही, इसे यूनीक बनाने के लिए कोई रैंडम नंबर जोड़ें. यह आपके लिए एक नंबर जोड़ देगा. इसके बाद, Firebase Studio फ़ाइल फ़ोल्डर बना देगा.
नाम डालने के बाद, 'बनाएं' बटन पर क्लिक करें. इससे प्रोजेक्ट बनाने की प्रोसेस शुरू हो जाएगी.
इसे बनाने के बाद, 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 Maps Platform API पासकोड की ज़रूरत होगी. इसे अगले सेक्शन में जोड़ा जाएगा.
गड़बड़ी का असल मैसेज, Firebase Studio में वेब कंसोल में देखा जा सकता है.
इस समस्या को ठीक करने के लिए, हमें पेज में एक एपीआई पासकोड जोड़ना होगा. एपीआई पासकोड की मदद से, पेज और Maps JavaScript API को एक साथ जोड़ा जाता है. इसका गलत इस्तेमाल भी किया जा सकता है, क्योंकि इसे पेज में बिना एन्क्रिप्ट (सुरक्षित) किए हुए शामिल करना होता है. ऐसे में, एपीआई कुंजी को चुराकर अलग-अलग साइटों पर इस्तेमाल किया जा सकता है.
सुरक्षा का एक तरीका, ऐप्लिकेशन पर पाबंदियां लगाना है. ऐसा, इस्तेमाल किए जा रहे ऐप्लिकेशन के टाइप या कॉल किए जा रहे रेफ़रिंग डोमेन या आईपी पते के ज़रिए किया जा सकता है. सबसे सही तरीकों के बारे में ज़्यादा जानने के लिए, इस साइट पर जाएं:
https://developers.google.com/maps/api-security-best-practices#rec-best-practices
या कमांड लाइन या सर्वर से सीधे कॉल का इस्तेमाल करके, ऐसे ऐप्लिकेशन जो रेफ़रर की जानकारी नहीं दे सकते या ट्रैक नहीं किए जा सकते. इसलिए, ये सुरक्षा के लिहाज़ से जोखिम भरे हो सकते हैं.
5. Firebase ऐप्लिकेशन बनाना
Firebase का इस्तेमाल, पुष्टि करने वाली कंपनी को यह सुविधा देने के लिए किया जाता है कि वह इन चीज़ों की जांच कर सके:
- अनुरोध आपके असली ऐप्लिकेशन से किए गए हों
- अनुरोध, किसी भरोसेमंद डिवाइस और उपयोगकर्ता के सेशन से किए गए हों.
इस कोडलैब में, reCAPTCHA v3 का इस्तेमाल इस पुष्टि को देने वाले के तौर पर किया जाएगा.
Firebase ऐप्लिकेशन बनाएं और उसे होस्ट करें.
https://firebase.google.com/ पर जाएं और "कंसोल पर जाएं" लिंक से नया Firebase प्रोजेक्ट बनाएं.
नीचे दी गई जगह पर क्लिक करके, नया प्रोजेक्ट बनाएं.
प्रोजेक्ट के लिए कोई नाम चुनें. जैसे, My App Check Project. यह ज़रूरी नहीं है कि यह नाम वही हो जो पहले इस्तेमाल किया गया था, क्योंकि यह सिर्फ़ रेफ़रंस के लिए है. प्रोजेक्ट के असली नाम को टेक्स्ट के ठीक नीचे जाकर बदला जा सकता है. यह नाम, आपके डाले गए नाम से बना होगा. अगर यह नाम यूनीक नहीं होगा, तो इसमें कोई नंबर जोड़ दिया जाएगा.
अगर आपको अपने ऐप्लिकेशन में Google Analytics जैसी अन्य सेवाएं जोड़ने के लिए कहा जाता है, तो आपके पास उन्हें स्वीकार करने या न करने का विकल्प होता है. हालांकि, इस कोडलैब के लिए इनकी ज़रूरत नहीं है. इसलिए, इन्हें छोड़ा जा सकता है.
"प्रोजेक्ट बनाएं" बटन पर क्लिक करें और प्रोजेक्ट बनने का इंतज़ार करें. यह प्रोसेस पूरी होने पर, आपको इसकी सूचना दी जाएगी.
जब प्रोजेक्ट के साथ इंटरैक्ट करने की सुविधा चालू हो जाए, तब जारी रखें पर क्लिक करें.
इसके बाद, मुख्य पेज पर जाकर, अपने ऐप्लिकेशन में Firebase जोड़ें और वेब का विकल्प चुनें.
अपनी साइट के लिए Firebase होस्टिंग सेट अप करें, ताकि डिप्लॉय की गई फ़ाइलें वहां सेव हो सकें. अपनी मौजूदा साइट के लिए, आपके पास कोई दूसरा विकल्प इस्तेमाल करने का विकल्प होता है. हालांकि, इस कोडलैब को पूरा करने के लिए, आपको Firebase होस्टिंग पर डिप्लॉय करना होगा.
ऐप्लिकेशन बनाने के लिए, ऐप्लिकेशन रजिस्टर करें पर क्लिक करें. इसके बाद, बनाई गई स्क्रिप्ट को लें और उसका इस्तेमाल करके, हमारे वेब ऐप्लिकेशन से Firebase में मौजूद प्रोजेक्ट को रेफ़रंस करें.
अगले टैब में मौजूद Firebase कॉन्फ़िगरेशन कोड का इस्तेमाल ऐप्लिकेशन में, Firebase और Maps API को एक साथ कनेक्ट करने के लिए किया जाएगा. इसलिए, इसे "स्क्रिप्ट टैग का इस्तेमाल करें" सेक्शन से कॉपी करना चाहिए. इसे प्रोजेक्ट के index.html में चिपकाएं.
अन्य सेक्शन के लिए, 'आगे बढ़ें' पर क्लिक करें. इसके बाद, साइट के प्रोजेक्ट सेटिंग सेक्शन में जाकर, बनाया गया ऐप्लिकेशन देखें.
अगर आपको बाद में कॉन्फ़िगरेशन की जानकारी देखनी है, तो "सेटिंग" बटन पर जाकर भी ऐप्लिकेशन की जानकारी देखी जा सकती है. जैसा कि यहां दिखाया गया है:
इस सेक्शन से बाहर निकलने से पहले, आपको बनाई गई Firebase होस्टिंग साइट का डोमेन नोट करना होगा. इसे बाद में reCAPTCHA के साथ इस्तेमाल किया जाएगा. इससे साइट के नाम को पुष्टि करने वाली कंपनी से जोड़ा जा सकता है. इसका मतलब है कि सिर्फ़ उस साइट से मिले अनुरोधों की पुष्टि की जाएगी.
बाईं ओर मौजूद प्रोजेक्ट के शॉर्टकट या 'बनाएं' मेन्यू में जाकर, होस्टिंग सेक्शन पर जाएं
या 
इसके बाद, उस डोमेन को ढूंढें जिसे ऐप्लिकेशन के लिए बनाया गया है. अगर आपने इसे पहले से सेट अप नहीं किया है, तो इसे सेट अप करने के लिए आपको कुछ स्क्रीन पर क्लिक करना पड़ सकता है.
6. एपीआई कुंजियों को सुरक्षित करना
उस प्रोजेक्ट को देखने के लिए, Cloud Console में उसी खाते से लॉग इन करें जिसका इस्तेमाल Firebase के लिए किया जा रहा है,
अगर आपके पास एक से ज़्यादा प्रोजेक्ट हैं, तो आपको सही प्रोजेक्ट चुनने के लिए ड्रॉप-डाउन या खोज बॉक्स का इस्तेमाल करना पड़ सकता है. इसमें आपके Firebase प्रोजेक्ट का नाम शामिल होगा.
इससे नया प्रोजेक्ट खुल जाएगा. अब इस प्रोजेक्ट में Maps JavaScript API जोड़ें, ताकि इसका इस्तेमाल प्रोजेक्ट में किया जा सके. साथ ही, इसके इस्तेमाल को किसी खास एपीआई कुंजी और होस्टिंग डोमेन तक सीमित किया जा सके.
प्रोजेक्ट में Maps API चालू करने के लिए, बाईं ओर मौजूद मेन्यू का इस्तेमाल करें. "एपीआई और सेवाएं" विकल्प और "चालू किए गए एपीआई और सेवाएं" को चुनें.
"एपीआई और सेवाएं चालू करें" विकल्प चुनें
खोज बॉक्स में "Maps JavaScript API" डालें.
मेल खाने वाला नतीजा चुनें.
इसके बाद, एपीआई को अपने प्रोजेक्ट में जोड़ने के लिए, 'चालू करें' पर क्लिक करें. अगर आपने पहले भी इस प्रोजेक्ट का इस्तेमाल किया है, तो हो सकता है कि यह पहले से ही चालू हो.
इसे चालू करने के बाद, एपीआई कुंजी जोड़ने और उस पर पाबंदी लगाने का विकल्प चुना जा सकता है. हालांकि, फ़िलहाल इसे स्किप किया जाएगा.
बाईं ओर मौजूद मेन्यू के विकल्पों का फिर से इस्तेमाल करके, एपीआई और सेवाएं सेक्शन पर वापस जाएं. इसके बाद, आपके लिए बनाई गई ब्राउज़र कुंजी चुनें.
Maps JavaScript API को, एपीआई के इस्तेमाल पर लगी पाबंदियों में से किसी एक में जोड़ें.
लाइव ऐप्लिकेशन में मौजूद कुंजियों के लिए, आपको ऐप्लिकेशन को होस्ट करने वाले डोमेन पर भी पाबंदी लगानी होगी. इसके लिए, Firebase में आपके लिए बनाए गए डोमेन का इस्तेमाल करें. आपको डोमेन के आखिर में /* भी जोड़ना चाहिए, ताकि यह पक्का किया जा सके कि इसके तहत आने वाले सभी पाथ शामिल हैं.
एपीआई कुंजियों को सीमित करने के बारे में ज़्यादा जानकारी के लिए, इस सुविधा को चालू करने के बारे में यहां ज़्यादा जानकारी पाएं.
https://developers.google.com/maps/api-security-best-practices#restricting-api-keys
7. reCAPTCHA सीक्रेट बनाना
अगला चरण, reCAPTCHA प्रोजेक्ट बनाना है, ताकि क्लाइंट और सर्वर, दोनों के लिए पुष्टि और कुंजियां दी जा सकें.
https://www.google.com/recaptcha/ पर जाकर reCAPTCHA की साइट पर जाएं. इसके बाद, 'शुरू करें' बटन पर क्लिक करें.
इसके बाद, नई साइट रजिस्टर करें. पक्का करें कि आपने पाबंदी लगाने के लिए सही डोमेन डाला हो.
यह भी पक्का करें कि आपने उसी Google Cloud प्रोजेक्ट को चुना हो जिसे Firebase ने बनाया है. ऐसा तब करें, जब आपके पास एक से ज़्यादा Google Cloud प्रोजेक्ट हों.
इससे दो कुंजियां बनती हैं. एक सीक्रेट कुंजी, जिसे आपको Firebase कंसोल में डालना होगा. इसे कभी भी ऐसे पेज या ऐप्लिकेशन में नहीं डालना चाहिए जिसे सार्वजनिक तौर पर देखा जा सकता हो. दूसरी साइट कुंजी, जिसका इस्तेमाल वेब ऐप्लिकेशन में किया जाएगा.
इस पेज को खुला रखें, क्योंकि आपको इसकी ज़रूरत पड़ेगी. 'सीक्रेट कुंजी कॉपी करें' बटन पर क्लिक करें. इसके बाद, Firebase की साइट पर वापस जाएं.
8. Firebase में reCAPTCHA जोड़ना
Firebase Admin console में, बाईं ओर मौजूद मेन्यू आइटम पर जाएं. बनाएं मेन्यू आइटम में जाकर, App Check चुनें.
जब तक कोई ऐप्लिकेशन रजिस्टर नहीं हो जाता, तब तक सेवाओं की सूची चालू नहीं की जा सकती. यह सूची, साइट में होस्टिंग की सुविधा जोड़ने के दौरान बनाई गई थी. अगर आपको इसे सेट अप करना है, तो शुरू करें पर क्लिक करें.
ऐप्लिकेशन टैब पर क्लिक करें और वेब ऐप्लिकेशन खोलें. इसके बाद, reCAPTCHA साइट से कॉपी किया गया सीक्रेट डालें और 'सेव करें' पर क्लिक करें.
अब reCAPTCHA सेवा देने वाली कंपनी के नाम के बगल में, हरे रंग का सही का निशान दिखना चाहिए. यह वेब ऐप्लिकेशन अब reCAPTCHA का इस्तेमाल करके यह पुष्टि कर सकता है कि कोई उपयोगकर्ता या साइट, सेवा को सही तरीके से कॉल कर रही है या नहीं.
एपीआई टैब पर अब यह दिखना चाहिए कि Google Maps Platform API चालू है, लेकिन अब लागू नहीं है.
आपने अब reCAPTCHA सीक्रेट को Firebase प्रोजेक्ट से लिंक कर दिया है. अब वेब पेज में कोड जोड़ें, ताकि साइट की कुंजी को Maps ऐप्लिकेशन के साथ इस्तेमाल करने के लिए सही प्रोवाइडर से मैच किया जा सके.
reCAPTCHA, साइट के पासकोड की जांच करके यह पता लगाता है कि वह सीक्रेट पासकोड से मैच करता है या नहीं. ऐसा होने पर, यह पुष्टि हो जाती है कि कॉल करने वाला पेज सही है. साथ ही, App Check एक ऐसा टोकन उपलब्ध कराता है जिसका इस्तेमाल Maps JavaScript API को किए जाने वाले बाद के कॉल के लिए किया जा सकता है. इस पुष्टि के बिना टोकन नहीं दिया जाएगा और अनुरोधों की पुष्टि नहीं की जा सकेगी.
9. पेज पर पुष्टि करने की सुविधा जोड़ें और उसे डिप्लॉय करें.
क्लाउड कंसोल पर वापस जाएं और Maps API के लिए इस्तेमाल की जाने वाली एपीआई पासकोड को कॉपी करें.
आपको यह विकल्प, कंसोल के साइड मेन्यू में जाकर मिलेगा. इसके लिए, एपीआई और सेवाएँ साइड मेन्यू में जाकर, क्रेडेंशियल विकल्प पर क्लिक करें.
यहां से, मौजूदा ब्राउज़र कुंजी चुनी जा सकती है. हालांकि, जैसा कि बताया गया है, किसी दूसरी मौजूदा कुंजी का इस्तेमाल किया जा सकता है या नई कुंजी बनाई जा सकती है.
'कुंजी दिखाएं' बटन पर क्लिक करें और दिखाई गई डायलॉग विंडो से कुंजी कॉपी करें.
उस Firebase Studio प्रोजेक्ट पर वापस जाएं जहां आपने पहले एचटीएमएल पेज खोला था. अब पेज में एपीआई पासकोड जोड़ा जा सकता है, ताकि Maps API वहां काम कर सके जहां पेज में "YOUR_API_KEY" मौजूद है.
पेज को फिर से चलाने पर, अब आपको गड़बड़ी का कोई दूसरा मैसेज दिखेगा.
इसका मतलब है कि जिस डेवलपमेंट डोमेन से पेज को होस्ट किया जा रहा है उसे अनुमति नहीं है. हमने सिर्फ़ डिप्लॉय किए गए डोमेन को जोड़ा है. हमें इस साइट को Firebase होस्टिंग का इस्तेमाल करके, सही डोमेन पर पब्लिश करना होगा. ज़्यादा जानकारी के लिए, यहां जाएं:
Firebase Hosting की मदद से डिप्लॉय करना
और इस वीडियो में
Project IDX में, Firebase वेब ऐप्लिकेशन को तेज़ी से बनाएं, टेस्ट करें, और डिप्लॉय करें
ज़्यादा जानकारी के लिए, Maps JavaScript API की साइट पर मैप लोड होने से जुड़ी गड़बड़ियां सेक्शन देखें.
अगर आपको RefererNotAllowedMapError दिखती है, तो पेज को सही डोमेन पर डिप्लॉय करके इसे ठीक किया जा सकता है.
Firebase Studio पर वापस जाएं. इसके बाद, होस्टिंग के विकल्प खोलने के लिए, "Firebase Studio" आइकॉन पर क्लिक करें. यह आइकॉन, आपके सेट अप किए गए विकल्प के हिसाब से सबसे बाईं या सबसे दाईं ओर हो सकता है.
इस कोडलैब में, आपको अपने Firebase इंस्टेंस को Studio ऐप्लिकेशन से कनेक्ट करने के लिए, "ऐप्लिकेशन को Firebase के साथ होस्ट करें" विकल्प चुनना होगा.
इसके बाद, पुष्टि करने की प्रोसेस शुरू करने के लिए, "Firebase से पुष्टि करें" पर क्लिक करें. इससे आपका खाता, Studio में बैकएंड के साथ होस्टिंग को अपने-आप मैनेज कर पाएगा.
डिप्लॉयमेंट को अनुमति देने के लिए, कमांड विंडो में दिए गए निर्देशों का पालन करें.
स्क्रीन पर दिए गए निर्देशों का पालन करें. इनमें नई विंडो खोलना भी शामिल है. इसके बाद, ऑथराइज़ेशन कोड को उस जगह पर कॉपी करें जहां इसकी ज़रूरत है. फिर, इसे Firebase studio की कमांड विंडो में चिपकाएं.
इस प्रोसेस के बारे में ज़्यादा जानकारी पाने के लिए, यहां जाएं:
https://firebase.google.com/docs/studio/deploy-app
इसके बाद, प्रोजेक्ट को Firebase प्रोजेक्ट से लिंक करने के लिए, "initialize firebase hosting" पर क्लिक करें.
"किसी मौजूदा प्रोजेक्ट का इस्तेमाल करें" को चुनें. इसके बाद, वह प्रोजेक्ट चुनें जिसे आपने पिछले सेक्शन में बनाया था. बाकी डिफ़ॉल्ट सेटिंग स्वीकार करें. आपके उदाहरण में, प्रोजेक्ट सेट अप करते समय चुने गए नाम के हिसाब से बदलाव हो सकता है.
एक्सप्लोरर व्यू पर वापस जाएं और सार्वजनिक डायरेक्ट्री में बनाई गई index.html फ़ाइल को उस फ़ाइल से बदलें जो आपके पास पहले से रूट डायरेक्ट्री में मौजूद है.
अब Firebase Studio के साइडबार पर वापस जाएं और साइट को प्रोडक्शन में डिप्लॉय करें.
इससे कंसोल में डिप्लॉयमेंट के चरण दिखेंगे.
डिप्लॉय की गई साइट को, दिखाए गए "होस्टिंग यूआरएल" से खोलें. यहां इसे https://my-app-check-project.web.app/ के तौर पर दिखाया गया है, लेकिन यह आपके प्रोजेक्ट के लिए अलग होगा.
अब ऐप्लिकेशन, पेज पर मैप दिखाएगा. ऐसा इसलिए, क्योंकि एपीआई उन डोमेन के लिए काम करते हैं जिनका इस्तेमाल किया जा रहा है.
अब एक वर्किंग पेज है. इसमें एपीआई पासकोड के साथ इस्तेमाल किए जा सकने वाले एपीआई के टाइप और उन डोमेन के बारे में बताया गया है जिनके लिए एपीआई पासकोड का इस्तेमाल किया जा सकता है. अगला चरण, सिर्फ़ उस डोमेन के लिए ऐक्सेस को लॉक करना है. इसके लिए, आपको पहले से जनरेट किए गए Firebase स्क्रिप्ट सेक्शन को जोड़ना होगा, ताकि App Check का इस्तेमाल करके पेज को सुरक्षित किया जा सके. यह काम अगले सेक्शन में किया जाएगा.
10. सुरक्षित पेज
मौजूदा पेज, डोमेन के लिए एपीआई पासकोड को सुरक्षित करता है. हालांकि, यह पुष्टि करने के लिए कि इसका इस्तेमाल सही ऐप्लिकेशन और व्यक्ति कर रहा है, यह पेज पुष्टि करने का चरण नहीं जोड़ता है. हालांकि, अब भी कोई नुकसान पहुंचाने वाला व्यक्ति या इकाई, इस कुंजी को चुराकर इसका इस्तेमाल कर सकती है. Firebase कॉन्फ़िगरेशन को रोकने के लिए, क्लाइंट के लिए सही टोकन पाने के लिए, पेज में प्रोवाइडर और साइट कुंजी को जोड़ना होगा.
यह भी देखा जा सकता है कि Maps API के इस्तेमाल को Firebase में ट्रैक किया जा रहा है. इसमें किसी भी सही टोकन का इस्तेमाल नहीं किया जा रहा है. इसलिए, यह ऐसे अनुरोध कर रहा है जिनकी पुष्टि नहीं हुई है.
कनेक्शन की ज़रूरी जानकारी, Firebase प्रोजेक्ट से मिल सकती है.
उस कंसोल से Firebase की जानकारी पाएं जिसमें Firebase कॉन्फ़िगरेशन की जानकारी शामिल है. Firebase में प्रोजेक्ट सेटिंग पेज पर जाएं. इसके बाद, ऐप्लिकेशन के सीडीएन सेक्शन में जाकर, सीडीएन सेटअप के लिए कोड सेक्शन (सबसे आसान) पर जाएं.
Firebase प्रोजेक्ट में, प्रोजेक्ट सेटिंग दिखाने के लिए कॉग आइकॉन चुनें.
इससे यह पेज खुलता है. इसमें आपके ऐप्लिकेशन के सामान्य सेक्शन में जानकारी होती है.
इसे Firebase Studio के उस पेज (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 साइट से पहले मिली थी.
इन सेक्शन को जोड़ने के बारे में ज़्यादा जानने के लिए, Maps के इस दस्तावेज़ पेज पर जाएं:
https://developers.google.com/maps/documentation/javascript/maps-app-check
पेज में App Check लाइब्रेरी जोड़ें. इसके बाद, firebase कॉन्फ़िगरेशन के साथ App Check को शुरू करने के लिए फ़ंक्शन लोड करें. साथ ही, ReCaptchaV3Provider का इस्तेमाल करके टोकन पाएं.
सबसे पहले, App Check लाइब्रेरी इंपोर्ट करें:
import {
getToken,
initializeAppCheck,
ReCaptchaV3Provider,
} from "https://www.gstatic.com/firebasejs/12.2.1/firebase-app-check.js";
इसके बाद, साइट टोकन का इस्तेमाल करके, Firebase कॉन्फ़िगरेशन और reCAPTCHA प्रोवाइडर के साथ App Check को शुरू करने के लिए कोड जोड़ें.
// Get App Check Token
const appCheck = initializeAppCheck(app, {
provider: new ReCaptchaV3Provider('<INSERT SITE KEY>'),
isTokenAutoRefreshEnabled: true,
});
टोकन पाने के लिए, Maps Core लाइब्रेरी के सेटिंग फ़ंक्शन का इस्तेमाल करके, मैप कंट्रोल में कोई फ़ंक्शन अटैच करें. इससे टोकन के अनुरोध, मैप कंट्रोल की ज़रूरत के हिसाब से किए जाएंगे. यह टोकन की लाइफ़ लेंथ पर निर्भर करेगा.
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 Studio का इस्तेमाल करके, इसे Firebase साइट पर डिप्लॉय करें और पेज चलाएं.
11. मॉनिटरिंग की सुविधा लागू करना
अब पेज सेट अप हो गया है. इसे चलाने पर, आपको दिखेगा कि इसकी जांच की जा रही है. Firebase कंसोल पर वापस जाएं और App Check सेक्शन को फिर से खोलें. अब App Check, Maps JavaScript API की निगरानी करेगा.
विंडो खोलने पर अब यह दिखेगा कि क्लाइंट अनुरोध कर रहे हैं और पुष्टि करने की सुविधा काम कर रही है. इसे ग्राफ़ पर गहरे नीले रंग के "पुष्टि हो चुकी है" अनुरोधों से दिखाया गया है. अन्य अनुरोधों में, पुष्टि की प्रोसेस पूरी होने से पहले डेवलपमेंट फ़ेज़ के दौरान कॉल दिखेंगे.
अब जब क्लाइंट काम कर रहे हैं, तो साइट पर एनफ़ोर्समेंट की सुविधा चालू की जा सकती है. इससे यह पक्का किया जा सकेगा कि अमान्य क्लाइंट ऐप्लिकेशन से एपीआई कुंजियों का इस्तेमाल न किया जा सके. नीति लागू करने की प्रोसेस शुरू करने के लिए, 'लागू करें' बटन पर क्लिक करें.
इस पर क्लिक करने से, आपको एक बड़ा चेतावनी वाला मैसेज दिखेगा. इसमें बताया जाएगा कि इससे आपका ऐप्लिकेशन लॉक हो जाएगा. असल में, ऐसा सिर्फ़ तब किया जाता है, जब आपको पता हो कि आपके सभी क्लाइंट के पास सही कुंजियां हैं और वे काम कर रही हैं. ऐसा न होने पर, आपके उपयोगकर्ताओं को साइट का ऐक्सेस नहीं मिल पाएगा.
इसे लागू होने में कुछ समय लग सकता है. अगर आप नीति उल्लंघन ठीक करने के लिए तुरंत जांच करते हैं, तो हो सकता है कि बदलाव लागू होने में समय लगे.
पेज के लिए अनुरोध करते समय, आपको यह देखना चाहिए कि वह पहले की तरह काम कर रहा हो. साइट में कोई बदलाव नहीं हुआ है.
अब आपको समय के साथ, कंसोल में पुष्टि किए गए अनुरोधों की संख्या में बढ़ोतरी दिखेगी. जैसा कि यहां दिखाया गया है:
यह देखने के लिए कि यह काम कर रहा है या नहीं, कोडलैब में ओरिजनल सैंपल पर वापस जाएं और ऐप्लिकेशन की जांच करने की सुविधा के बिना एक नया पेज बनाएं. इस पेज को nocheck.html नाम दें और इसे 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>
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>
यह प्रोसेस पूरी करने और सही एपीआई कुंजी डालने के बाद, पेज का अनुरोध करते समय (yourdomain/nocheck.html का इस्तेमाल करें) आपको गड़बड़ी का यह ग्रे बॉक्स दिखेगा.
कंसोल की जांच करने पर, आपको इस तरह का गड़बड़ी का मैसेज दिखेगा:
ऐप्लिकेशन की जांच करने की सुविधा ने पेज पर मौजूद मैप के अनुरोध को ब्लॉक कर दिया है. ऐसा इसलिए हुआ है, क्योंकि अब इसे लागू की गई साइट के लिए ऐप्लिकेशन की जांच करने वाला टोकन नहीं मिल रहा है.
12. बधाई हो!
बधाई हो, आपने अपनी साइट पर App Check की सुविधा चालू कर ली है!
आपने Firebase App Check का इस्तेमाल करके एक ऐसा ऐप्लिकेशन बनाया है जो यह पक्का करता है कि अनुरोध किसी मान्य डोमेन और उपयोगकर्ता से किए गए हों.
आपको क्या सीखने को मिला
- वेब पेज को होस्ट और डिप्लॉय करने के लिए, Firebase Studio का इस्तेमाल कैसे करें.
- Google Maps Platform API को चालू करने और सुरक्षित करने के लिए, Cloud Console का इस्तेमाल कैसे करें.
- कॉल की पुष्टि करने के लिए इस्तेमाल की जा सकने वाली कुंजियां जनरेट करने के लिए, reCAPTURE का इस्तेमाल कैसे करें.
- Firebase App Check का इस्तेमाल करने और इसे Maps JavaScript API में इंटिग्रेट करने का तरीका.
- Firebase Studio की मदद से, सुरक्षित की गई साइटों पर कॉल को लागू करने और उन्हें मॉनिटर करने का तरीका जानें.