JavaScript Kullanarak 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 yer alan tek seferlik bir kodu kullanarak oturum açar.

Uygulamanıza telefon numarasıyla oturum açma bilgilerini 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'ı olan FirebaseUI'yi kullanmaktır. Bu belgede, Firebase SDK'sı kullanılarak telefon numarasıyla oturum açma akışının nasıl uygulanacağı açıklanmaktadır.

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üvenlikle ilgili endişeler

Telefon numarasına sahip olunması kullanıcılar arasında kolayca aktarılabildiğinden, yalnızca telefon numarası kullanarak kimlik doğrulama Kolay olmakla birlikte mevcut diğer yöntemlere göre daha az güvenlidir. Ayrıca, birden çok kullanıcı profiline sahip cihazlarda, SMS mesajları alabilen tüm kullanıcılar cihazın telefon numarasını kullanarak bir hesapta oturum açabilir.

Uygulamanızda telefon numarasına dayalı oturum açma 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 avantajları konusunda bilgilendirmelisiniz.

Firebase projeniz için Telefon Numarası ile oturum açma özelliğini etkinleştirme

Kullanıcıların SMS ile oturum açmasını istiyorsanız ö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, uygulamanızı barındıracak alan OAuth yönlendirme alanları bölümünde listelenmiyorsa kendi alanınızı ekleyin. Telefonla kimlik doğrulama işlemi yapmak amacıyla, localhost'un barındırılan alan adı olarak kullanılmasına izin verilmediğini unutmayın.

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

reCAPTCHA doğrulayıcıyı ayarlama

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

Manuel olarak reCAPTCHA istemcisi ayarlamanıza gerek yoktur. Firebase SDK'sının RecaptchaVerifier nesnesini kullandığınızda, Firebase gerekli istemci anahtarlarını ve gizli anahtarları otomatik olarak oluşturur ve işler.

RecaptchaVerifier nesnesi, genellikle herhangi bir kullanıcı işlemi gerekmeden kullanıcıyı doğrulayabilen görünmez reCAPTCHA'yı ve her zaman başarıyla tamamlanması için kullanıcı etkileşimi gerektiren reCAPTCHA widget'ını destekler.

Temel oluşturulan reCAPTCHA, reCAPTCHA'yı oluşturmadan önce Auth örneğindeki dil kodu güncellenerek kullanıcının tercihine göre yerelleştirilebilir. 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();

Web

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

Görünmez reCAPTCHA kullan

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

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

Web

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 daha sonra bunu yaparken kapsayıcının kimliğini belirterek bir RecaptchaVerifier nesnesi oluşturun. Örneğin:

Web

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

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

Web

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

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

İsteğe bağlı olarak 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 çağırma işlevleri ayarlayabilirsiniz:

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

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

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

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

Web

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

Web

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

render çözümlendikten sonra reCAPTCHA'nın widget kimliğini alırsınız. Bu kimliği reCAPTCHA API'sine çağrı yapmak için kullanabilirsiniz:

Web

const recaptchaResponse = grecaptcha.getResponse(recaptchaWidgetId);

Web

const recaptchaResponse = grecaptcha.getResponse(recaptchaWidgetId);

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

Telefon numarasıyla oturum açmayı başlatmak için kullanıcıya, telefon numarasını girmesini isteyen bir arayüz sunun ve ardından Firebase'in kullanıcının telefonuna SMS ile bir kimlik doğrulama kodu göndermesini istemek için signInWithPhoneNumber numaralı telefonu arayın:

  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 amacıyla, telefonla oturum açmaları halinde doğrulama için bir SMS mesajı alabileceklerini ve standart ücretin geçerli olacağını onlara bildirmeniz gerekir.

  2. signInWithPhoneNumber numaralı telefonu arayıp kullanıcının telefon numarasını ve daha önce oluşturduğunuz RecaptchaVerifier numarasını da iletin.

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

    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
          // ...
        });
    signInWithPhoneNumber 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 sorgulamasını gönderir ve kullanıcı bu sorgulamayı geçerse Firebase Authentication'ın kullanıcının telefonuna doğrulama kodu içeren bir SMS mesajı göndermesini ister.

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

signInWithPhoneNumber araması başarılı olduktan sonra kullanıcıdan SMS ile aldığı doğrulama kodunu yazmasını isteyin. Ardından, kodu signInWithPhoneNumber istek karşılama işleyicisine (yani then bloğuna) geçirilen ConfirmationResult nesnesinin confirm yöntemine ileterek kullanıcıda oturum açın. Örnek:

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

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

confirm çağrısı başarılı olduysa kullanıcının oturumu başarıyla açılmış demektir.

Ara AuthCredential nesnesini alma

Kullanıcının hesabı için bir AuthCredential nesnesi almanız gerekiyorsa confirm yöntemini çağırmak yerine onay sonucundaki doğrulama kodunu ve doğrulama kodunu PhoneAuthProvider.credential adresine iletin:

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

