Uygulama Kontrolü Web Codelab'i

1. Giriş

Last Updated: 2023-02-23

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

Gelen isteklerin, gerçek uygulamanızdan geldiğini belirten bir onay ile birlikte gelmesini zorunlu kılarak ve uygun 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 gerçekliğini doğrulamak için platforma özgü onay sağlayıcıları kullanır. Uygulama Kontrolü, web uygulamaları için onay sağlayıcı olarak reCAPTCHA v3 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 yapılan istekleri korumak için kullanılabilir.

Ne oluşturacaksınız?

Bu codelab'de, önce App Check'i ekleyip ardından zorunlu kılarak bir sohbet uygulamasının güvenliğini sağlayacaksınız.

Sizin tarafınızdan oluşturulan, başlangıç için uygun bir sohbet uygulaması.

Neler öğreneceksiniz?

  • Arka uçunuzu yetkisiz erişime karşı izleme
  • Firestore ve Cloud Storage'a zorunlu kılma nasıl eklenir?
  • Uygulamanızı yerel geliştirme için 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'nın yüklenmiş ve hesabınızla çalışacak şekilde yapılandırılmış olması
  • Terminal/konsol
  • Chrome gibi istediğiniz bir tarayıcı
  • Codelab'in örnek kodu (Kodu nasıl alacağınızla ilgili bilgileri codelab'in sonraki adımında bulabilirsiniz.)

2. Örnek kodu alın

Codelab'in GitHub deposunu komut satırından 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 klonlanmış depodaki 📁 appcheck-start dizinini açın veya içe aktarın. Bu 📁 appcheck-start dizini, tam işlevli bir sohbet web uygulaması olacak codelab'in başlangıç kodunu içerir. 📁 appcheck dizininde ise codelab'in tamamlanmış kodu bulunur.

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 ardından bir proje adı girin (örneğin, FriendlyChat).
  3. Devam'ı tıklayın.
  4. İstenirse Firebase şartlarını inceleyip kabul edin ve Devam'ı tıklayın.
  5. (İsteğe bağlı) Firebase konsolunda yapay zeka yardımını etkinleştirin ("Firebase'de Gemini" olarak adlandırılır).
  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. Proje oluştur'u tıklayın, projenizin hazırlanmasını bekleyin ve ardından Devam'ı tıklayın.

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

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

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

  1. Firebase konsolunda planınızı yükseltmeyi seçin.
  2. Blaze planını seçin. Bir Cloud Faturalandırma hesabını projenize bağlamak için ekrandaki talimatları uygulayın.
    Bu yükseltme kapsamında bir Cloud Faturalandırma hesabı oluşturmanız gerekiyorsa yükseltmeyi tamamlamak için Firebase Console'daki 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 58d6543a156e56f9.png tıklayın.
  2. Uygulamayı Friendly Chat takma adıyla kaydedin, ardından Bu uygulama için Firebase Hosting'i de ayarlayın seçeneğinin yanındaki kutuyu işaretleyin. Uygulamayı kaydet'i tıklayın.
  3. Sonraki adımda, npm kullanarak Firebase'i yüklemeye yönelik bir komut ve bir yapılandırma nesnesi görürsünüz. Bu nesneyi daha sonra codelab'de kopyalayacağınız için şimdilik Next'e (Sonraki) basın.

