Uwierzytelnianie telefoniczne

Uwierzytelnianie telefoniczne umożliwia użytkownikom logowanie się do Firebase przy użyciu telefonu jako modułu uwierzytelniającego. 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 podawane przez użytkowników końcowych w celu uwierzytelnienia będą wysyłane i przechowywane przez Google, aby skuteczniej zapobiegać 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 skorzystaniem z usługi logowania za pomocą numeru telefonu Firebase Authentication.

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

Organizować coś

Przed rozpoczęciem uwierzytelniania telefonicznego 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. Aby uzyskać informacje na temat znajdowania skrótu SHA-1 aplikacji, zobacz Uwierzytelnianie klienta .
  3. iOS : w Xcode włącz powiadomienia push dla swojego projektu i upewnij się, że klucz uwierzytelniania APN jest skonfigurowany za pomocą Firebase Cloud Messaging (FCM) . Dodatkowo należy włączyć tryby tła dla powiadomień zdalnych. Aby zapoznać się ze szczegółowym wyjaśnieniem 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 .

Notatka ; Logowania za pomocą numeru telefonu można używać wyłącznie na rzeczywistych urządzeniach i w internecie. Aby przetestować przepływ uwierzytelniania na emulatorach urządzeń, zobacz Testowanie .

Stosowanie

Zestaw SDK uwierzytelniania Firebase dla Flutter zapewnia dwa indywidualne sposoby logowania użytkownika przy użyciu numeru telefonu. Platformy natywne (np. Android i iOS) zapewniają inną funkcjonalność sprawdzania poprawności numeru telefonu niż sieć internetowa, dlatego istnieją dwie metody wyłącznie dla każdej platformy:

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

Natywny: verifyPhoneNumber

Na platformach natywnych numer telefonu użytkownika musi być najpierw zweryfikowany, a następnie użytkownik może się zalogować lub połączyć swoje konto za pomocą PhoneAuthCredential .

Najpierw musisz poprosić użytkownika o podanie numeru 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órymi musisz się zająć, a każde z nich określi sposób aktualizacji interfejsu użytkownika aplikacji:

  1. weryfikacjaZakończona : Automatyczna obsługa kodu SMS na urządzeniach z systemem Android.
  2. VerificationFailed : Obsługa zdarzeń niepowodzenia, takich jak nieprawidłowe numery telefonów lub przekroczenie limitu wiadomości SMS.
  3. codeSent : Obsługa sytuacji, gdy kod został wysłany na urządzenie z Firebase i służy do monitowania użytkowników o wprowadzenie kodu.
  4. codeAutoRetrievalTimeout : Obsługuje przekroczenie limitu czasu w przypadku niepowodzenia automatycznej obsługi kodu SMS.

weryfikacja ukończona

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

Gdy kod SMS zostanie dostarczony do urządzenia, Android automatycznie zweryfikuje kod SMS, bez konieczności ręcznego wprowadzania kodu przez użytkownika. Jeśli to zdarzenie wystąpi, automatycznie zostanie udostępniony PhoneAuthCredential , którego można użyć do zalogowania się przy użyciu numeru telefonu użytkownika lub połączenia go.

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 jeśli limit SMS-ów w projekcie został przekroczony, do tego modułu obsługi zostanie wysłany wyjątek FirebaseAuthException . W takim przypadku użytkownik zostanie poinformowany, że 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 wysyła kod SMS do urządzenia, ta procedura obsługi jest uruchamiana z verificationId i resendToken ( resendToken jest obsługiwany tylko na urządzeniach z systemem Android, urządzenia z systemem iOS zawsze zwracają wartość null ).

Po uruchomieniu byłby to dobry moment na aktualizację interfejsu aplikacji, tak aby wyświetlał monit użytkownikowi o wprowadzenie oczekiwanego kodu SMS. Po wprowadzeniu kodu SMS możesz połączyć identyfikator weryfikacyjny z kodem SMS, aby utworzyć nowy 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 niedawno wysłana. Można jednak obejść to zachowanie, ponownie wywołując metodę verifyPhoneNumber z tokenem ponownego wysłania 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, ta procedura obsługi zostanie wywołana, jeśli urządzenie nie rozwiązało automatycznie wiadomości SMS w określonym przedziale czasu. Po upływie tego czasu urządzenie nie będzie już próbowało przetwarzać żadnych przychodzących wiadomości.

Domyślnie urządzenie czeka 30 sekund, jednak 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...
  },
);

Internet: signInWithPhoneNumber

Na platformach internetowych użytkownicy mogą zalogować się, potwierdzając, że mają dostęp do telefonu, wpisując kod SMS wysłany na podany numer telefonu. W celu zwiększenia bezpieczeństwa i zapobiegania spamowi użytkownicy proszeni są o udowodnienie, że są ludźmi, poprzez wypełnienie widżetu Google reCAPTCHA . Po potwierdzeniu kod SMS zostanie wysłany.

Pakiet SDK uwierzytelniania Firebase dla Flutter domyślnie zarządza widżetem reCAPTCHA, jednak w razie potrzeby zapewnia kontrolę nad sposobem jego wyświetlania i konfiguracji. Aby rozpocząć signInWithPhoneNumber 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 spowoduje w pierwszej kolejności wyświetlenie widżetu reCAPTCHA. Użytkownik musi zakończyć 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 w przypadku innych przepływów logowania, pomyślne logowanie wyzwoli wszystkie odbiorniki stanu uwierzytelniania, które subskrybujesz w aplikacji.

Konfiguracja reCAPTCHA

Widget 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órej można używać do zarządzania widżetem. Domyślnie widżet będzie renderowany jako niewidoczny widżet po uruchomieniu procesu logowania. „Niewidoczny” widżet pojawi się jako moduł pełnostronicowy na górze aplikacji.

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

Aby dodać widget wbudowany, podaj 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 będzie renderowany 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 , jak pokazano powyżej.

Możliwe jest także nasłuchiwanie zdarzeń, np. czy reCAPTCHA zostało przez użytkownika zakończone, czy reCAPTCHA wygasło lub czy wystąpił 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 ).

Jeśli podasz testowy numer telefonu metodom verifyPhoneNumber lub signInWithPhoneNumber , żadna wiadomość SMS nie zostanie wysłana. Zamiast tego możesz podać kod testowy bezpośrednio do PhoneAuthProvider lub za pomocą procedury obsługi wyników signInWithPhoneNumber .