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

SMS mesajı göndererek bir kullanıcının oturumunu açmak için Firebase Authentication kullanabilirsiniz kullanıcının telefonuna. Kullanıcı SMS mesajı.

Uygulamanıza telefon numarası ile oturum açma bilgisi eklemenin en kolay yolu FirebaseUI, telefon için oturum açma akışlarını uygulayan bir açılır oturum açma widget'ı içerir numarayla oturum açmanın yanı sıra şifre tabanlı ve birleşik oturum açma. Bu doküman , Firebase SDK'sını kullanarak telefon numarası oturum açma akışının nasıl uygulanacağını açıklar.

Başlamadan önce

Henüz yapmadıysanız ilk kullanıma hazırlama snippet'ini Firebase konsolunu içinde açıklandığı şekilde projenize ekleyin Firebase'i JavaScript projenize ekleyin.

Güvenlikle ilgili sorunlar

Yalnızca telefon numarası kullanarak kimlik doğrulama, kolay olsa da daha az güvenlidir diğer mevcut yöntemlerden farklıdır. Çünkü bir telefon numarasına sahip olmak kullanıcılar arasında kolayca aktarılabilir. Ayrıca, birden fazla kullanıcısı olan cihazlarda SMS mesajı alabilen tüm kullanıcılar bir hesapta oturum açmak için cihazın telefon numarası.

Uygulamanızda telefon numarasına dayalı oturum açma özelliği kullanıyorsanız bunu sunmalısınız güvenli oturum açma yöntemlerine yer verir ve kullanıcıları, güvenliği olumlu sonuçlar doğurabilir.

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

Kullanıcıların SMS ile oturum açmasını sağlamak için önce Telefon Numarası oturum açma özelliğini etkinleştirmeniz gerekir yöntemi belirleyin:

  1. Firebase konsolunda Kimlik Doğrulama bölümünü açın.
  2. Oturum Açma Yöntemi sayfasında Telefon Numarası'nı etkinleştirin oturum açma yöntemini kullanabilirsiniz.
  3. Aynı sayfada, uygulamanızı barındıracak alan adı OAuth yönlendirme alanları bölümüne alanınızı ekleyin. localhost'un barındırılan bir telefon kimlik doğrulaması amacıyla kullanılabilir.

reCAPTCHA doğrulayıcıyı ayarlama

Kullanıcıların telefon numaralarıyla oturum açabilmesi için önce gerekli ayarları yapmanız gerekir: Firebase'in reCAPTCHA doğrulayıcısı. Firebase, aşağıdakiler gibi kötüye kullanımları önlemek için reCAPTCHA'yı kullanır: telefon numarası doğrulama isteğinin izin verilen alan adları için geçerlidir.

Manuel olarak bir reCAPTCHA istemcisi oluşturmanız gerekmez; Firebase SDK'sının RecaptchaVerifier nesnesi, Firebase otomatik olarak gerekli istemci anahtarlarını ve gizli anahtarları oluşturur ve işler.

RecaptchaVerifier nesnesi şunları destekler: görünmez reCAPTCHA: Genellikle herhangi bir kullanıcıya ihtiyaç duymadan kullanıcıyı doğrulayabilir işlemine ve her zaman kullanıcı etkileşimi gerektiren reCAPTCHA widget'ına .

Temel oluşturulan reCAPTCHA, Auth örneğinde, reCAPTCHA'yı oluşturmadan önce dil kodunu kontrol edin. Yukarıda belirtilen yerelleştirme kullanıcıya gönderilen ve doğrulama kodunu içeren SMS mesajı için de geçerli olur.

Web

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

Web

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

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

Web

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

Web

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 bir öğe oluşturarak şunları yapabilirsiniz: widget'ı içermek ve ardından bir RecaptchaVerifier nesnesi oluşturmak istiyorsanız kapsayıcının kimliğini belirtmeniz gerekir. Örnek:

Web

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

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

Web

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

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

İsterseniz RecaptchaVerifier nesnesi reCAPTCHA veya reCAPTCHA geçerlilik süresi, kullanıcı formu göndermeden önce sona erer:

Web

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

Web

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 isterseniz render adlı kişiyi ara:

Web

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

Web

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

render sorun çözüldükten sonra, reCAPTCHA'nın widget kimliğini alırsınız. Bu kimlik, telefon görüşmeleri yapmak için reCAPTCHA API'si:

Web

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

Web

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

Kullanıcının telefonuna doğrulama kodu gönderme

