Join us for Firebase Summit on November 10, 2021. Tune in to learn how Firebase can help you accelerate app development, release with confidence, and scale with ease. Register

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

Bir kullanıcının telefonuna SMS mesajı göndererek oturum açmak için Firebase Authentication'ı kullanabilirsiniz. Kullanıcı, SMS mesajında ​​bulunan bir kerelik kodu kullanarak oturum açar.

En kolay yolu uygulaması kullanmaktır için oturum açma telefon numarası eklemek için FirebaseUI tarihinde eklendi oturum açma bir damla sunulmasını içerir, uygular oturum açma o akışları telefon numarası için oturum açma, hem de şifreyi tabanlı ve federe işareti -içinde. Bu belge, Firebase SDK kullanılarak bir telefon numarası oturum açma akışının nasıl uygulanacağını açıklar.

Sen başlamadan önce

Zaten yapmadıysanız, gelen başlatma pasajını kopyalayın Firebase konsolunda açıklandığı gibi projenize JavaScript projeye Ekle Firebase .

Güvenlik endişeleri

Yalnızca bir telefon numarası kullanarak kimlik doğrulama, 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ı 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ı tabanlı oturum açmayı kullanıyorsanız, bunu daha güvenli oturum açma yöntemleriyle birlikte sunmalı ve kullanıcıları telefon numarasıyla oturum açmanın güvenlik değiş tokuşları 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ı ile oturum açma yöntemini etkinleştirmelisiniz:

  1. In Firebase konsoluna , Kimlik Doğrulama bölümünü açın.
  2. Yöntem Oturum Açma sayfasında, Telefon Numarası oturum açma yöntemine sağlar.
  3. Uygulamanızı ev sahipliği yapacak alanı OAuth yönlendirme etki bölümünde listelenen değilse aynı sayfasında, adınızı ekleyin.

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

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

Kullanıcılarda telefon numaralarıyla oturum açabilmeniz için 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.

Bir reCAPTCHA istemcisini manuel olarak ayarlamanız gerekmez; Eğer Firebase SDK'nın kullandığınızda RecaptchaVerifier nesnesi Firebase otomatik oluşturur ve gerekli istemci tuşları ve sırları yönetir.

RecaptchaVerifier nesne destekler görünmez Güvenlik kodu her zaman kullanıcı etkileşimi gerektirir eklendi genellikle herhangi bir kullanıcı eylem gerektirmeden kullanıcı doğrulamak için, ve aynı zamanda Güvenlik kodu, başarılı bir şekilde tamamlamak için.

Temel oluşturulan reCAPTCHA, reCAPTCHA'yı oluşturmadan önce Yetkilendirme ö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 ve doğrulama kodunu içeren SMS mesajı için de geçerli olacaktır.

Web sürümü 9

import { getAuth } from "firebase/auth";

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

Web sürümü 8

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'yı kullanmak için, bir oluşturmak RecaptchaVerifier nesneyi size parametre seti invisible formda Oturum açma gönderir düğmeye kimliğini belirterek,. Örneğin:

Web sürümü 9

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

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

Web sürümü 8

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

reCAPTCHA widget'ını kullanın

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

Web sürümü 9

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

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

Web sürümü 8

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

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

İsteğe bağlı olarak üzerine geri arama fonksiyonları ayarlayabilirsiniz RecaptchaVerifier kullanıcı çözer reCAPTCHA'nın veya reCAPTCHA kullanıcı gönderimlerini formu önce sona erdiğinde denir nesne:

Web sürümü 9

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

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

Web sürümü 8

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

Eğer bir oturum açma isteği göndermeden önce reCAPTCHA'yı önceden işlemek istiyorsanız, çağrı render :

Web sürümü 9

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

Web sürümü 8

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

Sonra render giderir, size çağrı yapmak için kullanabilirsiniz reCAPTCHA Widget kimliğini alabilir reCAPTCHA API:

Web sürümü 9

const recaptchaResponse = grecaptcha.getResponse(recaptchaWidgetId);

Web sürümü 8

const recaptchaResponse = grecaptcha.getResponse(recaptchaWidgetId);

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

Telefon numarası istemleri onların telefon numarasını temin etmek olduğunu kullanıcıya bir arayüz sunmak, oturum açma başlatabilir ve ardından aramak için signInWithPhoneNumber Firebase SMS ile kullanıcının telefonuna bir kimlik doğrulama kodu göndermek olduğunu isteğine:

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

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

  2. Çağrı signInWithPhoneNumber , buna kullanıcının telefon numarasını geçirerek ve RecaptchaVerifier önce oluşturduğunuz.

    Web sürümü 9

    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 sürümü 8

    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
          // ...
        });
    Eğer signInWithPhoneNumber hatayla sonuçlanır kullanıcı tekrar deneyin böylece reCAPTCHA'yı reset:
    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 sorunları reCAPTCHA kullanıcıya zorluk ve kullanıcı meydan geçerse, istekleri Firebase Doğrulama kullanıcının telefonuna bir doğrulama kodu içeren bir SMS mesajı göndermek söyledi.

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

Çağrısı sonrası signInWithPhoneNumber başarır, onlar SMS ile gelen doğrulama kodunu yazmak için kullanıcıdan. Daha sonra, kodu geçirilerek kullanıcı oturum confirm yöntemine ConfirmationResult geçildi nesne signInWithPhoneNumber (ise, kendi sitesindeki yerine getirilmesi işleyicisi then blok). Örneğin:

Web sürümü 9

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 sürümü 8

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

Çağrısı Eğer confirm başarılı, kullanıcı başarıyla içinde imzalanır.

