Uwierzytelnianie przez telefon

Uwierzytelnianie przez telefon umożliwia użytkownikom logowanie się do Firebase za pomocą telefonu jako aplikacji uwierzytelniającej. Do użytkownika zostanie wysłany SMS (na podany numer telefonu) zawierający unikalny kod. Po autoryzacji kodu użytkownik może zalogować się w Firebase.

Numery telefonów podane przez użytkowników na potrzeby uwierzytelniania będą wysyłane i przechowywane przez Google, aby zwiększyć skuteczność ochrony przed spamem i nadużyciami w usługach Google, m.in. w Firebase. Przed użyciem usługi logowania za pomocą numeru telefonu w Uwierzytelnianiu Firebase deweloperzy powinni uzyskać odpowiednią zgodę użytkownika.

Uwierzytelnianie przez telefon Firebase nie jest obsługiwane we wszystkich krajach. Więcej informacji znajdziesz w odpowiedziach na najczęstsze pytania.

Konfiguracja

Zanim zaczniesz korzystać z uwierzytelniania przez telefon, wykonaj te czynności:

  1. Włącz telefon jako metodę logowania w konsoli Firebase.
  2. Android: jeśli nie masz jeszcze ustawionego skrótu SHA-1 swojej aplikacji w konsoli Firebase, zrób to. Informacje o znajdowaniu skrótu SHA-1 aplikacji znajdziesz w artykule Uwierzytelnianie klienta.
  3. iOS: w Xcode włącz powiadomienia push w projekcie i upewnij się, że klucz uwierzytelniania APNs jest skonfigurowany z użyciem Firebase Cloud Messaging (FCM). Musisz też włączyć tryby działania w tle w przypadku powiadomień zdalnych. Szczegółowy opis tego kroku znajdziesz w dokumentacji uwierzytelniania telefonu na urządzeniach z iOS w Firebase.
  4. Internet: upewnij się, że w konsoli Firebase w sekcji Domeny przekierowania OAuth została dodana domena aplikacji.

Uwaga: logowanie się za pomocą numeru telefonu jest możliwe tylko na prawdziwych urządzeniach i w przeglądarce. Aby przetestować proces uwierzytelniania na emulatorach urządzeń, przeczytaj sekcję Testowanie.

Wykorzystanie

Pakiet SDK uwierzytelniania Firebase dla Flutter umożliwia logowanie użytkownika za pomocą numeru telefonu na 2 sposoby. Platformy natywne (np. Android i iOS) oferują inne funkcje weryfikacji numeru telefonu niż w internecie, dlatego w przypadku każdej z nich istnieją tylko 2 metody:

  • Platforma natywna: verifyPhoneNumber.
  • Platforma internetowa: signInWithPhoneNumber.

Natywna: verifyPhoneNumber

Na platformach natywnych numer telefonu użytkownika musi zostać najpierw potwierdzony, a następnie użytkownik będzie mógł zalogować się lub połączyć swoje konto z PhoneAuthCredential.

Najpierw musisz poprosić użytkownika o numer telefonu. Po podaniu wywołaj metodę verifyPhoneNumber():

await FirebaseAuth.instance.verifyPhoneNumber(
  phoneNumber: '+44 7123 123 456',
  verificationCompleted: (PhoneAuthCredential credential) {},
  verificationFailed: (FirebaseAuthException e) {},
  codeSent: (String verificationId, int? resendToken) {},
  codeAutoRetrievalTimeout: (String verificationId) {},
);

Istnieją 4 osobne wywołania zwrotne, które określają sposób aktualizacji interfejsu aplikacji:

  1. verificationUkończono: automatyczna obsługa kodu SMS na urządzeniach z Androidem.
  2. verificationNiepowodzenie: obsługuje zdarzenia nieudane, takie jak nieprawidłowe numery telefonów czy przekroczenie limitu SMS-ów.
  3. codeSent: obsługuje przesyłanie na urządzenie z Firebase kodu, który służy do wyświetlania użytkownikom prośby o wpisanie kodu.
  4. codeAutoRetrievalTimeout: określa limit czasu, po przekroczeniu którego automatyczna obsługa kodu SMS nie działa.

