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:
- W konsoli Firebase otwórz sekcję Uwierzytelnianie .
- Na stronie Metoda logowania włącz metodę logowania za pomocą numeru telefonu .
- 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:
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.
- Wywołaj
signInWithPhoneNumber
, przekazując jej numer telefonu użytkownika oraz utworzony wcześniejRecaptchaVerifier
.JeśliWeb 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 // ... });
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:
- 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
- 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.
- Możesz dodać do 10 numerów telefonów do celów rozwoju.
- 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
- W konsoli Firebase otwórz sekcję Uwierzytelnianie .
- Na karcie Metoda logowania włącz opcję Dostawca telefonu, jeśli jeszcze tego nie zrobiłeś.
- Otwórz menu Numery telefonów do testowania akordeonu.
- Podaj numer telefonu, który chcesz przetestować, na przykład: +1 650-555-3434 .
- Podaj 6-cyfrowy kod weryfikacyjny dla tego konkretnego numeru, na przykład: 654321 .
- 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łaniuappVerifier.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 obiektuUser
. 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. });