Uygulama Kontrolü Web Codelab'i

1. Giriş

Son güncelleme: 23.02.2023

Firebase kaynaklarınıza yetkisiz erişimi nasıl önleyebilirsiniz?

Yetkisiz istemcilerin arka uç kaynaklarınıza erişmesini önlemek için Firebase Uygulama Kontrolü'nü kullanabilirsiniz. Bu sayede, gelen isteklerin orijinal uygulamanızdan geldiğini gösteren bir onay eklenmesini zorunlu kılabilir ve uygun onayı olmayan trafiği engelleyebilirsiniz. Firebase Uygulama Kontrolü, istemcinin gerçekliğini doğrulamak için platforma özel onay sağlayıcılardan yararlanır. Uygulama Kontrolü, web uygulamaları için onay sağlayıcı olarak reCAPTCHA s3 ve reCAPTCHA Enterprise'ı destekler.

Uygulama Kontrolü; Cloud Firestore, Realtime Database, Cloud Functions, Identity Platform ile Firebase Authentication ve kendi barındırdığınız arka uçlara yönelik istekleri korumak için kullanılabilir.

Ne oluşturacaksınız?

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.

Neler öğreneceksiniz?

• Arka ucunuzu yetkisiz erişime karşı izleme
• Firestore ve Cloud Storage'a yaptırım ekleme
• Yerel geliştirme için uygulamanızı hata ayıklama jetonuyla çalıştırma

Gerekenler

• Tercih ettiğiniz IDE/metin düzenleyici
• Genellikle Node.js ile birlikte gelen paket yöneticisi npm
• Firebase CLI, hesabınızla çalışacak şekilde yüklenmiş ve yapılandırılmış olmalıdır.
• Terminal/konsol
• Chrome gibi tercih ettiğiniz bir tarayıcı
• Codelab'in örnek kodu (Kodu nasıl alacağınızı öğrenmek için codelab'in sonraki adımına bakın.)

2. Örnek kodu alın

Komut satırından codelab'in GitHub deposunu klonlayı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 aktarma

IDE'nizi kullanarak klonlanan depodaki 📁 appcheck-start dizinini açın veya içe aktarın. Bu 📁 appcheck-start dizini, codelab'in başlangıç kodunu içerir. Bu kod, tam işlevli bir sohbet web uygulamasıdır. 📁 appcheck dizini, codelab'in tamamlanmış kodunu içerir.

3. Firebase projesi oluşturma ve ayarlama

Firebase projesi oluşturma

1. Google Hesabınızı kullanarak Firebase konsolunda oturum açın.
2. Yeni bir proje oluşturmak için düğmeyi tıklayın ve bir proje adı (ör. FriendlyChat) girin.
   
3. Devam'ı tıklayın.
4. İstenirse Firebase şartlarını inceleyip kabul edin ve ardından Devam'ı tıklayın.
5. (İsteğe bağlı) Firebase konsolunda Yapay Zeka Desteği'ni ("Firebase'de Gemini" olarak adlandırılır) etkinleştirin.
6. Bu codelab için Google Analytics'e ihtiyacınız yoktur. Bu nedenle Google Analytics seçeneğini devre dışı bırakın.
7. Create project'i (Proje oluştur) tıklayın, projenizin temel hazırlığının tamamlanmasını bekleyin ve ardından Continue'yu (Devam) tıklayın.

Firebase fiyatlandırma planınızı yükseltme

Cloud Storage for Firebase'i kullanmak için Firebase projenizin kullandıkça öde (Blaze) fiyatlandırma planında olması gerekir. Bu, projenin bir Cloud Faturalandırma Hesabı'na bağlı olduğu anlamına gelir.

• Cloud Faturalandırma Hesabı için kredi kartı gibi bir ödeme yöntemi gerekir.
• Firebase ve Google Cloud'u kullanmaya yeni başladıysanız 300 ABD doları kredi ve ücretsiz deneme Cloud Faturalandırma Hesabı için uygun olup olmadığınızı kontrol edin.
• Bu codelab'i bir etkinlik kapsamında yapıyorsanız etkinliği düzenleyen kişiye Cloud kredisi olup olmadığını sorun.

