Uwierzytelnianie przez telefon

Uwierzytelnianie przez telefon umożliwia użytkownikom logowanie się w Firebase przy użyciu telefonu jako urządzenia uwierzytelniającego. Na numer telefonu podany przez użytkownika wysyłamy SMS-a z unikalnym kodem. Po autoryzacji kodu użytkownik może zalogować się w Firebase.

Numery telefonów podawane przez użytkowników końcowych w celu uwierzytelnienia będą przesyłane i przechowywane przez Google w celu poprawy zapobiegania spamowi i nadużycia w usługach Google, w tym Firebase. Przed skorzystaniem z usługi logowania za pomocą numeru telefonu w Firebase Authentication deweloperzy powinni uzyskać odpowiednią zgodę użytkownika.

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

Konfiguracja

Zanim zaczniesz korzystać z weryfikacji przez telefon:

  1. Włącz telefon jako metodę logowania w konsoli Firebase.
  2. Android: jeśli nie ustawiono jeszcze w konsoli Firebase skrótu SHA-1 aplikacji, zrób to. Więcej informacji o sposobie znalezienia skrótu SHA-1 aplikacji znajdziesz w artykule Uwierzytelnianie klienta.
  3. iOS: w Xcode włącz powiadomienia push dla projektu i upewnij się, że klucz uwierzytelniania APNs jest skonfigurowany w Komunikacji w chmurze Firebase (FCM). Dodatkowo musisz włączyć tryby działania w tle, aby wysyłać powiadomienia z dalsza. Szczegółowe informacje o tym kroku znajdziesz w dokumentacji Uwierzytelniania przez telefon w Firebase na iOS.
  4. Internet: sprawdź, czy dodałeś domenę aplikacji w konsoli Firebase w sekcji Domeny przekierowania OAuth.

Uwaga: logowanie się za pomocą numeru telefonu jest dostępne tylko na prawdziwych urządzeniach i w internecie. Aby przetestować proces uwierzytelniania na emulatorach urządzeń, zapoznaj się z artykułem Testowanie.

Wykorzystanie

Pakiet SDK usługi Uwierzytelnianie Firebase dla Fluttera udostępnia 2 osobne sposoby logowania się użytkownika za pomocą numeru telefonu. Natywnych platform (np. Android i iOS) używa się do weryfikacji numeru telefonu w inny sposób niż w internecie, dlatego na każdej z nich dostępne są 2 metody:

  • Platforma natywnych reklam: verifyPhoneNumber.
  • Platforma internetowa: signInWithPhoneNumber.

Natywny: verifyPhoneNumber

Na platformach natywnych najpierw trzeba zweryfikować numer telefonu użytkownika, a potem użytkownik może zalogować się lub połączyć swoje konto z usługą PhoneAuthCredential.

Najpierw musisz poprosić użytkownika o podanie numeru telefonu. Gdy to zrobisz, 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łużyć 4 osobne funkcje zwracane przez wywołania zwrotne. Każda z nich określa sposób aktualizowania interfejsu aplikacji:

  1. verificationCompleted: automatyczne przetwarzanie kodu SMS-a 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 na urządzenie z Firebase, aby poprosić użytkowników o jego wpisanie.
  4. codeAutoRetrievalTimeout: obsługa limitu czasu, gdy automatyczne pobieranie kodu SMS zakończy się niepowodzeniem.

verificationCompleted

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

Gdy kod SMS zostanie dostarczony na urządzenie, Android automatycznie go zweryfikuje, nie wymagając od użytkownika ręcznego wpisywania kodu. Jeśli to zdarzenie wystąpi, automatycznie zostanie wyświetlony PhoneAuthCredential, który można wykorzystać do zalogowania się lub połączenia z numerem 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. z powodu nieprawidłowego numeru telefonu lub przekroczenia limitu SMS-ów w projekcie, do tego modułu zostanie wysłana odpowiedź FirebaseAuthException. W takim przypadku wyświetlisz użytkownikowi komunikat o wystąpieniu błędu (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 wysyła kod SMS na urządzenie, ten moduł obsługi jest wywoływany z parametrami verificationId i resendToken (resendToken jest obsługiwane tylko na urządzeniach z Androidem, a urządzenia z iOS zawsze zwracają wartość null).

Po jego uruchomieniu warto zaktualizować interfejs aplikacji, aby poprosić użytkownika o wpisanie oczekiwanego kodu SMS. Po wpisaniu kodu z SMS-a możesz połączyć identyfikator weryfikacji z kodem z SMS-a, 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 wysyła ponownie nowego SMS-a, jeśli został on niedawno wysłany. Możesz jednak zmienić to zachowanie, ponownie wywołując metodę verifyPhoneNumber, podając jako argument forceResendingToken token ponownego wysyłania. Jeśli się uda, SMS zostanie wysłany ponownie.

codeAutoRetrievalTimeout

Na urządzeniach z Androidem, które obsługują automatyczne rozwiązywanie kodu SMS-a, ten moduł obsługi zostanie wywołany, jeśli urządzenie nie zdoła automatycznie rozwiązać wiadomości SMS w określonym czasie. Po upływie tego czasu urządzenie nie będzie już próbować rozwiązywać żadnych przychodzących wiadomości.

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ą zalogować się, potwierdzając dostęp do telefonu przez wpisanie kodu SMS wysłanego na podany numer telefonu. Aby zwiększyć bezpieczeństwo i zapobiec spamowi, użytkownicy muszą potwierdzić, że są ludźmi, wypełniając widżet reCAPTCHA Google. Po potwierdzeniu wyślemy kod SMS-em.

Pakiet SDK uwierzytelniania Firebase dla Fluttera domyślnie zarządza widżetem reCAPTCHA, ale w razie potrzeby umożliwia też kontrolowanie sposobu jego wyświetlania i konfigurowanie. 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 spowoduje najpierw wyświetlenie widżetu reCAPTCHA. Użytkownik musi ukończyć test, zanim zostanie wysłany kod SMS. Po zakończeniu procesu możesz zalogować użytkownika, podając kod SMS do metody confirm w odpowiedzi ConfirmationResult:

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

Podobnie jak w przypadku innych procesów logowania, pomyślne zalogowanie się spowoduje wywołanie wszystkich odbiorców stanu uwierzytelniania, które zostały zarejestrowane w aplikacji.

Konfiguracja reCAPTCHA

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

Drugi argument funkcji signInWithPhoneNumber przyjmuje opcjonalną instancję RecaptchaVerifier, której można użyć do zarządzania widżetem. Domyślnie widżet jest renderowany jako niewidoczny, gdy uruchamia się proces logowania. „Niewidzialny” widżet będzie widoczny jako okno modalne na całą stronę na górze aplikacji.

Możesz jednak wyświetlić wbudowany widget, który użytkownik musi nacisnąć, aby potwierdzić swoją tożsamość.

Aby dodać widżet wbudowany, podaj identyfikator elementu DOM jako argument container instancji RecaptchaVerifier. Element musi istnieć i być pusty, w przeciwnym razie zostanie wygenerowany 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, jak pokazano powyżej.

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

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

Testowanie

Firebase umożliwia testowanie numerów telefonów lokalnie:

  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 ramach metody verifyPhoneNumber lub signInWithPhoneNumber, SMS nie zostanie wysłany. Zamiast tego możesz podać kod testowy bezpośrednio w PhoneAuthProvider lub w ramach funkcji obsługi wyników potwierdzenia signInWithPhoneNumber.