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.

Uygulamanıza telefon numarasıyla oturum açmayı 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şik oturum açma işlemlerini uygulayan bir açılır oturum açma widget'ı içeren FirebaseUI'yi kullanmaktır. -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

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

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. 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, OAuth yönlendirme alanları bölümünde listelenmiyorsa, alanı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. Fiyatlandırma sayfasına bakı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; Firebase SDK'nın RecaptchaVerifier nesnesini kullandığınızda, Firebase gerekli 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 'nın yanı sıra, başarıyla tamamlanması için her zaman kullanıcı etkileşimi gerektiren reCAPTCHA pencere aracını destekler.

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 version 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();
auth_set_language_code.js

Web version 8

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

Web version 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);
auth_phone_recaptcha_verifier_invisible.js

Web version 8

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 pencere aracını kullanmak için sayfanızda pencere aracını içerecek bir öğe oluşturun ve ardından bunu yaptığınızda kapsayıcının kimliğini belirterek bir RecaptchaVerifier nesnesi oluşturun. Örneğin:

Web version 9

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

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

Web version 8

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

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

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

Web version 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);
auth_phone_recaptcha_verifier_visible.js

Web version 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.
    // ...
  }
});
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ını arayın:

Web version 9

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

Web version 8

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:

Web version 9

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

Web version 8

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 arabirim sunun ve ardından SignInWithPhoneNumber'ı arayarak signInWithPhoneNumber 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ş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. Kullanıcının telefon numarasını ve daha önce oluşturduğunuz signInWithPhoneNumber ileterek RecaptchaVerifier öğesini arayın.

    Web version 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
      // ...
    });
    auth_phone_signin.js

    Web version 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
      // ...
    });
    phone-auth.js
    signInWithPhoneNumber bir hatayla sonuçlanırsa, kullanıcının yeniden 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 sorgulamasını gönderir ve kullanıcı bu sorgulamayı geçerse, Firebase Authentication'ın kullanıcının telefonuna bir doğrulama kodu içeren bir SMS mesajı göndermesini ister.

Kullanıcıda 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 'ın yerine getirme işleyicisine (yani, then bloğu) geçirilen ConfirmationResult nesnesinin confirm yöntemine kodu ileterek kullanıcıda oturum açın. Örneğin:

Web version 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?)
  // ...
});
auth_phone_verify_code.js

Web version 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?)
  // ...
});
phone-auth.js

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

Ara AuthCredential nesnesini alın

Kullanıcının hesabı için bir AuthCredential nesnesi almanız gerekiyorsa, onay sonucundan doğrulama kodunu ve doğrulama kodunu, confirm :

var credential = firebase.auth.PhoneAuthProvider.credential(confirmationResult.verificationId, code);
çağırmak yerine PhoneAuthProvider.credential .

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. Seçeneklerden biri, ABD test telefon numaraları olarak 555 önekli numara kullanmaktır, örneğin: +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. 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 . 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 de, erişimi daha fazla kısıtlamak istiyorsanız, onları sahte kullanıcılar olarak ayırt etmek için bu kullanıcılar üzerinde özel talepler aracılığıyla bir test rolü belirlemektir .

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'de, appVerificationDisabledForTesting firebase.auth.RecaptchaVerifier true ayarlayın. 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:

  • Visible reCAPTCHA : Görünür reCAPTCHA, appVerifier.render() aracılığıyla oluşturulduğunda, ikinci bir gecikmenin bir kısmından sonra otomatik olarak kendini çözer. 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 : Görünmez reCAPTCHA, oluşturma sırasında otomatik olarak çözümlenmez ve bunun yerine appVerifier.verify() çağrısında veya reCAPTCHA'nın düğme bağlantısı ikinci bir gecikmeden sonra tıklandığında bunu 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ına yeniden tıklandığında otomatik olarak çözülecektir.

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ı adı ve parolası, telefon numarası veya kimlik doğrulama sağlayıcısı bilgileri gibi kimlik bilgilerine 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ızda, kullanıcınızın auth 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 konusuna bakın.

  • Firebase Gerçek Zamanlı Veritabanınız 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ısı kimlik bilgilerini mevcut bir kullanıcı hesabına bağlayarak, kullanıcıların birden çok 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 version 9

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 version 8

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