Uwierzytelnianie przez telefon

Uwierzytelnianie telefoniczne umożliwia użytkownikom logowanie się w Firebase za pomocą telefonu jako uwierzytelnienia. Do użytkownika (na podany numer telefonu) jest wysyłana wiadomość SMS z unikalnym kodem. Gdy kod zostanie autoryzowany, użytkownik będzie mógł zalogować się w Firebase.

Numery telefonów podawane przez użytkowników na potrzeby uwierzytelniania będą wysyłane i przechowywane przez Google w celu zapobiegania spamowi i nadużyciom w usługach Google, w tym w Firebase. Przed użyciem usługi logowania się za pomocą numeru telefonu w Uwierzytelnianiu Firebase deweloperzy powinni uzyskać odpowiednią zgodę użytkownika.

Uwierzytelnianie telefoniczne w Firebase nie jest obsługiwane we wszystkich krajach. Więcej informacji znajdziesz w najczęstszych pytaniach.

Konfiguracja

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

  1. W konsoli Firebase otwórz Zabezpieczenia > Uwierzytelnianie.

  2. Na karcie Metoda logowania włącz dostawcę logowania Telefon.

  3. Skonfiguruj wymagania dotyczące platformy:

Wykorzystanie

Pakiet SDK usługi Uwierzytelnianie Firebase na Fluttera udostępnia 2 sposoby logowania użytkownika za pomocą numeru telefonu. Platformy natywne (np. Android i iOS) oferują inne funkcje weryfikacji numeru telefonu niż witryny, dlatego dla każdej platformy istnieją 2 metody:

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

Natywna: verifyPhoneNumber

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

Najpierw musisz poprosić użytkownika o podanie numeru telefonu. Gdy użytkownik poda numer, 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) {},
);

Musisz obsługiwać 4 oddzielne wywołania zwrotne, z których każde określa, jak aktualizować interfejs aplikacji:

  1. verificationCompleted: automatyczna obsługa kodu SMS na urządzeniach z Androidem.
  2. verificationFailed: obsługa zdarzeń niepowodzenia, takich jak nieprawidłowe numery telefonów lub przekroczenie limitu SMS-ów.
  3. codeSent: obsługa sytuacji, gdy kod został wysłany z Firebase na urządzenie. Służy do wyświetlania użytkownikom prośby o wpisanie kodu.
  4. codeAutoRetrievalTimeout: obsługa przekroczenia limitu czasu, gdy automatyczna obsługa kodu SMS nie powiedzie się.

verificationCompleted

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

Gdy kod SMS zostanie dostarczony na urządzenie, Android automatycznie go zweryfikuje bez konieczności ręcznego wpisywania kodu przez użytkownika. Jeśli wystąpi to zdarzenie, automatycznie zostanie udostępniony element 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);
  },
);

verificationFailed

Jeśli Firebase zwróci błąd, np. w przypadku nieprawidłowego numeru telefonu lub przekroczenia limitu SMS-ów w projekcie, do tego modułu obsługi zostanie wysłany element FirebaseAuthException. W takim przypadku wyświetlisz użytkownikowi komunikat o błędzie 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
  },
);

codeSent

Gdy Firebase wyśle kod SMS na urządzenie, ten moduł obsługi zostanie wywołany z elementami verificationId i resendToken (element resendToken jest obsługiwany tylko na urządzeniach z Androidem, urządzenia z iOS zawsze zwracają wartość null).

Po wywołaniu modułu obsługi warto zaktualizować interfejs aplikacji, aby wyświetlić użytkownikowi prośbę o wpisanie oczekiwanego kodu SMS. Gdy użytkownik wpisze kod SMS, możesz połączyć identyfikator weryfikacji z kodem SMS, aby utworzyć nowy element 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 SMS-a, jeśli został on wysłany niedawno. Możesz jednak zmienić to zachowanie, ponownie wywołując metodę verifyPhoneNumber z tokenem ponownego wysłania jako argumentem forceResendingToken. Jeśli operacja się powiedzie, SMS zostanie wysłany ponownie.

codeAutoRetrievalTimeout

Na urządzeniach z Androidem, które obsługują automatyczne rozpoznawanie kodu SMS, ten moduł obsługi zostanie wywołany, jeśli urządzenie nie rozpozna automatycznie SMS-a w określonym czasie. Po upływie tego czasu urządzenie nie będzie już próbować rozpoznawać przychodzących 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...
  },
);

Witryna: signInWithPhoneNumber

W witrynach użytkownicy mogą się logować, potwierdzając dostęp do telefonu przez wpisanie kodu SMS wysłanego na podany numer telefonu. Aby zwiększyć bezpieczeństwo i zapobiegać spamowi, użytkownicy muszą potwierdzić, że są ludźmi, wypełniając widżet reCAPTCHA Google. Gdy użytkownik potwierdzi, kod SMS zostanie wysłany.

Pakiet SDK usługi Uwierzytelnianie Firebase na Fluttera domyślnie zarządza widżetem reCAPTCHA, ale w razie potrzeby umożliwia kontrolowanie sposobu jego wyświetlania i konfigurowania. 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 tej metody spowoduje najpierw wyświetlenie widżetu reCAPTCHA. Zanim zostanie wysłany kod SMS, użytkownik musi przejść test. Gdy użytkownik przejdzie test, możesz go zalogować, podając kod SMS w metodzie confirm w odpowiedzi ConfirmationResult:

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

Podobnie jak w przypadku innych procesów logowania, udane logowanie spowoduje wywołanie wszystkich odbiorców stanu uwierzytelniania, których subskrybujesz w aplikacji.

Konfiguracja reCAPTCHA

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

Drugi argument metody signInWithPhoneNumber akceptuje opcjonalną instancję RecaptchaVerifier, której można użyć do zarządzania widżetem. Domyślnie widżet będzie renderowany jako niewidoczny, gdy zostanie uruchomiony proces logowania. „Niewidoczny” widżet będzie wyświetlany jako modal na pełnym ekranie nad aplikacją.

Można jednak wyświetlić widżet wbudowany, który użytkownik musi wyraźnie nacisnąć, aby się zweryfikować.

Aby dodać widżet wbudowany, 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 podasz argumentu container, widżet zostanie wyrenderowany 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 opisany powyżej.

Możesz też nasłuchiwać zdarzeń, np. czy użytkownik przeszedł reCAPTCHA, czy reCAPTCHA wygasła lub czy wystąpił błąd:

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

Testowanie

Firebase obsługuje lokalne testowanie 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).

Jeśli podasz testowy numer telefonu w metodach verifyPhoneNumber lub signInWithPhoneNumber, SMS nie zostanie wysłany. Zamiast tego możesz podać kod testowy bezpośrednio w PhoneAuthProvider lub w module obsługi wyniku potwierdzenia signInWithPhoneNumber.