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

Za pomocą Firebase Authentication możesz zalogować użytkownika, wysyłając SMS-a do telefonu użytkownika. Użytkownik loguje się za pomocą jednorazowego kodu zawartego w SMS.

Najprostszym sposobem dodania logowania przez numer telefonu do aplikacji jest użycie FirebaseUI, który zawiera widżet logowania, który obsługuje proces logowania się na telefonie logowania numerycznego oraz sfederowanego i za pomocą hasła. Ten dokument opisuje, jak wdrożyć proces logowania przez numer telefonu za pomocą pakietu SDK Firebase.

Zanim zaczniesz

Skopiuj fragment kodu inicjowania z sekcji Firebase konsolę do swojego projektu, jak opisano w sekcji . Dodaj Firebase do projektu JavaScript.

Potencjalne problemy z bezpieczeństwem

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

Jeśli w aplikacji korzystasz z logowania się na podstawie numeru telefonu, z bezpieczniejszymi metodami logowania oraz informować użytkowników logowanie się przy użyciu numeru telefonu.

Włączanie logowania się za pomocą numeru telefonu w projekcie Firebase

Aby logować użytkowników za pomocą SMS-ów, musisz najpierw włączyć logowanie się przy użyciu numeru telefonu do swojego projektu Firebase:

  1. W konsoli Firebase otwórz sekcję Uwierzytelnianie.
  2. Na stronie Sign-in Method (Metoda logowania) włącz Phone Number. metody logowania się.
  3. Jeśli na tej samej stronie domeny hostującej aplikację nie ma w W sekcji Domeny przekierowania OAuth dodaj swoją domenę. Pamiętaj, że host localhost nie może być hostowany domeny na potrzeby uwierzytelniania przez telefon.

Konfigurowanie weryfikatora reCAPTCHA

Aby móc logować się użytkowników za pomocą ich numerów telefonów, musisz skonfigurować Weryfikator reCAPTCHA w Firebase. Firebase używa reCAPTCHA, aby zapobiegać nadużyciom, takim jak: upewniając się, że prośba o weryfikację numeru telefonu pochodzi od jednego z aplikacji z dozwolonymi domenami.

Nie musisz ręcznie konfigurować klienta reCAPTCHA. w przypadku użycia funkcji obiekt RecaptchaVerifier pakietu SDK Firebase, Firebase automatycznie tworzy i obsługuje niezbędne klucze i tajne klucze klienta.

Obiekt RecaptchaVerifier obsługuje niewidoczne reCAPTCHA, który często pozwala zweryfikować użytkownika bez konieczności jego dodawania; działanie oraz widżet reCAPTCHA, który zawsze wymaga interakcji użytkownika. , aby zakończyć.

Bazową wyrenderowaną wersję reCAPTCHA można zlokalizować zgodnie z preferencjami użytkownika, aktualizując w instancji Auth przed wyrenderowaniem reCAPTCHA. Wspomniana lokalizacja będzie również stosowany do SMS-ów z kodem weryfikacyjnym wysłanych do użytkownika.

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

Użyj niewidocznego reCAPTCHA

Aby użyć niewidocznego reCAPTCHA, utwórz obiekt RecaptchaVerifier z parametrem size ustawionym na invisible, który określa 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

Używanie widżetu reCAPTCHA

Aby użyć widocznego widżetu reCAPTCHA, utwórz na stronie element, który: a następnie utworzyć obiekt RecaptchaVerifier, podczas konfigurowania identyfikatora kontenera. Na 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 na obiekt RecaptchaVerifier, który jest wywoływany, gdy użytkownik rozwiązuje reCAPTCHA lub 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 logowanie, zadzwoń do 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 problemu render otrzymasz identyfikator widżetu reCAPTCHA, który możesz używać do nawiązywania połączeń Interfejs 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, użyj interfejsu z prośbą o wyświetlenie prośby podać swój numer telefonu, a następnie zadzwonić signInWithPhoneNumber, aby poprosić Firebase o wysłanie przy użyciu SMS-a z kodem uwierzytelniającym:

  1. Uzyskaj numer telefonu użytkownika.

    Wymagania prawne są różne, ale jest to sprawdzona metoda i określać oczekiwania użytkowników, należy ich poinformować, przez telefon, mogą otrzymać SMS-a w celu weryfikacji i standardowego obowiązują opłaty.

  2. Zadzwoń pod numer signInWithPhoneNumber, przekazując na telefon użytkownika oraz RecaptchaVerifier utworzone wcześniej.

    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 powoduje 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 generuje test reCAPTCHA a jeśli użytkownik zda test, poprosi o Firebase Authentication wyśle SMS-a z kodem weryfikacyjnym do z telefonu użytkownika.

