Uwierzytelniaj w Firebase za pomocą numeru telefonu z użyciem JavaScriptu

Możesz zalogować użytkownika za pomocą Firebase Authentication, wysyłając SMS-a na jego telefon. Użytkownik loguje się za pomocą jednorazowego kodu zawartego w SMS-ie.

Najprostszym sposobem dodania do aplikacji logowania za pomocą numeru telefonu jest użycie FirebaseUI, które zawiera gotowy widżet logowania implementujący przepływy logowania za pomocą numeru telefonu, a także logowania opartego na haśle i logowania sfederowanego. W tym dokumencie opisujemy, jak wdrożyć proces logowania za pomocą numeru telefonu przy użyciu pakietu SDK Firebase.

Numery telefonów podawane przez użytkowników na potrzeby uwierzytelniania będą przesyłane i przechowywane przez Google w celu ulepszania ochrony przed spamem i nadużyciami w usługach Google, w tym w Firebase. Programiści powinni przed użyciem usługi logowania za pomocą Firebase Authenticationnumeru telefonu uzyskać odpowiednią zgodę użytkownika.

Zanim zaczniesz

Jeśli jeszcze tego nie zrobisz, skopiuj fragment kodu inicjującego z Firebasekonsoli do projektu zgodnie z instrukcjami w artykule Dodawanie Firebase do projektu JavaScript.

Potencjalne problemy z bezpieczeństwem

Uwierzytelnianie za pomocą samego numeru telefonu jest wygodne, ale mniej bezpieczne niż inne dostępne metody, ponieważ własność numeru telefonu można łatwo przenieść między użytkownikami. Na urządzeniach z wieloma profilami użytkowników każdy użytkownik, który może odbierać SMS-y, może zalogować się na konto, używając numeru telefonu urządzenia.

Jeśli w aplikacji używasz logowania za pomocą numeru telefonu, powinieneś/powinnaś oferować je wraz z bezpieczniejszymi metodami logowania i informować użytkowników o kompromisach w zakresie bezpieczeństwa związanych z logowaniem za pomocą numeru telefonu.

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

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

1. W Firebasekonsoli otwórz sekcję Uwierzytelnianie.
2. Na stronie Metoda logowania włącz metodę logowania Numer telefonu.
3. Opcjonalnie: na stronie Ustawienia ustaw zasadę dotyczącą regionów, do których chcesz zezwolić na wysyłanie wiadomości SMS lub im tego zabronić. Ustawienie zasad dotyczących regionu SMS-ów może pomóc chronić aplikacje przed nadużyciami związanymi z SMS-ami.
4. Jeśli na tej samej stronie w sekcji Domeny przekierowań OAuth nie ma domeny, w której będzie hostowana Twoja aplikacja, dodaj ją. Pamiętaj, że w przypadku uwierzytelniania telefonicznego localhost nie jest dozwolony jako hostowana domena.

Konfigurowanie weryfikatora reCAPTCHA

Zanim użytkownicy będą mogli logować się za pomocą numerów telefonów, musisz skonfigurować weryfikator reCAPTCHA Firebase. Firebase używa reCAPTCHA, aby zapobiegać nadużyciom, np. poprzez upewnianie się, że żądanie weryfikacji numeru telefonu pochodzi z jednej z dozwolonych domen aplikacji.

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

Obiekt RecaptchaVerifier obsługuje niewidoczną reCAPTCHA, która często może zweryfikować użytkownika bez konieczności podejmowania przez niego żadnych działań, a także widżet reCAPTCHA, który zawsze wymaga interakcji użytkownika, aby można było go pomyślnie ukończyć.

Renderowaną reCAPTCHA można dostosować do preferencji użytkownika, aktualizując kod języka w instancji Auth przed renderowaniem reCAPTCHA. Wspomniana lokalizacja będzie też dotyczyć SMS-a wysyłanego do użytkownika z kodem weryfikacyjnym.

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

Korzystanie z niewidocznej reCAPTCHA

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

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

Korzystanie z widżetu reCAPTCHA

Aby użyć widocznego widżetu reCAPTCHA, utwórz w witrynie element, który będzie go zawierać, a następnie utwórz obiekt RecaptchaVerifier, podając przy tym identyfikator kontenera. Przykład:

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

Opcjonalnie: określ parametry reCAPTCHA

Opcjonalnie możesz ustawić funkcje wywołania zwrotnego w obiekcie RecaptchaVerifier, które są wywoływane, gdy użytkownik rozwiąże reCAPTCHA lub gdy reCAPTCHA wygaśnie, zanim użytkownik prześle formularz:

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

Opcjonalnie: wstępne renderowanie reCAPTCHA

Jeśli chcesz wstępnie wyrenderować reCAPTCHA przed przesłaniem prośby o zalogowanie się, wywołaj funkcję render:

Web

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

Web

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

Po rozwiązaniu obietnicy render otrzymasz identyfikator widżetu reCAPTCHA, którego możesz użyć do wywoływania interfejsu API reCAPTCHA:

