JavaScript Kullanarak Telefon Numarasıyla Firebase'de Kimlik Doğrulama

Kullanıcının telefonuna bir SMS mesajı göndererek kullanıcının oturumunu açmak için Firebase Authentication'ı kullanabilirsiniz. Kullanıcı, SMS mesajında ​​bulunan tek seferlik bir 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 için oturum açma akışlarının yanı sıra parola tabanlı ve birleştirilmiş oturumu uygulayan bir açılır oturum açma widget'ı içeren FirebaseUI kullanmaktır. -içinde. Bu belgede, Firebase SDK kullanılarak bir telefon numarası oturum açma akışının nasıl uygulanacağı açıklanmaktadır.

Sen başlamadan önce

Güvenlik endişeleri

Yalnızca bir telefon numarası kullanarak kimlik doğrulaması uygun olmakla birlikte, mevcut diğer yöntemlerden daha az güvenlidir çünkü bir telefon numarasına sahip olmak kullanıcılar arasında kolayca aktarılabilir. Ayrıca, birden fazla kullanıcı profili olan cihazlarda, SMS mesajı alabilen herhangi bir kullanıcı, cihazın telefon numarasını kullanarak bir hesapta oturum açabilir.

Uygulamanızda telefon numarasına dayalı oturum açmayı kullanıyorsanız, bunu daha güvenli oturum açma yöntemlerinin yanında sunmalı ve kullanıcıları, telefon numarasıyla oturum açmayı kullanmanın güvenlik ödünleşimleri hakkında bilgilendirmelisiniz.

Firebase projeniz için Telefon Numarası ile oturum açmayı etkinleştirin

Kullanıcılarda SMS ile oturum açmak için önce Firebase projeniz için Telefon Numarası 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 OAuth yönlendirme domainleri bölümünde uygulamanızı barındıracak domain listelenmiyorsa domaininizi ekleyiniz.

Firebase'in telefon numarası oturum açma isteği kotası, çoğu uygulamanın etkilenmeyeceği kadar yüksektir. Ancak, telefon kimlik doğrulamasıyla çok yüksek sayıda kullanıcıyla oturum açmanız gerekiyorsa, fiyatlandırma planınızı yükseltmeniz gerekebilir. Fiyatlandırma sayfasına bakın.

reCAPTCHA doğrulayıcıyı kurun

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

Manuel olarak bir reCAPTCHA istemcisi kurmanız gerekmez; Firebase SDK'sının RecaptchaVerifier nesnesini kullandığınızda, Firebase gerekli tüm istemci anahtarlarını ve sırlarını otomatik olarak oluşturur ve işler.

RecaptchaVerifier nesnesi, kullanıcıyı herhangi bir kullanıcı eylemi gerektirmeden doğrulayabilen görünmez reCAPTCHA'yı ve başarıyla tamamlanması için her zaman kullanıcı etkileşimi gerektiren reCAPTCHA pencere bileşenini destekler.

Altta yatan işlenmiş reCAPTCHA, reCAPTCHA işlenmeden ö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 doğrulama kodunu içeren SMS mesajı için de geçerli olacaktır.

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 kullanın

Görünmez bir reCAPTCHA kullanmak için, size oturum açma formunuzu gönderen düğmenin kimliğini belirterek, size parametresi invisible olarak ayarlanmış bir RecaptchaVerifier nesnesi oluşturun. Örneğin:

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ı kullanın

Görünür reCAPTCHA widget'ını kullanmak için, sayfanızda widget'ı içerecek bir öğe oluşturun ve ardından bunu yaptığınızda kabın kimliğini belirterek bir RecaptchaVerifier nesnesi oluşturun. Örneğin:

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

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

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şturun

Bir oturum açma isteği göndermeden önce reCAPTCHA'yı önceden oluşturmak istiyorsanız, render çağrısı yapın:

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

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