Logowanie użytkownika za pomocą kodu weryfikacyjnego

Po pomyślnym wywołaniu signInWithPhoneNumber pojawi się prośba wpisanie kodu weryfikacyjnego otrzymanego w wiadomości SMS. Następnie zaloguj użytkownika przekazując kod do metody confirm funkcji ConfirmationResult obiekt, który został przekazany do moduł obsługi realizacji zamówienia signInWithPhoneNumber (czyli jego then – blokada). 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 udało się wywołać metodę confirm, użytkownik został pomyślnie wywołany. Użytkownik jest zalogowany.

Pobieranie pośredniego obiektu AuthCredential

Jeśli musisz pobrać obiekt AuthCredential dla podaj kod weryfikacyjny z wyniku potwierdzenia oraz kod weryfikacyjny na numer PhoneAuthProvider.credential zamiast dzwoni do: 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

W konsoli Firebase możesz skonfigurować fikcyjne numery telefonów na potrzeby programowania. Testowanie na fikcyjnym telefonie ma następujące korzyści:

  • Przetestuj uwierzytelnianie za pomocą numeru telefonu bez przekraczania limitu wykorzystania.
  • Przetestuj uwierzytelnianie numeru telefonu bez wysyłania faktycznego SMS-a.
  • Przeprowadzaj kolejne testy z tym samym numerem telefonu bez ograniczania limitu. Ten minimalizuje ryzyko odrzucenia aplikacji podczas procesu sprawdzania w Sklepie z aplikacjami, jeśli weryfikator ten sam numer telefonu do przetestowania.
  • Możesz łatwo przeprowadzać testy w środowiskach programistycznych bez dodatkowych działań, takich jak: możliwość programowania w symulatorze iOS lub w emulatorze Androida bez Usług Google Play.
  • Zapis testów integracji bez blokowania przez testy zabezpieczeń, które normalnie są stosowane przy użyciu prawdziwych numerów telefonów w środowisku produkcyjnym.

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

  1. Upewnij się, że używane numery telefonów są fałszywe i nie istnieją. Operator Firebase Authentication nie umożliwia ustawiania istniejących numerów telefonów, których używają rzeczywisti użytkownicy jako numerów testowych. Jedną z opcji jest użycie 555 numerów 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 parametrów . Nadal przechodzą one taką samą weryfikację jak numer telefonu rzeczywistego użytkownika.
  3. Możesz dodać maksymalnie 10 numerów telefonów na potrzeby programowania.
  4. Używaj testowych numerów telefonów lub kodów, które są trudne do odgadnięcia i zmiany. i to często.

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

  1. W konsoli Firebase otwórz Uwierzytelnianie.
  2. Na karcie Metoda logowania włącz dostawcę telefonu, jeśli nie jest jeszcze włączony.
  3. Otwórz menu nawigacyjne Numery telefonów do testowania.
  4. Podaj numer telefonu, który chcesz przetestować, np. +1 650-555-3434.
  5. Podaj 6-cyfrowy kod weryfikacyjny tego numeru, np. 654321.
  6. Dodaj numer. W razie potrzeby możesz usunąć numer telefonu swojego kodu, najeżdżając kursorem na odpowiedni wiersz i klikając ikonę kosza.

Testy ręczne

Możesz od razu zacząć używać fikcyjnego numeru telefonu we wniosku. Dzięki temu możesz: przeprowadzaj testy ręczne na etapach programowania, aby uniknąć problemów z limitami i ich ograniczania. Możesz też przeprowadzać testy bezpośrednio w symulatorze iOS lub w emulatorze Androida bez Usług Google Play. Zainstalowano.

Po podaniu fikcyjnego numeru telefonu i wysłaniu kodu weryfikacyjnego SMS nie zostanie wysłany wysłano. Zamiast tego, aby dokończyć podpisywanie, musisz podać wcześniej skonfigurowany kod weryfikacyjny cal