Projenizi Blaze planına yükseltmek için aşağıdaki adımları uygulayın:

1. Firebase konsolunda planınızı yükseltmeyi seçin.
2. Blaze planını seçin. Projenize bir Cloud Faturalandırma Hesabı bağlamak için ekrandaki talimatları uygulayın.
   Bu yükseltme kapsamında bir Cloud Faturalandırma Hesabı oluşturmanız gerektiyse yükseltmeyi tamamlamak için Firebase konsolundaki yükseltme akışına geri dönmeniz gerekebilir.

Projeye Firebase web uygulaması ekleme

1. Yeni bir Firebase web uygulaması oluşturmak için web simgesini tıklayın.
2. Uygulamayı Friendly Chat takma adıyla kaydedin, ardından Bu uygulama için Firebase Hosting'i de kur'un yanındaki kutuyu işaretleyin. Uygulamayı kaydet'i tıklayın.
3. Sonraki adımda, npm ve yapılandırma nesnesi kullanarak Firebase'i yükleme komutunu görürsünüz. Bu nesneyi codelab'in ilerleyen bölümlerinde kopyalayacaksınız. Şimdilik Next'i (Sonraki) tıklayın.

4. Ardından, Firebase CLI'yı yükleme seçeneğini görürsünüz. Henüz yüklemediyseniz npm install -g firebase-tools komutunu kullanarak şimdi yükleyin. Ardından Next'i (Sonraki) tıklayın.
5. Ardından Firebase'e giriş yapma ve Firebase Hosting'e dağıtma seçeneğini görürsünüz. firebase login komutunu kullanarak Firebase'e giriş yapın ve Continue to Console'u (Konsola Devam Et) tıklayın. Sonraki adımlarda Firebase Hosting'e dağıtım yapacaksınız.

Firebase ürünlerini ayarlama

Oluşturacağımız uygulama, web uygulamaları için kullanılabilen Firebase ürünlerini kullanır:

• Kullanıcılarınızın uygulamanızda kolayca oturum açmasını sağlayan Firebase Authentication.
• Cloud Firestore, yapılandırılmış verileri buluta kaydetmek ve veriler değiştiğinde anında bildirim almak için kullanılır.
• Dosyaları buluta kaydetmek için Cloud Storage for Firebase
• Öğelerinizi barındırmak ve sunmak için Firebase Hosting.
• Push bildirimleri göndermek ve tarayıcı pop-up bildirimlerini göstermek için Firebase Cloud Messaging.
• Uygulamanız için kullanıcı performansı verilerini toplamak üzere Firebase Performance Monitoring.

Bu ürünlerden bazılarının özel olarak yapılandırılması veya Firebase konsolu kullanılarak etkinleştirilmesi gerekir.

Firebase Authentication için Google ile Oturum Açma'yı etkinleştirme

Kullanıcıların Google Hesaplarıyla web uygulamasında oturum açmasına izin vermek için Google ile oturum açma yöntemini kullanacağız.

Google ile Oturum Açma'yı etkinleştirmeniz gerekir:

1. Firebase konsolunda, sol paneldeki Derleme bölümünü bulun.
2. Authentication'ı (Kimlik Doğrulama) tıklayın, varsa Get Started'ı (Başlayın) tıklayın, ardından Sign-in method (Oturum açma yöntemi) sekmesini tıklayın (veya doğrudan bu sekmeye gitmek için burayı tıklayın).
3. Google ile oturum açma sağlayıcısını etkinleştirme
4. Uygulamanızın herkese açık adını Friendly Chat olarak ayarlayın ve açılır menüden bir proje destek e-postası seçin.
5. Kaydet'i tıklayın.

Cloud Firestore'u ayarlama

Web uygulaması, sohbet mesajlarını kaydetmek ve yeni sohbet mesajları almak için Cloud Firestore'u kullanır.

Firebase projenizde Cloud Firestore'u nasıl ayarlayacağınız aşağıda açıklanmıştır:

