Bu sayfa, Cloud Translation API ile çevrilmiştir.

Gelişmiş Kimlik Doğrulama özellikleri

1. Ayarla

Kaynak kodunu alma

Bu codelab'de, Friendly Chat örnek uygulamasının neredeyse tamamlanmış bir sürümüyle başlayacaksınız. Bu nedenle, ilk yapmanız gereken kaynak kodu klonlamaktır:

$ git clone https://github.com/firebase/codelab-friendlychat-web --branch security

Ardından, bu codelab'in geri kalanında çalışacağınız security-start dizinine geçin:

$ cd codelab-friendlychat-web/security-start

Şimdi kodu çalıştırabilmek için bağımlılıkları yükleyin. Yavaş bir internet bağlantınız varsa bu işlem bir veya iki dakika sürebilir:

$ npm install && (cd functions && npm install)

Bu depoyu tanıyın

security-solution/ dizini, örnek uygulama için kodun tamamını içerir. security-start dizini, codelab'de çalışacağınız yerdir ve kimlik doğrulama uygulamasının önemli birkaç bölümü eksiktir. security-start/ ve security-solution/ içindeki önemli dosyalar ve özellikler:

functions/index.js, Cloud Functions kodu içerir ve kimlik doğrulama engelleme işlevlerini buraya yazacağınız yerdir.
public/ - Sohbet uygulamanızın statik dosyalarını içerir
public/scripts/main.js - sohbet uygulamanızın JS kodu (src/index.js) şu şekilde derlenir:
src/firebase-config.js - Sohbet uygulamanızı başlatmak için kullanılan Firebase yapılandırma nesnesini içerir
src/index.js - sohbet uygulamanızın JS kodu

Firebase CLI'ı edinme

Emulator Suite, Firebase CLI'ın (komut satırı arayüzü) bir parçasıdır ve aşağıdaki komutla makinenize yüklenebilir:

$ npm install -g firebase-tools@latest

Herkese açık/scripts/ dizininde main.js'yi oluşturan webpack ile JavaScript'i oluşturun.

webpack build

Ardından, KSA'nın en son sürümüne sahip olduğunuzu onaylayın. Bu codelab'in 11.14 veya sonraki sürümleriyle çalışır.

$ firebase --version
11.14.2

Firebase projenize bağlanın

Firebase projeniz yoksa Firebase konsolunda yeni bir Firebase projesi oluşturun. Daha sonra ihtiyacınız olacağından, seçtiğiniz proje kimliğini not edin.

Şimdi bu kodu Firebase projenize bağlamanız gerekiyor. Öncelikle Firebase CLI'ya giriş yapmak için aşağıdaki komutu çalıştırın:

$ firebase login

Ardından, proje takma adı oluşturmak için aşağıdaki komutu çalıştırın. $YOUR_PROJECT_ID kısmını Firebase projenizin kimliğiyle değiştirin.

$ firebase use $YOUR_PROJECT_ID

Artık uygulamayı çalıştırmaya hazırsınız.

2. Emülatörleri çalıştırma

Bu bölümde uygulamayı yerel olarak çalıştıracaksınız. Emulator Suite'i başlatma zamanı geldi.

Emülatörleri başlatın

Emülatörleri başlatmak için codelab kaynak dizininin içinde aşağıdaki komutu çalıştırın:

$ firebase emulators:start

Bu, uygulamanıza http://127.0.0.1:5170 adresinde hizmet verir ve siz değişiklik yaptıkça kaynak kodunuzu sürekli olarak yeniden oluşturur. Değişikliklerinizi görmek için tarayıcınızda yalnızca yerel olarak yenilemeniz (ctrl-shift-r) gerekir.

Şuna benzer bir çıkış alırsınız:

i  emulators: Starting emulators: auth, functions, firestore, hosting, storage
✔  functions: Using node@16 from host.
i  firestore: Firestore Emulator logging to firestore-debug.log
✔  firestore: Firestore Emulator UI websocket is running on 9150.
i  hosting[demo-example]: Serving hosting files from: ./public
✔  hosting[demo-example]: Local server: http://127.0.0.1:5170
i  ui: Emulator UI logging to ui-debug.log
i  functions: Watching "[...]" for Cloud Functions...
✔  functions: Loaded functions definitions from source: beforecreated.
✔  functions[us-central1-beforecreated]: providers/cloud.auth/eventTypes/user.beforeCreate function initialized (http://127.0.0.1:5011/[...]/us-central1/beforecreated).
i  Running script: npm start
 
> security@1.0.0 start
> webpack --watch --progress
[...]
webpack 5.50.0 compiled with 1 warning in 990 ms

Tüm emülatörler hazır mesajını gördüğünüzde uygulama kullanıma hazırdır.

3. MFA'yı Uygulama

Bu depoda MFA kısmen uygulandı. Önce bir kullanıcıyı MFA'ya kaydettirmek, ardından MFA'ya kayıtlı kullanıcılardan ikinci bir faktör olarak yararlanmalarını istemek için kodu ekleyin.

Düzenleyicinizde, src/index.js dosyasını açın ve startEnrollMultiFactor() yöntemini bulun. Telefonun kötüye kullanımını önleyecek reCAPTCHA doğrulayıcıyı ayarlamak için aşağıdaki kodu ekleyin (reCAPTCHA doğrulayıcısı görünmez olarak ayarlanmıştır ve kullanıcılar tarafından görülemez):

async function startEnrollMultiFactor(phoneNumber) {
  const recaptchaVerifier = new RecaptchaVerifier(
    "recaptcha",
    { size: "invisible" },
    getAuth()
  );

Ardından finishEnrollMultiFactor() yöntemini bulun ve ikinci faktörü kaydetmek için aşağıdakini ekleyin:

// Completes MFA enrollment once a verification code is obtained.
async function finishEnrollMultiFactor(verificationCode) {
  // Ask user for the verification code. Then:
  const cred = PhoneAuthProvider.credential(verificationId, verificationCode);
  const multiFactorAssertion = PhoneMultiFactorGenerator.assertion(cred);
 
  // Complete enrollment.
  await multiFactor(getAuth().currentUser)
    .enroll(multiFactorAssertion)
    .catch(function (error) {
      alert(`Error finishing second factor enrollment. ${error}`);
      throw error;
    });
  verificationId = null;
}

Daha sonra, signIn işlevini bulun ve MFA'ya kayıtlı kullanıcılardan ikinci faktörünü girmelerini isteyen aşağıdaki kontrol akışını ekleyin:

async function signIn() {
  // Sign in Firebase using popup auth and Google as the identity provider.
  var provider = new GoogleAuthProvider();
  await signInWithPopup(getAuth(), provider)
    .then(function (userCredential) {
      // User successfully signed in and is not enrolled with a second factor.
    })
    .catch(function (error) {
      if (error.code == "auth/multi-factor-auth-required") {
        multiFactorResolver = getMultiFactorResolver(getAuth(), error);
        displaySecondFactor(multiFactorResolver.hints);
      } else {
        alert(`Error signing in user. ${error}`);
      }
    });
}

Burada çağrılan işlevler dahil olmak üzere uygulamanın geri kalanı zaten tamamlanmıştır. Bunların nasıl çalıştığını görmek için dosyanın geri kalanına göz atın.

4. Emülatörlerde MFA ile oturum açmayı deneyin

Şimdi MFA uygulamasını deneyin. Emülatörlerinizin hâlâ çalıştığından emin olun ve localhost:5170 adresinde yerel olarak barındırılan uygulamayı ziyaret edin. Oturum açmayı deneyin. MFA kodunu girmeniz istendiğinde terminal pencerenizde MFA kodunu görürsünüz.

Emülatörler Çok Öğeli Kimlik Doğrulama'yı tam olarak desteklediğinden geliştirme ortamınız tamamen bağımsız olabilir.

MFA'yı uygulama hakkında daha fazla bilgi edinmek için referans belgelerimizi inceleyin.

5. Engelleme işlevi oluşturma

Bazı uygulamaların yalnızca belirli bir kullanıcı grubu tarafından kullanılması amaçlanır. Böyle durumlarda, bir kullanıcının uygulamanıza kaydolması veya uygulamanızda oturum açması için özel şartlar oluşturabilmek isteyebilirsiniz.

Engelleme işlevleri, özel kimlik doğrulama gereksinimleri oluşturmanın bir yolunu sunar. Bunlar Cloud Functions'dır ancak çoğu işlevin aksine kullanıcı kaydolmaya veya oturum açmaya çalıştığında eşzamanlı olarak çalışır.

Engelleme işlevi oluşturmak için düzenleyicinizde functions/index.js öğesini açın ve yorum yapılan beforecreated işlevini bulun.

Kodu, yalnızca example.com alan adına sahip kullanıcıların hesap oluşturmasına izin veren kodla değiştirin:

exports.beforecreated = beforeUserCreated((event) => {
  const user = event.data;
  // Only users of a specific domain can sign up.
  if (!user.email || !user.email.endsWith("@example.com")) {
    throw new HttpsError("invalid-argument", "Unauthorized email");
  }
});

6. Emülatörlerdeki engelleme işlevini deneyin

Engelleme işlevini denemek için emülatörlerinizin çalıştığından emin olun ve localhost:5170 adresindeki web uygulamasında oturumu kapatın.

Ardından, example.com ile bitmeyen bir e-posta adresi kullanarak hesap oluşturmayı deneyin. Engelleme işlevi, işlemin başarılı olmasını engeller.

Şimdi, example.com ile biten bir e-posta adresiyle tekrar deneyin. Hesap başarıyla oluşturulacak.

Engelleme işlevleriyle, kimlik doğrulamayla ilgili olarak ihtiyacınız olan her türlü kısıtlamaları oluşturabilirsiniz. Daha fazla bilgi edinmek için referans belgelerine göz atın.

Özet

Mükemmel! Kullanıcıların hesaplarını güvende tutmalarına yardımcı olmak için bir web uygulamasına Çok Öğeli Kimlik Doğrulaması'nı eklediniz ve ardından, kullanıcıların engelleme işlevlerini kullanarak kaydolmaları için özel şartlar oluşturdunuz. Kesinlikle bir GIF kazandınız!

ofisten çatı dansı yapan insanların GIF'i