Telefon numarasıyla oturum açmayı başlatmak için kullanıcıya şunu isteyen bir arayüz sunun: telefon numarasını vermesini isteyebilir, sonra da Firebase'den bir istek göndermesini istemek için signInWithPhoneNumber kullanıcının telefonuna SMS ile gönderilen kimlik doğrulama kodu:

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

    Yasal şartlar değişiklik gösterse de en iyi uygulama olarak ve kullanıcılarınızın beklentilerini belirlemek amacıyla, kullandıkları cihazlarda doğrulama ve standart kullanım için bir SMS mesajı alabilirler. uygulanır.

  2. signInWithPhoneNumber adlı kişiyi kullanıcının telefonuna vererek ara numarası ve daha önce oluşturduğunuz RecaptchaVerifier.

    Web

    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

    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 hata verirse Kullanıcının tekrar deneyebilmesi için reCAPTCHA: 
    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 testini düzenler. başlar ve kullanıcı sorgulamayı geçerse Firebase Authentication, şu numaraya doğrulama kodu içeren bir SMS mesajı gönder: telefon numarası.

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

signInWithPhoneNumber çağrısı başarılı olduktan sonra kullanıcının SMS ile aldığı doğrulama kodunu yazmasını isteyin. Ardından, kullanıcının hesabında oturum açın. koduconfirm ConfirmationResult nesne iletildi signInWithPhoneNumber'ın sipariş karşılama işleyicisi (yani then blok). Örneğin:

Web

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

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ı olduysa kullanıcı başarıyla tamamlanmış demektir oturum açıldı.

Ara AuthCredential nesnesini alma

KullanıcınınAuthCredential onay sonucundan doğrulama kodunu iletin ve doğrulama kodunu PhoneAuthProvider.credential yerine confirm aranıyor: 

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

Ardından, aşağıdaki kimlik bilgisini kullanarak kullanıcının oturum açmasını sağlayabilirsiniz:

firebase.auth().signInWithCredential(credential);

Hayali telefon numaralarıyla test etme

Firebase konsolu üzerinden geliştirme için kurgusal telefon numaraları ayarlayabilirsiniz. Hayali telefonla test etme sayılar ş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ıtlamadan, aynı telefon numarasıyla art arda testler yapın. Bu Uygulama mağazası inceleme sürecinde en az test için aynı telefon numarasını kullanın.
  • Örneğin, Google Play Hizmetleri olmadan iOS simülatöründe veya Android emülatöründe geliştirme yeteneği.
  • Entegrasyon testlerini, normalde uygulanan güvenlik kontrolleri tarafından engellenmeden yaz gerçek telefon numaraları için kullandığı bir teknolojidir.

Hayali telefon numaraları aşağıdaki şartları karşılamalıdır:

  1. Gerçekten hayali olan ve daha önce var 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. Seçeneklerden biri, ABD test telefon numaraları olarak 555 önekli numarayı kullanmaktır. Örneğin: +1 650-555-3434
  2. Telefon numaralarının uzunlukları ve diğer özellikleri kısıtlar. Yine de gerçek bir kullanıcının telefon numarasıyla aynı doğrulamadan geçerler.
  3. Geliştirme için en fazla 10 telefon numarası ekleyebilirsiniz.
  4. Tahmin edilmesi ve değiştirilmesi zor test telefon numaraları/kodları kullanın yapmanızı öneririm.

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

  1. Firebase konsolunda şunu açın: Kimlik Doğrulama bölümüne bakın.
  2. Henüz yapmadıysanız Oturum açma yöntemi sekmesinde Telefon sağlayıcısını etkinleştirin.
  3. Test için telefon numaraları akordeon menüsünü açın.
  4. Test etmek istediğiniz telefon numarasını belirtin. Örneğin: +1 650-555-3434.
  5. Bu numara için 6 haneli doğrulama kodunu girin. Örneğin: 654321.
  6. Numarayı ekleyin. Gerekirse telefon numarasını silebilir ve fareyle ilgili satırın üzerine gelip çöp kutusu simgesini tıklayarak kodu.

Manuel test

Uygulamanızda hayali bir telefon numarasını doğrudan kullanmaya başlayabilirsiniz. Bu şekilde şunları yapabilirsiniz: Geliştirme aşamalarında kota sorunları veya kısıtlamayla karşılaşmadan manuel testler gerçekleştirme. Google Play Hizmetleri olmadan doğrudan bir iOS simülatöründen veya Android emülatöründen de test edebilirsiniz yüklendi.

Hayali telefon numarasını girip doğrulama kodunu gönderdiğinizde, gönderilir. Bunun yerine, imza işlemini tamamlamak için önceden yapılandırılmış doğrulama kodunu sağlamanız gerekir inç