Web

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

Web

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

Wysyłanie kodu weryfikacyjnego na telefon użytkownika

Aby rozpocząć logowanie za pomocą numeru telefonu, wyświetl użytkownikowi interfejs z prośbą o podanie numeru telefonu, a następnie wywołaj funkcję signInWithPhoneNumber, aby poprosić Firebase o wysłanie kodu uwierzytelniającego na telefon użytkownika SMS-em:

1. Uzyskaj numer telefonu użytkownika.

   Wymagania prawne są różne, ale zgodnie ze sprawdzonymi metodami i aby spełnić oczekiwania użytkowników, należy poinformować ich, że jeśli użyją logowania za pomocą telefonu, mogą otrzymać SMS-a z prośbą o weryfikację, a w takim przypadku obowiązują standardowe stawki.

2. Wywołaj funkcję signInWithPhoneNumber, przekazując do niej numer telefonu użytkownika i utworzony wcześniej obiekt 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

   Jeśli signInWithPhoneNumber spowoduje błąd, 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);
   });

   Uwaga: odpowiednie limity wykorzystania i limity znajdziesz w sekcji Firebase AuthenticationLimity.

Metoda signInWithPhoneNumber wyświetla użytkownikowi test reCAPTCHA, a jeśli użytkownik go przejdzie, wysyła żądanie do Firebase Authentication, aby wysłać SMS-a z kodem weryfikacyjnym na telefon użytkownika.

Aby zapobiec nadużyciom, Firebase ogranicza liczbę wiadomości SMS, które można wysłać na jeden numer telefonu w określonym czasie. Jeśli przekroczysz ten limit, żądania weryfikacji numeru telefonu mogą zostać ograniczone. Jeśli ten problem wystąpi podczas programowania, użyj innego numeru telefonu do testowania lub spróbuj ponownie później.

Logowanie użytkownika za pomocą kodu weryfikacyjnego

Po udanym wywołaniu funkcji signInWithPhoneNumber poproś użytkownika o wpisanie kodu weryfikacyjnego otrzymanego w SMS-ie. Następnie zaloguj użytkownika, przekazując kod do metody confirm obiektu ConfirmationResult, który został przekazany do modułu obsługi realizacji signInWithPhoneNumber (czyli bloku then). Przykład:

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

Jeśli wywołanie confirm się powiodło, użytkownik zostanie zalogowany.

Pobieranie pośredniego obiektu AuthCredential

Jeśli musisz 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 za pomocą danych logowania:

firebase.auth().signInWithCredential(credential);

Testowanie za pomocą fikcyjnych numerów telefonów

Możesz skonfigurować fikcyjne numery telefonów na potrzeby programowania w Firebasekonsoli. Testowanie za pomocą fikcyjnych numerów telefonów ma te zalety:

• Testuj uwierzytelnianie numeru telefonu bez wykorzystywania limitu użycia.
• Testowanie uwierzytelniania numeru telefonu bez wysyłania SMS-a.
• Przeprowadzaj kolejne testy z tym samym numerem telefonu bez ograniczeń. Zmniejsza to ryzyko odrzucenia podczas procesu sprawdzania w sklepie z aplikacjami, jeśli recenzent użyje tego samego numeru telefonu do testowania.
• Łatwe testowanie w środowiskach programistycznych bez dodatkowego wysiłku, np. możliwość tworzenia aplikacji w symulatorze iOS lub emulatorze Androida bez Usług Google Play.
• Pisz testy integracyjne bez blokowania przez kontrole bezpieczeństwa, które są zwykle stosowane w przypadku prawdziwych numerów telefonów w środowisku produkcyjnym.

Wymyślone numery telefonów muszą spełniać te wymagania:

1. Używaj numerów telefonów, które są fikcyjne i nie istnieją. Firebase Authentication nie pozwala ustawiać jako numerów testowych istniejących numerów telefonów używanych przez prawdziwych użytkowników. Możesz na przykład użyć numerów z prefiksem 555 jako amerykańskich numerów testowych:[phone]
2. Numery telefonów muszą mieć prawidłowy format pod względem długości i innych ograniczeń. Będą one podlegać tej samej weryfikacji co numery telefonów prawdziwych użytkowników.
3. Możesz dodać maksymalnie 10 numerów telefonów na potrzeby programowania.
4. Używaj numerów telefonów i kodów testowych, które są trudne do odgadnięcia i często je zmieniaj.

Tworzenie fikcyjnych numerów telefonów i kodów weryfikacyjnych

1. W Firebasekonsoli otwórz sekcję Uwierzytelnianie.
2. Na karcie Metoda logowania włącz dostawcę telefonicznego, jeśli nie jest jeszcze włączony.
3. Otwórz menu akordeonowe Numery telefonu do testowania.
4. Podaj numer telefonu, który chcesz przetestować, np. [phone].
5. Podaj 6-cyfrowy kod weryfikacyjny dla tego numeru, np. 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.

