JavaScript Kullanarak Firebase ile Telefon Numarasıyla Kimlik Doğrulama

Kullanıcının telefonuna SMS mesajı göndererek kullanıcıların oturum açmasını sağlamak için Firebase Authentication simgesini kullanabilirsiniz. Kullanıcı, SMS mesajında yer alan tek seferlik kodu kullanarak oturum açar.

Uygulamanıza telefon numarasıyla oturum açma özelliğini eklemenin en kolay yolu, telefon numarasıyla oturum açma, şifre tabanlı ve birleştirilmiş oturum açma için oturum açma akışlarını uygulayan bir hazır oturum açma widget'ı içeren FirebaseUI'yı kullanmaktır. Bu belgede, Firebase SDK'sını kullanarak telefon numarasıyla oturum açma akışının nasıl uygulanacağı açıklanmaktadır.

Son kullanıcıların kimlik doğrulama için sağladığı telefon numaraları, Firebase dahil ancak bununla sınırlı olmamak üzere Google hizmetlerinde spam ve kötüye kullanımı önleme çalışmalarımızı iyileştirmek için Google tarafından gönderilir ve depolanır. Geliştiriciler, Firebase Authentication telefon numarasıyla oturum açma hizmetini kullanmadan önce uygun son kullanıcı iznini aldıklarından emin olmalıdır.

Başlamadan önce

Henüz yapmadıysanız Firebase konsolundan başlatma snippet'ini Firebase'i JavaScript projenize ekleme bölümünde açıklandığı şekilde projenize kopyalayın.

Güvenlikle ilgili endişeler

Yalnızca telefon numarası kullanılarak yapılan kimlik doğrulama, diğer yöntemlere kıyasla daha az güvenlidir. Bunun nedeni, telefon numarası sahipliğinin kullanıcılar arasında kolayca aktarılabilmesidir. Ayrıca, birden fazla kullanıcı profili olan cihazlarda SMS mesajı alabilen tüm kullanıcılar, cihazın telefon numarasını kullanarak bir hesapta oturum açabilir.

Uygulamanızda telefon numarası tabanlı oturum açma özelliğini kullanıyorsanız bu özelliği daha güvenli oturum açma yöntemleriyle birlikte sunmalı ve kullanıcıları telefon numarasıyla oturum açmanın güvenlik açısından dezavantajları konusunda bilgilendirmelisiniz.

Firebase projenizde telefon numarasıyla oturum açmayı etkinleştirme

Kullanıcıların SMS ile oturum açmasını sağlamak için öncelikle Firebase projenizde telefon numarasıyla oturum açma yöntemini etkinleştirmeniz gerekir:

1. Firebase konsolunda Kimlik Doğrulama bölümünü açın.
2. Oturum Açma Yöntemi sayfasında Telefon Numarası oturum açma yöntemini etkinleştirin.
3. İsteğe bağlı: Ayarlar sayfasında, SMS mesajlarının gönderilmesine izin vermek veya bu mesajları engellemek istediğiniz bölgelerle ilgili bir politika belirleyin. SMS bölgesi politikası belirlemek, uygulamalarınızı SMS'in kötüye kullanımına karşı korumanıza yardımcı olabilir.
4. Aynı sayfada, uygulamanızı barındıracak alan adı OAuth yönlendirme alanları bölümünde listelenmiyorsa alan adınızı ekleyin. Telefonla kimlik doğrulama amacıyla localhost'un barındırılan alan olarak kullanılmasına izin verilmediğini unutmayın.

reCAPTCHA doğrulayıcısını ayarlama

Kullanıcıların telefon numaralarıyla oturum açabilmesi için Firebase'in reCAPTCHA doğrulayıcısını ayarlamanız gerekir. Firebase, kötüye kullanımı önlemek için reCAPTCHA'yı kullanır. Örneğin, telefon numarası doğrulama isteğinin uygulamanızın izin verilen alanlarından birinden gelmesini sağlar.

