1. Giriş
Son Güncelleme: 2023-02-23
Firebase kaynaklarınıza yetkisiz erişimi nasıl önleyebilirsiniz?
Gelen isteklerin, isteğin orijinal uygulamanızdan geldiğine dair bir onayla birlikte gelmesini zorunlu kılarak ve uygun bir onayı olmayan trafiği engelleyerek yetkisiz istemcilerin arka uç kaynaklarınıza erişmesini önlemek için Firebase Uygulama Kontrolü'nü kullanabilirsiniz. Firebase Uygulama Kontrolü, istemcinin orijinalliğini doğrulamak için platforma özel doğrulama sağlayıcılarına güvenir: Web uygulamaları için Uygulama Kontrolü, doğrulama sağlayıcıları olarak reCAPTCHA v3 ve reCAPTCHA Enterprise'ı destekler.
Uygulama Kontrolü, Cloud Firestore'a, Gerçek Zamanlı Veritabanına, Bulut İşlevlerine, Identity Platform ile Firebase Kimlik Doğrulamasına ve kendi barındırdığınız arka uçlara yönelik istekleri korumak için kullanılabilir.
Ne inşa edeceksin
Bu codelab'de, önce Uygulama Kontrolü'nü ekleyip ardından zorunlu kılarak bir sohbet uygulamasının güvenliğini sağlayacaksınız.
Ne öğreneceksin
- Yetkisiz erişime karşı arka uç nasıl izlenir?
- Firestore ve Cloud Storage'a yaptırım nasıl eklenir?
- Uygulamanızı yerel geliştirme için hata ayıklama belirteciyle nasıl çalıştırabilirsiniz?
İhtiyacınız olan şey
- Seçtiğiniz IDE/metin düzenleyicisi
- Genellikle Node.js ile birlikte gelen paket yöneticisi npm
- Hesabınızla çalışacak şekilde yüklenmiş ve yapılandırılmış Firebase CLI
- Bir terminal/konsol
- Chrome gibi seçtiğiniz bir tarayıcı
- Codelab'in örnek kodu (Kodu nasıl alacağınızı öğrenmek için codelab'in bir sonraki adımına bakın.)
2. Örnek kodu alın
Codelab'in GitHub deposunu komut satırından kopyalayın:
git clone https://github.com/firebase/codelab-friendlychat-web
Alternatif olarak, Git yüklü değilse depoyu ZIP dosyası olarak indirebilirsiniz .
Başlangıç uygulamasını içe aktar
IDE'nizi kullanarak, klonlanmış depodan 📁 appcheck-start dizinini açın veya içe aktarın. Bu 📁 appcheck-start dizini, tamamen işlevsel bir sohbet web uygulaması olacak codelab'in başlangıç kodunu içerir. 📁 appcheck dizini codelab için tamamlanmış kodu içerecektir.
3. Firebase projesi oluşturun ve kurun
Firebase projesi oluşturma
- Firebase'de oturum açın.
- Firebase konsolunda Proje Ekle'ye tıklayın ve ardından Firebase projenize FriendlyChat adını verin. Firebase projenizin proje kimliğini unutmayın.
- Bu proje için Google Analytics'i etkinleştir seçeneğinin işaretini kaldırın
- Proje Oluştur'a tıklayın.
Oluşturacağımız uygulama, web uygulamaları için kullanılabilen Firebase ürünlerini kullanıyor:
- Kullanıcılarınızın uygulamanızda kolayca oturum açmasına olanak tanıyan Firebase Kimlik Doğrulaması.
- Yapılandırılmış verileri buluta kaydetmek ve veriler değiştiğinde anında bildirim almak için Cloud Firestore.
- Dosyaları buluta kaydetmek için Firebase için Cloud Storage.
- Varlıklarınızı barındırmak ve sunmak için Firebase Hosting.
- Anlık bildirimler göndermek ve tarayıcı açılır bildirimlerini görüntülemek için Firebase Cloud Messaging.
- Uygulamanız için kullanıcı performansı verilerini toplamak için Firebase Performance Monitoring.
Bu ürünlerden bazılarının özel yapılandırması veya Firebase konsolu kullanılarak etkinleştirilmesi gerekir.
Projeye Firebase web uygulaması ekleyin
- Web simgesini tıklayın
yeni bir Firebase web uygulaması oluşturmak için. - Uygulamayı Dostça Sohbet takma adıyla kaydedin ve ardından Bu uygulama için Firebase Hosting'i de kur seçeneğinin yanındaki kutuyu işaretleyin. Uygulamayı kaydet'i tıklayın.
- Bir sonraki adımda, Firebase'i npm ve bir yapılandırma nesnesi kullanarak yükleme komutunu göreceksiniz. Bu nesneyi daha sonra codelab'e kopyalayacağınız için şimdilik İleri'ye basın.
- Ardından Firebase CLI'yi yükleme seçeneğini görürsünüz. Henüz yüklemediyseniz, şimdi
npm install -g firebase-toolskomutunu kullanarak bunu yapın. Daha sonra İleri'ye tıklayın. - Ardından Firebase'de oturum açma ve Firebase barındırma hizmetine dağıtım yapma seçeneğini görürsünüz. Devam edin ve
firebase loginkomutunu kullanarak Firebase'de oturum açın, ardından Konsola Devam Et'i tıklayın. Gelecek bir adımda Firebase barındırma hizmetine dağıtacaksınız.
Firebase Kimlik Doğrulaması için Google ile Oturum Açmayı Etkinleştirin
Kullanıcıların Google hesaplarıyla web uygulamasında oturum açmasına izin vermek için Google oturum açma yöntemini kullanacağız.
Google ile Oturum Açmayı etkinleştirmeniz gerekecek:
- Firebase konsolunda sol paneldeki Derleme bölümünü bulun.
- Kimlik Doğrulama 'yı tıklayın, varsa Başlayın'ı tıklayın, ardından Oturum açma yöntemi sekmesini tıklayın (veya doğrudan oraya gitmek için burayı tıklayın ).
- Google oturum açma sağlayıcısını etkinleştirin
- Uygulamanızın herkese açık adını Dostça Sohbet olarak ayarlayın ve açılır menüden bir Proje destek e-postası seçin.
- Kaydet'i tıklayın
Cloud Firestore'u etkinleştirin
Web uygulaması, sohbet mesajlarını kaydetmek ve yeni sohbet mesajları almak için Cloud Firestore'u kullanır.
Cloud Firestore'u etkinleştirmeniz gerekecek:
- Firebase konsolunun Derleme bölümünde Firestore Veritabanı'na tıklayın.
- Cloud Firestore bölmesinde Veritabanı oluştur'a tıklayın.
- Test modunda başlat seçeneğini seçin ve güvenlik kurallarına ilişkin sorumluluk reddi beyanını okuduktan sonra İleri'ye tıklayın.
Test modu, geliştirme sırasında veritabanına serbestçe yazabilmenizi sağlar. Başlangıç kodunda sizin için zaten yazılmış güvenlik kurallarınız var. Bunları bu codelab için kullanacaksınız.
- Cloud Firestore verilerinizin depolandığı konumu ayarlayın. Bunu varsayılan olarak bırakabilir veya size yakın bir bölgeyi seçebilirsiniz. Firestore'un temel hazırlığını yapmak için Etkinleştir'e tıklayın.
Bulut Depolamayı Etkinleştir
Web uygulaması, resimleri depolamak, yüklemek ve paylaşmak için Firebase için Cloud Storage'ı kullanır.
Cloud Storage'ı etkinleştirmeniz gerekecek:
- Firebase konsolunun Derleme bölümünde Depolama'yı tıklayın.
- Başlayın düğmesi yoksa bu, Cloud Storage'ın zaten etkin olduğu ve aşağıdaki adımları izlemenize gerek olmadığı anlamına gelir.
- Başlayın'ı tıklayın.
- Test modunda başlat seçeneğini seçin ve güvenlik kurallarına ilişkin sorumluluk reddi beyanını okuduktan sonra İleri'ye tıklayın.
Varsayılan güvenlik kurallarıyla, kimliği doğrulanmış herhangi bir kullanıcı Cloud Storage'a her şeyi yazabilir. Daha sonra bu codelab'de bizim için yazılmış olan güvenlik kurallarını dağıtacağız.
- Cloud Storage konumu, Cloud Firestore veritabanınız için seçtiğiniz bölgeyle önceden seçilir. Kurulumu tamamlamak için Bitti'ye tıklayın.
4. Firebase'i yapılandırın
appcheck-start dizininden şunu arayın:
firebase use --add
İstendiğinde Proje Kimliğinizi seçin ve Firebase projenize bir takma ad verin. Bu proje için yalnızca default takma adını verebilirsiniz. Daha sonra yerel projenizi Firebase ile çalışacak şekilde yapılandırmanız gerekecek.
- Firebase konsolunda Proje ayarlarınıza gidin
- "Uygulamalarınız" kartında, yapılandırma nesnesine ihtiyaç duyduğunuz uygulamanın takma adını seçin.
- Firebase SDK snippet bölmesinden Yapılandırma'yı seçin.
- Yapılandırma nesnesi parçacığını kopyalayın ve ardından bunu
appcheck-start/hosting/src/firebase-config.jsdosyasına ekleyin. Codelab'in geri kalanı değişkenin config olarak adlandırıldığını varsayar.
firebase-config.js
const config = {
apiKey: "API_KEY",
authDomain: "PROJECT_ID.firebaseapp.com",
databaseURL: "https://PROJECT_ID.firebaseio.com",
projectId: "PROJECT_ID",
storageBucket: "PROJECT_ID.appspot.com",
messagingSenderId: "SENDER_ID",
appId: "APP_ID",
measurementId: "G-MEASUREMENT_ID",
};
Aynı appcheck-start dizininden şunu arayın:
firebase experiments:enable webframeworks
Bu, bu projenin oluşturulduğu web çerçevesi desteğini sağlar.
Artık projenizi çalıştırmaya ve varsayılan projenin çalıştığını test etmeye hazır olmalıyız!
5. Uygulamayı Uygulama Kontrolü olmadan deneyin
Artık uygulamanızı yapılandırdığınıza ve SDK'yı kurduğunuza göre, uygulamayı orijinal olarak tasarlandığı şekilde kullanmayı deneyin. Öncelikle tüm bağımlılıkları yükleyerek başlayın. Terminalinizden appcheck-start/hosting dizinine gidin. Bu dizinin içindeyken npm install çalıştırın. Bu, projenizin çalışması için tüm bağımlılıkları getirir. Uygulamayı mevcut durumunda başlatmak için firebase serve çalıştırabilirsiniz. Uygulama sizden bir Google hesabıyla giriş yapmanızı ister; bunu yapın ve ardından sohbete birkaç sohbet mesajı ve birkaç fotoğraf göndermeyi deneyin.
Artık yerel olarak test ettiğinize göre, üretimde görme zamanı! Web uygulamasını web'e dağıtmak için firebase deploy çalıştırın. Bu bölüm, reCAPTCHA Kurumsal kanıtlama sağlayıcısı için bir alan adının yapılandırılmasını gerektirdiğinden Uygulama Kontrolü'nün gerçek dünyada nasıl çalıştığını gösterme açısından çok önemli bir adımdır.
Umarız uygulamanın sağladığı varsayılan özelliği yaşıyorsunuzdur. Sohbet mesajları göndermek ve yalnızca bunun gibi bir uygulamadan yapılması gereken diğer her şey. Mevcut durumun dezavantajı, önceki adımdaki uygulama yapılandırmanıza sahip olan herkesin arka uç kaynaklarınıza erişebilmesidir. Firestore ve Cloud Storage sistemlerinizde geçerli olan güvenlik kurallarına uymaları gerekir ancak aksi takdirde burada depolanan verileri sorgulayabilir, depolayabilir ve bunlara erişebilirler.
Sonraki birkaç adımda şunları yapacaksınız:
- Uygulama Kontrolüne Kaydolun
- Yaptırımı doğrula
- Kuralları uygulamaya başlayın
6. Uygulama Kontrolü ve yaptırımı açın
Projeniz için bir reCAPTCHA Kurumsal Anahtarı alıp bunu Uygulama Kontrolüne ekleyerek başlayalım. Google Cloud Console'un reCAPTCHA Enterprise bölümünü ziyaret ederek başlayın. Projenizi seçtiğinizde reCAPTCHA Enterprise API'yi etkinleştirmeniz istenir. API'yi etkinleştirin ve tamamlanması için birkaç dakika bekleyin. Daha sonra Kurumsal anahtarlar'ın yanındaki Anahtar Oluştur'u tıklayın. Daha sonra bu bölümde bir görünen ad belirtin ve bir Web sitesi türü anahtarı seçin. Uygulamanızın barındırıldığı etki alanlarını belirtmeniz gerekir. Bunu Firebase Hosting'de barındırmayı planladığınız için, genellikle ${YOUR_PROJECT_ID}.web.app olan varsayılan barındırma adını kullanırsınız. Barındırma alan adınızı Firebase Konsolunun Barındırma bölümünde bulabilirsiniz. Bu bilgileri doldurduktan sonra Bitti ve Anahtar Oluştur tuşuna basın.
Tamamlandığında, Anahtar Ayrıntılar sayfasının üst kısmında bir kimlik görürsünüz.
Devam edin ve bu kimliği panonuza kopyalayın. Bu, Uygulama Kontrolü için kullandığınız anahtardır. Ardından Firebase konsolunun Uygulama Kontrolü bölümünü ziyaret edin ve Başlayın'ı tıklayın. Ardından, Kaydol'a tıklayın ve ardından reCAPTCHA Enterprise'a tıklayın ve kopyalanan kimliği reCAPTCHA Enterprise Site Anahtarı metin kutusuna yerleştirin. Ayarların geri kalanını varsayılan olarak bırakın. Uygulama Kontrolü sayfanız şöyle görünmelidir:
Doğrulanmamış ve uygulanmayan istekler
Artık Firebase konsolunda kayıtlı bir anahtarınız olduğuna göre, firebase serve komutunu çalıştırarak sitenizi tarayıcıda çalıştırmaya geri dönün. Burada web uygulamanız yerel olarak çalışıyor ve Firebase arka ucuna karşı tekrar istekte bulunmaya başlayabilirsiniz. İstekler Firebase arka ucuna karşı geldiğinden bu istekler Uygulama Kontrolü tarafından izleniyor ancak uygulanmıyor. Gelen isteklerin durumunu görmek istiyorsanız Firebase konsolundaki Uygulama Kontrolü sayfasındaki API'ler sekmesindeki Cloud Firestore bölümünü ziyaret edebilirsiniz. İstemciyi henüz Uygulama Kontrolü'nü kullanacak şekilde yapılandırmadığınız için buna benzer bir şey görmelisiniz:
Arka uçtan %100 doğrulanmamış istekler geliyor. Bu ekran, neredeyse tüm istemci isteklerinin Uygulama Kontrolü entegre olmayan istemcilerden geldiğini gösterdiği için kullanışlıdır.
Bu kontrol paneli birkaç şeyi gösterebilir. Gösterebileceği ilk şey, tüm istemci uygulamalarınızın istemcinizin en son sürümünü çalıştırıp çalıştırmadığıdır. Eğer öyleyse, uygulamanızın gerçek istemcisinin erişimini kapatma endişesi duymadan Uygulama Kontrolü'nü güvenli bir şekilde uygulayabilirsiniz. Bunun size söyleyebileceği diğer şey, uygulamanızın içinden gelmeden arka ucunuza erişmeye yönelik kaç denemenin yapıldığıdır. Bunlar, bilginiz olmadan doğrudan arka ucunuzu sorgulayan kullanıcılar olabilir. İsteklerin doğrulanmadığını görebildiğiniz için, isteklerini doğrulatma işlemine geçmeden önce arka ucunuza doğrulanmamış bir isteği olabilecek kullanıcılara ne olacağını görmenin zamanı geldi.
Doğrulanmamış ve uygulanan İstekler
Devam edin ve önceki ekrandaki Uygula düğmesine basın ve ardından istendiğinde tekrar Uygula'ya basın.
Bu, Uygulama Kontrolü'nü zorunlu kılmaya başlayacaktır; artık arka uç hizmetlerinize, seçtiğiniz doğrulama sağlayıcısı (bu durumda reCAPTCHA Enterprise) aracılığıyla doğrulanmayan istekleri engelleyecektir. http://localhost:5000 adresinde çalışması gereken, çalışan web uygulamanıza geri dönün. Sayfayı yenilediğinizde ve veritabanından veri almaya çalıştığınızda hiçbir şey olmuyor. Hataları okumak için Chrome konsolunu açarsanız aşağıdakine benzer bir şey görmelisiniz:
Uncaught Error in snapshot listener: FirebaseError: [code=permission-denied]: Missing or insufficient permissions.
Bu, Firebase kaynaklarınıza isteklerinde geçerli bir onay jetonu iletmeyen Uygulama Kontrolü engelleme istekleridir. Şimdilik Uygulama Kontrolü yaptırımını kapatabilirsiniz ve bir sonraki bölümde reCAPTCHA Kurumsal Uygulama Kontrolü'nün Dostça Sohbet örneğine nasıl ekleneceğini inceliyorsunuz.
7. Siteye reCAPTCHA Enterprise anahtarını ekleyin
Kurumsal anahtarı uygulamanıza ekleyeceğiz. Öncelikle hosting/src/firebase-config.js dosyasını açın ve reCAPTCHA Enterprise Anahtarınızı aşağıdaki kod pasajına ekleyin:
const reCAPTCHAEnterpriseKey = {
// Replace with your recaptcha enterprise site key
key: "Replace with your recaptcha enterprise site key"
};
Bu tamamlandıktan sonra hosting/src/index.js açın ve 51. satırda, reCAPTCHA anahtarınızı almak için firebase-config.js'den bir içe aktarma ekleyeceksiniz ve ayrıca reCAPTCHA ile çalışabilmeniz için Uygulama Kontrolü kitaplığını da içe aktaracaksınız. Kurumsal sağlayıcı.
// add from here
import {
initializeAppCheck,
ReCaptchaEnterpriseProvider,
} from 'firebase/app-check';
// to here
// replace this line
import { getFirebaseConfig } from './firebase-config.js';
// with this line
import { getFirebaseConfig, getReCaptchaKey } from './firebase-config.js';
Ardından bir sonraki satırda Uygulama Kontrolü'nü ayarlamak için bir işlev oluşturacaksınız. İşlev öncelikle bir geliştirme ortamında olup olmadığınızı kontrol edecek ve eğer öyleyse, yerel geliştirme için kullanabileceğiniz bir hata ayıklama belirteci yazdıracaktır.
import { getFirebaseConfig, getReCaptchaKey } from './firebase-config.js';
// add from here
function setupAppCheck(app) {
if(import.meta.env.MODE === 'development') {
self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;
}
}
// to here
Artık Uygulama Kontrolü'nü seçtiğiniz sağlayıcıyla çalışacak şekilde başlatmanın zamanı geldi; bu durumda bu, reCAPTCHA Enterprise'dır. Daha sonra, Uygulama Kontrolü jetonunuzu arka planda otomatik olarak yenilemek de isteyebilirsiniz; bu, Uygulama Kontrolü jetonunun eskimesi durumunda kullanıcının hizmetinizle etkileşimde bulunmasından kaynaklanan her türlü gecikmeyi önleyecektir.
function setupAppCheck(app) {
if(import.meta.env.MODE === 'development') {
self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;
}
// add from here
// Create a ReCaptchaEnterpriseProvider instance using your reCAPTCHA Enterprise
// site key and pass it to initializeAppCheck().
initializeAppCheck(app, {
provider: new ReCaptchaEnterpriseProvider(getReCaptchaKey()),
isTokenAutoRefreshEnabled: true // Set to true to allow auto-refresh.
});
// to here
}
Son olarak, uygulamanın başlatıldığından emin olduktan sonra, yeni oluşturduğunuz setupAppCheck işlevini çağırmanız gerekir. hosting/src/index.js dosyasının alt kısmında, çağrıyı yakın zamanda eklediğiniz yönteme ekleyin.
const firebaseApp = initializeApp(getFirebaseConfig());
// add from here
setupAppCheck(firebaseApp);
// to here
getPerformance();
initFirebaseAuth();
loadMessages();
Önce yerel olarak test edin
Öncelikle uygulamanızı yerel olarak test edin. Uygulamayı halihazırda yerel olarak sunmuyorsanız firebase serve çalıştırın. Uygulamanın hala yerel olarak yüklenemediğini fark etmelisiniz. Bunun nedeni, Firebase alanınızı localhost alanına değil, yalnızca reCAPTCHA doğrulama sağlayıcısına kaydettirmiş olmanızdır. Localhost'u hiçbir zaman onaylı bir alan adı olarak kaydetmemelisiniz, çünkü bu, kullanıcıların makinelerinde yerel olarak çalışan bir uygulamadan kısıtlı arka uçlarınıza erişmesine olanak tanır. Bunun yerine, self.FIREBASE_APPCHECK_DEBUG_TOKEN = true ayarını yaptığınız için, JavaScript konsolunuzda buna benzer bir satır olup olmadığını kontrol etmek istersiniz:
App Check debug token: 55183c20-de61-4438-85e6-8065789265be. You will need to add it to your app's App Check settings in the Firebase console for it to work.
Sağlanan hata ayıklama jetonunu (örnek durumda: 55183c20-de61-4438-85e6-8065789265be ) alıp bunu uygulamanızın taşma menüsü altındaki Uygulama Kontrolü yapılandırmasına takmak isteyeceksiniz.
Belirtece hatırlayacağınız benzersiz bir ad verin ve Kaydet'i tıklayın. Bu seçenek, uygulamanızda istemci tarafından oluşturulan bir belirteci kullanmanıza olanak tanır; bu, bir hata ayıklama belirteci oluşturup bunu uygulamanıza yerleştirmekten daha güvenli bir alternatiftir. Uygulamaya bir token yerleştirmek, tokenın yanlışlıkla son kullanıcılara dağıtılmasına neden olabilir ve bu son kullanıcılar, kontrollerinizi atlayarak tokenı istismar edebilir. Örneğin bir CI ortamında bir hata ayıklama belirtecini dağıtmak istiyorsanız, bunun nasıl dağıtılacağı hakkında daha fazla bilgi edinmek için bu belgeleri okuyun.
Hata ayıklama jetonunu Firebase konsoluna kaydettikten sonra, Uygulama Kontrolü uygulamasını yeniden etkinleştirebilir ve terminalden firebase serve çağırarak uygulama içeriğinin yerel olarak yüklendiğini test edebilirsiniz. Daha önce girilen verilerin web uygulamasının yerel sürümüne sunulduğunu görmelisiniz. Konsola yazdırılan hata ayıklama jetonunu içeren mesajı hâlâ görmelisiniz.
Üretimde deneyin
Uygulama Denetiminin yerel olarak çalıştığından emin olduktan sonra web uygulamasını üretime dağıtın. Terminal çağrınızdan firebase deploy ve sayfayı yeniden yükleyin. Bu, web uygulamanızı Firebase Hosting'de çalışacak şekilde paketleyecektir. Uygulamanız Firebase Hosting'de barındırıldıktan sonra uygulamanızı ${YOUR_PROJECT_ID}.web.app adresinden ziyaret etmeyi deneyin. JavaScript konsolunu açtığınızda artık orada yazdırılan hata ayıklama jetonunu görmemeli ve projenize sohbetlerin yüklendiğini görmelisiniz. Ek olarak, uygulamayla birkaç dakika etkileşimde bulunduktan sonra Firebase konsolunun Uygulama Kontrolü bölümünü ziyaret edebilir ve uygulamanıza gelen isteklerin tümü doğrulanmak üzere değiştirildiğini doğrulayabilirsiniz.
8. Tebrikler!
Tebrikler, Firebase Uygulama Kontrolü'nü bir Web Uygulamasına başarıyla eklediniz!
Firebase konsolunu, üretim ortamları için bir reCAPTCHA Enterprise jetonunu yönetecek ve hatta yerel geliştirme için hata ayıklama jetonlarını ayarlayacak şekilde ayarlarsınız. Bu, uygulamalarınızın onaylı istemcilerden gelen Firebase kaynaklarına hâlâ erişebilmesini sağlar ve uygulamanızın içinden dolandırıcılık etkinliklerinin gerçekleşmesini engeller.
Sıradaki ne?
Firebase Uygulama Denetimi'ni eklemek için aşağıdaki belgelere göz atın:
- Cloud Functions'ta Uygulamayı Etkinleştir
- Özel arka uçlarda Uygulama Kontrolü belirteçlerini doğrulayın