Uwierzytelnij w Firebase za pomocą numeru telefonu za pomocą JavaScript, Uwierzytelnij w Firebase za pomocą numeru telefonu za pomocą JavaScript

Możesz użyć uwierzytelniania Firebase, aby zalogować użytkownika, wysyłając wiadomość SMS na telefon użytkownika. Użytkownik loguje się za pomocą jednorazowego kodu zawartego w wiadomości SMS.

Najłatwiejszym sposobem dodania logowania za pomocą numeru telefonu do aplikacji jest użycie FirebaseUI , który zawiera widżet logowania, który implementuje przepływy logowania na potrzeby logowania się za pomocą numeru telefonu, a także logowanie oparte na hasłach i federacyjne -W. W tym dokumencie opisano, jak zaimplementować proces logowania się za pomocą numeru telefonu przy użyciu pakietu SDK Firebase.

Zanim zaczniesz

Jeśli jeszcze tego nie zrobiłeś, skopiuj fragment inicjujący z konsoli Firebase do swojego projektu, jak opisano w artykule Dodawanie Firebase do projektu JavaScript .

Obawy dotyczące bezpieczeństwa

Uwierzytelnianie przy użyciu samego numeru telefonu, choć wygodne, jest mniej bezpieczne niż inne dostępne metody, ponieważ posiadanie numeru telefonu można łatwo przenosić pomiędzy użytkownikami. Ponadto na urządzeniach z wieloma profilami użytkowników każdy użytkownik mogący odbierać wiadomości SMS może zalogować się na konto przy użyciu numeru telefonu urządzenia.

Jeśli w swojej aplikacji używasz logowania przy użyciu numeru telefonu, powinieneś zaoferować tę opcję obok bezpieczniejszych metod logowania i poinformować użytkowników o kompromisach w zakresie bezpieczeństwa, jakie wiążą się z logowaniem się za pomocą numeru telefonu.

Włącz logowanie za pomocą numeru telefonu w swoim projekcie Firebase

Aby logować użytkowników za pomocą wiadomości SMS, musisz najpierw włączyć metodę logowania za pomocą numeru telefonu w swoim projekcie Firebase:

  1. W konsoli Firebase otwórz sekcję Uwierzytelnianie .
  2. Na stronie Metoda logowania włącz metodę logowania za pomocą numeru telefonu .
  3. Na tej samej stronie, jeśli domena, na której będzie hostowana Twoja aplikacja, nie jest wymieniona w sekcji Domeny przekierowań OAuth , dodaj swoją domenę.

Limit żądań logowania na numer telefonu w Firebase jest na tyle wysoki, że nie będzie to miało wpływu na większość aplikacji. Jeśli jednak chcesz zalogować bardzo dużą liczbę użytkowników przy użyciu uwierzytelniania telefonicznego, może być konieczne uaktualnienie planu cenowego. Zobacz stronę z cenami .

Skonfiguruj weryfikator reCAPTCHA

Zanim będziesz mógł logować użytkowników przy użyciu ich numerów telefonów, musisz skonfigurować weryfikator reCAPTCHA w Firebase. Firebase używa reCAPTCHA, aby zapobiegać nadużyciom, np. upewniając się, że prośba o weryfikację numeru telefonu pochodzi z jednej z domen dozwolonych w Twojej aplikacji.

Nie musisz ręcznie konfigurować klienta reCAPTCHA; gdy używasz obiektu RecaptchaVerifier pakietu Firebase SDK, Firebase automatycznie tworzy i obsługuje wszelkie niezbędne klucze i sekrety klienta.

Obiekt RecaptchaVerifier obsługuje niewidoczną reCAPTCHA , która często może zweryfikować użytkownika bez konieczności wykonywania jakichkolwiek działań ze strony użytkownika, a także widżet reCAPTCHA, który zawsze wymaga interakcji użytkownika, aby zakończyć się pomyślnie.

Bazowy renderowany reCAPTCHA można zlokalizować zgodnie z preferencjami użytkownika, aktualizując kod języka w instancji Auth przed wyrenderowaniem reCAPTCHA. Powyższa lokalizacja będzie dotyczyć także wysyłanej do użytkownika wiadomości SMS zawierającej kod weryfikacyjny.

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