1. Firebase konsolunun sol panelinde Derleme'yi genişletin ve Firestore veritabanı'nı seçin.
2. Create database'i (Veritabanı oluştur) tıklayın.
3. Veritabanı kimliği'ni (default) olarak bırakın.
4. Veritabanınız için bir konum seçip Sonraki'yi tıklayın.
   Gerçek bir uygulama için kullanıcılarınıza yakın bir konum seçmeniz gerekir.
5. Test modunda başlat'ı tıklayın. Güvenlik kurallarıyla ilgili sorumluluk reddi beyanını okuyun.
   Bu codelab'in ilerleyen bölümlerinde, verilerinizin güvenliğini sağlamak için güvenlik kuralları ekleyeceksiniz. Veritabanınız için güvenlik kuralları eklemeden uygulamayı herkese açık olarak dağıtmayın veya kullanıma sunmayın.
6. Oluştur'u tıklayın.

Cloud Storage for Firebase'i ayarlama

Web uygulaması, resimleri depolamak, yüklemek ve paylaşmak için Cloud Storage for Firebase'i kullanır.

Firebase projenizde Cloud Storage for Firebase'i şu şekilde ayarlayabilirsiniz:

1. Firebase konsolunun sol panelinde Build'i (Derleme) genişletin ve Storage'ı (Depolama) seçin.
2. Başlayın'ı tıklayın.
3. Varsayılan depolama alanı paketiniz için bir konum seçin.
   US-WEST1, US-CENTRAL1 ve US-EAST1 konumlarındaki paketler, Google Cloud Storage için "Daima Ücretsiz" katmanından yararlanabilir. Diğer tüm konumlardaki paketler, Google Cloud Storage fiyatlandırması ve kullanımına tabidir.
4. Test modunda başlat'ı tıklayın. Güvenlik kurallarıyla ilgili sorumluluk reddi beyanını okuyun.
   Bu codelab'in ilerleyen bölümlerinde, verilerinizin güvenliğini sağlamak için güvenlik kuralları ekleyeceksiniz. Storage paketiniz için güvenlik kuralları eklemeden bir uygulamayı herkese açık olarak dağıtmayın veya kullanıma sunmayın.
5. Oluştur'u tıklayın.

4. Firebase'i yapılandırma

appcheck-start dizininden şu komutu çalıştırın:

firebase use --add

İstendiğinde proje kimliğinizi seçin ve Firebase projenize bir takma ad verin. Bu proje için default takma adını kullanabilirsiniz. Ardından, yerel projenizi Firebase ile çalışacak şekilde yapılandırmanız gerekir.

1. Firebase konsolundaki Proje ayarlarınıza gidin.
2. "Uygulamalarınız" kartında, yapılandırma nesnesine ihtiyacınız olan uygulamanın takma adını seçin.
3. Firebase SDK snippet'i bölmesinden Config'i (Yapılandırma) seçin.
4. Yapılandırma nesnesi snippet'ini kopyalayın ve appcheck-start/hosting/src/firebase-config.js dosyasına ekleyin. Codelab'in geri kalanında değişkenin adı config olarak kabul edilir.

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.firebasestorage.app",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID",
  measurementId: "G-MEASUREMENT_ID",
};

Aynı appcheck-start dizininden şu komutu çalıştırın:

firebase experiments:enable webframeworks

Bu işlem, projenin oluşturulduğu web çerçevesi desteğini etkinleştirir.

Artık projenizi çalıştırmaya ve varsayılan projenin çalışıp çalışmadığını test etmeye hazırız.

5. Uygulamayı Uygulama Kontrolü olmadan deneme

Uygulamanızı yapılandırdığınıza ve SDK'yı ayarladığınıza göre, uygulamayı ilk tasarlandığı şekilde kullanmayı deneyin. İlk olarak tüm bağımlılıkları yükleyin. Terminalinizden appcheck-start/hosting dizinine gidin. Bu dizindeyken npm install komutunu çalıştırın. Bu komut, projenizin çalışması için gereken tüm bağımlılıkları getirir. Uygulamayı mevcut durumunda başlatmak için firebase serve komutunu çalıştırabilirsiniz. Uygulama, Google Hesabı ile giriş yapmanızı ister. Giriş yaptıktan sonra sohbete birkaç sohbet mesajı ve fotoğraf göndermeyi deneyin.