Gdy się zalogujesz, zostanie utworzony użytkownik Firebase z tym numerem telefonu. działa i ma takie samo zachowanie jak prawdziwy użytkownik numeru telefonu oraz ma dostęp do Realtime Database/Cloud Firestore z innymi usługami w ten sam sposób. Token tożsamości wygenerowany podczas ten proces ma taki sam podpis jak prawdziwy użytkownik numeru telefonu.

Inną możliwością jest ustawienie roli testowej za pomocą niestandardowej dotyczące tych użytkowników, aby odróżnić ich jako fałszywych użytkowników, jeśli chcesz dostęp.

Testowanie integracji

Oprócz testowania ręcznego Firebase Authentication udostępnia interfejsy API, które ułatwiają pisanie testów integracji do testowania uwierzytelniania przez telefon. Te interfejsy API wyłączają weryfikację aplikacji przez wyłączenie reCAPTCHA są wymagane w przypadku aplikacji internetowych i ciche powiadomienia push w iOS. Umożliwia to testowanie automatyzacji i łatwiejsze ich wdrożenie. Zapewniają też możliwość testowania aplikacji błyskawicznych proces weryfikacji na Androidzie.

W przeglądarce ustaw appVerificationDisabledForTesting na true przed wyrenderowaniem obiektu firebase.auth.RecaptchaVerifier. To rozwiązuje reCAPTCHA w sposób automatyczny, dzięki czemu możesz przekazać numer telefonu bez wpisywania go ręcznie. Notatka że pomimo wyłączenia reCAPTCHA przy użyciu niefikcyjnego numeru telefonu nie uda się dokończ logowanie. Za pomocą tego interfejsu 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 testy aplikacji reCAPTCHA zachowują się inaczej, gdy weryfikacja aplikacji jest przeprowadzona w inny sposób wyłączone:

  • Widoczna reCAPTCHA: gdy widoczna reCAPTCHA jest renderowana przez appVerifier.render(), automatycznie zamyka się po ułamku sekundy opóźnienia. Jest to równoważne z kliknięciem przez użytkownika reCAPTCHA zaraz po wyrenderowaniu. reCAPTCHA odpowiedź wygaśnie po pewnym czasie, a następnie zostanie automatycznie rozwiązana ponownie.
  • Niewidoczna reCAPTCHA: Niewidoczna reCAPTCHA nie wykrywa automatycznie odpowiedzi podczas renderowania, ale robi to na appVerifier.verify()lub gdy kotwica przycisku reCAPTCHA jest kliknięto po ułamku sekundy. Analogicznie odpowiedź wygaśnie po pewnym czasie, zostanie rozwiązany automatycznie tylko po wywołaniu appVerifier.verify() lub gdy kotwica przycisku reCAPTCHA została kliknięta ponownie.

Po zakończeniu testu reCAPTCHA w sposób zgodny z oczekiwaniami uruchamiana jest odpowiednia funkcja wywołania zwrotnego z fałszywą odpowiedzią. Jeśli określisz także wywołanie zwrotne o dacie wygaśnięcia, zostanie ono aktywowane po wygaśnięciu.

Dalsze kroki

Gdy użytkownik zaloguje się po raz pierwszy, tworzone jest nowe konto użytkownika. powiązane z danymi logowania, czyli z nazwą użytkownika, hasłem i numerem telefonu, numer telefonu lub informacje o dostawcy uwierzytelniania – użytkownik zalogowany. Ten nowy jest przechowywane w ramach projektu Firebase i może służyć do identyfikowania użytkownika w każdej aplikacji w projekcie, niezależnie od tego, jak się loguje.

  • Aby poznać stan uwierzytelniania użytkownika w swoich aplikacjach, ustaw obserwatora na obiekcie Auth. Dzięki temu możesz uzyskać dane użytkownika podstawowych informacji o profilu z obiektu User. Zobacz Zarządzanie użytkownikami

  • Na liście Firebase Realtime Database i Cloud Storage regułami zabezpieczeń, pobierz ze zmiennej auth unikalny identyfikator zalogowanego użytkownika, i używać ich do kontrolowania, do jakich danych użytkownik ma dostęp.

Możesz zezwolić użytkownikom na logowanie się w aplikacji przy użyciu wielokrotnego uwierzytelniania. dostawców, łącząc dane logowania dostawcy uwierzytelniania z istniejącego konta użytkownika.

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