render çözümlendikten sonra, reCAPTCHA API'sine çağrı yapmak için kullanabileceğiniz reCAPTCHA'nın pencere öğesi kimliğini alırsınız:

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ıyla oturum açmayı başlatmak için, kullanıcıya telefon numarasını vermesini isteyen bir arayüz sunun ve ardından signInWithPhoneNumber arayarak Firebase'in kullanıcının telefonuna SMS ile bir kimlik doğrulama kodu göndermesini isteyin:

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

   Yasal gereksinimler değişebilir, ancak en iyi uygulama olarak ve kullanıcılarınız için beklentileri belirlemek amacıyla, telefonla oturum açmayı kullanırlarsa, doğrulama için bir SMS mesajı alabileceklerini ve standart ücretlerin geçerli olduğunu onlara bildirmelisiniz.

2. Kullanıcının telefon numarasını ve daha önce oluşturduğunuz RecaptchaVerifier ileterek signInWithPhoneNumber öğesini arayın.

   Web modular API

   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 namespaced API

   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 bir hatayla sonuçlanırsa 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);
   });
   

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

Kullanıcıyı doğrulama koduyla oturum açın

signInWithPhoneNumber çağrısı başarılı olduktan sonra, kullanıcıdan SMS ile aldığı doğrulama kodunu yazmasını isteyin. Ardından, signInWithPhoneNumber yerine getirme işleyicisine (yani, then bloğuna) geçirilen ConfirmationResult nesnesinin confirm yöntemine kodu geçirerek kullanıcıda oturum açın. Örneğin:

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ı başarıyla oturum açmıştır.

Ara AuthCredential nesnesini alın

Kullanıcının hesabı için bir AuthCredential nesnesi almanız gerekiyorsa, accept :

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

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

firebase.auth().signInWithCredential(credential);

Hayali telefon numaralarıyla test edin

Firebase konsolu aracılığıyla geliştirme için hayali telefon numaraları ayarlayabilirsiniz. Hayali telefon numaralarıyla test yapmak şu avantajları sağlar:

• 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.
• Sıkılmadan aynı telefon numarasıyla ardışık testler yapın. Bu, gözden geçiren kişinin test için aynı telefon numarasını kullanması durumunda App Store inceleme sürecinde reddedilme riskini en aza indirir.
• Google Play Hizmetleri olmadan bir iOS simülatöründe veya bir Android öykünücüsünde geliştirme yeteneği gibi herhangi bir ek çaba gerektirmeden geliştirme ortamlarında kolayca test edin.
• Bir üretim ortamında normalde gerçek telefon numaralarına uygulanan güvenlik kontrolleri tarafından engellenmeden entegrasyon testleri yazın.

Kurgusal telefon numaraları şu gereksinimleri karşılamalıdır:

1. Gerçekte kurgusal olan ve zaten var olmayan telefon numaralarını 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 ekli numara kullanmaktır, örneğin: +1 650-555-3434
2. Telefon numaraları, uzunluk ve diğer kısıtlamalar için doğru şekilde biçimlendirilmelidir. Yine de gerçek bir kullanıcının telefon numarasıyla aynı doğrulamadan geçecekler.
3. Geliştirme için en fazla 10 telefon numarası ekleyebilirsiniz.
4. Tahmin etmesi zor test telefon numaralarını/kodlarını kullanın ve bunları sık sık değiştirin.

Hayali telefon numaraları ve doğrulama kodları oluşturun

1. Firebase konsolunda Kimlik Doğrulama bölümünü açın.
2. Henüz yapmadıysanız Oturum açma yöntemi sekmesinde Telefon sağlayıcısını etkinleştirin.
3. Akordeon testi için telefon numaraları menüsünü açın.
4. Test etmek istediğiniz telefon numarasını girin, örneğin: +1 650-555-3434 .
5. Belirli bir numara için 6 haneli doğrulama kodunu girin, örneğin: 654321 .
6. Numarayı ekleyin . İhtiyaç halinde ilgili satırın üzerine gelip çöp kutusu ikonuna tıklayarak telefon numarasını ve kodunu silebilirsiniz.