Yerel olarak test ettiğinize göre artık üretim ortamında görebilirsiniz. Web uygulamasını web'e dağıtmak için firebase deploy komutunu çalıştırın. Bu bölüm, Uygulama Kontrolü'nün gerçek dünyada nasıl çalıştığını göstermek için çok önemli bir adımdır. Çünkü reCAPTCHA Enterprise onay sağlayıcısı için bir alan adının yapılandırılması gerekir.

Uygulamanın varsayılan özelliğini kullanabiliyorsunuzdur. Sohbet mesajları gönderme ve yalnızca bu tür bir uygulamadan yapılması gereken diğer her şey. Mevcut durumun dezavantajı, önceki adımda uygulama yapılandırmanızı alan herkesin arka uç kaynaklarınıza erişebilmesidir. Bu kullanıcıların Firestore ve Cloud Storage sistemlerinizde geçerli olan güvenlik kurallarına uyması gerekir. Bunun dışında, bu sistemlerde depolanan verileri sorgulayabilir, depolayabilir ve verilere erişebilirler.

Sonraki birkaç adımda şunları yapacaksınız:

• Uygulama Kontrolü'ne kaydolma
• Yaptırımı doğrulama
• Kuralları uygulamaya başlama

6. Uygulama Kontrolü'nü ve yaptırımı etkinleştirme

Öncelikle projeniz için bir reCAPTCHA Enterprise anahtarı alıp bunu Uygulama Kontrolü'ne ekleyelim. Google Cloud Console'un reCAPTCHA Enterprise bölümüne giderek başlayın. Projenizi seçtiğinizde reCAPTCHA Enterprise API'yi etkinleştirmeniz istenir. API'yi etkinleştirin ve işlemin tamamlanması için birkaç dakika bekleyin. Ardından Enterprise keys'in (Kurumsal anahtarlar) yanındaki Create Key'i (Anahtar Oluştur) tıklayın. Ardından bu bölümde bir görünen ad belirtin ve Web sitesi türünde bir anahtar seçin. Uygulamanızın barındırıldığı alanları belirtmeniz gerekir. Bu uygulamayı Firebase Hosting'de barındırmayı planladığınız için genellikle ${YOUR_PROJECT_ID}.web.app olan varsayılan ana makine adını kullanırsınız. Barındırma alanınızı Firebase Console'un Barındırma bölümünde bulabilirsiniz. Bu bilgileri doldurduktan sonra Bitti ve Anahtar Oluştur'a basın.

İşlem tamamlandığında, Anahtar Ayrıntıları sayfasının üst kısmında bir kimlik görürsünüz.

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üne gidin ve Başlayın'ı tıklayın. Ardından Register'ı (Kaydol) ve reCAPTCHA Enterprise'ı tıklayın ve kopyalanan kimliği reCAPTCHA Enterprise Site Key (reCAPTCHA Enterprise Site Anahtarı) metin kutusuna yerleştirin. Kalan ayarları varsayılan değerlerinde bırakın. Uygulama Kontrolü sayfanız aşağıdaki gibi görünmelidir:

Doğrulanmamış ve uygulanmamış istekler

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 uygulamasını yerel olarak çalıştırabilir ve Firebase arka ucuna tekrar istek göndermeye başlayabilirsiniz. İstekler Firebase arka ucuna gönderildiğinden Uygulama Kontrolü tarafından izlenir ancak yaptırım uygulanmaz. Gelen isteklerin durumunu görmek isterseniz Firebase konsolundaki Uygulama Kontrolü sayfasının API'ler sekmesinde Cloud Firestore bölümüne gidebilirsiniz. İstemciyi henüz Uygulama Kontrolü'nü kullanacak şekilde yapılandırmadığınız için şuna benzer bir şey görürsünüz:

Arka uçta %100 doğrulanmamış istekler geliyor. Bu ekran, neredeyse tüm istemci isteklerinin Uygulama Kontrolü entegrasyonu olmayan istemcilerden geldiğini gösterdiği için kullanışlıdır.

