Firebase is back at Google I/O on May 10! Register now

Uwierzytelnianie przez telefon

Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.

Uwierzytelnianie przez telefon umożliwia użytkownikom logowanie się do Firebase przy użyciu telefonu jako uwierzytelniania. Do użytkownika (na podany numer telefonu) wysyłana jest wiadomość SMS zawierająca unikalny kod. Po autoryzacji kodu użytkownik może zalogować się do Firebase.

Numery telefonów, które użytkownicy końcowi podają do uwierzytelniania, będą wysyłane i przechowywane przez Google, aby usprawnić zapobieganie spamowi i nadużyciom w usługach Google, w tym między innymi w Firebase. Deweloperzy powinni upewnić się, że mają odpowiednią zgodę użytkownika końcowego przed użyciem usługi logowania za pomocą numeru telefonu Uwierzytelniania Firebase.authentication

Uwierzytelnianie przez telefon Firebase nie jest obsługiwane we wszystkich krajach. Więcej informacji można znaleźć w ich często zadawanych pytaniach .

Organizować coś

Przed rozpoczęciem uwierzytelniania przez telefon upewnij się, że wykonałeś następujące kroki:

  1. Włącz telefon jako metodę logowania w konsoli Firebase .
  2. Android : jeśli nie ustawiłeś jeszcze skrótu SHA-1 swojej aplikacji w konsoli Firebase , zrób to. Zobacz Uwierzytelnianie klienta , aby uzyskać informacje o znajdowaniu skrótu SHA-1 aplikacji.
  3. iOS : w Xcode włącz powiadomienia push dla swojego projektu i upewnij się, że klucz uwierzytelniania APNs jest skonfigurowany z Firebase Cloud Messaging (FCM) . Aby wyświetlić szczegółowe wyjaśnienie tego kroku, zapoznaj się z dokumentacją Firebase iOS Phone Auth .
  4. Sieć : upewnij się, że dodałeś domenę aplikacji w konsoli Firebase w obszarze Domeny przekierowań OAuth .

Uwaga ; Logowanie za pomocą numeru telefonu jest dostępne tylko na prawdziwych urządzeniach i w internecie. Aby przetestować przepływ uwierzytelniania na emulatorach urządzeń, zobacz Testowanie .

Stosowanie

Pakiet Firebase Authentication SDK dla Flutter zapewnia dwa indywidualne sposoby logowania użytkownika przy użyciu jego numeru telefonu. Natywne platformy (np. Android i iOS) zapewniają inną funkcjonalność weryfikacji numeru telefonu niż internet, dlatego istnieją dwie metody wyłącznie dla każdej platformy:

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

Natywny: verifyPhoneNumber

Na platformach natywnych najpierw należy zweryfikować numer telefonu użytkownika, a następnie użytkownik może się zalogować lub połączyć swoje konto z PhoneAuthCredential .

Najpierw musisz zapytać użytkownika o jego 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 oddzielne wywołania zwrotne, które musisz obsłużyć, a każde z nich określi sposób aktualizacji interfejsu aplikacji:

  1. weryfikacjaZakończona : Automatyczna obsługa kodu SMS na urządzeniach z systemem Android.
  2. VerificationFailed : obsłuż zdarzenia niepowodzenia, takie jak nieprawidłowe numery telefonów lub przekroczenie limitu SMS-ów.
  3. codeSent : obsługa, gdy kod został wysłany do urządzenia z Firebase, używany do monitowania użytkowników o wprowadzenie kodu.
  4. codeAutoRetrievalTimeout : obsłuż limit czasu, gdy automatyczna obsługa kodu SMS nie powiedzie się.

weryfikacjaZakończona

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

Gdy kod SMS zostanie dostarczony do urządzenia, system Android automatycznie zweryfikuje kod SMS bez konieczności ręcznego wprowadzania kodu przez użytkownika. W przypadku wystąpienia tego zdarzenia zostanie automatycznie podany PhoneAuthCredential , którego można użyć do zalogowania się lub połączenia numeru telefonu użytkownika.

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, na przykład z powodu nieprawidłowego numeru telefonu lub przekroczenia limitu SMS dla projektu, do tego modułu obsługi zostanie wysłany FirebaseAuthException . W takim przypadku poprosisz użytkownika, aby coś poszło nie tak w zależności od kodu błędu.

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
  },
);