reCAPTCHA istemcisini manuel olarak ayarlamanız gerekmez. Firebase SDK'sının RecaptchaVerifier nesnesini kullandığınızda Firebase, gerekli istemci anahtarlarını ve sırlarını otomatik olarak oluşturup yönetir.

RecaptchaVerifier nesnesi, kullanıcıdan herhangi bir işlem yapmasını gerektirmeden kullanıcıyı doğrulayabilen görünmez reCAPTCHA'yı ve her zaman başarılı bir şekilde tamamlanmak için kullanıcı etkileşimi gerektiren reCAPTCHA widget'ını destekler.

Temel alınan oluşturulmuş reCAPTCHA, reCAPTCHA oluşturulmadan önce Auth örneğindeki dil kodu güncellenerek kullanıcının tercihine göre yerelleştirilebilir. Söz konusu yerelleştirme, kullanıcıya gönderilen ve doğrulama kodunu içeren SMS mesajı için de geçerli olacaktır.

Web

import { getAuth } from "firebase/auth";

const auth = getAuth();
auth.languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// auth.useDeviceLanguage();
auth_set_language_code.js

Web

firebase.auth().languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();
index.js

Görünmez reCAPTCHA'yı kullanma

Görünmez reCAPTCHA kullanmak için RecaptchaVerifier nesnesi oluşturun. Bu nesnede size parametresi invisible olarak ayarlanmış olmalı ve oturum açma formunuzu gönderen düğmenin kimliği belirtilmelidir. Örneğin:

Web

import { getAuth, RecaptchaVerifier } from "firebase/auth";

const auth = getAuth();
window.recaptchaVerifier = new RecaptchaVerifier(auth, 'sign-in-button', {
  'size': 'invisible',
  'callback': (response) => {
    // reCAPTCHA solved, allow signInWithPhoneNumber.
    onSignInSubmit();
  }
});
auth_phone_recaptcha_verifier_invisible.js

Web

window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('sign-in-button', {
  'size': 'invisible',
  'callback': (response) => {
    // reCAPTCHA solved, allow signInWithPhoneNumber.
    onSignInSubmit();
  }
});
phone-auth.js

reCAPTCHA widget'ını kullanma

Görünür reCAPTCHA widget'ını kullanmak için sayfanızda widget'ı içerecek bir öğe oluşturun ve ardından RecaptchaVerifier nesnesi oluşturun. Bunu yaparken kapsayıcının kimliğini belirtin. Örneğin:

Web

import { getAuth, RecaptchaVerifier } from "firebase/auth";

const auth = getAuth();
window.recaptchaVerifier = new RecaptchaVerifier(auth, 'recaptcha-container', {});
auth_phone_recaptcha_verifier_simple.js

Web

window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container');
phone-auth.js

İsteğe bağlı: reCAPTCHA parametrelerini belirtin

İsteğe bağlı olarak, kullanıcı reCAPTCHA'yı çözdüğünde veya kullanıcı formu göndermeden önce reCAPTCHA'nın süresi dolduğunda çağrılan geri çağırma işlevlerini RecaptchaVerifier nesnesinde ayarlayabilirsiniz:

Web

import { getAuth, RecaptchaVerifier } from "firebase/auth";

const auth = getAuth();
window.recaptchaVerifier = new RecaptchaVerifier(auth, 'recaptcha-container', {
  'size': 'normal',
  'callback': (response) => {
    // reCAPTCHA solved, allow signInWithPhoneNumber.
    // ...
  },
  'expired-callback': () => {
    // Response expired. Ask user to solve reCAPTCHA again.
    // ...
  }
});
auth_phone_recaptcha_verifier_visible.js

Web

window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container', {
  'size': 'normal',
  'callback': (response) => {
    // reCAPTCHA solved, allow signInWithPhoneNumber.
    // ...
  },
  'expired-callback': () => {
    // Response expired. Ask user to solve reCAPTCHA again.
    // ...
  }
});
phone-auth.js