Bu kontrol paneli birkaç farklı durumu gösterebilir. İlk olarak, tüm istemci uygulamalarınızın istemcinizin en yeni sürümünü çalıştırıp çalıştırmadığını gösterebilir. Uygulama Kontrolü'nü, uygulamanızın gerçek bir istemcisinin erişimini kapatma endişesi olmadan güvenle uygulayabilirsiniz. Bu sayede, uygulamanızın dışından arka ucunuza erişmek için kaç deneme yapıldığını da öğrenebilirsiniz. Bu denemeler, bilginiz olmadan doğrudan arka ucunuzu sorgulayan kullanıcılar tarafından yapılmış olabilir. İsteklerin doğrulanmadığını gördüğünüze göre, isteklerini doğrulamaya geçmeden önce arka ucunuza doğrulanmamış istek gönderebilecek kullanıcılara ne olacağını görmenin zamanı geldi.

Doğrulanmamış ve yaptırım uygulanan istekler

Önceki ekranda Zorunlu kıl düğmesine basın ve istenirse tekrar Zorunlu kıl'a basın.

Bu işlem, Uygulama Kontrolü'nü zorunlu kılmaya başlar. Artık seçtiğiniz onay sağlayıcı (bu örnekte reCAPTCHA Enterprise) aracılığıyla doğrulanmayan arka uç hizmetlerinize yönelik istekler engellenir. http://localhost:5000 adresinde çalışan web uygulamanıza dönün. Sayfayı yenileyip veritabanından veri almaya çalıştığınızda hiçbir şey olmaz. Hataları okumak için Chrome konsolunu açtığınızda aşağıdakine benzer bir şey görürsünüz:

Uncaught Error in snapshot listener: FirebaseError: [code=permission-denied]: Missing or insufficient permissions.

Bu, Uygulama Kontrolü'nün Firebase kaynaklarınıza yönelik isteklerinde geçerli bir onay jetonu iletmeyen istekleri engellediği anlamına gelir. Şimdilik Uygulama Kontrolü yaptırımını devre dışı bırakabilirsiniz. Sonraki bölümde, Friendly Chat örneğine reCAPTCHA Enterprise Uygulama Kontrolü'nü nasıl ekleyeceğinizi inceleyeceksiniz.

7. Siteye reCAPTCHA Enterprise anahtarı ekleme

Uygulamanıza kurumsal anahtarı ekleyeceğiz. Öncelikle hosting/src/firebase-config.js dosyasını açın ve reCAPTCHA Enterprise anahtarınızı aşağıdaki kod snippet'ine ekleyin:

const reCAPTCHAEnterpriseKey = {
  // Replace with your recaptcha enterprise site key
  key: "Replace with your recaptcha enterprise site key"
};

Bu işlem tamamlandıktan sonra hosting/src/index.js dosyasını açın ve 51. satıra firebase-config.js dosyasından bir içe aktarma işlemi ekleyerek reCAPTCHA anahtarınızı alın ve reCAPTCHA Enterprise sağlayıcısıyla çalışabilmek için Uygulama Kontrolü kitaplığını içe aktarın.

// 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 eder ve öyleyse yerel geliştirme için kullanabileceğiniz bir hata ayıklama jetonu yazdırı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

Şimdi Uygulama Kontrolü'nü seçtiğiniz sağlayıcıyla (bu örnekte reCAPTCHA Enterprise) çalışacak şekilde başlatabilirsiniz. Ardından, Uygulama Kontrolü jetonunuzu arka planda otomatik olarak yenilemek istersiniz. Bu sayede, Uygulama Kontrolü jetonunun süresi dolduğunda kullanıcının hizmetinizle etkileşim kurmasından kaynaklanan gecikmeler önlenir.

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, son eklediğiniz yönteme çağrıyı ekleyin.

const firebaseApp = initializeApp(getFirebaseConfig());
// add from here
setupAppCheck(firebaseApp);
// to here
getPerformance();
initFirebaseAuth();
loadMessages();

Önce yerel olarak test etme

