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

Kullanıcının telefonuna SMS mesajı göndererek kullanıcının oturum açmasını sağlamak 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ıyla oturum açma eklemenin en kolay yolu, şifre tabanlı ve birleşik oturum açmanın yanı sıra telefon numarasıyla oturum açma için oturum açma akışlarını uygulayan bir açılır oturum açma widget'ı içeren FirebaseUI'yi kullanmaktır. -içinde. Bu belgede, Firebase SDK kullanılarak telefon numarasıyla oturum açma akışının nasıl uygulanacağı açıklanmaktadır.

Sen başlamadan önce

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

Güvenlik endişeleri

Yalnızca telefon numarası kullanılarak yapılan kimlik doğrulama, uygun olmasına rağmen, diğer mevcut yöntemlere göre daha az güvenlidir çünkü bir telefon numarasına sahip olmak kullanıcılar arasında kolaylıkla aktarılabilir. Ayrıca, birden fazla kullanıcı profiline sahip 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çmanın güvenlik açısından getireceği ödünler konusunda bilgilendirmelisiniz.

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

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ıyla 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 listelenmiyorsa alanınızı ekleyin.

Firebase'in telefon numarasıyla 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ının oturum açması gerekiyorsa fiyatlandırma planınızı yükseltmeniz gerekebilir. Fiyatlandırma sayfasına bakın.

reCAPTCHA doğrulayıcıyı ayarlama

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

reCAPTCHA istemcisini manuel olarak ayarlamanıza gerek yoktur; Firebase SDK'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, genellikle herhangi bir kullanıcı eylemi gerektirmeden kullanıcıyı doğrulayabilen görünmez reCAPTCHA'yı ve başarılı bir şekilde tamamlanması için her zaman kullanıcı etkileşimi gerektiren reCAPTCHA widget'ını destekler.

Temelde oluşturulan reCAPTCHA, reCAPTCHA'yı oluşturmadan önce Auth örneğindeki dil kodunu güncelleyerek 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.

Web modular API

import { getAuth } from "firebase/auth";

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

Web namespaced API

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

Görünmez reCAPTCHA kullanın

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

Web modular API

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();
  }
});

Web namespaced API

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

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 bunu yaptığınızda kabın kimliğini belirten bir RecaptchaVerifier nesnesi oluşturun. Örneğin:

Web modular API

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

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

Web namespaced API

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

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

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

Web modular API

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.
    // ...
  }
});

Web namespaced API

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.
    // ...
  }
});

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

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

Web modular API

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

Web namespaced API

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

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

Web modular API

const recaptchaResponse = grecaptcha.getResponse(recaptchaWidgetId);

Web namespaced API

const recaptchaResponse = grecaptcha.getResponse(recaptchaWidgetId);

Kullanıcının telefonuna 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 Firebase'in kullanıcının telefonuna SMS yoluyla bir kimlik doğrulama kodu göndermesini istemek için signInWithPhoneNumber arayın:

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

    Yasal gereklilikler farklılık gösterebilir ancak en iyi uygulama olarak ve kullanıcılarınız için beklentileri belirlemek amacıyla, telefonla oturum açmayı kullanmaları durumunda doğrulama için bir SMS mesajı alabileceklerini ve standart ücretlerin geçerli olacağını onlara bildirmelisiniz.

  2. signInWithPhoneNumber çağırın ve ona kullanıcının telefon numarasını ve daha önce oluşturduğunuz RecaptchaVerifier iletin.

    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
          // ...
        });

    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
          // ...
        });
    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 doğrulama kodunu içeren bir SMS mesajı göndermesini ister.

Doğrulama koduyla kullanıcıda 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, kodu, signInWithPhoneNumber yerine getirme işleyicisine (yani, then bloğuna) iletilen ConfirmationResult nesnesinin confirm yöntemine ileterek kullanıcının oturumunu açın. Örneğin:

Web modular API

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?)
  // ...
});

Web namespaced API

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?)
  // ...
});

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, onay sonucunu confirm yerine doğrulama kodunu ve doğrulama kodunu PhoneAuthProvider.credential iletin:

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

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

firebase.auth().signInWithCredential(credential);

Kurgusal telefon numaralarıyla test edin