İsteğe bağlı: reCAPTCHA'yı önceden oluşturma

Oturum açma isteği göndermeden önce reCAPTCHA'yı önceden oluşturmak istiyorsanız render işlevini çağırın:

Web

recaptchaVerifier.render().then((widgetId) => {
  window.recaptchaWidgetId = widgetId;
});
auth_phone_recaptcha_render.js

Web

recaptchaVerifier.render().then((widgetId) => {
  window.recaptchaWidgetId = widgetId;
});
phone-auth.js

render çözüldükten sonra, reCAPTCHA API'ye çağrı yapmak için kullanabileceğiniz reCAPTCHA'nın widget kimliğini alırsınız:

Web

const recaptchaResponse = grecaptcha.getResponse(recaptchaWidgetId);
auth_get_recaptcha_response.js

Web

const recaptchaResponse = grecaptcha.getResponse(recaptchaWidgetId);
phone-auth.js

Kullanıcının telefonuna doğrulama kodu gönderme

Telefon numarasıyla oturum açma işlemini başlatmak için kullanıcıya telefon numarasını girmesini isteyen bir arayüz gösterin ve ardından Firebase'in kullanıcıya SMS ile kimlik doğrulama kodu göndermesini istemek için signInWithPhoneNumber işlevini çağırın:

1. Kullanıcının telefon numarasını alın.

   Yasal şartlar farklılık gösterse de en iyi uygulama olarak ve kullanıcılarınızın beklentilerini karşılamak için onlara telefonla oturum açma özelliğini kullanmaları durumunda doğrulama için SMS mesajı alabileceklerini ve standart ücretlerin geçerli olacağını bildirmeniz gerekir.

2. Kullanıcının telefon numarasını ve daha önce oluşturduğunuz RecaptchaVerifier değerini ileterek signInWithPhoneNumber işlevini çağırın.

   Web

   import { getAuth, signInWithPhoneNumber } from "firebase/auth";
   
   const phoneNumber = getPhoneNumberFromUserInput();
   const appVerifier = window.recaptchaVerifier;
   
   const auth = getAuth();
   signInWithPhoneNumber(auth, phoneNumber, appVerifier)
       .then((confirmationResult) => {
         // SMS sent. Prompt user to type the code from the message, then sign the
         // user in with confirmationResult.confirm(code).
         window.confirmationResult = confirmationResult;
         // ...
       }).catch((error) => {
         // Error; SMS not sent
         // ...
       });
   auth_phone_signin.js

   Web

   const phoneNumber = getPhoneNumberFromUserInput();
   const appVerifier = window.recaptchaVerifier;
   firebase.auth().signInWithPhoneNumber(phoneNumber, appVerifier)
       .then((confirmationResult) => {
         // SMS sent. Prompt user to type the code from the message, then sign the
         // user in with confirmationResult.confirm(code).
         window.confirmationResult = confirmationResult;
         // ...
       }).catch((error) => {
         // Error; SMS not sent
         // ...
       });
   phone-auth.js

   signInWithPhoneNumber hata verirse kullanıcının tekrar deneyebilmesi için reCAPTCHA'yı sıfırlayın:

   grecaptcha.reset(window.recaptchaWidgetId);
   
   // Or, if you haven't stored the widget ID:
   window.recaptchaVerifier.render().then(function(widgetId) {
     grecaptcha.reset(widgetId);
   });

   Not: Geçerli kullanım sınırları ve kotalar için Firebase Authentication Sınırlar bölümüne bakın.

signInWithPhoneNumber yöntemi, kullanıcıya reCAPTCHA sorusunu gönderir ve kullanıcı soruyu geçerse Firebase Authentication öğesinden, kullanıcının telefonuna doğrulama kodu içeren bir SMS mesajı göndermesini ister.