Uygulamanızı önce yerel olarak test edin. Uygulamayı yerel olarak sunmuyorsanız firebase serve komutunu çalıştırın. Uygulamanın yerel olarak yüklenemediğini fark edeceksiniz. Bunun nedeni, Firebase alanınızı yalnızca reCAPTCHA onay sağlayıcısına kaydetmeniz ve yerel ana makine alanını kaydetmemenizdir. Kullanıcıların, makinelerinde yerel olarak çalışan bir uygulamadan kısıtlanmış arka uçlarınıza erişmesine olanak tanıdığı için localhost'u hiçbir zaman onaylanmış alan olarak kaydetmemeniz gerekir. Bunun yerine, self.FIREBASE_APPCHECK_DEBUG_TOKEN = true ayarını yaptığınız için JavaScript konsolunuzda şuna benzer bir satır olup olmadığını kontrol etmeniz gerekir:

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 (örnekte 55183c20-de61-4438-85e6-8065789265be) alıp uygulamanızın taşma menüsündeki Uygulama Kontrolü yapılandırmasına eklemeniz gerekir.

Jetona 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 jeton kullanmanıza olanak tanır. Bu, hata ayıklama jetonu oluşturup uygulamanıza yerleştirmekten daha güvenli bir alternatiftir. Uygulamaya bir jeton yerleştirilmesi, jetonun yanlışlıkla son kullanıcılara dağıtılmasına neden olabilir ve bu son kullanıcılar, kontrollerinizi atlayarak jetonu kötüye kullanabilir. Hata ayıklama jetonunu dağıtmak istiyorsanız (ör. CI ortamında) dağıtım hakkında daha fazla bilgi edinmek için bu belgeyi okuyun.

Hata ayıklama jetonunu Firebase konsoluna kaydettikten sonra Uygulama Kontrolü yaptırımını yeniden etkinleştirebilir ve terminalden firebase serve komutunu ç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örürsünüz. Konsolda hata ayıklama jetonunu içeren mesajı görmeye devam edersiniz.

Üretimde deneme

Uygulama Kontrolü'nün yerel olarak çalıştığından emin olduktan sonra web uygulamasını üretim ortamına dağıtın. Terminalinizden firebase deploy komutunu tekrar çağırın ve sayfayı yeniden yükleyin. Bu işlem, web uygulamanızı Firebase Hosting'de çalışacak şekilde paketler. Uygulamanız Firebase Hosting'de barındırıldıktan sonra ${YOUR_PROJECT_ID}.web.app adresinden uygulamanızı ziyaret etmeyi deneyin. JavaScript konsolunu açtığınızda, hata ayıklama jetonunun artık orada yazdırılmadığını ve sohbetlerin projenize yüklendiğini görürsünüz. Ayrıca, uygulamayla bir süre etkileşimde bulunduktan sonra Firebase konsolunun Uygulama Kontrolü bölümünü ziyaret edebilir ve uygulamanıza gönderilen isteklerin tümünün doğrulandığını onaylayabilirsiniz.

8. Tebrikler!

Tebrikler, Firebase Uygulama Kontrolü'nü bir web uygulamasına başarıyla eklediniz.

Firebase konsolunu, üretim ortamları için reCAPTCHA Enterprise jetonunu işleyecek şekilde ayarladınız ve hatta yerel geliştirme için hata ayıklama jetonları oluşturdunuz. Bu sayede, uygulamalarınız onaylı istemcilerden Firebase kaynaklarına erişmeye devam edebilir ve uygulamanızda sahtekarlık içeren etkinliklerin gerçekleşmesi önlenir.

Sıradaki adımlar

Firebase Uygulama Kontrolü'nü aşağıdaki platformlara eklemek için ilgili dokümanları inceleyin:

• Cloud Functions'da yaptırımı etkinleştirme
• Özel arka uçlarda App Check jetonlarını doğrulama

Referans belgeler

• Web uygulamalarında reCAPTCHA Enterprise ile Uygulama Kontrolü'nü kullanmaya başlama
• Web uygulamalarında hata ayıklama sağlayıcısını kullanma