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 na potrzeby logowania za pomocą numeru telefonu, a także podpis oparty na haśle i federacyjny -W. W tym dokumencie opisano, jak zaimplementować proces logowania za pomocą numeru telefonu przy użyciu pakietu Firebase SDK.

Zanim zaczniesz

Jeśli jeszcze tego nie zrobiłeś, skopiuj fragment kodu inicjującego z konsoli Firebase do swojego projektu zgodnie z opisem w artykule Dodawanie Firebase do projektu JavaScript .

Względy 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ć 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 za pomocą numeru telefonu w swojej aplikacji, powinieneś 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 swoim projekcie Firebase

Aby logować użytkowników za pomocą SMS-ów, 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 Numer telefonu .
  3. Na tej samej stronie, jeśli domeny, która będzie hostować Twoją aplikację, nie ma na liście w sekcji Domeny przekierowania OAuth , dodaj swoją domenę.

Limit żądań logowania do numeru telefonu Firebase jest wystarczająco wysoki, aby nie miało 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 cennikiem .

Skonfiguruj weryfikator reCAPTCHA

Zanim będziesz mógł logować użytkowników za pomocą ich numerów telefonów, musisz skonfigurować weryfikator reCAPTCHA w Firebase. Firebase używa reCAPTCHA, aby zapobiegać nadużyciom, na przykład zapewniając, że prośba o weryfikację numeru telefonu pochodzi z jednej z dozwolonych domen 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 tajne klucze klienta.

Obiekt RecaptchaVerifier obsługuje niewidoczny reCAPTCHA , który często może zweryfikować użytkownika bez konieczności wykonywania przez niego żadnych działań, a także widżet reCAPTCHA, który zawsze wymaga interakcji użytkownika, aby zakończyć pomyślnie.

Podstawowy renderowany reCAPTCHA można zlokalizować zgodnie z preferencjami użytkownika, aktualizując kod języka w instancji Auth przed renderowaniem reCAPTCHA. Wspomniana lokalizacja dotyczyć będzie również 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.
// firebase.auth().useDeviceLanguage();
auth_set_language_code.js

Web namespaced API

firebase.auth().languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();
index.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:

Web modular API

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

Web namespaced API

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

Użyj widżetu reCAPTCHA

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

Web modular API

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

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

Web namespaced API

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 reCAPTCHA wygaśnie, zanim użytkownik prześle formularz:

Web modular API

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

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

Opcjonalnie: wyrenderuj wstępnie reCAPTCHA

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

Web modular API

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

Web namespaced API

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

Po rozwiązaniu 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);
auth_get_recaptcha_response.js

Web namespaced API

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

Wyślij kod weryfikacyjny na telefon użytkownika

Aby zainicjować logowanie za pomocą numeru telefonu, przedstaw użytkownikowi interfejs z prośbą o podanie numeru telefonu, a następnie zadzwoń pod signInWithPhoneNumber , aby zażądać od Firebase wysłania SMS-em kodu uwierzytelniającego na telefon użytkownika:

  1. Uzyskaj numer telefonu użytkownika.

    Wymagania prawne są różne, ale w ramach najlepszych praktyk i określenia oczekiwań użytkowników należy poinformować ich, że jeśli korzystają z logowania przez telefon, mogą otrzymać wiadomość SMS w celu weryfikacji i obowiązują standardowe stawki.

  2. Zadzwoń do signInWithPhoneNumber , przekazując do niego numer telefonu użytkownika i 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
      // ...
    });
    auth_phone_signin.js

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

Metoda signInWithPhoneNumber wysyła użytkownikowi wyzwanie reCAPTCHA, a jeśli użytkownik pomyślnie je zda, żąda, aby uwierzytelnianie Firebase wysłało wiadomość SMS zawierającą kod weryfikacyjny na telefon użytkownika.

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ę użytkownika, przekazując kod do metody confirm obiektu ConfirmationResult , który został przekazany do programu 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?)
  // ...
});
auth_phone_verify_code.js

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

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 dzwonić confirm :

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