weryfikacja zakończona

Ten moduł obsługi będzie wywoływany tylko na urządzeniach z Androidem, które obsługują automatyczne rozpoznawanie kodów SMS.

Po dostarczeniu kodu SMS na urządzenie Android automatycznie go zweryfikuje bez konieczności ręcznego wpisywania kodu przez użytkownika. W takim przypadku automatycznie udostępniany jest identyfikator PhoneAuthCredential, za pomocą którego można zalogować się za pomocą numeru telefonu użytkownika lub go połączyć.

FirebaseAuth auth = FirebaseAuth.instance;

await auth.verifyPhoneNumber(
  phoneNumber: '+44 7123 123 456',
  verificationCompleted: (PhoneAuthCredential credential) async {
    // ANDROID ONLY!

    // Sign the user in (or link) with the auto-generated credential
    await auth.signInWithCredential(credential);
  },
);

Weryfikacja nie powiodła się

Jeśli Firebase zwróci błąd, np. niepoprawny numer telefonu lub przekroczenie limitu SMS-ów w projekcie, do modułu obsługi zostanie wysłana wiadomość FirebaseAuthException. W takim przypadku poinformujesz użytkownika, że w zależności od kodu błędu wystąpił błąd.

FirebaseAuth auth = FirebaseAuth.instance;

await auth.verifyPhoneNumber(
  phoneNumber: '+44 7123 123 456',
  verificationFailed: (FirebaseAuthException e) {
    if (e.code == 'invalid-phone-number') {
      print('The provided phone number is not valid.');
    }

    // Handle other errors
  },
);

CodeSent (Wysłany kod)

Gdy Firebase wysyła kod SMS na urządzenie, ten moduł obsługi uruchamia się za pomocą poleceń verificationId i resendToken (resendToken jest obsługiwany tylko na urządzeniach z Androidem, a urządzenia z iOS zawsze zwracają wartość null).

Po uruchomieniu warto zaktualizować interfejs aplikacji, aby poprosić użytkownika o wpisanie oczekiwanego kodu SMS. Po wpisaniu kodu SMS możesz połączyć identyfikator weryfikacyjny z kodem SMS, aby utworzyć nowy numer PhoneAuthCredential:

FirebaseAuth auth = FirebaseAuth.instance;

await auth.verifyPhoneNumber(
  phoneNumber: '+44 7123 123 456',
  codeSent: (String verificationId, int? resendToken) async {
    // Update the UI - wait for the user to enter the SMS code
    String smsCode = 'xxxx';

    // Create a PhoneAuthCredential with the code
    PhoneAuthCredential credential = PhoneAuthProvider.credential(verificationId: verificationId, smsCode: smsCode);

    // Sign the user in (or link) with the credential
    await auth.signInWithCredential(credential);
  },
);

Domyślnie Firebase nie wysyła ponownie nowych SMS-ów, jeśli zostały one wysłane niedawno. Możesz jednak zastąpić to działanie, ponownie wywołując metodę verifyPhoneNumber z ponownym wysyłaniem tokena w argumencie forceResendingToken. Jeśli się uda, SMS zostanie wysłany ponownie.

Czas oczekiwania kodu automatycznego pobierania

Na urządzeniach z Androidem, które obsługują automatyczne rozpoznawanie SMS-ów, ta funkcja zostanie wywołana, jeśli urządzenie nie rozpozna SMS-a w określonym terminie. Po upływie tego czasu urządzenie nie będzie już próbować odbierać wiadomości.

Domyślnie urządzenie czeka 30 sekund, ale można to zmienić za pomocą argumentu timeout:

FirebaseAuth auth = FirebaseAuth.instance;

await auth.verifyPhoneNumber(
  phoneNumber: '+44 7123 123 456',
  timeout: const Duration(seconds: 60),
  codeAutoRetrievalTimeout: (String verificationId) {
    // Auto-resolution timed out...
  },
);

Sieć: signInWithPhoneNumber