Ardından, kimlik bilgileriyle kullanıcının oturumunu açabilirsiniz:

firebase.auth().signInWithCredential(credential);

Kurgusal telefon numaralarıyla test etme

Firebase konsolu aracılığıyla geliştirme için kurgusal telefon numaraları ayarlayabilirsiniz. Kurgusal telefon numaralarıyla test etmek ş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.
  • Kısıtlama olmadan aynı telefon numarasıyla art arda testler yapın. Bu, incelemecinin test için aynı telefon numarasını kullanması durumunda uygulama mağazası inceleme sürecinde reddedilme riskini en aza indirir.
  • iOS simülatöründe veya Google Play Hizmetleri olmadan bir Android emülatöründe uygulama geliştirebilmek gibi ek çaba gerektirmeden geliştirme ortamlarında kolayca test yapın.
  • Entegrasyon testlerini normalde üretim ortamındaki gerçek telefon numaralarına uygulanan güvenlik denetimleri tarafından engellenmeden yazın.

Gerçek olmayan telefon numaraları aşağıdaki şartları karşılamalıdır:

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

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

  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. Test için telefon numaraları akordeon menüsünü açın.
  4. Test etmek istediğiniz telefon numarasını girin, örneğin: +1 650-555-3434.
  5. Söz konusu numaranın 6 haneli doğrulama kodunu girin, örneğin: 654321.
  6. Numarayı ekleyin. Gerekirse fareyle ilgili satırın üzerine gelip çöp kutusu simgesini tıklayarak telefon numarasını ve kodunu silebilirsiniz.

Manuel test

Uygulamanızda hayali bir telefon numarası kullanmaya doğrudan başlayabilirsiniz. Bu sayede, geliştirme aşamalarında kota sorunlarıyla veya kısıtlamalarla karşılaşmadan manuel test yapabilirsiniz. Google Play Hizmetleri yüklü olmadan, doğrudan bir iOS simülatörü veya Android emülatörü kullanarak da test yapabilirsiniz.

Kurgusal telefon numarasını sağlayıp 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, ilgili telefon numarasıyla bir Firebase kullanıcısı oluşturulur. Kullanıcı, gerçek 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 jetonu, gerçek bir telefon numarası kullanıcısıyla aynı imzaya sahiptir.

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

Entegrasyon testi

Firebase Authentication, manuel teste ek olarak telefon kimlik doğrulama testi için entegrasyon testlerini yazmaya yardımcı olan API'ler sağlar. Bu API'ler, web'de reCAPTCHA gerekliliğini ve iOS'ta sessiz push bildirimlerini devre dışı bırakarak uygulama doğrulamasını devre dışı bırakır. Böylece bu akışlarda otomasyon testleri yapılabilir ve uygulanması kolaylaşı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 işlem, reCAPTCHA'yı otomatik olarak çözerek telefon numarasını manuel olarak çözmeden iletmenize olanak tanır. reCAPTCHA devre dışı bırakılmış olsa bile, kurgusal olmayan bir telefon numarası kullanıldığında oturum açma işleminin 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 olan reCAPTCHA uygulaması 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, birkaç saniyelik gecikmenin ardından kendiliğinden kendiliğinden çözülür. Bu, kullanıcının görüntüleme işleminden hemen sonra reCAPTCHA'yı tıklamasıyla aynı etkiye sahiptir. reCAPTCHA yanıtının süresi bir süre sonra dolar ve ardından tekrar otomatik olarak çözümlenir.
  • Görünmez reCAPTCHA: Görünmez reCAPTCHA, oluşturma sırasında otomatik olarak çözümlenmez ve bunu appVerifier.verify()çağrıda 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 dolar 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ümlenir.

Sahte bir reCAPTCHA çözümlendiğinde karşılık gelen geri çağırma işlevi, beklendiği gibi sahte yanıtla tetiklenir. Bir geçerlilik sonu geri çağırması da belirtilmişse bu işlem, geçerlilik bitiş tarihinde tetiklenir.

Sonraki adımlar

Bir kullanıcı ilk kez oturum açtığında yeni bir kullanıcı hesabı oluşturulur ve oturum açan kullanıcının kimlik bilgilerine (kullanıcı adı, şifre, telefon numarası veya kimlik doğrulama sağlayıcı 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ığı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 nesnesinde bir gözlemci ayarlamaktır. Daha sonra, kullanıcının temel profil bilgilerini User nesnesinden alabilirsiniz. Kullanıcıları Yönetme sayfasına göz atın.

  • Firebase Realtime Database ve Cloud Storage Güvenlik Kurallarınızda, oturum açan kullanıcının benzersiz kullanıcı kimliğini auth değişkeninden alabilir ve kullanıcının erişebileceği verileri 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 numaralı telefonu arayın:

Web

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

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

Web

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