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

Kullanıcının telefonuna SMS mesajı göndererek oturum açmak için Firebase Authentication'ü kullanabilirsiniz. Kullanıcı, SMS mesajında yer alan tek kullanımlık kodu kullanarak oturum açar.

Uygulamanıza telefon numarası ile oturum açma özelliğini eklemenin en kolay yolu FirebaseUI'yi kullanmaktır. FirebaseUI, telefon numarası ile oturum açma özelliğinin yanı sıra şifre tabanlı ve birleşik oturum açma için oturum açma akışlarını uygulayan bir hazır oturum açma widget'ı içerir. Bu dokümanda, Firebase SDK'sı kullanılarak telefon numarası ile oturum açma akışının nasıl uygulanacağı açıklanmaktadır.

Başlamadan önce

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

Güvenlikle ilgili sorunlar

Yalnızca telefon numarası kullanarak kimlik doğrulama, kullanışlı olsa da telefon numarasının sahipliği kullanıcılar arasında kolayca aktarılabileceğinden diğer mevcut yöntemlere kıyasla daha az güvenlidir. Ayrıca, birden fazla kullanıcı profiline sahip cihazlarda SMS mesajı alabilen tüm kullanıcılar cihazın telefon numarasını kullanarak bir hesapta oturum açabilir.

Uygulamanızda telefon numarasına dayalı 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ına dayalı oturum açma özelliğinin güvenlikle ilgili dezavantajları hakkında bilgilendirmelisiniz.

Firebase projeniz için telefon numarasıyla oturum açmayı etkinleştirme

Kullanıcıların SMS ile oturum açması için önce Firebase projenizde telefon numarası ile 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. Aynı sayfada, uygulamanızı barındıracak alan adı OAuth yönlendirme alan adları bölümünde listelenmemişse alanınızı ekleyin. Telefonla kimlik doğrulama amacıyla barındırılan alan adı olarak localhost'a izin verilmediğini unutmayın.

reCAPTCHA doğrulayıcıyı ayarlama

Kullanıcıların telefon numaralarıyla oturum açabilmesi için Firebase'ın 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ıza gerek yoktur. Firebase SDK'sının RecaptchaVerifier nesnesini kullandığınızda Firebase, gerekli istemci anahtarlarını ve gizli anahtarlarını otomatik olarak oluşturup yönetir.

RecaptchaVerifier nesnesi, genellikle kullanıcının herhangi bir işlem yapmasına gerek kalmadan doğrulayabilen görünmez reCAPTCHA'yı ve başarılı bir şekilde tamamlanması için her zaman kullanıcı etkileşimini gerektiren reCAPTCHA widget'ını destekler.

Temel oluşturulan reCAPTCHA, reCAPTCHA oluşturulmadan önce Auth örneğindeki dil kodu güncellenerek kullanıcının tercihine göre yerelleştirilebilir. Yukarıda belirtilen yerelleştirme, kullanıcıya gönderilen ve doğrulama kodu içeren SMS mesajı için de geçerlidir.

WebWeb
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
 
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 size parametresi invisible olarak ayarlanmış bir RecaptchaVerifier nesnesi oluşturun ve oturum açma formunuzu gönderen düğmenin kimliğini belirtin. Örneğin:

WebWeb
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
 
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'ı barındıracak bir öğe oluşturun ve ardından kapsayıcının kimliğini belirterek bir RecaptchaVerifier nesnesi oluşturun. Örneğin:

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

const auth = getAuth();
window.recaptchaVerifier = new RecaptchaVerifier(auth, 'recaptcha-container', {});
auth_phone_recaptcha_verifier_simple.js
 
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 reCAPTCHA'nın süresi kullanıcı formu göndermeden önce dolduğunda çağrılan RecaptchaVerifier nesnesinde geri çağırma işlevleri ayarlayabilirsiniz:

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

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

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

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

Kullanıcının telefonuna bir doğrulama kodu gönderin

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

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

    Yasal şartlar değişiklik gösterir ancak en iyi uygulama olarak ve kullanıcılarınıza beklentileri belirlemek için telefonla oturum açma özelliğini kullanırlarsa doğrulama için SMS mesajı alabileceğini ve standart ücretlerin geçerli olacağını onlara bildirmeniz gerekir.

  2. signInWithPhoneNumber'yi arayın. Bu aramaya kullanıcının telefon numarasını ve daha önce oluşturduğunuz RecaptchaVerifier'yi iletin.
    WebWeb
    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
     
    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 hatayla sonuçlanırsa kullanıcının tekrar denemesi 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);
});

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

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

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

WebWeb
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
 
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ının oturumu başarıyla açılır.

Ara AuthCredential nesnesini alma

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

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

Ardından, kimlik bilgisiyle kullanıcının oturumunu açabilirsiniz:

firebase.auth().signInWithCredential(credential);

Hayali telefon numaralarıyla test etme