Na platformach internetowych użytkownicy mogą się logować, potwierdzając dostęp do telefonu, wpisując kod SMS wysłany na podany numer telefonu. Aby zwiększyć bezpieczeństwo i ochronę przed spamem, użytkownicy muszą potwierdzić, że są człowiekiem, przez wypełnienie widżetu Google reCAPTCHA. Po potwierdzeniu kod SMS zostanie wysłany.

Pakiet SDK usługi Uwierzytelnianie Firebase dla Flutter będzie domyślnie zarządzać widżetem reCAPTCHA od razu, ale w razie potrzeby będzie mieć kontrolę nad jego wyświetlaniem i konfiguracją. Aby rozpocząć, zadzwoń do metody signInWithPhoneNumber, używając numeru telefonu.

FirebaseAuth auth = FirebaseAuth.instance;

// Wait for the user to complete the reCAPTCHA & for an SMS code to be sent.
ConfirmationResult confirmationResult = await auth.signInWithPhoneNumber('+44 7123 123 456');

Wywołanie tej metody najpierw aktywuje wyświetlenie widżetu reCAPTCHA. Przed wysłaniem kodu SMS użytkownik musi ukończyć test. Gdy skończysz, możesz zalogować użytkownika, podając kod SMS do metody confirm w odpowiedzi na ConfirmationResult:

UserCredential userCredential = await confirmationResult.confirm('123456');

Podobnie jak w przypadku innych procesów logowania pomyślne logowanie aktywuje wszystkie detektory stanu uwierzytelniania, które zasubskrybowałeś w aplikacji.

Konfiguracja reCAPTCHA

Widżet reCAPTCHA to w pełni zarządzany proces, który zapewnia bezpieczeństwo aplikacji internetowej.

Drugi argument funkcji signInWithPhoneNumber akceptuje opcjonalne wystąpienie RecaptchaVerifier, którego można używać do zarządzania widżetem. Domyślnie widżet będzie wyświetlany jako niewidoczny po uruchomieniu procesu logowania. „Niewidoczny” widżet będzie widoczny w oknie modalnym na całej stronie u góry aplikacji.

Można jednak wyświetlać wbudowany widżet, który użytkownik musi nacisnąć, aby potwierdzić swoją tożsamość.

Aby dodać widżet wbudowany, podaj identyfikator elementu DOM w argumencie container instancji RecaptchaVerifier. Element musi istnieć i być pusty. W przeciwnym razie wystąpi błąd. Jeśli nie zostanie podany żaden argument container, widżet będzie wyświetlany jako „niewidoczny”.

ConfirmationResult confirmationResult = await auth.signInWithPhoneNumber('+44 7123 123 456', RecaptchaVerifier(
  container: 'recaptcha',
  size: RecaptchaVerifierSize.compact,
  theme: RecaptchaVerifierTheme.dark,
));

Opcjonalnie możesz zmienić rozmiar i motyw, dostosowując argumenty size i theme w sposób pokazany powyżej.

Można też nasłuchiwać zdarzeń, takich jak np. ukończenie zadania reCAPTCHA przez użytkownika oraz czy reCAPTCHA wygasł lub pojawił się błąd:

RecaptchaVerifier(
  onSuccess: () => print('reCAPTCHA Completed!'),
  onError: (FirebaseAuthException error) => print(error),
  onExpired: () => print('reCAPTCHA Expired!'),
);

Testuję

Firebase zapewnia pomoc dotyczącą testowania lokalnie numerów telefonów:

  1. W konsoli Firebase wybierz dostawcę uwierzytelniania „Telefon” i kliknij menu „Numery telefonów do testowania”.
  2. Wpisz nowy numer telefonu (np. +44 7444 555666) i kod testowy (np. 123456).

W przypadku podania testowego numeru telefonu w metodzie verifyPhoneNumber lub signInWithPhoneNumber, SMS nie zostanie faktycznie wysłany. Zamiast tego możesz podać kod testu bezpośrednio do modułu PhoneAuthProvider lub za pomocą modułu obsługi wyników potwierdzenia signInWithPhoneNumber.