Kötüye kullanımı önlemek için Firebase, belirli bir süre içinde tek bir telefon numarasına gönderilebilecek SMS mesajlarının sayısını sınırlar. Bu sınırı aşarsanız telefon numarası doğrulama istekleri sınırlandırılabilir. Geliştirme sırasında bu sorunla karşılaşırsanız test için farklı bir telefon numarası kullanın veya isteği daha sonra tekrar deneyin.

Doğrulama koduyla kullanıcının oturumunu açma

signInWithPhoneNumber araması başarılı olduktan sonra kullanıcıdan SMS ile aldığı doğrulama kodunu yazmasını isteyin. Ardından, kodu signInWithPhoneNumber'nin karşılama işleyicisine (yani then bloğuna) iletilen ConfirmationResult nesnesinin confirm yöntemine ileterek kullanıcının oturum açmasını sağlayın. Örneğin:

Web

const code = getCodeFromUserInput();
confirmationResult.confirm(code).then((result) => {
  // User signed in successfully.
  const user = result.user;
  // ...
}).catch((error) => {
  // User couldn't sign in (bad verification code?)
  // ...
});
auth_phone_verify_code.js

Web

const code = getCodeFromUserInput();
confirmationResult.confirm(code).then((result) => {
  // User signed in successfully.
  const user = result.user;
  // ...
}).catch((error) => {
  // User couldn't sign in (bad verification code?)
  // ...
});
phone-auth.js

confirm çağrısı başarılı olursa kullanıcı başarıyla oturum açar.

Ara AuthCredential nesnesini alma

Kullanıcının hesabı için bir AuthCredential nesnesi almanız gerekiyorsa confirm'ı çağırmak yerine onay sonucundaki doğrulama kodunu ve doğrulama kodunu PhoneAuthProvider.credential'e iletin:

var credential = firebase.auth.PhoneAuthProvider.credential(confirmationResult.verificationId, code);

Ardından, kullanıcıyı kimlik bilgileriyle oturum açabilirsiniz:

firebase.auth().signInWithCredential(credential);

Kurgusal telefon numaralarıyla test etme

Firebase konsolu üzerinden geliştirme için kurgusal telefon numaraları ayarlayabilirsiniz. Kurgusal telefon numaralarıyla test yapmanın avantajları:

• Kullanım kotanızı tüketmeden telefon numarası kimlik doğrulamasını test edin.
• Gerçek bir SMS mesajı göndermeden telefon numarası kimlik doğrulamasını test edin.
• Aynı telefon numarasıyla, sınırlamaya tabi tutulmadan art arda testler çalıştırın. Bu, incelemecinin test için aynı telefon numarasını kullanması durumunda uygulama mağazası inceleme sürecinde reddedilme riskini en aza indirir.
• Geliştirme ortamlarında kolayca test yapın. Örneğin, Google Play Hizmetleri olmadan iOS simülatöründe veya Android emülatöründe geliştirme yapabilirsiniz.
• Normalde üretim ortamındaki gerçek telefon numaralarına uygulanan güvenlik kontrolleri tarafından engellenmeden entegrasyon testleri yazın.

Kurgusal telefon numaraları aşağıdaki koşulları karşılamalıdır:

1. Gerçekten kurgusal olan ve daha önce kullanılmamış telefon numaraları kullandığınızdan emin olun. Firebase Authentication, gerçek kullanıcılar tarafından kullanılan mevcut telefon numaralarını test numarası olarak ayarlamanıza izin vermez. Bir seçenek olarak, ABD test telefon numaraları için 555 önekli numaraları kullanabilirsiniz. Örneğin: [phone]
2. Telefon numaraları, uzunluk ve diğer kısıtlamalar açısından doğru biçimlendirilmelidir. Bu numaralar, gerçek bir kullanıcının telefon numarasıyla aynı doğrulama sürecinden geçer.
3. Geliştirme için en fazla 10 telefon numarası ekleyebilirsiniz.
4. Tahmin edilmesi ve değiştirilmesi zor olan test telefon numaraları/kodları kullanın ve bunları sık sık değiştirin.

