Uwierzytelnij się 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 interfejsu FirebaseUI , który zawiera widżet logowania, który implementuje przepływy logowania do logowania za pomocą numeru telefonu, a także logowanie oparte na haśle i federacyjne -w. W tym dokumencie opisano, jak zaimplementować proces logowania za pomocą numeru telefonu przy użyciu pakietu SDK Firebase.

Zanim zaczniesz

Obawy dotyczące bezpieczeństwa

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

Jeśli korzystasz z logowania na podstawie numeru telefonu w swojej aplikacji, powinieneś oferować je wraz z bezpieczniejszymi metodami logowania i informować użytkowników o kompromisach związanych z używaniem logowania za pomocą numeru telefonu.

Włącz logowanie przy użyciu numeru telefonu do projektu Firebase

Aby logować użytkowników przez SMS, musisz najpierw włączyć metodę logowania na numer telefonu w swoim projekcie Firebase:

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

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

Skonfiguruj weryfikator reCAPTCHA

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

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

Obiekt RecaptchaVerifier obsługuje niewidoczne reCAPTCHA , które często mogą zweryfikować użytkownika bez konieczności podejmowania jakichkolwiek działań przez użytkownika, a także widżet reCAPTCHA, który zawsze wymaga interakcji użytkownika, aby zakończyć się pomyślnie.

Podstawowy renderowany reCAPTCHA można zlokalizować zgodnie z preferencjami użytkownika, aktualizując kod języka w wystąpieniu Auth przed renderowaniem reCAPTCHA. Powyższa lokalizacja będzie dotyczyć również wiadomości SMS wysyłanej do użytkownika, zawierającej kod weryfikacyjny.

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

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

Użyj niewidocznego reCAPTCHA

Aby użyć niewidocznego reCAPTCHA, utwórz obiekt RecaptchaVerifier z parametrem size ustawionym na invisible , określając identyfikator przycisku, który przesyła formularz logowania. Na przykład:

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

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

Użyj widżetu reCAPTCHA

Aby użyć widocznego widżetu reCAPTCHA, utwórz element na swojej stronie, który będzie zawierał widżet, a następnie utwórz obiekt RecaptchaVerifier , określając identyfikator kontenera, gdy to zrobisz. Na przykład:

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

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

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

Opcjonalnie: określ parametry reCAPTCHA

Możesz opcjonalnie ustawić funkcje zwrotne w obiekcie RecaptchaVerifier które są wywoływane, gdy użytkownik rozwiązuje reCAPTCHA lub reCAPTCHA wygasa przed wysłaniem formularza:

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

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

Opcjonalnie: wyrenderuj wstępnie reCAPTCHA

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

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

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

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

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

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

Wyślij kod weryfikacyjny na telefon użytkownika

Aby zainicjować logowanie za pomocą numeru telefonu, przedstaw użytkownikowi interfejs, który prosi o podanie numeru telefonu, a następnie zadzwoń do funkcji signInWithPhoneNumber aby poprosić signInWithPhoneNumber o wysł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 zgodnie z najlepszą praktyką i aby określić oczekiwania użytkowników, należy ich poinformować, że jeśli korzystają z logowania telefonicznego, mogą otrzymać wiadomość SMS do weryfikacji i zastosować standardowe stawki.

2. Call signInWithPhoneNumber , przekazując do niego numer telefonu użytkownika i utworzony wcześniej RecaptchaVerifier .

   Web v8

   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

   Web v9

   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

   Jeśli signInWithPhoneNumber skutkuje 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);
   }
   

Metoda signInWithPhoneNumber reCAPTCHA do użytkownika, a jeśli użytkownik przejdzie wyzwanie, żąda, aby funkcja uwierzytelniania Firebase wysłała wiadomość SMS zawierającą kod weryfikacyjny na telefon użytkownika.

Zaloguj użytkownika za pomocą kodu weryfikacyjnego

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

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

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

Jeśli połączenie 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 dzwonić do 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);

Testuj z fikcyjnymi numerami telefonów

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