Użyj niewidocznego reCAPTCHA

Aby użyć niewidocznej reCAPTCHA, utwórz obiekt RecaptchaVerifier z parametrem size ustawionym na invisible , podając identyfikator przycisku przesyłającego formularz logowania. Na przykład:

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

Skorzystaj z widżetu reCAPTCHA

Aby skorzystać z widocznego widżetu reCAPTCHA, utwórz na swojej stronie element zawierający widżet, a następnie utwórz obiekt RecaptchaVerifier , podając przy tym identyfikator kontenera. Na przykład:

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');

Opcjonalnie: Określ parametry reCAPTCHA

Opcjonalnie możesz ustawić funkcje wywołania zwrotnego w obiekcie RecaptchaVerifier , które będą wywoływane, gdy użytkownik rozwiąże zadanie reCAPTCHA lub reCAPTCHA wygaśnie przed wysłaniem formularza przez użytkownika:

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

Opcjonalnie: wstępnie wyrenderuj plik reCAPTCHA

Jeśli chcesz wstępnie wyrenderować reCAPTCHA przed przesłaniem żądania logowania, wywołaj render :

Web modular API

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

Web namespaced API

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

Po zakończeniu render otrzymasz identyfikator widżetu reCAPTCHA, którego możesz użyć do wywołania interfejsu API reCAPTCHA :

Web modular API

const recaptchaResponse = grecaptcha.getResponse(recaptchaWidgetId);

Web namespaced API

const recaptchaResponse = grecaptcha.getResponse(recaptchaWidgetId);

Wyślij kod weryfikacyjny na telefon użytkownika

Aby zainicjować logowanie za pomocą numeru telefonu, wyświetl użytkownikowi interfejs, który poprosi go o podanie numeru telefonu, a następnie wywołaj funkcję signInWithPhoneNumber , aby poprosić Firebase o przesłanie kodu uwierzytelniającego na telefon użytkownika za pomocą wiadomości SMS:

  1. Uzyskaj numer telefonu użytkownika.

    Wymagania prawne są różne, ale w ramach najlepszej praktyki i w celu ustalenia oczekiwań użytkowników należy poinformować ich, że w przypadku korzystania z logowania przez telefon mogą otrzymać wiadomość SMS w celu weryfikacji i obowiązywać będą standardowe stawki.

  2. Wywołaj signInWithPhoneNumber , przekazując jej numer telefonu użytkownika oraz utworzony wcześniej RecaptchaVerifier .

    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
          // ...
        });
    Jeśli signInWithPhoneNumber zakończy się błędem, zresetuj reCAPTCHA, aby użytkownik mógł spróbować ponownie:
    grecaptcha.reset(window.recaptchaWidgetId);
    
    // Or, if you haven't stored the widget ID:
    window.recaptchaVerifier.render().then(function(widgetId) {
      grecaptcha.reset(widgetId);
    });
    

signInWithPhoneNumber wysyła użytkownikowi wezwanie reCAPTCHA, a jeśli użytkownik je zaliczy, żąda, aby usługa Firebase Authentication wysłała na telefon użytkownika wiadomość SMS zawierającą kod weryfikacyjny.

Zaloguj użytkownika za pomocą kodu weryfikacyjnego

Po pomyślnym wywołaniu funkcji signInWithPhoneNumber poproś użytkownika o wpisanie kodu weryfikacyjnego otrzymanego w wiadomości SMS. Następnie zaloguj się, przekazując kod do metody confirm ConfirmationResult , który został przekazany do modułu obsługi realizacji signInWithPhoneNumber (czyli jego bloku then ). Na przykład:

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

Jeśli wywołanie w celu confirm powiodło się, użytkownik został pomyślnie zalogowany.

Pobierz pośredni obiekt AuthCredential

Jeśli chcesz uzyskać obiekt AuthCredential dla konta użytkownika, przekaż kod weryfikacyjny z wyniku potwierdzenia i kod weryfikacyjny do PhoneAuthProvider.credential zamiast wywoływać confirm :

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

Następnie możesz zalogować użytkownika przy użyciu poświadczeń:

firebase.auth().signInWithCredential(credential);

Przetestuj z fikcyjnymi numerami telefonów

Możesz skonfigurować fikcyjne numery telefonów do programowania za pomocą konsoli Firebase. Testowanie z fikcyjnymi numerami telefonów zapewnia następujące korzyści:

  • Przetestuj uwierzytelnianie numeru telefonu bez zużywania limitu wykorzystania.
  • Przetestuj uwierzytelnianie numeru telefonu bez wysyłania wiadomości SMS.
  • Przeprowadzaj kolejne testy z tym samym numerem telefonu, nie ulegając ograniczeniom. Minimalizuje to ryzyko odrzucenia podczas procesu recenzji w App Store, jeśli recenzent użyje tego samego numeru telefonu do testów.
  • Możliwość łatwego testowania w środowiskach programistycznych bez dodatkowego wysiłku, takiego jak możliwość programowania w symulatorze iOS lub emulatorze Androida bez Usług Google Play.
  • Pisz testy integracyjne bez blokowania przez kontrole bezpieczeństwa zwykle stosowane w przypadku rzeczywistych numerów telefonów w środowisku produkcyjnym.

Fikcyjne numery telefonów muszą spełniać te wymagania:

  1. Upewnij się, że używasz numerów telefonów, które rzeczywiście są fikcyjne i jeszcze nie istnieją. Uwierzytelnianie Firebase nie pozwala na ustawienie istniejących numerów telefonów używanych przez prawdziwych użytkowników jako numerów testowych. Jedną z opcji jest użycie numerów 555 z prefiksem jako testowych numerów telefonów w USA, na przykład: +1 650-555-3434
  2. Numery telefonów muszą być poprawnie sformatowane pod kątem długości i innych ograniczeń. Nadal będą przechodzić tę samą weryfikację, co numer telefonu prawdziwego użytkownika.
  3. Możesz dodać do 10 numerów telefonów do celów rozwoju.
  4. Używaj testowych numerów telefonów/kodów, które są trudne do odgadnięcia i często je zmieniaj.

Twórz fikcyjne numery telefonów i kody weryfikacyjne

  1. W konsoli Firebase otwórz sekcję Uwierzytelnianie .
  2. Na karcie Metoda logowania włącz opcję Dostawca telefonu, jeśli jeszcze tego nie zrobiłeś.
  3. Otwórz menu Numery telefonów do testowania akordeonu.
  4. Podaj numer telefonu, który chcesz przetestować, na przykład: +1 650-555-3434 .
  5. Podaj 6-cyfrowy kod weryfikacyjny dla tego konkretnego numeru, na przykład: 654321 .
  6. Dodaj numer. Jeśli zajdzie taka potrzeba, możesz usunąć numer telefonu i jego kod, najeżdżając kursorem na odpowiedni wiersz i klikając ikonę kosza.

Testowanie ręczne

Możesz od razu zacząć używać fikcyjnego numeru telefonu w swojej aplikacji. Umożliwia to przeprowadzanie testów ręcznych na etapach programowania bez problemów z przydziałami i ograniczaniem przepustowości. Możesz także testować bezpośrednio z symulatora iOS lub emulatora Androida bez zainstalowanych Usług Google Play.

Gdy podasz fikcyjny numer telefonu i wyślesz kod weryfikacyjny, żadna wiadomość SMS nie zostanie wysłana. Zamiast tego musisz podać wcześniej skonfigurowany kod weryfikacyjny, aby dokończyć logowanie.

Po zakończeniu logowania tworzony jest użytkownik Firebase z tym numerem telefonu. Użytkownik ma takie same właściwości i zachowanie jak użytkownik prawdziwego numeru telefonu i może uzyskać dostęp do bazy danych Realtime/Cloud Firestore i innych usług w ten sam sposób. Token identyfikacyjny wybity podczas tego procesu ma taki sam podpis, jak użytkownik prawdziwego numeru telefonu.

Inną opcją jest ustawienie roli testowej za pomocą niestandardowych oświadczeń dla tych użytkowników, aby odróżnić ich od fałszywych użytkowników, jeśli chcesz jeszcze bardziej ograniczyć dostęp.

