1. Başlamadan önce
Ne oluşturacaksınız?
Bu codelab'de, web ortamında kullanılan API anahtarınıza başka bir koruma katmanı eklemek için Uygulama Kontrolü'nü kullanacaksınız.
İşlevselliği bir araya getirmek için Codelab'de özellikle aşağıdaki adımlar uygulanacaktır:
- Google Haritalar Platformu JavaScript API'yi kullanarak bir harita barındıracak web sayfası oluşturun.
- Sayfayı, internetten erişilebilecek şekilde barındırın.
- Cloud Console'u kullanarak API'yi kullanabilecek alanları ve API'leri kısıtlayın.
- Firebase aracılığıyla Uygulama Kontrolü kitaplığını ekleyin ve başlatın.
- Uygulamaların geçerliliğini kontrol etmek için onay sağlayıcıyı ekleyin.
- Uygulamanızda ve monitörünüzde kontrolü zorunlu kılın.
Bu codelab'in sonunda, kullanılan API anahtarlarında, bu anahtarlara erişilen alanlarda ve bunları kullanabilecek uygulama türlerinde güvenliği zorunlu kılan çalışan bir siteye sahip olmanız gerekir.
2. Ön koşullar
Uygulama Kontrolü'nü etkinleştirmek için koruma sağlamak üzere üç Google hizmetinin kullanılması gerekir. Bu alanlar hakkında bilgi edinmeniz önerilir.
Firebase: API anahtarlarının uygun alanlardan referans verildiğini kontrol eden hizmetlerin uygulanmasını sağlar. Bu sayede Firebase Studio kullanılarak hosting ve dağıtım işlevleri de sağlanır.
reCAPTCHA: Bu, uygulamayı insanların kullanıp kullanmadığını kontrol etme işlevini sağlar ve Firebase'i istemci uygulaması alanına bağlamak için herkese açık ve özel anahtarlar sunar.
Google Cloud Platform: Hem Google Haritalar Platformu hem de Firebase tarafından kullanılan API anahtarlarını ve Haritalar anahtarını kullanan alan adıyla ilgili kısıtlamayı sağlar.
Bu bileşenlerin birlikte nasıl çalıştığını aşağıdaki mimari şemasında görebilirsiniz:
App Check ve Google Haritalar Platformu kullanılırken aşağıdaki öğeler, bu durumda reCAPTCHA olan bir onay sağlayıcı tarafından sağlanan onay kullanılarak isteklerin geçerli bir uygulamadan ve kullanıcıdan gelip gelmediğini belirlemek için birlikte çalışır.
Bu işlem, Firebase tarafından sağlanan App Check SDK'nın kullanılmasıyla gerçekleştirilir. Bu SDK, çağıran uygulamanın geçerliliğini kontrol eder ve ardından Google Haritalar Platformu JavaScript API'ye yapılan sonraki çağrıların yapıldığı uygulamaya bir jeton sağlar. Buna karşılık, Google Haritalar Platformu JavaScript API'si, sağlanan jetonun geçerliliğini Firebase ile kontrol ederek hem doğru alan adından hem de bir onay sağlayıcı aracılığıyla geçerli bir kullanıcıdan geldiğinden emin olur.
App Check ve Maps JavaScript API'yi kullanma hakkında daha fazla bilgiyi aşağıdaki konumda bulabilir ve gerekli adımları öğrenebilirsiniz.
https://developers.google.com/maps/documentation/javascript/maps-app-check
3. Hazırlanın
Henüz bir Google Cloud hesabınız yoksa başlangıçta faturalandırma etkin olacak şekilde bir hesap oluşturmanız gerekir. Başlamadan önce bu öğeyi oluşturmak için talimatları uygulayın.
Google Haritalar Platformu'nu ayarlama
Henüz bir Google Cloud Platform hesabınız ve faturalandırmanın etkinleştirildiği bir projeniz yoksa lütfen faturalandırma hesabı ve proje oluşturmak için Google Haritalar Platformu'nu Kullanmaya Başlama kılavuzuna bakın.
- Cloud Console'da proje açılır menüsünü tıklayın ve bu codelab için kullanmak istediğiniz projeyi seçin.
- Bu codelab için gereken Google Haritalar Platformu API'lerini ve SDK'larını Google Cloud Marketplace'te etkinleştirin. Bunun için bu videodaki veya bu dokümandaki adımları uygulayın.
- Cloud Console'un Kimlik Bilgileri sayfasında bir API anahtarı oluşturun. Bu videodaki veya bu dokümandaki adımları uygulayabilirsiniz. Google Haritalar Platformu'na yapılan tüm istekler için API anahtarı gerekir.
Bu Codelab'in Diğer Koşulları
Bu codelab'i tamamlamak için aşağıdaki hesaplara, hizmetlere ve araçlara ihtiyacınız vardır:
- JavaScript, HTML ve CSS hakkında temel bilgi
- Faturalandırmanın etkinleştirildiği bir Google Cloud hesabı (belirtildiği gibi)
- Maps JavaScript API'nin etkinleştirildiği bir Google Haritalar Platformu API anahtarı (Bu işlem, codelab sırasında yapılacaktır).
- Web barındırma ve dağıtım hakkında temel bilgiler (Bu konuda codelab'de size yol gösterilecektir). Bu işlem Firebase konsolu ve Firebase Studio üzerinden yapılır.
- Çalışırken dosyaları görüntülemek için web tarayıcısı
4. Firebase Studio'da sayfa oluşturma
Bu codelab'de, önceden oluşturulmuş bir uygulamanızın olduğu varsayılmaz. Harita uygulamasını barındıracak bir sayfa oluşturmak ve test amacıyla Firebase'e dağıtmak için Firebase Studio kullanılır. Mevcut bir uygulamanız varsa doğru uygulamayı sağlamak için uygun ana makine alanlarını, kod snippet'lerini ve API anahtarlarını değiştirerek bu uygulamayı da kullanabilirsiniz.
Firebase Studio'ya gidin (Google Hesabı gerekir) ve yeni bir Simple HTML uygulaması oluşturun. Bu seçeneği göstermek için "Tüm şablonları göster" düğmesini tıklamanız veya doğrudan erişim için bu bağlantıyı tıklamanız gerekebilir.
Çalışma alanına myappcheck-map gibi uygun bir ad verin (benzersizlik için rastgele bir sayı ekleyin, sistem sizin için bir sayı ekleyecektir). Ardından Firebase Studio, çalışma alanını oluşturur.
Adı girdikten sonra oluştur düğmesini tıklayabilirsiniz. Bu işlem, proje oluşturma sürecini başlatır.
Oluşturulduktan sonra index.html dosyasındaki metni, içinde harita bulunan bir sayfa oluşturan aşağıdaki kodla değiştirebilirsiniz.
<!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>
Bu kod çalıştırıldığında, resimde gösterildiği gibi çalışan uygulamanın haritasını gösteren bir sayfa vermesi gerekir. Ancak!
Ancak sayfa yüklendiğinde, sayfada Google Haritalar Platformu API anahtarı gerektiği için bir hata gösterilir. Bu anahtar, sonraki bir bölümde eklenecektir.
Gerçek hata mesajı, Firebase Studio'daki web konsolunda görülebilir.
Bu sorunu düzeltmek için sayfaya bir API anahtarı eklememiz gerekir. API anahtarı, sayfa ile Maps JavaScript API'nin uygulanma şeklini birbirine bağlar. Ayrıca, API anahtarının alınarak farklı sitelerde kullanılabileceği, sayfada şifrelenmemiş bir şekilde yer alması gerektiğinden kötüye kullanıma açık bir alandır.
Koruma yöntemlerinden biri, kullanılan uygulamanın türü veya çağrılan yönlendiren alan ya da IP adresi aracılığıyla uygulama kısıtlamalarının kullanılmasıdır. En iyi uygulamalar hakkında daha fazla bilgiyi aşağıdaki sitede bulabilirsiniz:
https://developers.google.com/maps/api-security-best-practices#rec-best-practices
veya komut satırından ya da sunucudan doğrudan yapılan çağrılar kullanılarak. Bu uygulamaların kendileri yönlendiren sağlama veya izleme olanağına sahip olmadığından güvenlik açığı oluşturabilirler.
5. Firebase uygulaması oluşturma
Firebase, onay sağlayıcının aşağıdakileri kontrol etmesini sağlayan işlevselliği sağlamak için kullanılır:
- İstekler, orijinal uygulamanızdan geliyor
- İstekler, gerçek ve değiştirilmemiş bir cihazdan ve kullanıcı oturumundan kaynaklanmalıdır.
Bu codelab'de, bu onaylama işleminin sağlayıcısı olarak reCAPTCHA s3 kullanılacaktır.
Firebase uygulaması ve ana makinesi oluşturun.
https://firebase.google.com/ adresine gidin ve "Konsola git" bağlantısını kullanarak yeni bir Firebase projesi oluşturun.
Aşağıdaki alanı tıklayarak yeni bir proje oluşturun.
Proje için bir ad seçin (ör. Uygulama Kontrolü Projem). Bu ad, yalnızca referans amaçlı olduğundan daha önce kullanılan adla aynı olmak zorunda değildir. Projenin gerçek adı, metnin hemen altında düzenlenebilir. Girdiğiniz adla oluşturulur ve benzersiz değilse sonuna bir sayı eklenir.
Uygulamanıza başka hizmetler (ör. Google Analytics) eklemeniz istenirse bunları kabul edebilir veya etmeyebilirsiniz. Ancak bu codelab için bu hizmetlere gerek yoktur, dolayısıyla eklenmeyebilir.
"Proje oluştur" düğmesini tıklayın ve projenin oluşturulmasını bekleyin. Bu işlem tamamlandığında size bildirim gönderilir.
Bu, projeyle etkileşime başlamaya hazır olduğunda Devam'ı tıklayın.
Ana sayfada, Firebase'i uygulamanıza ekleyip web seçeneğini belirleyerek başlayabilirsiniz.
Dosyalar dağıtıldıktan sonra gidecekleri bir yer olarak siteniz için Firebase Hosting'i ayarlamayı seçin (gerçek siteniz için kendi seçeneğinizi kullanabilirsiniz ancak bu Codelab'i takip etmek için Firebase Hosting'e dağıtım yapacaksınız).
Uygulamayı oluşturmak için Uygulamayı kaydet'i tıklayın. Ardından, oluşturulan komut dosyasını alıp web uygulamamızdan Firebase'deki projeye referans vermek için kullanacaksınız.
Sonraki sekmedeki Firebase yapılandırma kodu, Firebase ile Haritalar API'lerini birbirine bağlamak için uygulamada kullanılacağından "Komut dosyası etiketini kullanma" bölümünden kopyalamaya değer. Bu kodu, proje index.html dosyasına yapıştıracaksınız.
Diğer bölümler için İleri'yi tıklayın ve ardından oluşturulan uygulamayı sitenin proje ayarı bölümünde görün.
Daha sonra geri dönüp yapılandırmanın ayrıntılarını bulmanız gerekirse uygulama ayrıntılarını "Ayarlar" düğmesinden de bulabilirsiniz.
Bu bölümden ayrılmadan önce, daha sonra reCAPTCHA ile kullanılmak üzere oluşturulan Firebase Hosting sitesinin alan adını not etmeniz gerekir. Bu sayede site adı, onay sağlayıcıya bağlanır. Yani yalnızca söz konusu siteden gelen istekler doğrulanır.
Soldaki proje kısayollarından veya Oluştur menüsünden barındırma bölümüne gidin.
veya 
Ardından, bölümden uygulama için oluşturulan alan adını bulun. Henüz yapılmadıysa kurulumu tamamlamak için birkaç ekranı tıklamanız gerekebilir.
6. API anahtarlarını güvenli hale getirme
Oluşturulan projeyi incelemek için Firebase'i kullandığınız hesapla Cloud Console'a gidin.
Birden fazla projeniz varsa Firebase projenizin adını içeren doğru projeyi seçmek için açılır listeyi veya arama kutusunu kullanmanız gerekebilir.
Yeni oluşturulan proje açılır. Şimdi Maps JavaScript API'yi bu projeye ekleyeceksiniz. Böylece, kullanımı belirli bir API anahtarı ve barındırma alanıyla kısıtlamak da dahil olmak üzere proje içinde kullanılabilir.
Projede Haritalar API'lerini etkinleştirmek için sol taraftaki menüyü kullanın. "API'ler ve Hizmetler" seçeneğini ve "Etkin API'ler ve Hizmetler"i belirleyin.
"API'LERİ VE HİZMETLERİ ETKİNLEŞTİR" seçeneğini belirleyin.
Arama kutusuna "Maps Javascript API" yazın.
Eşleşen sonucu seçin.
Ardından, API'yi projenize eklemek için etkinleştir'i tıklayın (Bu proje daha önce kullanıldıysa bu işlem zaten yapılmış olabilir).
Bu özellik etkinleştirildikten sonra API anahtarı ekleyip kısıtlamayı seçebilirsiniz ancak şimdilik bu adım atlanacaktır.
Sol menü seçeneklerini tekrar kullanarak API'ler ve Hizmetler bölümüne geri dönün ve sizin için oluşturulan tarayıcı anahtarını seçin.
Maps JavaScript API'yi API kısıtlamalarından birine ekleyin.
Yayındaki bir uygulamadaki anahtarlar için uygulamayı barındıran alanla ilgili bir sınırlama da koymanız gerekir. Bunu şimdi Firebase'de sizin için oluşturulan alanı kullanarak yapın. Ayrıca, alanın sonuna /* ekleyerek altındaki tüm yolları kapsadığından emin olmanız gerekir.
API anahtarlarını kısıtlama hakkında daha fazla bilgi edinmek için bu özelliği etkinleştirme ile ilgili ayrıntıları aşağıdaki konumda bulabilirsiniz.
https://developers.google.com/maps/api-security-best-practices#restricting-api-keys
7. reCAPTCHA gizli anahtarları oluşturma
Sonraki adım, hem istemci hem de sunucu için onay ve anahtarlar sağlamak üzere bir reCAPTCHA projesi oluşturmaktır.
https://www.google.com/recaptcha/ adresindeki reCAPTCHA sitesine gidin ve "Başlayın" düğmesini tıklayın.
Ardından yeni bir site kaydedin ve kısıtlanacak doğru alanı girdiğinizden emin olun.
Birden fazla Google Cloud projeniz varsa Firebase'in oluşturduğu projeyi seçtiğinizden de emin olun.
Bu işlem sonucunda iki anahtar oluşturulur: Firebase konsoluna gireceğiniz gizli anahtar (bu anahtar, herkese açık olarak görüntülenebilen hiçbir sayfaya veya uygulamaya yerleştirilmemelidir) ve web uygulamasında kullanacağınız site anahtarı.
Bu sayfayı açık tutun. Gizli anahtarı kopyala düğmesini tıklayın ve ardından Firebase sitesine geri dönün.
8. Firebase'e reCAPTCHA ekleme
Firebase Yönetici Konsolu'nda sol taraftaki menü öğelerine gidin. Build (Derleme) menü öğesinin altında App Check'i (Uygulama Kontrolü) seçin.
Bir uygulama kaydedilene kadar hizmet listesi etkinleştirilemez (bu, daha önce barındırma siteye eklendiğinde oluşturulmuştu). Bunu ayarlamanız gerekiyorsa Başlayın'ı tıklayın.
Uygulama sekmesini tıklayın, Web uygulamasını açın, reCAPTCHA sitesinden kopyaladığınız gizli anahtarı girin ve Kaydet'i tıklayın.
Artık reCAPTCHA sağlayıcısının yanında yeşil bir onay işareti olmalıdır. Bu web uygulaması artık bir kullanıcının veya sitenin hizmeti doğru şekilde çağırıp çağırmadığını onaylamak için reCAPTCHA'yı kullanabilir.
API'ler sekmesinde, Google Haritalar Platformu API'sinin etkin ancak artık zorunlu kılınmadığı gösterilir.
Artık reCAPTCHA gizli anahtarını Firebase projesine bağladınız. Şimdi site anahtarını Maps uygulamasıyla kullanılacak doğru sağlayıcıyla eşleştirmek için kodu web sayfasına ekleyebilirsiniz.
Site anahtarı, gizli anahtarla eşleşmesi için reCAPTCHA tarafından kontrol edilir. Bu işlem tamamlandığında, çağıran sayfanın doğru olduğu onaylanır ve Uygulama Kontrolü, Maps JavaScript API'ye yapılan sonraki çağrılarda kullanılabilecek bir jeton sağlar. Bu onay olmadan jeton verilmez ve istekler doğrulanamaz.
9. Sayfaya doğrulama ekleyin ve dağıtın.
Bulut konsoluna geri dönün ve Haritalar API'si için kullanılması gereken API anahtarını kopyalayın.
Bu seçeneği konsoldaki yan menüde, API'ler ve Hizmetler yan menüsündeki Kimlik Bilgileri seçeneğinin altında bulabilirsiniz.
Buradan mevcut tarayıcı anahtarını seçebilirsiniz (ancak belirtildiği gibi farklı bir mevcut anahtar kullanabilir veya yeni bir anahtar oluşturabilirsiniz).
Anahtarı göster düğmesini tıklayın ve görüntülenen iletişim kutusundan anahtarı kopyalayın.
Daha önce oluşturduğunuz HTML sayfasının açıldığı Firebase Studio projesine geri dönün. Artık API anahtarını sayfaya ekleyerek Haritalar API'sinin, sayfada "YOUR_API_KEY" olan yerlerde çalışmasını sağlayabilirsiniz.
Sayfayı yeniden çalıştırdığınızda farklı bir hata mesajı gösterilir.
Bu, sayfayı barındırdığınız geliştirme alanına izin verilmediği anlamına gelir (yalnızca dağıtılan alan eklenmiştir). Bu siteyi Firebase Hosting'i kullanarak doğru alanda yayınlamamız gerekir. Daha fazla bilgiyi aşağıdaki adreste bulabilirsiniz:
ve bu video
Project IDX'te Firebase web uygulamalarınızı daha hızlı geliştirin, test edin ve dağıtın
Daha fazla bilgiyi Maps JavaScript API sitesindeki Harita Yükleme Hataları bölümünde bulabilirsiniz.
RefererNotAllowedMapError hatası alıyorsanız sayfayı doğru alana dağıtarak bu sorunu düzeltebilirsiniz.
Firebase Studio'ya geri dönün ve barındırma seçeneklerini açmak için "Firebase Studio" simgesini tıklayın (bu simge, ayarladığınız seçeneğe bağlı olarak en solda veya en sağda olabilir).
Bu codelab'de, Firebase örneğinizi Studio uygulamasına bağlamak için "Uygulamayı Firebase ile barındırma" bölümüne geçmeniz gerekir.
Ardından, kimlik doğrulama sürecini başlatmak için "Firebase'de kimlik doğrulama"yı tıklayın. Bu işlem, hesabınızın stüdyodan arka uçla barındırma işlemini otomatik olarak yapmasına olanak tanır.
Dağıtımı yetkilendirmek için komut penceresindeki talimatları uygulayın.
Ekrandaki talimatları (yeni pencere açma dahil) uygulayın ve yetkilendirme kodunu istendiği yere kopyalayıp Firebase Studio'daki komut penceresine yapıştırın.
Bu işlem hakkında daha fazla bilgiyi aşağıdaki adreste bulabilirsiniz:
https://firebase.google.com/docs/studio/deploy-app
Bu işlem tamamlandıktan sonra projeyi Firebase projesine bağlamak için "Firebase Hosting'i başlat"ı tıklayabilirsiniz.
"Mevcut bir projeyi kullan"ı ve önceki bölümde oluşturduğunuz projeyi seçin. Varsayılan değerlerin geri kalanını kabul edin (örneğiniz, projeyi oluştururken seçtiğiniz ada bağlı olarak değişebilir).
Gezgin görünümüne dönün ve public dizinindeki oluşturulan index.html dosyasını kök dizinde bulunan dosya ile değiştirin.
Artık Firebase Studio kenar çubuğuna geri dönüp siteyi üretime dağıtabilirsiniz.
Bu işlem, konsoldaki dağıtım adımlarını gösterir.
Gösterilen "Hosting URL"'sinden (burada https://my-app-check-project.web.app/ olarak belirtilmiştir ancak projeniz için farklı olacaktır) dağıtılan siteyi açın.
API'ler kullanılan alan adları için çalıştığından uygulama artık sayfada haritayı gösterecek.
Artık API anahtarıyla kullanılabilecek API türleri ve API anahtarının kullanılabileceği alanlarla ilgili kısıtlamaların uygulandığı çalışan bir sayfa var. Bir sonraki adım, erişimi yalnızca bu alanla sınırlamaktır. Bunu yapmak için, Uygulama Kontrolü ile sayfayı güvenli hale getirmek üzere daha önce oluşturulan Firebase komut dosyası bölümünü eklemeniz gerekir. Bu işlem, sonraki bölümde açıklanacaktır.
10. Güvenli sayfa
Mevcut sayfa, API anahtarını alan için güvenli hale getirse de doğru uygulama ve bir kişi tarafından kullanıldığından emin olmak için onay adımını eklemez. Anahtar çalınabilir ve kötü amaçlı kişiler tarafından kullanılabilir. Bunu durdurmak için Firebase yapılandırması, sağlayıcı ve site anahtarı, istemci için doğru jetonu almak üzere sayfaya eklenmelidir.
Ayrıca, Haritalar API'si için kullanımın Firebase'de izlendiğini de görebilirsiniz. Doğru jetonlar kullanılmadığı için doğrulanmamış istekler gönderiliyor.
Gerekli bağlantı ayrıntıları Firebase projesinden alınabilir.
Firebase yapılandırma ayrıntılarını içeren konsoldan Firebase ayrıntılarını alın. Firebase'de proje ayarları sayfasına gidin ve uygulamanın CDN bölümünde CDN kurulumu için kod bölümünü (en basit yöntem) alın.
Firebase projesinde, proje ayarlarını göstermek için dişli simgesini seçin.
Bu işlem , uygulamalarınızın altındaki genel bölümdeki ayrıntıları içeren aşağıdaki sayfayı açar.
Bu kodu, haritayı içeren ve barındırılan Firebase Studio sayfasına (public/index.html) kopyalayın. Aşağıdaki gibi görünecek (bu dosyadaki bilgiler değil, sizin bilgilerinizle):
<!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 uygulamamıza eklendiğinden beri, reCAPTCHA sitesinden (önceden) aldığınız site anahtarı kullanılarak reCAPTCHA kitaplığına yapılan çağrılar.
Bu bölümleri ekleme hakkında daha fazla bilgiyi aşağıdaki Haritalar dokümanları sayfasında bulabilirsiniz:
https://developers.google.com/maps/documentation/javascript/maps-app-check
App Check kitaplığını sayfaya ekleyin, ardından App Check'i Firebase yapılandırmasıyla başlatmak için işlevleri yükleyin ve ReCaptchaV3Provider'ı kullanarak jetonu alın.
Öncelikle App Check kitaplığını içe aktarın:
import {
getToken,
initializeAppCheck,
ReCaptchaV3Provider,
} from "https://www.gstatic.com/firebasejs/12.2.1/firebase-app-check.js";
Ardından, site jetonunu kullanarak Firebase yapılandırması ve reCAPTCHA sağlayıcısı ile Uygulama Kontrolü'nü başlatmak için kodu eklersiniz.
// Get App Check Token
const appCheck = initializeAppCheck(app, {
provider: new ReCaptchaV3Provider('<INSERT SITE KEY>'),
isTokenAutoRefreshEnabled: true,
});
Son olarak, jeton almak için Maps Core kitaplığının ayarlar işlevini kullanarak bir işlevi Harita Kontrolü'ne ekleyin. Bu işlem, jetonun kullanım süresine bağlı olarak harita kontrolünün gerektirdiği şekilde jeton istekleri oluşturur.
const { Settings } = await google.maps.importLibrary('core');
Settings.getInstance().fetchAppCheckToken = () =>
getToken(appCheck, /* forceRefresh = */ false);
Dosyanın tamamı aşağıdaki gibidir:
<!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'yu kullanarak bunu Firebase sitesine dağıtın ve sayfayı çalıştırın.
11. İzlemeyi zorunlu kılma
Sayfa ayarlandıktan sonra çalıştırıldığında kontrol edildiğini görebilirsiniz. Firebase konsoluna geri dönün ve App Check bölümünü tekrar açın. Uygulama Kontrolü artık Maps JavaScript API'yi izliyor olmalıdır.
Pencere açıldığında artık istemcilerin istekte bulunduğu ve onaylamanın çalıştığı gösteriliyor (grafikte koyu mavi "doğrulanmış" istekler gösterilir). Diğer istekler, doğrulama tamamlanmadan önce geliştirme aşamasındaki çağrıları gösterir.
İstemcilerin çalıştığı görüldüğünden, API anahtarlarının geçersiz bir istemci uygulamasından kullanılamadığından emin olmak için sitede zorunlu kılma etkinleştirilebilir. Yaptırımı başlatmak için Yaptır düğmesini tıklayın.
Bu seçeneği tıkladığınızda, uygulamanızın kilitleneceğini gösteren büyük bir uyarı işareti gösterilir. Gerçek dünyada bu işlemi yalnızca tüm istemcilerinizin doğru anahtarlara sahip olduğunu ve çalıştığını bildiğinizde yaparsınız. Aksi takdirde kullanıcılarınız siteye erişemeyebilir.
Bu değişikliğin uygulanması da biraz zaman alabilir. Bu durum ekranda belirtilir. Yaptırım için hemen test yaparsanız bu durumun yayılması için yeterli süre geçmemiş olabilir.
Sayfa isteğinde bulunduğunuzda, sitenin aslında hiçbir şey değişmemiş gibi, eskisi gibi çalıştığını görebilirsiniz.
Şimdi, zaman içinde konsoldaki doğrulanmış isteklerin sayısının arttığını görmelisiniz. Örneğin:
Codelab'deki orijinal örneğe geri dönüp uygulama kontrolü işlevi olmadan yeni bir sayfa oluşturarak işe yarayıp yaramadığını test edebilirsiniz. Bu sayfayı nocheck.html gibi bir adla kaydedin ve index.html ile aynı yere, herkese açık klasöre yerleştirin.
<!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>
Bu işlemi yaptıktan ve doğru API anahtarını girdikten sonra sayfayı (alanadınız/nocheck.html) istediğinizde aşağıdaki gri hata kutusunu görmeniz gerekir.
Konsolu kontrol ettiğinizde aşağıdaki gibi bir hata mesajı görmeniz gerekir:
Uygulama kontrolü, zorunlu kılınan site için artık uygulama kontrolü jetonu alınmadığından sayfadaki harita isteğini başarıyla engelledi.
12. Tebrikler!
Tebrikler, sitenizde App Check'i başarıyla etkinleştirdiniz.
İsteklerin geçerli bir alan adından ve kullanıcıdan geldiğinden emin olmak için Firebase Uygulama Kontrolü'nü kullanan bir uygulamayı başarıyla oluşturdunuz.
Öğrendikleriniz
- Web sayfası barındırmak ve dağıtmak için Firebase Studio'yu kullanma
- Google Haritalar Platformu API'lerini etkinleştirmek ve güvenliğini sağlamak için Cloud Console'u kullanma
- Aramaları onaylamak için kullanılabilecek anahtarlar oluşturmak üzere reCAPTURE'ı kullanma
- Firebase App Check'i kullanma ve Maps JavaScript API'ye entegre etme
- Firebase Studio ile korumalı sitelere yapılan çağrıları nasıl zorunlu kılacağınızı ve izleyeceğinizi öğrenin.
Sırada ne var?
- Google Haritalar JavaScript API için App Check belgelerine göz atın.
- Firebase'de Uygulama Kontrolü hakkında daha fazla bilgi edinin.
- App Check ve Google Haritalar Places API'si ile başka bir codelab deneyin.
- reCAPTCHA hakkında daha fazla bilgi edinin.