Uwierzytelnianie przez telefon

Uwierzytelnianie telefoniczne umożliwia użytkownikom logowanie się w Firebase za pomocą telefonu jako narzędzia uwierzytelniającego. Do użytkownika (na podany numer telefonu) wysyłany jest SMS z unikalnym kodem. Po autoryzacji kodu użytkownik może zalogować się w Firebase.

Numery telefonów podawane przez użytkowników na potrzeby uwierzytelniania będą przesyłane i przechowywane przez Google w celu ulepszania ochrony przed spamem i nadużyciami w usługach Google, w tym w Firebase. Deweloperzy powinni przed użyciem usługi logowania za pomocą numeru telefonu w Firebase Authentication uzyskać odpowiednią zgodę użytkowników.

Uwierzytelnianie za pomocą numeru telefonu w Firebase nie jest obsługiwane we wszystkich krajach. Więcej informacji znajdziesz w odpowiedziach na najczęstsze pytania.

Konfiguracja

Zanim zaczniesz korzystać z uwierzytelniania za pomocą telefonu, wykonaj te czynności:

  1. W konsoli Firebase otwórz Bezpieczeństwo > Uwierzytelnianie.

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

  3. Skonfiguruj wymagania dotyczące konkretnej platformy:

    • iOS+: w Xcode włącz powiadomienia push w projekcie i upewnij się, że klucz uwierzytelniania APNs jest skonfigurowany z Komunikacją w chmurze Firebase (FCM). Musisz też włączyć tryby działania w tle w przypadku powiadomień zdalnych.

      Szczegółowe wyjaśnienie tego kroku znajdziesz w dokumentacji Firebase iOS Phone Auth.

    • Android: jeśli nie zostało to jeszcze zrobione, określ odcisk cyfrowy SHA-1 aplikacji:

      1. W konsoli Firebase otwórz Ustawienia > kartę Ogólne.

      2. Przewiń w dół do karty Twoje aplikacje, wybierz aplikację na Androida i dodaj odcisk cyfrowy SHA-1 w polu Odciski cyfrowe certyfikatu SHA.

      Więcej informacji o tym, jak uzyskać odcisk cyfrowy SHA aplikacji, znajdziesz w sekcji Uwierzytelnianie klienta.

    • Internet: jeśli nie zostało to jeszcze zrobione, autoryzuj domenę aplikacji:

      1. W konsoli Firebase otwórz kartę Zabezpieczenia> Uwierzytelnianie > Ustawienia.

      2. W sekcji Autoryzowane domeny kliknij Dodaj domenę i dodaj swoją domenę.

Wykorzystanie

Pakiet SDK usługi Uwierzytelnianie Firebase dla Fluttera udostępnia 2 sposoby logowania użytkownika przy użyciu numeru telefonu. Platformy natywne (np. Android i iOS) zapewniają inne funkcje weryfikacji numeru telefonu niż internet, dlatego istnieją 2 metody przeznaczone wyłącznie dla każdej platformy:

  • Platforma natywna: verifyPhoneNumber.
  • Platforma internetowa: signInWithPhoneNumber

Natywne: verifyPhoneNumber

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

Najpierw musisz poprosić użytkownika o podanie numeru telefonu. Po podaniu wartości 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 wywołania zwrotne. Każde z nich określa, jak zaktualizować interfejs aplikacji:

  1. verificationCompleted: automatyczna obsługa kodu SMS na urządzeniach z Androidem.
  2. verificationFailed: obsługuje zdarzenia niepowodzenia, takie jak nieprawidłowe numery telefonów lub przekroczenie limitu SMS-ów.
  3. codeSent: funkcja obsługi sytuacji, w której 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ługuje sytuację, w której automatyczne przetwarzanie kodu SMS nie powiedzie się z powodu przekroczenia limitu czasu.

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 bez konieczności ręcznego wpisywania przez użytkownika. Jeśli to zdarzenie wystąpi, automatycznie zostanie podany PhoneAuthCredential, którego można użyć do zalogowania się lub powiązania 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. z powodu nieprawidłowego numeru telefonu lub przekroczenia limitu SMS-ów w projekcie, do tego modułu obsługi zostanie wysłany obiekt FirebaseAuthException. W takim przypadku w zależności od kodu błędu wyświetlisz użytkownikowi komunikat o tym, że coś poszło nie tak.

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 na urządzenie kod SMS, ten moduł obsługi zostanie wywołany z wartościami verificationIdresendToken (wartość resendToken jest obsługiwana tylko na urządzeniach z Androidem, urządzenia z iOS zawsze zwracają wartość null).

Gdy to nastąpi, warto zaktualizować interfejs aplikacji, aby poprosić użytkownika o wpisanie oczekiwanego kodu SMS. Po wpisaniu kodu SMS możesz połączyć identyfikator weryfikacji 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 wysyła ponownie nowego SMS-a, jeśli został on niedawno wysłany. Możesz jednak zmienić ten sposób działania, ponownie wywołując metodę verifyPhoneNumber z tokenem ponownego wysyłania jako argumentem forceResendingToken. Jeśli się uda, SMS zostanie wysłany ponownie.

codeAutoRetrievalTimeout

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

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ą logować się, 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 są proszeni o potwierdzenie, że są ludźmi, poprzez wypełnienie widżetu Google reCAPTCHA. Po potwierdzeniu wyślemy SMS-a z kodem.

Pakiet SDK Uwierzytelniania Firebase na potrzeby 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. Użytkownik musi ukończyć test, zanim zostanie wysłany kod SMS. Po zakończeniu tego procesu możesz zalogować użytkownika, 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 uruchomi wszystkie odbiorniki stanu uwierzytelniania, które zostały zasubskrybowane 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 przyjmuje opcjonalną instancję RecaptchaVerifier, która może służyć do zarządzania widżetem. Domyślnie widżet jest renderowany jako niewidoczny, gdy zostanie wywołany proces logowania. „Niewidoczny” widżet pojawi się jako modalny element zajmujący całą stronę aplikacji.

Można jednak wyświetlić widżet wbudowany, który użytkownik musi kliknąć, 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 zostanie zgłoszony błąd. Jeśli nie podasz argumentu 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 sizetheme, jak pokazano powyżej.

Możesz też nasłuchiwać zdarzeń, np. czy użytkownik rozwiązał 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 przypadku metody verifyPhoneNumber lub signInWithPhoneNumber, SMS nie zostanie wysłany. Zamiast tego możesz przekazać kod testu bezpośrednio do PhoneAuthProvider lub za pomocą procedury obsługi wyniku potwierdzenia signInWithPhoneNumber.