Kurgusal telefon numaraları ve doğrulama kodları oluşturma

1. Firebase konsolunda Kimlik Doğrulama bölümünü açın.
2. Oturum açma yöntemi sekmesinde, henüz etkinleştirmediyseniz Telefon sağlayıcıyı etkinleştirin.
3. Test edilecek telefon numaraları açılır menüsünü açın.
4. Test etmek istediğiniz telefon numarasını girin. Örneğin: [phone].
5. İlgili numara için 6 haneli doğrulama kodunu girin. Örneğin: 654321.
6. Numarayı ekleyin. Gerekirse ilgili satırın üzerine gelip çöp kutusu simgesini tıklayarak telefon numarasını ve kodunu silebilirsiniz.

Manuel test

Uygulamanızda doğrudan kurgusal bir telefon numarası kullanmaya başlayabilirsiniz. Bu sayede, geliştirme aşamalarında kota sorunları veya sıklık sınırlamasıyla karşılaşmadan manuel testler yapabilirsiniz. Ayrıca, Google Play Hizmetleri'nin yüklü olmadığı bir iOS simülatöründen veya Android emülatöründen de doğrudan test yapabilirsiniz.

Kurgusal telefon numarasını girip doğrulama kodunu gönderdiğinizde gerçek bir SMS gönderilmez. Bunun yerine, oturum açma işlemini tamamlamak için daha önce yapılandırılmış doğrulama kodunu girmeniz gerekir.

Oturum açma işlemi tamamlandığında, bu telefon numarasıyla bir Firebase kullanıcısı oluşturulur. Kullanıcı, gerçek bir telefon numarası kullanıcısıyla aynı davranış ve özelliklere sahiptir ve Realtime Database/Cloud Firestore ile diğer hizmetlere aynı şekilde erişebilir. Bu işlem sırasında oluşturulan kimlik jetonu, gerçek bir telefon numarası kullanıcısının imzasıyla aynı imzaya sahiptir.

Kurgusal telefon numarası için kimlik jetonunun, gerçek bir telefon numarası kullanıcısının imzasıyla aynı imzaya sahip olması nedeniyle bu numaraların güvenli bir şekilde saklanması ve sürekli olarak geri dönüştürülmesi önemlidir.

Erişimi daha da kısıtlamak istiyorsanız bu kullanıcıları sahte kullanıcı olarak ayırt etmek için özel talepler aracılığıyla test rolü ayarlayabilirsiniz.

Entegrasyon testi

Firebase Authentication, manuel testin yanı sıra telefonla kimlik doğrulama testi için entegrasyon testleri yazmaya yardımcı olacak API'ler de sağlar. Bu API'ler, web'de reCAPTCHA şartını ve iOS'te sessiz push bildirimlerini devre dışı bırakarak uygulama doğrulamasını devre dışı bırakır. Bu sayede, bu akışlarda otomasyon testi yapmak mümkün olur ve testler daha kolay uygulanır. Ayrıca, Android'de anında doğrulama akışlarını test etme olanağı sunar.

Üretim uygulamalarında uygulama doğrulamasının devre dışı bırakılmadığından ve üretim uygulamanıza kurgusal telefon numaralarının sabit kodlanmadığından emin olun.

Web'de, firebase.auth.RecaptchaVerifier öğesini oluşturmadan önce appVerificationDisabledForTesting öğesini true olarak ayarlayın. Bu özellik, reCAPTCHA'yı otomatik olarak çözerek telefon numarasını manuel olarak çözmenize gerek kalmadan geçmenizi sağlar. reCAPTCHA devre dışı bırakılmış olsa bile kurgusal olmayan bir telefon numarası kullanmanın oturum açma işlemini tamamlamayacağını unutmayın. Bu API ile yalnızca kurgusal telefon numaraları kullanılabilir.

// Turn off phone auth app verification.
firebase.auth().settings.appVerificationDisabledForTesting = true;

