Gelişmiş Kimlik Doğrulama özellikleri

1. Kur

Kaynak kodu alma

Bu codelab'de, Friendly Chat örnek uygulamasının neredeyse tamamlanmış bir sürümüyle başlayacaksınız. Bu nedenle, yapmanız gereken ilk şey 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 gidin:

$ cd codelab-friendlychat-web/security-start

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

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

Bu depo hakkında bilgi edinme

security-solution/ dizini, örnek uygulamanın tam kodunu içerir. security-start dizini, codelab'i tamamlayacağınız yerdir ve kimlik doğrulama uygulamasının birkaç önemli bölümü eksiktir. security-start/ ve security-solution/'daki temel dosyalar ve özellikler şunlardır:

• functions/index.js, Cloud Functions kodunu içerir ve kimlik doğrulama engelleme işlevlerini burada yazarsınız.
• public/: Chat uygulamanızın statik dosyalarını içerir.
• public/scripts/main.js: Chat uygulaması JS kodunuzun (src/index.js) derlendiği yer
• src/firebase-config.js - Sohbet uygulamanızı başlatmak için kullanılan Firebase yapılandırma nesnesini içerir.
• src/index.js - Chat uygulamanızın JS kodu

Firebase CLI'yı edinme

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

$ npm install -g firebase-tools@latest

JavaScript'i webpack ile oluşturun. Bu işlem, public/scripts/ dizininde main.js dosyasını oluşturur.

webpack build

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

$ firebase --version
11.14.2

Firebase projenize bağlanma

Yeni bir 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, Authentication MFA Codelab).
   

   Bu proje adı, Firebase arayüzlerinde görünen ad olarak kullanılır ve Firebase, bu proje adına dayalı olarak benzersiz bir proje kimliğini otomatik olarak oluşturur. Tercih ettiğiniz proje kimliğini ayarlamak için Düzenle simgesini tıklayabilirsiniz. Ancak proje oluşturulduktan sonra bu kimliği değiştiremezsiniz.

   Proje kimliğinizi unutmayın. Firebase projenizi Firebase CLI'de tanımlamak için daha sonra bu kimliğe ihtiyacınız olacak. Kimliğinizi unutursanız daha sonra Proje Ayarları'nda bulabilirsiniz.

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.

Kodunuzu Firebase projenize bağlama

Şimdi bu kodu Firebase projenize bağlamanız gerekir. Önce Firebase CLI'de oturum açmak 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 yerine Firebase projenizin kimliğini yazın.

$ 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. Bu, Emulator Suite'i başlatma zamanı geldiği anlamına gelir.

Emülatörleri başlatma

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

$ firebase emulators:start

Bu işlem, uygulamanızı http://127.0.0.1:5170 adresinde sunar ve 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 zorunlu yenileme (ctrl-shift-r) yapmanız gerekir.

Aşağıdakine benzer bir çıkış görmeniz gerekir:

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ır demektir.

3. MFA'yı uygulama

Çok faktörlü kimlik doğrulama bu depoda kısmen uygulanmıştır. Önce kullanıcıları MFA'ya kaydetmek, ardından MFA'ya kayıtlı kullanıcılardan ikinci bir faktör istemek için kodu eklersiniz.

NOT: ÇÇK'yı uygulamak için kullanacağınız temel yöntemler şunlardır:

• getMultiFactorResolver(): Kullanıcıların ikinci bir faktör sağlaması gerektiğinde oturum açmalarını kolaylaştırmak için kullanılan bir MultiFactorResolver nesnesi alır.
• verifyPhoneNumber(): Hem çok faktörlü kimlik doğrulama kaydı hem de oturum açma için kullanıcının telefonuna doğrulama mesajı gönderir.
• resolveSignIn(): Kullanıcıya gönderilen doğrulama kodu sağlandıktan sonra oturum açma işlemini tamamlamak için kullanılır.
• enroll(): Kullanıcıya gönderilen doğrulama kodu sağlandıktan sonra MFA kaydını tamamlamak için kullanılır.

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

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ğıdakileri 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;
}

Ardından, signIn işlevini bulun ve MFA'ya kayıtlı kullanıcılardan ikinci etmenlerini 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 de dahil olmak üzere uygulamanın geri kalanı zaten tamamlanmıştır. Nasıl çalıştıkları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 çalışmaya devam ettiğinden emin olun ve yerel olarak barındırılan uygulamayı localhost:5170 adresinde ziyaret edin. Oturum açmayı deneyin. Çok faktörlü kimlik doğrulama kodunu girmeniz istendiğinde terminal pencerenizde çok faktörlü kimlik doğrulama kodunu görürsünüz.

Emülatörler çok faktörlü kimlik doğrulamayı tam olarak desteklediğinden geliştirme ortamınız tamamen bağımsız olabilir.

Çok faktörlü kimlik doğrulama uygulama hakkında daha fazla bilgi edinmek için referans dokümanlarımızı inceleyin.

5. Engelleme işlevi oluşturma

Bazı uygulamalar yalnızca belirli bir kullanıcı grubu tarafından kullanılmak üzere tasarlanmıştır. Bu gibi durumlarda, kullanıcıların uygulamanıza kaydolması veya uygulamada oturum açması için özel koşullar oluşturabilmek istersiniz.

Engelleme işlevleri, özel kimlik doğrulama koşulları oluşturmanın bir yolunu sunar. Bu işlevler Cloud Functions işlevleridir ancak çoğu işlevden farklı olarak, kullanıcı kaydolmaya veya oturum açmaya çalıştığında eş zamanlı olarak çalışırlar.

NOT: Engelleme işlevi, kullanıcıyı değişiklik yapmadan kabul edebilir, kullanıcıyı kabul edip değiştirebilir (bu, özel talepleri uygulamak için kullanışlıdır) veya kullanıcıyı reddedebilir.

Engelleme işlevini tetikleyebilecek iki etkinlik vardır:

• beforeUserCreated etkinlikleri: Kullanıcı hesabı oluşturulmadan önce tetiklenir. Kullanıcıların hesap oluşturması için gereken koşulları belirtmek amacıyla kullanılabilir.
• beforeUserSignedIn etkinlikleri: Kullanıcı oturum açmadan önce tetiklenir. Kullanıcıların oturum açması için gereken koşulları belirtmek amacıyla kullanılabilir.

Bir engelleme işlevi oluşturmak için düzenleyicinizde functions/index.js simgesini açın ve yorum satırı yapılmış beforecreated işlevini bulun.

Bu kodu, yalnızca example.com alanına sahip kullanıcıların hesap oluşturmasına izin veren aşağıdaki 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örlerde engelleme işlevini deneme

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 adresiyle 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şturulur.

Engelleme işlevleriyle kimlik doğrulama konusunda ihtiyacınız olan tüm kısıtlamaları oluşturabilirsiniz. Daha fazla bilgi edinmek için referans belgelerini inceleyin.

Özet

Tebrikler! Kullanıcıların hesaplarını güvende tutmasına yardımcı olmak için bir web uygulamasına çok öğeli kimlik doğrulamayı eklediniz ve ardından kullanıcıların engelleme işlevlerini kullanarak kaydolması için özel şartlar oluşturdunuz. Kesinlikle bir GIF kazandınız!