1. قبل از شروع
آنچه را که خواهید ساخت.
در این کد لبه، از App Check برای اضافه کردن یک لایه حفاظتی دیگر به کلید API خود که در یک محیط وب استفاده می شود، استفاده خواهید کرد.
به طور خاص مراحل زیر از طریق Codelab دنبال میشود تا عملکردها را به هم پیوند دهند:
- یک صفحه وب برای میزبانی نقشه با استفاده از API جاوا اسکریپت پلتفرم Google Maps ایجاد کنید.
- صفحه را میزبانی کنید تا بتوان به صورت آنلاین به آن دسترسی داشت.
- دامنه ها و API هایی را که می توانند از API با استفاده از Cloud Console استفاده کنند، محدود کنید.
- کتابخانه App Check را از طریق Firebase اضافه و مقداردهی اولیه کنید.
- برای بررسی اعتبار برنامه ها، ارائه دهنده گواهی را اضافه کنید.
- برنامه و مانیتور خود را بررسی کنید.
در انتهای Codelab باید یک سایت کاری داشته باشید که امنیت را بر روی کلیدهای API مورد استفاده، دامنههایی که از آنها به آنها دسترسی دارند و انواع برنامههایی که میتوانند از آنها استفاده کنند، اعمال میکند.
2. پیش نیازها
فعال کردن App Check مستلزم استفاده از سه سرویس Google برای ارائه محافظت است، شما باید با این مناطق آشنا شوید.
Firebase - اجرای خدماتی را فراهم می کند که بررسی می کنند کلیدهای API از دامنه های مناسب ارجاع می شوند. این همچنین قابلیت میزبانی و استقرار را از طریق استفاده از Firebase Studio فراهم می کند.
reCAPTCHA - این قابلیت را برای بررسی اینکه آیا انسان ها از برنامه استفاده می کنند یا خیر و همچنین کلیدهای عمومی و خصوصی را برای اتصال Firebase به دامنه برنامه مشتری ارائه می دهد.
Google Cloud Platform - این کلیدهای API استفاده شده توسط Google Maps Platform و Firebase و محدودیت دامنه را با استفاده از کلید Maps فراهم می کند.
در نمودار معماری زیر می توانید نحوه عملکرد همه اینها را با هم مشاهده کنید:
هنگام استفاده از App Check و Google Maps Platform، عناصر زیر با هم کار میکنند تا با استفاده از گواهی ارائهشده توسط یک ارائهدهنده گواهی، در این مورد reCAPTCHA، تعیین کنند که آیا درخواستها از یک برنامه کاربردی معتبر و کاربر ارسال میشوند یا خیر.
این کار از طریق استفاده از App Check SDK ارائه شده توسط Firebase انجام میشود، که اعتبار برنامه تماس را بررسی میکند و سپس یک رمز به برنامه ارائه میکند که توسط آن تماسهای بعدی به API Javascript پلتفرم Google Maps برقرار میشود. به نوبه خود، 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 Cloud Platform و پروژهای با صورتحساب فعال ندارید، لطفاً راهنمای شروع به کار با Google Maps Platform را برای ایجاد یک حساب صورتحساب و یک پروژه ببینید.
- در Cloud Console ، روی منوی کشویی پروژه کلیک کنید و پروژه ای را که می خواهید برای این کد لبه استفاده کنید انتخاب کنید.
- APIها و SDKهای پلتفرم Google Maps مورد نیاز برای این لبه کد را در Google Cloud Marketplace فعال کنید. برای انجام این کار، مراحل این ویدیو یا این مستند را دنبال کنید.
- یک کلید API در صفحه Credentials در Cloud Console ایجاد کنید. می توانید مراحل این ویدئو یا این مستند را دنبال کنید. همه درخواستها به پلتفرم Google Maps به یک کلید API نیاز دارند.
سایر الزامات این Codelab
برای تکمیل این کد لبه، به حسابها، خدمات و ابزارهای زیر نیاز دارید:
- دانش اولیه جاوا اسکریپت، HTML و CSS
- یک حساب Google Cloud با فعال بودن صورتحساب (همانطور که ذکر شد)
- یک کلید API پلتفرم نقشههای Google با فعال کردن API جاوا اسکریپت Maps (این کار در لابلای کد انجام میشود).
- درک اولیه از میزبانی وب و استقرار (شما از طریق این مورد در نرم افزار کد راهنمایی خواهید شد). این کار از طریق کنسول Firebase و Firebase Studio انجام خواهد شد.
- یک مرورگر وب برای مشاهده فایلها در حین کار.
4. یک صفحه در Firebase Studio ایجاد کنید
این کد لبه فرض نمی کند که شما قبلاً یک برنامه ایجاد کرده اید و از Firebase Studio برای ایجاد صفحه ای برای میزبانی برنامه Map و استقرار آن در Firebase برای اهداف آزمایشی استفاده می کند. اگر یک برنامه کاربردی موجود دارید، میتوانید از آن استفاده کنید و دامنههای میزبان مناسب، قطعههای کد و کلیدهای API را برای اطمینان از اجرای صحیح تغییر دهید.
به استودیوی Firebase بروید (به یک حساب Google نیاز دارد) و یک برنامه ساده 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>
هنگام اجرا باید یک صفحه نشان دهد که نقشه برنامه کاربردی را همانطور که در تصویر نشان داده شده است نشان می دهد، اما!
هنگامی که صفحه واقعاً بارگیری می شود، یک خطا نمایش داده می شود زیرا به یک کلید API پلت فرم Google Maps در صفحه نیاز دارد که در بخش بعدی اضافه خواهد شد.
پیام خطای واقعی ممکن است در کنسول وب در Firebase Studio دیده شود.
برای رفع این مشکل، باید یک کلید API به صفحه اضافه کنیم. کلید API نحوه پیوند صفحه و اجرای Maps Javascript API است. همچنین منطقه ای برای بهره برداری است، زیرا باید به صورت رمزگذاری نشده در صفحه قرار گیرد، جایی که کلید API ممکن است گرفته شود و در سایت های مختلف استفاده شود.
یکی از روشهای حفاظت از طریق استفاده از محدودیتهای برنامه، یا از طریق نوع برنامه مورد استفاده یا از طریق دامنه یا آدرس IP ارجاعدهنده فراخوانی میشود. شما می توانید در مورد بهترین شیوه ها در سایت زیر اطلاعات بیشتری کسب کنید:
https://developers.google.com/maps/api-security-best-practices#rec-best-practices
یا از طریق استفاده از تماس های مستقیم از خط فرمان یا سرور، برنامه هایی که خودشان راهی برای ارائه ارجاع یا ردیابی ندارند، بنابراین به طور بالقوه یک حفره امنیتی هستند.
5. یک برنامه Firebase ایجاد کنید
Firebase برای ارائه عملکردی استفاده می شود تا ارائه دهنده گواهی را برای بررسی موارد زیر ببندد:
- درخواست ها از برنامه معتبر شما سرچشمه می گیرند
- درخواست ها از یک دستگاه و جلسه کاربر معتبر و بدون دستکاری نشات می گیرند.
در این نرم افزار از reCAPTCHA v3 به عنوان ارائه دهنده این گواهی استفاده می شود.
یک برنامه Firebase و میزبان ایجاد کنید.
به https://firebase.google.com/ بروید و یک پروژه Firebase جدید از پیوند "Go to console" ایجاد کنید.
با کلیک بر روی قسمت زیر یک پروژه جدید ایجاد کنید.
نامی را برای پروژه انتخاب کنید، مانند My App Check Project ، لازم نیست همان نامی باشد که قبلا استفاده می شد، زیرا این فقط برای مرجع است، نام واقعی پروژه را می توان دقیقاً در زیر متن ویرایش کرد، نامی که وارد کرده اید تشکیل می شود و اگر منحصر به فرد نباشد، شماره ای به آن اضافه می شود.
اگر از شما خواسته شد که سرویسهای دیگری (مانند Google Analytics) را به برنامه خود اضافه کنید، میتوانید آنها را بپذیرید یا نه، اما برای این کد لبه نیازی به آنها نیست، بنابراین ممکن است کنار گذاشته شوند.
روی دکمه "ایجاد پروژه" کلیک کنید و منتظر بمانید تا پروژه ایجاد شود. وقتی این کار تکمیل شد به شما اطلاع خواهد داد.
وقتی برای شروع تعامل با پروژه آماده شد، روی ادامه کلیک کنید.
از صفحه اصلی می توانید با افزودن Firebase به برنامه خود و انتخاب گزینه وب، شروع به کار کنید.
میزبانی Firebase را برای جایی در سایت خود تنظیم کنید تا فایل ها پس از استقرار آنها بروند (برای سایت واقعی خود می توانید از گزینه خود استفاده کنید اما برای دنبال کردن این Codelab می خواهید در میزبانی Firebase مستقر شوید).
برای ایجاد برنامه روی ثبت برنامه کلیک کنید. سپس اسکریپت ایجاد شده را می گیرید و از آن برای ارجاع پروژه در firebase از برنامه وب ما استفاده می کنید.
کد پیکربندی firebase در برگه بعدی در برنامه کاربردی برای اتصال firebase و apis نقشه ها به یکدیگر استفاده می شود، بنابراین ارزش کپی کردن آن را از بخش "استفاده از تگ اسکریپت" دارد. که در پروژه index.html قرار می دهید.
برای قسمت های دیگر روی next کلیک کنید و سپس اپلیکیشن ایجاد شده را در قسمت تنظیمات پروژه سایت مشاهده کنید.
اگر باید به عقب برگردید و جزئیات پیکربندی را در تاریخ دیگری پیدا کنید، میتوانید جزئیات برنامه را نیز از دکمه "تنظیمات" پیدا کنید، همانطور که نشان داده شده است:
قبل از ترک این بخش، باید دامنه سایت میزبانی Firebase ایجاد شده را که برای استفاده در آینده با reCAPTCHA ایجاد شده است، یادداشت کنید. این اجازه می دهد تا نام سایت به ارائه دهنده گواهی گره بخورد، به این معنی که فقط درخواست های آن سایت تأیید می شود.
از میانبرهای پروژه یا منوی ساخت در سمت چپ به بخش میزبانی وب بروید
یا 
و از قسمت دامنه ای که برای اپلیکیشن ایجاد شده است را جستجو کنید. اگر قبلاً انجام نشده است، ممکن است مجبور شوید روی چند صفحه برای تنظیم آن کلیک کنید.
6. کلیدهای API ایمن
با همان حسابی که از Firebase در آن استفاده می کنید، به کنسول Cloud بروید تا پروژه ایجاد شده را مشاهده کنید.
اگر چندین پروژه دارید، ممکن است لازم باشد از کادر کشویی یا جستجو برای انتخاب صحیح، با نام پروژه Firebase خود استفاده کنید.
این پروژه جدید ایجاد شده را باز می کند. اکنون Maps Javascript API را به این پروژه اضافه خواهید کرد تا بتوان از آن در داخل پروژه استفاده کرد، از جمله محدود کردن استفاده از آن به یک کلید API خاص و دامنه میزبانی.
از منوی سمت چپ برای فعال کردن Maps API در پروژه استفاده کنید. گزینه «APIs & Services» و «Enabled APIs & Services» را انتخاب کنید.
گزینه "ENABLE APIS AND SERVICES" را انتخاب کنید
"Maps Javascript API" را در کادر جستجو وارد کنید.
نتیجه مطابق را انتخاب کنید.
سپس روی فعال کردن API کلیک کنید تا آن را به پروژه خود اضافه کنید (اگر قبلاً از این پروژه استفاده کرده باشید، ممکن است قبلاً انجام شده باشد).
هنگامی که این مورد فعال شد، می توانید یک کلید API اضافه کنید و آن را محدود کنید، اما در حال حاضر از این کار صرفنظر می شود.
با استفاده از گزینه های منوی سمت چپ دوباره به بخش API & Services برگردید و کلید مرورگری را که برای شما ایجاد شده است انتخاب کنید.
Maps JavaScript API را به یکی از محدودیت های API اضافه کنید.
برای کلیدهای یک برنامه زنده، همچنین محدودیتی برای دامنه ای که برنامه را میزبانی می کند، قرار می دهید، اکنون این کار را با استفاده از دامنه ایجاد شده برای شما در Firebase انجام دهید. همچنین باید /* را به انتهای دامنه اضافه کنید تا مطمئن شوید که تمام مسیرهای زیر آن را پوشش می دهد.
برای اطلاعات بیشتر در مورد محدود کردن کلیدهای API، میتوانید جزئیات بیشتری درباره فعال کردن آن در مکان زیر بیابید.
https://developers.google.com/maps/api-security-best-practices#restricting-api-keys
7. اسرار reCAPTCHA ایجاد کنید
مرحله بعدی ایجاد یک پروژه reCAPTCHA برای ارائه گواهی و کلیدها برای مشتری و سرور است.
به سایت reCAPTCHA در https://www.google.com/recaptcha/ بروید و روی دکمه شروع کلیک کنید.
سپس یک سایت جدید ثبت کنید، مطمئن شوید که دامنه مناسب را برای محدود کردن وارد کرده اید.
همچنین مطمئن شوید که همان پروژه Google Cloud را انتخاب کرده اید که Firebase ایجاد کرده است، در صورتی که بیش از یک مورد دارید.
این دو کلید ایجاد می کند، یک کلید مخفی که وارد کنسول Firebase می کنید، این کلید هرگز نباید در هیچ صفحه یا برنامه ای که به صورت عمومی قابل مشاهده است قرار داده شود و یک کلید سایت که در برنامه وب استفاده می شود.
این صفحه را همانطور که نیاز دارید باز نگه دارید. روی دکمه کپی Secret Key کلیک کنید و سپس به سایت firebase برگردید.
8. reCAPTCHA را به Firebase اضافه کنید
در کنسول Firebase Admin به آیتم های منوی سمت چپ بروید. در زیر آیتم منوی ساخت ، App Check را انتخاب کنید.
لیست خدمات را نمی توان تا زمانی که یک برنامه ثبت نام کرده باشد فعال کرد (این برنامه قبل از اضافه شدن میزبانی به سایت ایجاد شده است)، در صورت نیاز روی شروع کلیک کنید تا این را تنظیم کنید.
روی برگه App کلیک کنید و برنامه وب را باز کنید و سپس رمزی را که از سایت reCAPTCHA کپی کرده اید وارد کنید و روی ذخیره کلیک کنید.
اکنون باید یک تیک سبز توسط ارائه دهنده reCAPTCHA وجود داشته باشد. این برنامه وب اکنون می تواند از reCAPTCHA برای تأیید اینکه آیا کاربر یا سایتی به درستی با این سرویس تماس می گیرد یا خیر استفاده کند.
اکنون در برگه APIs باید نشان دهد که Google Maps Platform API فعال است اما اکنون اجرا نشده است.
شما اکنون رمز reCAPTCHA را با پروژه Firebase مرتبط کرده اید و اکنون می توانید بروید و کد را به صفحه وب اضافه کنید تا کلید سایت را با ارائه دهنده مناسب برای استفاده در برنامه Maps مطابقت دهید.
کلید سایت توسط reCAPTCHA بررسی میشود تا با کلید مخفی مطابقت داشته باشد، پس از انجام تأیید میکند که صفحه تماس صحیح است و App Check یک رمز ارائه میدهد که میتواند با تماسهای بعدی به Maps Javascript API استفاده شود، بدون این تأیید، نشانه داده نمیشود و درخواستها نمیتوانند تأیید شوند.
9. تأیید را به صفحه اضافه کنید و گسترش دهید.
به کنسول ابری برگردید و کلید API را که برای استفاده در Maps API لازم است کپی کنید.
این را میتوانید از منوی کناری کنسول، در منوی کناری APIs and Services، زیر گزینه Credentials پیدا کنید.
از این گزینه می توانید کلید مرورگر موجود را انتخاب کنید (اگرچه همانطور که اشاره شد می توانید از یک کلید موجود دیگر استفاده کنید یا یک کلید جدید ایجاد کنید).
روی دکمه نمایش کلید کلیک کنید و کلید را از پنجره محاوره ای نمایش داده شده کپی کنید.
به پروژه Firebase Studio برگردید، جایی که صفحه HTML ایجاد شده قبلاً باز شده است. اکنون می توانید کلید API را به صفحه اضافه کنید تا Maps API در جایی کار کند که صفحه دارای "YOUR_API_KEY" است.
هنگامی که صفحه را مجددا اجرا کنید، اکنون یک پیام خطای متفاوت وجود خواهد داشت.
این بدان معنی است که دامنه توسعه ای که صفحه را از آن میزبانی می کنید مجاز نیست (ما فقط دامنه مستقر شده را اضافه کردیم). ما باید این سایت را با استفاده از میزبانی Firebase در دامنه صحیح منتشر کنیم. جزئیات بیشتر را می توانید در مکان زیر دریافت کنید:
و این ویدیو
برنامههای وب Firebase خود را سریعتر در Project IDX بسازید، آزمایش کنید و اجرا کنید
جزئیات بیشتر را می توانید در قسمت خطاهای بارگیری نقشه در سایت Maps Javascript API پیدا کنید.
اگر RefererNotAllowedMapError را دارید، می توانید این مشکل را با استقرار صفحه در دامنه صحیح برطرف کنید.
به استودیوی Firebase برگردید و روی نماد "Firebase Studio" کلیک کنید (این ممکن است در سمت چپ یا سمت راست انتهایی بسته به گزینه ای که تنظیم کرده اید باشد) تا گزینه های میزبانی باز شود.
در این کد لبه بعدی، برای اتصال نمونه firebase خود با برنامه استودیو، باید "Host the App with Firebase" را انجام دهید.
سپس روی "Authenticate Firebase" کلیک کنید تا فرآیند احراز هویت شروع شود.
دستورالعمل های موجود در پنجره فرمان را دنبال کنید تا استقرار مجاز شود.
دستورالعمل های روی صفحه (از جمله باز کردن یک پنجره جدید) را دنبال کنید و کد مجوز را در جایی که درخواست می کند کپی کنید و آن را در پنجره فرمان در استودیوی Firebase قرار دهید.
جزئیات بیشتر در مورد این فرآیند را می توانید در مکان زیر دریافت کنید:
https://firebase.google.com/docs/studio/deploy-app
پس از انجام این کار، میتوانید روی "Initialize firebase hosting" کلیک کنید تا پروژه را به پروژه Firebase پیوند دهید.
"استفاده از پروژه موجود" را انتخاب کنید و پروژه ای را که در بخش قبلی ایجاد کردید انتخاب کنید. بقیه پیشفرضها را بپذیرید (مثال شما ممکن است بسته به نامی که هنگام تنظیم پروژه انتخاب میکنید متفاوت باشد).
به نمای اکسپلورر برگردید و فایل index.html ایجاد شده را در فهرست عمومی با فایلی که قبلاً در فهرست اصلی داشتید جایگزین کنید.
اکنون می توانید به نوار کناری Firebase Studio برگردید و سایت را برای تولید مستقر کنید.
این مراحل استقرار در کنسول را نشان می دهد.
سایت مستقر شده را از "URL میزبانی" نشان داده شده باز کنید (در اینجا به عنوان https://my-app-check-project.web.app/ ذکر شده است، اما برای پروژه شما متفاوت خواهد بود).
برنامه اکنون نقشه را در صفحه نشان می دهد زیرا API ها برای دامنه های مورد استفاده کار می کنند.
اکنون یک صفحه کاری وجود دارد، با محدودیت هایی برای نوع APIهایی که ممکن است با کلید API استفاده شوند و همچنین دامنه هایی که ممکن است کلید API برای آنها استفاده شود. مرحله بعدی قفل کردن دسترسی فقط به آن دامنه است. برای انجام این کار باید بخش اسکریپت Firebase را که قبلاً ایجاد شده است اضافه کنید تا صفحه را با استفاده از App Check ایمن کنید. این کار در بخش بعدی انجام خواهد شد.
10. صفحه ایمن
در حالی که صفحه فعلی کلید API را به دامنه ایمن می کند، مرحله تأیید را اضافه نمی کند تا مطمئن شود که توسط برنامه صحیح و توسط یک شخص استفاده می شود. ممکن است کلید همچنان به سرقت رفته و توسط یک بازیگر مخرب استفاده شود. برای جلوگیری از این امر، پیکربندی Firebase، ارائه دهنده و کلید سایت باید به صفحه اضافه شوند تا توکن صحیح برای مشتری به دست آید.
همچنین می توانید ببینید که برای Maps API استفاده در Firebase ردیابی می شود. از آنجایی که از هیچ توکن درستی استفاده نمی کند، درخواست های تأیید نشده ای می کند.
جزئیات اتصال مورد نیاز را می توان از پروژه Firebase به دست آورد.
جزئیات Firebase را از کنسولی که حاوی جزئیات پیکربندی Firebase است، دریافت کنید. به صفحه تنظیمات پروژه در firebase بروید و در بخش CDN برنامه، بخش کد را برای راه اندازی CDN (ساده ترین) بگیرید.
در پروژه Firebase، چرخ دنده را برای نمایش تنظیمات پروژه انتخاب کنید.
که صفحه زیر را باز می کند که حاوی جزئیات در بخش عمومی است، در زیر برنامه های شما.
این را در صفحه استودیوی 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 (از قبل) دریافت کرده اید.
میتوانید جزئیات بیشتری درباره افزودن این بخشها در صفحه مستندات Maps زیر دریافت کنید:
https://developers.google.com/maps/documentation/javascript/maps-app-check
کتابخانه App Check را به صفحه اضافه کنید، سپس توابع را برای مقداردهی اولیه بررسی برنامه با پیکربندی firebase بارگیری کنید و رمز را با استفاده از ReCaptchaV3Provider دریافت کنید.
ابتدا کتابخانه App Check را وارد کنید:
import {
getToken,
initializeAppCheck,
ReCaptchaV3Provider,
} from "https://www.gstatic.com/firebasejs/12.2.1/firebase-app-check.js";
سپس کدی را برای مقداردهی اولیه App Check با پیکربندی Firebase و ارائهدهنده reCAPTCHA با استفاده از نشانه سایت اضافه میکنید.
// Get App Check Token
const appCheck = initializeAppCheck(app, {
provider: new ReCaptchaV3Provider('<INSERT SITE KEY>'),
isTokenAutoRefreshEnabled: true,
});
در نهایت با استفاده از تابع تنظیمات کتابخانه Maps Core یک تابع را به Map Control متصل کنید تا یک نشانه دریافت کنید. این باعث می شود درخواست های توکن مطابق با نیاز کنترل نقشه بسته به طول عمر رمز انجام شود.
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 نظارت کند.
باز کردن پنجره اکنون نشان می دهد که مشتریان در حال درخواست هستند و گواهی کار می کند (با درخواست های "تأیید شده" آبی تیره در نمودار نشان داده شده است). سایر درخواستها تماسها را در مرحله توسعه قبل از تکمیل تأیید نشان میدهند.
اکنون که مشاهده میشود که کلاینتها کار میکنند، میتوان اجرای آن را در سایت فعال کرد تا اطمینان حاصل شود که کلیدهای API نمیتوانند از یک برنامه مشتری نامعتبر استفاده شوند. برای شروع اجرای بر روی دکمه Enforce کلیک کنید.
با کلیک کردن روی این علامت هشدار بزرگی به شما نشان می دهد که نشان می دهد با این کار برنامه شما قفل می شود، در دنیای واقعی فقط زمانی این کار را انجام می دهید که بدانید همه مشتریان شما کلیدهای مناسب را دارند و در حال کار هستند، در غیر این صورت ممکن است کاربران شما نتوانند به سایت دسترسی پیدا کنند.
همچنین ممکن است اجرای آن مدتی طول بکشد. چیزی که روی صفحه ذکر شده است، اگر فوراً برای اجرای آزمایش کنید، ممکن است زمان انتشار نداشته باشد.
هنگام درخواست صفحه، باید بتوانید آن را مانند قبل ببینید، در واقع چیزی در سایت تغییر نکرده است.
اکنون با گذشت زمان باید شاهد افزایش تعداد درخواست های تایید شده در کنسول باشید، همانطور که در اینجا مشاهده می شود:
میتوانید با بازگشت به نمونه اصلی در Codelab و ایجاد یک صفحه جدید بدون عملکرد بررسی برنامه، کارکرد آن را آزمایش کنید. این صفحه را چیزی مانند 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 صحیح را وارد کردید، سپس هنگام درخواست صفحه (از yourdomain/nocheck.html استفاده کنید) باید کادر خطای خاکستری زیر را داشته باشید.
با چک کردن کنسول، باید یک پیغام خطایی مانند زیر مشاهده کنید:
بررسی برنامه با موفقیت درخواست نقشه را در صفحه مسدود کرد زیرا دیگر نشانه بررسی برنامه برای سایت اجرا شده را دریافت نمی کند.
12. تبریک می گویم!
تبریک می گویم که با موفقیت برنامه بررسی را در سایت خود فعال کردید!
شما با موفقیت برنامهای ساختهاید که از Firebase App Check استفاده میکند تا مطمئن شوید درخواستها از دامنه و کاربر معتبری میآیند.
چیزی که یاد گرفتی
- نحوه استفاده از Firebase Studio برای میزبانی و استقرار یک صفحه وب.
- نحوه استفاده از Cloud Console برای فعال کردن و ایمن کردن APIهای پلتفرم Google Maps.
- نحوه استفاده از reCAPTURE برای تولید کلیدهایی که می توان از آنها برای تأیید تماس استفاده کرد.
- نحوه استفاده از Firebase App Check و ادغام آن در Maps JavaScript API.
- نحوه اعمال و نظارت بر تماسهای سایتهای محافظتشده با Firebase Studio را ببینید.