• Przetestuj uwierzytelnianie numeru telefonu bez zużywania limitu użytkowania.
• Przetestuj uwierzytelnianie numeru telefonu bez wysyłania faktycznej wiadomości SMS.
• Uruchom kolejne testy z tym samym numerem telefonu bez dławienia. Minimalizuje to ryzyko odrzucenia podczas procesu przeglądu App Store, jeśli recenzent użyje tego samego numeru telefonu do testów.
• Testuj z łatwością w środowiskach programistycznych bez dodatkowego wysiłku, takiego jak możliwość tworzenia w symulatorze iOS lub emulatorze Androida bez usług Google Play.
• Pisz testy integracyjne bez blokowania przez kontrole bezpieczeństwa zwykle stosowane na rzeczywistych numerach 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 są rzeczywiście fikcyjne i jeszcze nie istnieją. Uwierzytelnianie Firebase nie pozwala ustawić istniejących numerów telefonów używanych przez rzeczywistych użytkowników jako numerów testowych. Jedną z opcji jest użycie 555 numerów z prefiksem jako numerów testowych w USA, na przykład: +1 650-555-3434
2. Numery telefonów muszą być poprawnie sformatowane pod względem długości i innych ograniczeń. Będą nadal przechodzić tę samą weryfikację, co numer telefonu rzeczywistego użytkownika.
3. Możesz dodać do 10 numerów telefonów do programowania.
4. Używaj testowych numerów / kodów telefonó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 dostawcę 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. W razie potrzeby 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 bezpośrednio zacząć używać fikcyjnego numeru telefonu w swojej aplikacji. Pozwala to na wykonywanie ręcznych testów na etapach programowania bez problemów z przydziałami lub ograniczania 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, SMS nie zostanie wysłany. Zamiast tego musisz podać wcześniej skonfigurowany kod weryfikacyjny, aby ukończyć logowanie.

Po zakończeniu logowania zostaje utworzony użytkownik Firebase z tym numerem telefonu. Użytkownik ma takie samo zachowanie i właściwości, jak prawdziwy użytkownik numeru telefonu i może uzyskać dostęp do bazy danych czasu rzeczywistego / Cloud Firestore i innych usług w ten sam sposób. Identyfikator wybity podczas tego procesu ma taki sam podpis jak prawdziwy użytkownik numeru telefonu.

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

Testy integracyjne

Oprócz testów ręcznych Uwierzytelnianie Firebase udostępnia interfejsy API ułatwiające pisanie testów integracyjnych na potrzeby testów uwierzytelniania przez telefon. Te interfejsy API wyłączają weryfikację aplikacji, wyłączając wymaganie reCAPTCHA w sieci i ciche powiadomienia push w iOS. Dzięki temu testowanie automatyzacji jest możliwe w tych przepływach i jest łatwiejsze do wdrożenia. Ponadto pomagają zapewnić możliwość testowania przepływów natychmiastowej weryfikacji w systemie Android.

W internecie ustaw appVerificationDisabledForTesting na true przed renderowaniem firebase.auth.RecaptchaVerifier . Spowoduje to automatyczne rozwiązanie problemu z reCAPTCHA, umożliwiając przekazanie numeru telefonu bez ręcznego rozwiązywania tego problemu. Pamiętaj, że nawet jeśli reCAPTCHA jest wyłączone, logowanie nie jest możliwe przy użyciu niefikcyjnego numeru telefonu. W tym interfejsie API można używać tylko 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 pozorowane weryfikatory aplikacji reCAPTCHA zachowują się inaczej, gdy weryfikacja aplikacji jest wyłączona:

• Widoczne reCAPTCHA : Kiedy widoczne reCAPTCHA jest renderowane przez appVerifier.render() , automatycznie rozwiązuje się po ułamku sekundy. Jest to równoważne kliknięciu przez użytkownika reCAPTCHA natychmiast po renderowaniu. Odpowiedź reCAPTCHA wygaśnie po pewnym czasie i zostanie ponownie automatycznie rozwiązana.
• Niewidoczne reCAPTCHA : Niewidoczne reCAPTCHA nie są automatycznie rozwiązywane podczas renderowania, a zamiast tego robi to w appVerifier.verify() lub po kliknięciu kotwicy przycisku reCAPTCHA po ułamku sekundy. Podobnie, odpowiedź wygaśnie po pewnym czasie i zostanie rozwiązana automatycznie tylko po appVerifier.verify() lub po ponownym kliknięciu kotwicy przycisku reCAPTCHA.

Za każdym razem, gdy próbna reCAPTCHA zostanie rozwiązana, odpowiednia funkcja wywołania zwrotnego jest wyzwalana zgodnie z oczekiwaniami 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 loguje się po raz pierwszy, tworzone jest nowe konto użytkownika i jest ono łączone z poświadczeniami - czyli nazwą użytkownika i hasłem, numerem telefonu lub informacjami dostawcy uwierzytelniania - zalogowanym użytkownikiem. To nowe konto jest przechowywane jako część projektu Firebase i może służyć do identyfikacji użytkownika we wszystkich aplikacjach w Twoim projekcie, niezależnie od tego, w jaki sposób się on zaloguje.

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

• W Firebase Realtime Database i Cloud Storage Rules możesz uzyskać unikalny identyfikator zalogowanego użytkownika ze zmiennej auth i używać go do kontrolowania, do jakich danych użytkownik ma 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 signOut :

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

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

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