Ara AuthCredential nesnesini alın

Bir almak gerekiyorsa AuthCredential kullanıcı hesabının nesne, onay sonucundan doğrulama kodunu ve doğrulama kodunu aktaracak PhoneAuthProvider.credential yerine çağıran confirm :

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

Ardından, kullanıcıya kimlik bilgisi ile giriş yapabilirsiniz:

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 avantajları sağlar:

  • Kullanım kotanızı tüketmeden telefon numarası doğrulamasını test edin.
  • Gerçek bir SMS mesajı göndermeden telefon numarası doğrulamasını test edin.
  • Kısıtlanmadan aynı telefon numarasıyla ardışık testler yapın. Bu, gözden geçirenin 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 harcamadan geliştirme ortamlarında kolayca test edin.
  • Bir üretim ortamında normal olarak 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çekten hayali olan ve halihazırda 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. Örneğin, bir seçenek, ABD testi telefon numaraları gibi 555 öneki sayıları kullanmaktır: 1 650-555-3434
  2. Telefon numaralarının uzunluk ve diğer kısıtlamalar için doğru şekilde 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. In Firebase konsoluna , Kimlik Doğrulama bölümünü açın.
  2. Eğer henüz yapmadıysanız yöntem sekmede Sign olarak, Telefon sağlayıcı sağlar.
  3. Akordiyon menü test etmek için Telefon numaralarını açın.
  4. Örneğin, testin istediğiniz telefon numarasını verin: 1 650-555-3434.
  5. Örneğin, bu belirli bir sayıda 6 haneli bir doğrulama kodu sağlar: 654321.
  6. Numara ekle. Gerekirse, ilgili satırın üzerine gelip çöp kutusu simgesine tıklayarak telefon numarasını ve kodunu silebilirsiniz.

Manuel test

Uygulamanızda doğrudan hayali bir telefon numarası kullanmaya başlayabilirsiniz. Bu, geliştirme aşamalarında kota sorunlarıyla veya kısıtlamalarla karşılaşmadan manuel test yapmanızı sağlar. Ayrıca, 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ı verip 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ışa 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 olan özel talepler yoluyla bir test rol set daha fazla erişimi kısıtlamak istiyorsanız bu kullanıcılar sahte kullanıcıları olarak ayırt etmek.

Entegrasyon testi

Firebase Authentication, manuel teste ek olarak, 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 anında iletme 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 yeteneği sağlamaya yardımcı olurlar.

Web, set üzerinde appVerificationDisabledForTesting için true render önce firebase.auth.RecaptchaVerifier . Bu, reCAPTCHA'yı otomatik olarak çözerek telefon numarasını manuel olarak çözmeden iletmenize olanak tanır. reCAPTCHA devre dışı bırakılsa bile, hayali olmayan bir telefon numarasının kullanılmasının yine de oturum açma işlemini tamamlamayacağı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ğrulama devre dışı bırakıldığında farklı davranır:

  • Görünür reCAPTCHA'nın: görünür Güvenlik kodu ile işlenir zaman appVerifier.render() , otomatik olarak bir saniyelik bir gecikme bir kısmını sonra kendi kendine çözülür. Bu, bir kullanıcının oluşturmadan hemen sonra reCAPTCHA'yı tıklamasına eşdeğerdir. reCAPTCHA yanıtının süresi bir süre sonra sona erecek ve ardından yeniden otomatik olarak çözülecektir.
  • Görünmez reCAPTCHA'nın: Görünmez reCAPTCHA render değil otomatik azmini yapar ve yerine üzerinde yapar appVerifier.verify() çağrı veya reCAPTCHA düğme çapa ikinci gecikme bir fraksiyonu sonra tıklandığında. Benzer şekilde, tepki bir süre sonra sona ve irade yalnızca otomatik kararlılığı ya sonra olacak appVerifier.verify() çağrı veya reCAPTCHA düğme çapa tıklandığında tekrar.

Sahte bir reCAPTCHA çözümlendiğinde, sahte yanıtla beklendiği gibi karşılık gelen geri arama işlevi tetiklenir. Bir süre sonu geri araması da belirtilirse, süre sonunda tetiklenir.

Sonraki adımlar

Bir kullanıcı ilk kez oturum açtıktan sonra, yeni bir kullanıcı hesabı oluşturulur ve oturum açtığı kullanıcının kimlik bilgileriyle (yani kullanıcı adı ve parolası, telefon numarası veya kimlik doğrulama sağlayıcısı 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ığından bağımsız olarak projenizdeki her uygulamada bir kullanıcıyı tanımlamak için kullanılabilir.

  • Uygulamalarınızla olarak, kullanıcı yetkilendirme durumunu öğrenmek için tavsiye edilen yöntem üzerinde bir gözlemci ayarlamaktır Auth nesnesine. Daha sonra, kullanıcının temel profil bilgileri alabilirsiniz User nesnesi. Bkz Kullanıcıları Yönetme .

  • Senin Firebase Gerçek Zamanlı Veritabanı ve Bulut Depolama yılında Güvenlik Kuralları , alabilirsiniz, kullanıcının benzersiz bir kullanıcı kimliği imzalı auth değişkeni ve hangi verilerin kullanıcı teneke erişimi kontrol etmek için kullanabilirsiniz.

Kullanıcıların birden çok kimlik doğrulama sağlayıcıları kullanarak uygulamada oturum izin verebilir mevcut bir kullanıcı hesabına auth sağlayıcı kimlik bilgilerini birbirine bağlayan.

Bir kullanıcı Oturumu kapatmak için çağrı signOut :

Web sürümü 9

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

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

Web sürümü 8

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