Oturum açma işlemi tamamlandığında, bu telefon numarasıyla bir Firebase kullanıcısı oluşturulur. İlgili içeriği oluşturmak için kullanılan kullanıcı, gerçek bir telefon numarası kullanıcısıyla aynı davranışa ve özelliklere sahiptir; ve kullanıcı, Realtime Database/Cloud Firestore ve diğer hizmetlerde aynı şekilde çalışır. sırasında basılan kimlik jetonu bu işlem gerçek bir telefon numarası kullanıcısıyla aynı imzaya sahiptir.

Diğer bir seçenek de, özel hak taleplerine ilişkin ve erişim.

Entegrasyon testi

Firebase Authentication, manuel teste ek olarak entegrasyon testleri yazmaya yardımcı olan API'ler de sağlar. telefon kimlik doğrulama testi için. Bu API'ler reCAPTCHA'yı devre dışı bırakarak uygulama doğrulamayı devre dışı bırakır. ve iOS'teki sessiz push bildirimlerinde kullanabilirsiniz. Bu sayede otomasyon testleri yapabilir ve uygulanması daha kolay olur. Ayrıca, anlık görüntü testi veya doğrulama akışı da mevcut.

Web'de appVerificationDisabledForTesting değerini şuna ayarlayın: firebase.auth.RecaptchaVerifier oluşturmadan önce true. Şu sorunu çözer: reCAPTCHA otomatik olarak gösterilir, böylece telefon numarasını manuel olarak çözmeden iletebilirsiniz. Not reCAPTCHA devre dışı bırakılsa bile, hayali olmayan bir telefon numarası kullanılması durumunda oturum açma işlemini tamamlayı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
      // ...
    });

Uygulama doğrulama işlemi doğrulandığında, görünür ve görünmez reCAPTCHA uygulama doğrulayıcıları farklı davranırlar. devre dışı:

  • Görünür reCAPTCHA: Görünür reCAPTCHA, appVerifier.render(), bir saniyeden daha kısa bir süre sonra kendi kendine çözümlenir Bu, kullanıcının oluşturma işlemini tamamladıktan hemen sonra reCAPTCHA'yı tıklamasıdır. reCAPTCHA yanıtın süresi bir süre sonra dolar ve ardından tekrar otomatik olarak çözülür.
  • Görünmez reCAPTCHA: Görünmez reCAPTCHA, oluşturma sırasında otomatik olarak çözümlenmez. Bunun yerine appVerifier.verify()çağrı veya reCAPTCHA'nın düğme bağlantısı çok kısa bir gecikmenin ardından tıklanan Benzer şekilde, yanıtın süresi de bir süre sonra dolar sonra yalnızca appVerifier.verify() aramasından sonra veya düğme bağlantısı yeniden tıklanır.

Sahte reCAPTCHA çözümlendiğinde, karşılık gelen geri çağırma işlevi beklendiği gibi tetiklenir. yanıt veremiyor. Sona erme süresi geri çağırması da belirtilirse süre dolduğunda tetiklenir.

Sonraki adımlar

Kullanıcı ilk kez oturum açtığında yeni bir kullanıcı hesabı oluşturulur ve bilgileri (kullanıcı adı ve şifre, telefon numarası) Numara veya kimlik doğrulama sağlayıcı bilgileri (oturum açan kullanıcı). Bu yeni Firebase projenizin bir parçası olarak saklanır ve aşağıdaki verileri tanımlamak için kullanılabilir: nasıl oturum açarsa açsın, projenizdeki tüm uygulamalarda kullanılır.

  • Uygulamalarınızda, kullanıcınızın kimlik doğrulama durumunu öğrenmenin önerilen yolu Auth nesnesine bir gözlemci ayarlayın. Ardından, kullanıcının User nesnesindeki temel profil bilgilerini içerir. Görüntüleyin Kullanıcıları Yönetme

  • Firebase Realtime Database ve Cloud Storage içinde Güvenlik Kuralları'nı kullanarak şunları yapabilirsiniz: auth değişkeninden, oturum açmış kullanıcının benzersiz kullanıcı kimliğini alabilirsiniz. ve kullanıcının hangi verilere erişebileceğini kontrol etmek için kullanılır.

Kullanıcıların çoklu kimlik doğrulama kullanarak uygulamanızda oturum açmasına izin verebilirsiniz yetkilendirme sağlayıcısının kimlik bilgilerini hesaba katılmaz.

Bir kullanıcının oturumunu kapatmak için numaralı telefonu arayın signOut:

Web

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

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