Testy integracyjne

Oprócz testów ręcznych, uwierzytelnianie Firebase udostępnia interfejsy API, które pomagają pisać testy integracyjne na potrzeby testowania uwierzytelniania telefonicznego. Te interfejsy API wyłączają weryfikację aplikacji, wyłączając wymaganie reCAPTCHA w powiadomieniach internetowych i cichych powiadomieniach push w systemie iOS. Dzięki temu możliwe jest testowanie automatyczne w tych przepływach i łatwiejsze do wdrożenia. Ponadto pomagają zapewnić możliwość testowania natychmiastowych procesów weryfikacji na Androidzie.

W Internecie ustaw wartość appVerificationDisabledForTesting na true przed wyrenderowaniem pliku firebase.auth.RecaptchaVerifier . Spowoduje to automatyczne rozpatrzenie problemu reCAPTCHA, umożliwiając przekazanie numeru telefonu bez konieczności ręcznego jego rozwiązywania. Pamiętaj, że nawet jeśli funkcja reCAPTCHA jest wyłączona, użycie niefikcyjnego numeru telefonu nadal nie umożliwi dokończenia logowania. W tym interfejsie API można używać wyłącznie fikcyjnych numerów telefonów.

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

Widoczne i niewidoczne próbne weryfikatory aplikacji reCAPTCHA zachowują się inaczej, gdy weryfikacja aplikacji jest wyłączona:

  • Widoczny reCAPTCHA : Kiedy widoczny reCAPTCHA jest renderowany za pomocą appVerifier.render() , zostaje on automatycznie rozwiązany po ułamku sekundy opóźnienia. Jest to równoznaczne z kliknięciem przez użytkownika reCAPTCHA natychmiast po renderowaniu. Odpowiedź reCAPTCHA wygaśnie po pewnym czasie, a następnie zostanie automatycznie rozwiązana ponownie.
  • Niewidzialna reCAPTCHA : Niewidzialna reCAPTCHA nie jest rozpoznawana automatycznie podczas renderowania, lecz robi to po wywołaniu appVerifier.verify() lub po kliknięciu kotwicy przycisku reCAPTCHA po ułamku sekundy opóźnienia. Podobnie odpowiedź wygaśnie po pewnym czasie i zostanie automatycznie rozwiązana dopiero po wywołaniu appVerifier.verify() lub po ponownym kliknięciu kotwicy przycisku reCAPTCHA.

Za każdym razem, gdy zostanie rozwiązany próbny reCAPTCHA, zgodnie z oczekiwaniami zostanie uruchomiona odpowiednia funkcja wywołania zwrotnego z fałszywą odpowiedzią. Jeśli określono również wywołanie zwrotne wygaśnięcia, zostanie ono uruchomione po wygaśnięciu.

Następne kroki

Gdy użytkownik zaloguje się po raz pierwszy, zostanie utworzone nowe konto użytkownika i powiązane z poświadczeniami — czyli nazwą użytkownika i hasłem, numerem telefonu lub informacjami o dostawcy uwierzytelniania — za pomocą których użytkownik się zalogował. To nowe konto jest przechowywane jako część Twojego projektu Firebase i może służyć do identyfikowania użytkownika w każdej aplikacji w Twoim projekcie, niezależnie od tego, w jaki sposób użytkownik się loguje.

  • W aplikacjach zalecanym sposobem sprawdzenia stanu uwierzytelnienia użytkownika jest ustawienie obserwatora w obiekcie Auth . Następnie można uzyskać podstawowe informacje o profilu użytkownika z obiektu User . Zobacz Zarządzanie użytkownikami .

  • W regułach bezpieczeństwa bazy danych Firebase Realtime i Cloud Storage możesz uzyskać unikalny identyfikator zalogowanego użytkownika ze zmiennej auth i użyć go do kontrolowania, do jakich danych użytkownik może uzyskać dostęp.

Możesz zezwolić użytkownikom na logowanie się do aplikacji przy użyciu wielu dostawców uwierzytelniania, łącząc poświadczenia dostawcy uwierzytelniania z istniejącym kontem użytkownika.

Aby wylogować użytkownika, wywołaj funkcję signOut :

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