Firebase'i web uygulamanıza ekleme penceresi

  1. Ardından, Firebase CLI'yi 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 Sonraki'yi tıklayın.
  2. 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 Konsol'a Devam Et'i tıklayın. Firebase Hosting'e dağıtımı sonraki bir adımda yaparsı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ına olanak tanımak için Firebase Authentication.
  • 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 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ı özel yapılandırma gerektirir veya Firebase konsolu kullanılarak etkinleştirilmelidir.

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 kullanırız.

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

  1. Firebase konsolunda, sol paneldeki Build (Oluştur) bölümünü bulun.
  2. Kimlik doğrulama'yı, gerekirse Başlayın'ı, ardından Oturum açma yöntemi sekmesini tıklayın (veya doğrudan 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.

f96888973c3d00cc.png

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 Build'i (Oluştur) genişletin ve Firestore database'i (Firestore veritabanı) 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çin ve 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ıza güvenlik kuralları eklemeden uygulamayı herkese açık şekilde dağıtmayın veya herkese açık olarak 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 ayarlamak için:

  1. Firebase konsolunun sol panelinde Build'i (Oluştur) genişletin ve Storage'ı (Depolama) seçin.
  2. Başlayın'ı tıklayın.
  3. Varsayılan depolama paketinize bir konum seçin.
    US-WEST1, US-CENTRAL1 ve US-EAST1 bölgelerindeki paketler, Google Cloud Storage için "Daima Ücretsiz" katmanından yararlanabilir. Diğer tüm konumlardaki paketler için Google Cloud Storage fiyatlandırması ve kullanımı geçerlidir.
  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. Depolamapaketinize güvenlik kuralları eklemeden 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 işlevi çağırın:

firebase use --add

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

  1. Firebase konsolunda 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 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'ya ekleyin. Bu codelab'in geri kalanında değişkenin config olarak adlandırıldığı varsayılır.

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 girin:

firebase experiments:enable webframeworks

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

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

5. Uygulamayı App Check 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ükleyerek başlayın. Terminalinizden appcheck-start/hosting dizinine gidin. Bu dizindeyken npm install komutunu çalıştırın. Bu işlem, projenizin çalışması için gereken tüm bağımlılıkları getirir. Uygulamayı mevcut haliyle 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 üretimde görme zamanı! Web uygulamasını web'e dağıtmak için firebase deploy komutunu çalıştırın. Bu bölüm, reCAPTCHA Enterprise onay sağlayıcısı için bir alanın yapılandırılmasını gerektirdiğinden Uygulama Kontrolü'nün gerçek dünyada nasıl çalıştığını gösteren demoda önemli bir adımdır.

Umarız uygulamanın sunduğu varsayılan özelliği deneyimliyorsunuzdur. Sohbet mesajları gönderme ve yalnızca bu tür bir uygulamadan yapılması gereken diğer tüm işlemler. Mevcut durumun dezavantajı, önceki adımdaki uygulama yapılandırmanıza sahip olan herkesin arka uç kaynaklarınıza erişebilmesidir. Bu kullanıcıların Firestore ve Cloud Storage sistemlerinizdeki 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
  • Kullanımı doğrulama
  • Kuralları uygulamaya başlama

6. Uygulama Kontrolü'nü ve zorunlu kılmayı etkinleştirme

Öncelikle projeniz için bir reCAPTCHA Enterprise anahtarı alıp Uygulama Kontrolü'ne ekleyerek başlayalım. Başlamak için Google Cloud Console'un reCAPTCHA Enterprise bölümünü ziyaret edin. 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 (Kurumsal anahtarlar) seçeneğinin 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ü bir anahtar seçin. Uygulamanızın barındırıldığı alanları 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ınızı Firebase konsolunun Barındırma bölümünde bulabilirsiniz. Bu bilgileri doldurduktan sonra Bitti ve Anahtar Oluştur'a basın.

reCAPTCHA anahtarı oluşturma ekranı

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

reCAPTCHA Enterprise kayıt penceresi

Bu kimliği panonuza kopyalayın. Bu, Uygulama Kontrolü için kullandığınız anahtardır. Ardından Firebase konsolunun App Check bölümüne gidip Başlayın'ı tıklayın. Ardından Kaydet'i ve reCAPTCHA Enterprise'ı tıklayın ve kopyalanan kimliği reCAPTCHA Enterprise Site Anahtarı metin kutusuna yerleştirin. Diğer ayarları varsayılan şekilde bırakın. Uygulama Kontrolü sayfanız aşağıdaki gibi görünmelidir:

reCAPTCHA Enterprise jetonunuzu kaydettiğiniz Uygulama Kontrolü uygulamaları penceresi

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. Web uygulamasını yerel olarak çalıştırabilir ve Firebase arka ucuna istek göndermeye devam edebilirsiniz. İstekler Firebase arka ucuna gönderildiğinden bu istekler Uygulama Kontrolü tarafından izlenir ancak zorunlu kılınmaz. Gelen isteklerin durumunu görmek isterseniz Firebase konsolundaki App Check sayfasının API'ler sekmesindeki Cloud Firestore bölümünü ziyaret edebilirsiniz. İstemciyi henüz App Check'i kullanacak şekilde yapılandırmadığınız için şuna benzer bir mesaj görürsünüz:

Uygulamanız için% 100 doğrulanmamış istemci isteği gösteren bir Uygulama Kontrolü kontrol paneli.

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 faydalıdır.

Bu kontrol paneli birkaç şeyi gösterebilir. Bu metrik, ilk olarak tüm istemci uygulamalarınızın istemcinizin en son sürümünü çalıştırıp çalıştırmadığını gösterebilir. Bu durumda, uygulamanızın gerçek bir istemcisinin erişimini kapatma endişesi olmadan Uygulama Kontrolü'nü güvenle zorunlu kılabilirsiniz. Bu metrik, arka ucunuza uygulamanızdan gelmeden kaç erişim girişimi yapıldığını da gösterebilir. Bu, arka ucunuzu bilginiz olmadan doğrudan sorgulayan kullanıcılar olabilir. İsteklerin doğrulanmadığını görebildiğiniz için, bu kullanıcıların isteklerini doğrulamaya geçmeden önce arka uçunuza doğrulanmamış istek göndermiş olabilecek kullanıcıların isteklerine ne olacağını görme zamanı geldi.

Doğrulanmamış ve zorunlu kılınan istekler

Önceki ekranda Uygula düğmesine, ardından istenirse tekrar Uygula'ya basın.

Doğrulanmamış metrikler içeren ve Zorla düğmesinin vurgulandığı bir kontrol paneli

Bu işlem, Uygulama Kontrolü'nün zorunlu kılınmasını başlatır. Artık, seçtiğiniz onay sağlayıcı (bu durumda reCAPTCHA Enterprise) aracılığıyla doğrulanmayan arka uç hizmetlerinize yönelik istekleri engeller. 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ö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 gönderilen isteklerde geçerli bir onay jetonu bulunmadığı için bu istekleri engellemesinden kaynaklanır. Şimdilik Uygulama Kontrolü zorunluluğunu devre dışı bırakabilirsiniz. Bir sonraki bölümde ise reCAPTCHA Enterprise Uygulama Kontrolü'nü Friendly Chat örneğine nasıl ekleyeceğinizi inceleyebilirsiniz.

7. Siteye reCAPTCHA Enterprise anahtarı ekleme

Uygulamanıza kurumsal anahtarı ekleyeceğiz. Öncelikle hosting/src/firebase-config.js bağlantısı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ı getirin. Ayrıca, reCAPTCHA Enterprise sağlayıcısıyla çalışabilmek için Uygulama Kontrolü kitaplığını da 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. Bu işlev, öncelikle geliştirme ortamında olup olmadığınızı kontrol eder. Geliştirme ortamındaysanız 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 de Uygulama Kontrolü'nü seçtiğiniz sağlayıcıyla (bu örnekte reCAPTCHA Enterprise) çalışacak şekilde başlatma zamanı. Ardından, App Check jetonunuzu arka planda otomatik olarak yenilemek isteyebilirsiniz. Bu sayede, App Check jetonunuzun süresi dolmuşsa kullanıcının hizmetinizle etkileşiminde herhangi bir gecikme yaşanmaz.

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 az önce oluşturduğunuz setupAppCheck işlevini çağırmanız gerekir. hosting/src/index.js dosyasının en altına, yeni eklediğiniz yönteme yapılan çağrıyı ekleyin.

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

Önce yerel olarak test edin

Uygulamanızı önce yerel olarak test edin. Uygulamayı henüz 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 kaydettirmeniz ve localhost alanına kaydettirmemenizdir. Kullanıcıların, makinesinde yerel olarak çalışan bir uygulamadan kısıtlanmış arka uçlarınıza erişmesine izin verdiğinden, localhost'u asla onaylı alan olarak kaydetmemelisiniz. Bunun yerine, self.FIREBASE_APPCHECK_DEBUG_TOKEN = true değerini ayarladığı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 App Check yapılandırması'na yapıştırmanız gerekir.

Hata ayıklama jetonlarını yönetme konumunu gösteren uygulama kontrolü kontrol paneli

Jetona hatırlayacağınız benzersiz bir ad verin ve Kaydet'i tıklayın. Bu seçenek, uygulamanızla birlikte 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 jeton yerleştirmek, jetonun yanlışlıkla son kullanıcılara dağıtılmasına ve bu son kullanıcıların kontrollerinizi atlayarak jetonu kötüye kullanmasına neden olabilir. Örneğin, bir CI ortamında hata ayıklama jetonu dağıtmak istiyorsanız nasıl dağıtılacağı hakkında daha fazla bilgi edinmek için bu dokümanı okuyun.

Hata ayıklama jetonunu bir takma adla doldurma örneği

Hata ayıklama jetonunu Firebase konsoluna kaydettikten sonra App Check zorunluluğunu yeniden etkinleştirebilir ve terminalden firebase serve işlevini ç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. Hata ayıklama jetonunun konsola yazdırıldığı mesajı görmeye devam edersiniz.

Üretimde deneyin

Uygulama Denetimi'nin yerel olarak çalıştığından emin olduğunuzda web uygulamasını üretime dağıtın. Terminalinizden firebase deploy numarasını tekrar arayı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çabilirsiniz. Artık hata ayıklama jetonunun orada yazdırıldığını görmemeniz ve sohbetlerin projenize yüklendiğini görmeniz gerekir. Ayrıca, uygulamayla kısa bir süre etkileşimde bulunduktan sonra Firebase konsolunun App Check bölümünü ziyaret edebilir ve uygulamanıza yapılan isteklerin tümünün doğrulandığını onaylayabilirsiniz.

8. Tebrikler!

Tebrikler, Firebase App Check'i web uygulamasına başarıyla eklediniz.

Firebase konsolunu, üretim ortamları için bir reCAPTCHA Enterprise jetonunu işleyecek şekilde ayarladınız ve hatta yerel geliştirme için hata ayıklama jetonları ayarladınız. Bu sayede, uygulamalarınızın onaylı istemcilerden Firebase kaynaklarına erişmeye devam etmesi sağlanır ve uygulamanızda sahte işlemlerin gerçekleşmesi önlenir.

Sırada ne var?

Firebase Uygulama Kontrolü'nü aşağıdakilere eklemek için aşağıdaki belgelere göz atın:

Referans belgeleri