Firebase konsolu aracılığıyla geliştirme için kurgusal telefon numaraları ayarlayabilirsiniz. Kurgusal telefon numaralarıyla test yapmak şu faydaları 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.
  • Kısıtlanmadan aynı telefon numarasıyla ardışık testler yapın. Bu, incelemeyi yapan kişinin test için aynı telefon numarasını kullanması durumunda App Store inceleme süreci sırasında reddedilme riskini en aza indirir.
  • Google Play Hizmetleri olmadan bir iOS simülatöründe veya bir Android emülatöründe geliştirme yapma yeteneği gibi herhangi bir ek çabaya gerek kalmadan geliştirme ortamlarında kolayca test edin.
  • Üretim ortamında gerçek telefon numaralarına normalde uygulanan güvenlik kontrolleri tarafından engellenmeden entegrasyon testleri yazın.

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

  1. Gerçekten kurgusal olan ve halihazırda mevcut olmayan telefon numaralarını kullandığınızdan emin olun. Firebase Kimlik Doğrulaması, gerçek kullanıcılar tarafından kullanılan mevcut telefon numaralarını test numaraları olarak ayarlamanıza izin vermez. Seçeneklerden biri, ABD test telefon numaraları olarak 555 ön ekli numarayı 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. 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 edilmesi zor olan test telefon numaralarını/kodlarını kullanın ve bunları sık sık değiştirin.

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

  1. Firebase konsolunda Kimlik Doğrulama bölümünü açın.
  2. Oturum açma yöntemi sekmesinde, henüz yapmadıysanız 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. Söz konusu 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 simgesine tıklayarak telefon numarasını ve kodunu silebilirsiniz.

Manuel test

Uygulamanızda doğrudan kurgusal bir telefon numarası kullanmaya başlayabilirsiniz. Bu, geliştirme aşamalarında kota sorunları veya kısıtlamalarla karşılaşmadan manuel test yapmanıza olanak tanır. Ayrıca Google Play Hizmetleri yüklü olmadan doğrudan bir iOS simülatöründen veya Android emülatöründen de 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 ö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 bir telefon numarası kullanıcısıyla aynı davranış ve özelliklere sahiptir ve Gerçek Zamanlı Veritabanı/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.

Diğer bir seçenek de, erişimi daha da kısıtlamak istiyorsanız bu kullanıcıları sahte kullanıcılar olarak ayırt etmek için bu kullanıcılar üzerinde özel talepler aracılığıyla bir test rolü ayarlamaktır .

Entegrasyon testi

Firebase Authentication, manuel teste ek olarak telefon kimlik doğrulama testi için entegrasyon testlerinin yazılmasına yardımcı olacak API'ler sağlar. Bu API'ler, web'de reCAPTCHA gereksinimini ve iOS'ta sessiz anında bildirimleri 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 yeteneğinin sağlanmasına da yardımcı olurlar.

Web'de, firebase.auth.RecaptchaVerifier öğesini oluşturmadan önce appVerificationDisabledForTesting öğesini true olarak ayarlayın. Bu, reCAPTCHA'yı otomatik olarak çözer ve telefon numarasını manuel olarak çözmeden aktarmanıza olanak tanır. reCAPTCHA devre dışı olsa bile, kurgusal olmayan bir telefon numarası kullanıldığında oturum açmanın yine de başarısız olacağı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 = "+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ğrulama 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, ikinci bir gecikmeden çok kısa bir süre sonra otomatik olarak kendini çözer. Bu, kullanıcının oluşturmanın hemen ardından reCAPTCHA'yı tıklamasına eşdeğerdir. reCAPTCHA yanıtı bir süre sonra sona erecek ve ardından yeniden otomatik çözümlenecektir.
  • Görünmez reCAPTCHA : Görünmez reCAPTCHA, oluşturma sırasında otomatik olarak çözümlemez; bunun yerine bunu appVerifier.verify() çağrısında veya reCAPTCHA'nın düğme bağlantısı ikinci bir gecikmeden sonra tıklandığında yapar. Benzer şekilde, yanıtın süresi 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ıklatıldığında otomatik olarak çözümlenecektir.

Sahte bir reCAPTCHA çözümlendiğinde, karşılık gelen geri çağırma işlevi, sahte yanıtla beklendiği gibi tetiklenir. Bir süre sonu geri çağrısı da belirtilirse, süre dolduğunda 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 bilgileriyle (yani kullanıcı adı ve parolası, telefon numarası veya kimlik doğrulama sağlayıcı bilgileri) ilişkilendirilir. 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 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 Doğrulama nesnesine bir gözlemci ayarlamaktır. Daha sonra kullanıcının temel profil bilgilerini User nesnesinden alabilirsiniz. Bkz . Kullanıcıları Yönetme .

  • Firebase Gerçek Zamanlı Veritabanı ve Bulut Depolama Güvenliği Kurallarınızda , oturum açan kullanıcının benzersiz kullanıcı kimliğini auth değişkeninden alabilir ve bunu, kullanıcının hangi verilere erişebileceğini kontrol etmek için kullanabilirsiniz.

Kimlik doğrulama sağlayıcısı 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 arayın:

Web modular API

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

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

Web namespaced API

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