Testy ręczne

Możesz od razu zacząć używać w aplikacji fikcyjnego numeru telefonu. Umożliwia to przeprowadzanie testów ręcznych na etapach programowania bez problemów z limitami lub ograniczaniem przepustowości. Możesz też testować bezpośrednio w symulatorze iOS lub emulatorze Androida bez zainstalowanych Usług Google Play.

Gdy podasz fikcyjny numer telefonu i wyślesz kod weryfikacyjny, nie zostanie wysłany żaden SMS. 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 zachowuje się i ma takie same właściwości jak użytkownik z prawdziwym numerem telefonu, a także ma taki sam dostęp do Realtime Database/Cloud Firestore i innych usług. Token identyfikacyjny wygenerowany w tym procesie ma taki sam podpis jak w przypadku użytkownika z prawdziwym numerem telefonu.

Token identyfikatora dla fikcyjnego numeru telefonu ma ten sam podpis co token użytkownika z prawdziwym numerem telefonu, dlatego ważne jest, aby bezpiecznie przechowywać te numery i stale je odzyskiwać.

Inną opcją jest ustawienie roli testowej za pomocą niestandardowych roszczeń w przypadku tych użytkowników, aby odróżnić ich od prawdziwych użytkowników, jeśli chcesz dodatkowo ograniczyć dostęp.

Testy integracji

Oprócz testów ręcznych Firebase Authentication 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 przypadku powiadomień push w sieci i cichych powiadomień push na iOS. Umożliwia to testowanie automatyczne w tych procesach i ułatwia jego wdrożenie. Umożliwiają też testowanie na Androidzie procesów natychmiastowej weryfikacji.

Upewnij się, że weryfikacja aplikacji nie jest wyłączona w przypadku aplikacji produkcyjnych i że w aplikacji produkcyjnej nie ma zakodowanych na stałe fikcyjnych numerów telefonów.

W przypadku stron internetowych ustaw wartość appVerificationDisabledForTesting na true przed wyrenderowaniem elementu firebase.auth.RecaptchaVerifier. Automatycznie rozwiązuje to test reCAPTCHA, dzięki czemu możesz podać numer telefonu bez ręcznego rozwiązywania testu. Uwaga: nawet jeśli reCAPTCHA jest wyłączona, użycie numeru telefonu, który nie jest fikcyjny, nadal uniemożliwi zalogowanie się. 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 = "[phone]";
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 weryfikatory aplikacji reCAPTCHA działają inaczej, gdy weryfikacja aplikacji jest wyłączona:

• Widoczna reCAPTCHA: gdy widoczna reCAPTCHA jest renderowana za pomocą elementu appVerifier.render(), automatycznie rozwiązuje się po ułamku sekundy. Jest to równoznaczne z kliknięciem reCAPTCHA przez użytkownika natychmiast po jej wyświetleniu. Odpowiedź reCAPTCHA wygaśnie po pewnym czasie, a problem zostanie ponownie rozwiązany automatycznie.
• Niewidoczna reCAPTCHA: niewidoczna reCAPTCHA nie rozwiązuje się automatycznie podczas renderowania, ale robi to podczas wywołania appVerifier.verify() lub gdy po ułamku sekundy opóźnienia kliknie się przycisk reCAPTCHA. Podobnie odpowiedź wygaśnie po pewnym czasie i zostanie automatycznie rozwiązana dopiero po wywołaniu funkcji appVerifier.verify() lub ponownym kliknięciu elementu zakotwiczonego przycisku reCAPTCHA.

Gdy zostanie rozwiązana próbna reCAPTCHA, odpowiednia funkcja wywołania zwrotnego zostanie wywołana zgodnie z oczekiwaniami z fałszywą odpowiedzią. Jeśli określono też wywołanie zwrotne wygaśnięcia, zostanie ono wywołane po wygaśnięciu.

Dalsze kroki

Gdy użytkownik zaloguje się po raz pierwszy, zostanie utworzone nowe konto użytkownika i powiązane z danymi logowania, czyli nazwą użytkownika i hasłem, numerem telefonu lub informacjami o dostawcy uwierzytelniania, za pomocą których użytkownik się zalogował. Nowe konto jest przechowywane w projekcie Firebase i może służyć do identyfikowania użytkownika we wszystkich aplikacjach w projekcie, niezależnie od sposobu logowania.

• Zalecanym sposobem sprawdzania stanu autoryzacji użytkownika w aplikacjach jest ustawienie obserwatora na obiekcie Auth. Następnie możesz pobrać podstawowe informacje o profilu użytkownika z obiektu User. Zobacz Zarządzanie użytkownikami.

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

Możesz zezwolić użytkownikom na logowanie się w aplikacji za pomocą wielu dostawców uwierzytelniania, łącząc dane logowania dostawcy uwierzytelniania z istniejącym kontem użytkownika.

Aby wylogować użytkownika, wywołaj funkcję 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