Manuel test

Uygulamanızda hayali bir telefon numarası kullanmaya hemen başlayabilirsiniz. Bu, geliştirme aşamalarında kota sorunları veya kısıtlamalarla karşılaşmadan manuel test gerçekleştirmenize olanak tanır. Google Play Hizmetleri yüklü olmadan doğrudan bir iOS simülatöründen veya Android öykünücüsünden de test edebilirsiniz.

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

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

Başka bir seçenek de, erişimi daha fazla kısıtlamak istiyorsanız, bu kullanıcıları sahte kullanıcılar olarak ayırt etmek için özel talepler aracılığıyla bir test rolü belirlemektir .

Entegrasyon testi

Manuel teste ek olarak Firebase Authentication, telefon kimlik doğrulama testi için entegrasyon testleri yazmaya yardımcı olacak API'ler sağlar. Bu API'ler, web'de reCAPTCHA gereksinimini ve iOS'ta sessiz push bildirimlerini devre dışı bırakarak uygulama doğrulamasını devre dışı bırakır. Bu, bu akışlarda otomasyon testini mümkün kılar ve uygulanmasını kolaylaştırır. Ayrıca, Android'de anında doğrulama akışlarını test etme olanağı sağlamaya yardımcı olurlar.

Web'de, firebase.auth.RecaptchaVerifier öğesini oluşturmadan önce appVerificationDisabledForTesting öğesini true olarak ayarlayın. Bu, reCAPTCHA'yı otomatik olarak çözerek, telefon numarasını manuel olarak çözmeden iletmenizi sağlar. ReCAPTCHA devre dışı bırakılsa bile, kurgusal olmayan bir telefon numarasının kullanılmasının yine de oturum açmayı tamamlayamayacağını unutmayın. Bu API ile yalnızca hayali 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
      // ...
    });

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ı davranır:

• Görünür reCAPTCHA : Görünür reCAPTCHA, appVerifier.render() aracılığıyla oluşturulduğunda, saniyeden kısa bir gecikmenin ardından kendi kendini otomatik olarak çözer. Bu, bir kullanıcının oluşturmanın hemen ardından reCAPTCHA'yı tıklamasına eşdeğerdir. reCAPTCHA yanıtının süresi bir süre sonra dolacak ve ardından yeniden otomatik çözümlenecektir.
• Görünmez reCAPTCHA : Görünmez reCAPTCHA, oluşturma sırasında otomatik olarak çözülmez ve bunun yerine bunu appVerifier.verify() çağrısında veya saniyeden kısa bir gecikmenin ardından reCAPTCHA'nın düğme bağlantısı tıklandığında çözer. Benzer şekilde, yanıt bir süre sonra sona erecek 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ümlenecektir.

Sahte bir reCAPTCHA çözüldüğünde, karşılık gelen geri arama işlevi, beklendiği gibi sahte yanıtla tetiklenir. Ayrıca bir sona erme geri araması belirtilirse, sona erme 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 (yani, kullanıcı adı ve parolası, telefon numarası veya kimlik doğrulama sağlayıcı bilgileri) bağlanır. Bu yeni hesap, Firebase projenizin bir parçası olarak saklanır ve kullanıcının nasıl oturum açtığına bakılmaksızın projenizdeki her uygulamada bir 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. Bkz . Kullanıcıları Yönetin .

• Firebase Gerçek Zamanlı Veritabanı ve Bulut Depolama Güvenlik Kurallarınızda , oturum açmış kullanıcının benzersiz kullanıcı kimliğini auth değişkeninden alabilir ve bunu, bir 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 birden fazla kimlik doğrulama sağlayıcısı kullanarak uygulamanızda oturum açmasına izin verebilirsiniz.

Bir kullanıcının oturumunu kapatmak için signOut öğesini arayın:

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