Kod wysłany

Gdy Firebase wyśle ​​kod SMS na urządzenie, ta procedura obsługi jest wyzwalana przy użyciu identyfikatora verificationId i resendToken ( resendToken jest obsługiwany tylko na urządzeniach z Androidem, urządzenia z iOS zawsze zwracają wartość null ).

Po uruchomieniu to dobry moment, aby zaktualizować interfejs użytkownika aplikacji, aby monitował użytkownika o wprowadzenie oczekiwanego kodu SMS. Po wprowadzeniu kodu SMS możesz połączyć identyfikator weryfikacyjny z kodem SMS, aby utworzyć nowe 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 wyśle ​​ponownie nowej wiadomości SMS, jeśli została ostatnio wysłana. Możesz jednak przesłonić to zachowanie, ponownie wywołując metodę verifyPhoneNumber z tokenem resend do argumentu forceResendingToken . Jeśli się powiedzie, wiadomość SMS zostanie wysłana ponownie.

codeAutoRetrievalTimeout

Na urządzeniach z Androidem, które obsługują automatyczne rozpoznawanie kodu SMS, ten program obsługi zostanie wywołany, jeśli urządzenie nie rozwiąże automatycznie wiadomości SMS w określonym przedziale czasowym. Po upływie określonego czasu urządzenie nie będzie już podejmować prób rozwiązywania żadnych wiadomości przychodzących.

Domyślnie urządzenie czeka 30 sekund, ale można to dostosować 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, że mają dostęp do telefonu, wprowadzając kod SMS wysłany na podany numer telefonu. Aby zwiększyć bezpieczeństwo i zapobiegać spamowi, użytkownicy proszeni są o udowodnienie, że są ludźmi, wypełniając widżet Google reCAPTCHA . Po potwierdzeniu kod SMS zostanie wysłany.

Pakiet Firebase Authentication SDK dla Flutter domyślnie zarządza widżetem reCAPTCHA po wyjęciu z pudełka, jednak zapewnia kontrolę nad sposobem jego wyświetlania i konfigurowania w razie potrzeby. Aby rozpocząć, wywołaj metodę signInWithPhoneNumber z numerem 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 metody najpierw spowoduje wyświetlenie widżetu reCAPTCHA. Użytkownik musi wykonać test przed wysłaniem kodu SMS. Po zakończeniu możesz zalogować użytkownika, podając kod SMS do metody confirm w rozwiązanej odpowiedzi ConfirmationResult :

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

Podobnie jak inne przepływy logowania, pomyślne logowanie wyzwoli wszystkie detektory stanu uwierzytelniania, które subskrybujesz w całej aplikacji.

Konfiguracja reCAPTCHA

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

Drugi argument signInWithPhoneNumber akceptuje opcjonalną instancję RecaptchaVerifier , która może służyć do zarządzania widżetem. Domyślnie widżet będzie renderowany jako niewidoczny widżet po wyzwoleniu procesu logowania. „Niewidoczny” widżet pojawi się jako pełnostronicowy modalny na górze Twojej aplikacji.

Możliwe jest jednak wyświetlenie wbudowanego widżetu, który użytkownik musi wyraźnie nacisnąć, aby się zweryfikować.

Aby dodać wbudowany widżet, określ identyfikator elementu DOM w argumencie container instancji RecaptchaVerifier . Element musi istnieć i być pusty, w przeciwnym razie zostanie zgłoszony błąd. Jeśli nie zostanie podany żaden argument container , widżet zostanie wyświetlony jako „niewidoczny”.

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

Możesz opcjonalnie zmienić rozmiar i motyw, dostosowując argumenty size i theme , jak pokazano powyżej.

Możliwe jest również odsłuchiwanie zdarzeń, np. czy reCAPTCHA została zakończona przez użytkownika, czy reCAPTCHA wygasła lub został zgłoszony błąd:

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

Testowanie

Firebase zapewnia obsługę lokalnego testowania numerów telefonów:

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

W przypadku podania testowego numeru telefonu za pomocą metody verifyPhoneNumber lub signInWithPhoneNumber , w rzeczywistości żaden SMS nie zostanie wysłany. Zamiast tego możesz podać kod testowy bezpośrednio do PhoneAuthProvider lub za pomocą procedury obsługi wyników potwierdzenia signInWithPhoneNumber s.