1. Kurulum
Kaynak kodunu alın
Bu codelab'de, Dostça Sohbet örnek uygulamasının neredeyse tamamlanmış bir sürümüyle başlarsınız, dolayısıyla yapmanız gereken ilk şey kaynak kodunu kopyalamaktı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. Daha yavaş bir internet bağlantınız varsa bu işlem bir veya iki dakika sürebilir:
$ npm install && (cd functions && npm install)
Bu repoyu tanıyın
security-solution/ dizini örnek uygulamaya ilişkin kodun tamamını içerir. security-start dizini codelab üzerinde çalışacağınız yerdir ve kimlik doğrulama uygulamasının birkaç önemli kısmı eksiktir. security-start/ ve security-solution/ içindeki temel dosyalar ve özellikler şunlardır:
-
functions/index.js, Cloud Functions kodunu içerir ve kimlik doğrulama engelleme işlevlerini yazacağınız yerdir. -
public/- sohbet uygulamanızın statik dosyalarını içerir -
public/scripts/main.js- sohbet uygulamanızın JS kodunun (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- sohbet uygulamanızın JS kodu
Firebase CLI'yi edinin
Emulator Suite, aşağıdaki komutla makinenize yüklenebilen Firebase CLI'nin (komut satırı arayüzü) bir parçasıdır:
$ npm install -g firebase-tools@latest
Javascript'i, public/scripts/ dizininde main.js oluşturacak webpack ile oluşturun.
webpack build
Ardından CLI'nin en son sürümüne sahip olduğunuzu doğrulayın. Bu codelab 11.14 veya üzeri sürümlerle ç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. Firebase CLI'de oturum açmak için öncelikle aşağıdaki komutu çalıştırın:
$ firebase login
Daha sonra bir proje takma adı oluşturmak için aşağıdaki komutu çalıştırın. $YOUR_PROJECT_ID 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ırın
Bu bölümde uygulamayı yerel olarak çalıştıracaksınız. Bu, Emulator Suite'i başlatma zamanının geldiği anlamına gelir.
Emülatörleri başlatın
Emülatörleri başlatmak için codelab kaynak dizininin içinden aşağıdaki komutu çalıştırın:
$ firebase emulators:start
Bu, uygulamanızı http://127.0.0.1:5170 adresinde sunacak ve siz değişiklik yaptıkça kaynak kodunuzu sürekli olarak yeniden oluşturacaktır. Değişikliklerinizi görmek için tarayıcınızda yerel olarak yalnızca donanım yenilemesi (ctrl-shift-r) yapmanız yeterli olacaktır.
Bunun gibi bazı çıktılar görmelisiniz:
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'nın Uygulanması
MFA bu depoda kısmen uygulandı. Kodu, önce bir kullanıcıyı MFA'ya kaydetmek ve ardından MFA'ya kayıtlı kullanıcılardan ikinci bir faktör istemek için ekleyeceksiniz.
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ı 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ğı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;
}
Daha sonra signIn işlevini bulun ve MFA'ya kayıtlı kullanıcılardan ikinci faktörlerini 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 tamamlandı. 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 hala çalıştığından emin olun ve localhost:5170 adresindeki yerel olarak barındırılan uygulamayı ziyaret edin. Oturum açmayı deneyin; MFA kodunu girmeniz istendiğinde terminal pencerenizde MFA kodunu göreceksiniz.
Emülatörler Multi-Factor Auth'u tam olarak desteklediğinden, geliştirme ortamınız tamamen bağımsız olabilir.
MFA'nın uygulanması hakkında daha fazla bilgi edinmek için referans belgelerimize bakın.
5. Engelleme işlevi oluşturun
Bazı uygulamalar yalnızca belirli bir kullanıcı grubu tarafından kullanılmak üzere tasarlanmıştır. Bu gibi durumlarda, bir kullanıcının uygulamanıza kaydolması veya oturum açması için özel gereksinimler oluşturabilmek istersiniz.
Engelleme işlevlerinin sağladığı şey budur: özel kimlik doğrulama gereksinimleri oluşturmanın bir yolu. Bunlar Bulut İşlevleridir, ancak çoğu işlevin aksine, bir kullanıcı kaydolmaya veya oturum açmaya çalıştığında eşzamanlı olarak çalışırlar.
Engelleme işlevi oluşturmak için düzenleyicinizde functions/index.js dosyasını açın ve beforecreated yorumlanan işlevi bulun.
Bunu, yalnızca example.com etki alanına sahip kullanıcıların hesap oluşturmasına izin veren bu 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 adresiyle bir hesap oluşturmayı deneyin. Engelleme işlevi işlemin başarılı olmasını engelleyecektir.
Şimdi, example.com ile biten bir e-posta adresiyle tekrar deneyin. Hesap başarıyla oluşturulacaktır.
Engelleme işlevleriyle, kimlik doğrulamayla ilgili ihtiyaç duyduğunuz kısıtlamaları oluşturabilirsiniz. Daha fazla bilgi edinmek için referans belgelerine bakın.
Özet
İyi iş! Kullanıcıların hesaplarını güvende tutmasına yardımcı olmak için bir web uygulamasına Multi-Factor Authentication'ı eklediniz ve ardından kullanıcıların engelleme işlevlerini kullanarak kaydolmaları için özel gereksinimler oluşturdunuz. Kesinlikle bir gif kazandınız!