Następnie możesz zalogować użytkownika za pomocą poświadczeń:

firebase.auth().signInWithCredential(credential);

Test 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 użytkowania.
  • Przetestuj uwierzytelnianie numeru telefonu bez wysyłania rzeczywistej wiadomości SMS.
  • Przeprowadzaj kolejne testy z tym samym numerem telefonu bez ograniczania. Minimalizuje to ryzyko odrzucenia podczas procesu recenzji w App Store, jeśli recenzent użyje tego samego numeru telefonu do testów.
  • Łatwo testuj 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 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 rzeczywiście są fikcyjne i jeszcze nie istnieją. Uwierzytelnianie Firebase nie pozwala ustawić 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 z prefiksem 555 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 programowania.
  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 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 od razu zacząć korzystać z fikcyjnego numeru telefonu w swojej aplikacji. Pozwala to na przeprowadzanie testów ręcznych na etapach opracowywania bez problemów z limitami lub 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, żaden SMS nie zostanie wysłany. 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 zachowanie i właściwości jak prawdziwy użytkownik numeru telefonu i może uzyskiwać dostęp do bazy danych czasu rzeczywistego/Cloud Firestore i innych usług w ten sam sposób. Token identyfikacyjny 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 usługa Firebase Authentication udostępnia interfejsy API ułatwiające pisanie testów integracyjnych na potrzeby testowania uwierzytelniania przez telefon. Te interfejsy API wyłączają weryfikację aplikacji, wyłączając wymaganie reCAPTCHA w sieciowych i cichych powiadomieniach push w iOS. Dzięki temu testowanie automatyzacji jest możliwe w tych przepływach i łatwiejsze do wdrożenia. Ponadto pomagają zapewnić możliwość testowania przepływów natychmiastowej weryfikacji na Androidzie.

W internecie ustaw appVerificationDisabledForTesting na true przed wyrenderowaniem firebase.auth.RecaptchaVerifier . To automatycznie rozwiązuje reCAPTCHA, umożliwiając przekazanie numeru telefonu bez ręcznego rozwiązywania. Pamiętaj, że nawet jeśli funkcja reCAPTCHA jest wyłączona, logowanie przy użyciu niefikcyjnego numeru telefonu nie powiedzie się. Z tym interfejsem 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 fałszywe weryfikatory aplikacji reCAPTCHA zachowują się inaczej, gdy weryfikacja aplikacji jest wyłączona:

  • Widoczna reCAPTCHA : gdy widoczna reCAPTCHA jest renderowana za pomocą appVerifier.render() , automatycznie rozwiązuje się po ułamku sekundy opóźnienia. Jest to równoznaczne z kliknięciem reCAPTCHA przez użytkownika natychmiast po renderowaniu. Odpowiedź reCAPTCHA wygaśnie po pewnym czasie, a następnie ponownie zostanie rozwiązana automatycznie.
  • Niewidoczna reCAPTCHA : niewidoczna reCAPTCHA nie jest automatycznie rozpoznawana podczas renderowania, a zamiast tego robi to w wywołaniu appVerifier.verify() lub po kliknięciu zakotwiczenia 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 udana reCAPTCHA zostanie rozwiązana, odpowiednia funkcja wywołania zwrotnego jest uruchamiana 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 zaloguje się po raz pierwszy, tworzone jest nowe konto użytkownika, które jest łączone z poświadczeniami — czyli nazwą użytkownika i hasłem, numerem telefonu lub informacjami o dostawcy uwierzytelniania — za pomocą których użytkownik się logował. To nowe konto jest przechowywane jako część Twojego projektu Firebase i może służyć do identyfikacji użytkownika w każdej aplikacji w Twoim projekcie, niezależnie od tego, jak użytkownik się loguje.

  • W twoich aplikacjach zalecanym sposobem poznania statusu autoryzacji użytkownika jest ustawienie obserwatora na 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 Firebase Realtime Database 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 ma dostęp.

Możesz zezwolić użytkownikom na logowanie się do Twojej 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 :

Web modular API

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 namespaced API

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