var phoneNumber = "[phone]";
var testVerificationCode = "123456";

// This will render a fake reCAPTCHA as appVerificationDisabledForTesting is true.
// This will resolve after rendering without app verification.
var appVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container');
// signInWithPhoneNumber will call appVerifier.verify() which will resolve with a fake
// reCAPTCHA response.
firebase.auth().signInWithPhoneNumber(phoneNumber, appVerifier)
    .then(function (confirmationResult) {
      // confirmationResult can resolve with the fictional testVerificationCode above.
      return confirmationResult.confirm(testVerificationCode)
    }).catch(function (error) {
      // Error; SMS not sent
      // ...
    });

Görünür ve görünmez sahte reCAPTCHA uygulama doğrulayıcıları, uygulama doğrulaması devre dışı bırakıldığında farklı şekilde davranır:

• Görünür reCAPTCHA: Görünür reCAPTCHA, appVerifier.render() aracılığıyla oluşturulduğunda kısa bir gecikmenin ardından otomatik olarak çözülür. Bu, kullanıcının oluşturma işleminden hemen sonra reCAPTCHA'yı tıklamasına eşdeğerdir. reCAPTCHA yanıtının süresi bir süre sonra dolar ve ardından sorun otomatik olarak tekrar çözülür.
• Görünmez reCAPTCHA: Görünmez reCAPTCHA, oluşturma sırasında otomatik olarak çözülmez. Bunun yerine, appVerifier.verify()çağrısı yapıldığında veya reCAPTCHA'nın düğme bağlantısı, kısa bir gecikmenin ardından tıklandığında çözülür. Benzer şekilde, yanıtın süresi bir süre sonra dolar ve yalnızca appVerifier.verify() çağrısından sonra veya reCAPTCHA'nın düğme bağlantısı tekrar tıklandığında otomatik olarak çözülür.

Sahte reCAPTCHA çözüldüğünde, sahte yanıtla birlikte ilgili geri çağırma işlevi beklendiği gibi tetiklenir. Bir son kullanma geri araması da belirtilmişse bu geri arama, son kullanma tarihinde tetiklenir.

Sonraki adımlar

Bir kullanıcı ilk kez oturum açtıktan sonra yeni bir kullanıcı hesabı oluşturulur ve kullanıcının oturum açtığı kimlik bilgilerine (kullanıcı adı ve şifre, telefon numarası veya kimlik doğrulama sağlayıcı bilgileri) bağlanır. Bu yeni hesap, Firebase projenizin bir parçası olarak depolanır ve kullanıcının oturum açma şeklinden bağımsız olarak projenizdeki her uygulamada kullanıcıyı tanımlamak için kullanılabilir.

• Uygulamalarınızda, kullanıcınızın kimlik doğrulama durumunu öğrenmenin önerilen yolu, Auth nesnesinde bir gözlemci ayarlamaktır. Ardından, User nesnesinden kullanıcının temel profil bilgilerini alabilirsiniz. Kullanıcıları yönetme başlıklı makaleyi inceleyin.

• Firebase Realtime Database ve Cloud Storage Güvenlik Kurallarınızda, oturum açmış kullanıcının benzersiz kullanıcı kimliğini auth değişkeninden alabilir ve kullanıcının hangi verilere erişebileceğini kontrol etmek için bu kimliği kullanabilirsiniz.

Kimlik doğrulama sağlayıcı kimlik bilgilerini mevcut bir kullanıcı hesabına bağlayarak kullanıcıların uygulamanızda birden fazla kimlik doğrulama sağlayıcı kullanarak oturum açmasına izin verebilirsiniz.

Bir kullanıcının oturumunu kapatmak için signOut numaralı telefonu arayın:

Web

import { getAuth, signOut } from "firebase/auth";

const auth = getAuth();
signOut(auth).then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});
auth_sign_out.js

Web

firebase.auth().signOut().then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});
index.js