Geliştirme için Firebase konsolu üzerinden hayali telefon numaraları ayarlayabilirsiniz. Hayali telefon numaralarıyla test yapmanın avantajları şunlardır:

  • 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 art arda testler çalıştırın. Bu sayede, inceleme uzmanı test için aynı telefon numarasını kullanırsa uygulama mağazası inceleme sürecinde reddedilme riski en aza indirilir.
  • Google Play Hizmetleri olmadan iOS simülasyon cihazında veya Android emülatöründe geliştirme yapma gibi ek çaba gerektirmeyen geliştirme ortamlarında kolayca test edin.
  • Normalde üretim ortamındaki gerçek telefon numaralarına uygulanan güvenlik kontrolleri tarafından engellenmeden entegrasyon testleri yazma

Kurgusal telefon numaraları şu koşulları karşılamalıdır:

  1. Gerçekten kurgusal olan ve mevcut olmayan 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, ABD test telefon numaraları olarak 555 ön ekiyle başlayan numaralar kullanmaktır. Örneğin: +1 650-555-3434
  2. Telefon numaralarının uzunluk ve diğer kısıtlamalar açısından doğru biçimlendirilmesi gerekir. Bu numaralar, gerçek kullanıcıların telefon numaralarıyla aynı doğrulama sürecine tabi tutulur.
  3. Geliştirme için en fazla 10 telefon numarası ekleyebilirsiniz.
  4. Tahmin edilmesi zor test telefon numaraları/kodları kullanın ve bunları sık sık değiştirin.

Hayali 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, telefon sağlayıcıyı etkinleştirmediyseniz etkinleştirin.
  3. Test edilecek telefon numaraları akordeon menüsünü açın.
  4. Test etmek istediğiniz telefon numarasını girin. Örneğin: +1 650-555-3434.
  5. Söz konusu numara için 6 haneli doğrulama kodunu girin. Örneğin: 654321.
  6. Numarayı ekleyin. Gerekirse fareyle ilgili satırın üzerine gelip çöp kutusu simgesini tıklayarak telefon numarasını ve kodunu silebilirsiniz.

Manuel test

Uygulamanızda doğrudan hayali bir telefon numarası kullanmaya başlayabilirsiniz. Bu sayede, geliştirme aşamalarında kota sorunları veya tarama sorunu yaşamadan manuel test yapabilirsiniz. Google Play Hizmetleri yüklü olmadan doğrudan bir iOS simülatöründen veya Android emülatöründen de test yapabilirsiniz.

Hayali telefon numarasını girip doğrulama kodunu gönderdiğinizde gerçek bir SMS gönderilmez. Bunun yerine, oturumu tamamlamak için önceden yapılandırılmış doğrulama kodunu sağlamanız gerekir.

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

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

Entegrasyon testi

Firebase Authentication, manuel testlere ek olarak telefonla kimlik doğrulama testi için entegrasyon testleri yazmaya yardımcı olacak API'ler sağlar. Bu API'ler, web'de reCAPTCHA koşulunu 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 testini yapmak mümkün olur ve daha kolay uygulanır. Ayrıca, Android'de anında doğrulama akışlarını test etme olanağı sunarlar.

Web'de, firebase.auth.RecaptchaVerifier öğesini oluşturmadan önce appVerificationDisabledForTesting öğesini true olarak ayarlayın. Bu işlem, reCAPTCHA'yı otomatik olarak çözerek telefon numarasını manuel olarak çözmeden geçmenize olanak tanır. reCAPTCHA devre dışı bırakılmış olsa bile gerçek olmayan bir telefon numarası kullanıldığında oturum açılamayacağını unutmayın. Bu API'de yalnızca kurgusal telefon numaraları kullanılabilir. 

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

var phoneNumber = "+16505554567";
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
      // ...
    });

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

  • Görünür reCAPTCHA: Görünür reCAPTCHA, appVerifier.render() aracılığıyla oluşturulduğunda bir saniyenin çok küçük bir kısmından sonra 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 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ı sırasında veya reCAPTCHA'nın düğme ankrajı bir saniyenin kesri kadar gecikmeyle 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 ankrajı tekrar tıklandığında otomatik olarak çözülür.

Sahte bir reCAPTCHA çözüldüğünde, ilgili geri çağırma işlevi sahte yanıtla birlikte beklendiği gibi tetiklenir. Son kullanma tarihi geri çağırma işlevi de belirtilmişse bu işlev, son kullanma tarihi geldiğinde tetiklenir.

Sonraki adımlar

Kullanıcı ilk kez oturum açtıktan sonra yeni bir kullanıcı hesabı oluşturulur ve kullanıcının oturum açarken kullandığı kimlik bilgilerine (yani 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 nasıl oturum açtığına bakılmaksızın 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 nesnesine bir gözlemci ayarlamaktır. Ardından, kullanıcının temel profil bilgilerini User nesnesinden 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 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:

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

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