Аутентификация по телефону позволяет пользователям входить в Firebase, используя свой телефон в качестве аутентификатора. SMS-сообщение отправляется пользователю (используя предоставленный номер телефона), содержащее уникальный код. После авторизации кода пользователь может войти в Firebase.
Телефонные номера, которые конечные пользователи предоставляют для аутентификации, будут отправлены и сохранены Google для улучшения предотвращения спама и злоупотреблений в сервисе Google, включая, помимо прочего, Firebase. Разработчики должны убедиться, что у них есть соответствующее согласие конечного пользователя перед использованием службы входа в Firebase Authentication phone number sign-in.authentication
Firebase Phone Authentication поддерживается не во всех странах. Пожалуйста, ознакомьтесь с их FAQ для получения дополнительной информации.
Настраивать
Прежде чем приступить к аутентификации по телефону, убедитесь, что вы выполнили следующие шаги:
- Включите телефон в качестве метода входа в консоль Firebase .
- Android : Если вы еще не установили хэш SHA-1 вашего приложения в консоли Firebase , сделайте это. См. раздел Аутентификация вашего клиента для получения информации о поиске хэша SHA-1 вашего приложения.
- iOS : В Xcode включите push-уведомления для вашего проекта и убедитесь, что ваш ключ аутентификации APN настроен с помощью Firebase Cloud Messaging (FCM) . Кроме того, необходимо включить фоновые режимы для удаленных уведомлений. Чтобы просмотреть подробное объяснение этого шага, просмотрите документацию Firebase iOS Phone Auth .
- Веб : убедитесь, что вы добавили домен своего приложения в консоли Firebase в разделе Домены перенаправления OAuth .
Примечание ; Вход по номеру телефона доступен только для использования на реальных устройствах и в Интернете. Чтобы протестировать процесс аутентификации на эмуляторах устройств, см. Тестирование .
Использование
Firebase Authentication SDK для Flutter предоставляет два отдельных способа входа пользователя с помощью его номера телефона. Собственные платформы (например, Android и iOS) предоставляют функциональность для проверки номера телефона, отличную от веб-платформы, поэтому для каждой платформы существуют два метода:
- Собственная платформа :
verifyPhoneNumber
. - Веб-платформа :
signInWithPhoneNumber
.
Родной: verifyPhoneNumber
На собственных платформах сначала необходимо проверить номер телефона пользователя, а затем пользователь может либо войти в систему, либо привязать свою учетную запись с помощью PhoneAuthCredential
.
Сначала вы должны запросить у пользователя его номер телефона. После предоставления вызовите метод verifyPhoneNumber()
:
await FirebaseAuth.instance.verifyPhoneNumber(
phoneNumber: '+44 7123 123 456',
verificationCompleted: (PhoneAuthCredential credential) {},
verificationFailed: (FirebaseAuthException e) {},
codeSent: (String verificationId, int? resendToken) {},
codeAutoRetrievalTimeout: (String verificationId) {},
);
Вам необходимо обработать 4 отдельных обратных вызова, каждый из которых определяет, как вы обновляете пользовательский интерфейс приложения:
- проверкаЗавершено : Автоматическая обработка SMS-кода на устройствах Android.
- verificationFailed : обработка событий сбоя, таких как недействительные номера телефонов или превышение квоты SMS.
- codeSent : обрабатывает отправку кода на устройство из Firebase, используется для предложения пользователям ввести код.
- codeAutoRetrievalTimeout : Обработка тайм-аута при сбое автоматической обработки SMS-кода.
проверкаЗавершено
Этот обработчик будет вызываться только на устройствах Android, которые поддерживают автоматическое разрешение кодов SMS.
Когда SMS-код доставляется на устройство, Android автоматически проверяет SMS-код, не требуя от пользователя ручного ввода кода. Если это событие происходит, автоматически предоставляется PhoneAuthCredential
, который можно использовать для входа или привязки номера телефона пользователя.
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);
},
);
проверкаНеудачно
Если Firebase возвращает ошибку, например, из-за неверного номера телефона или превышения квоты SMS для проекта, этому обработчику будет отправлено исключение FirebaseAuthException
. В этом случае вы бы сообщили пользователю, что что-то пошло не так, в зависимости от кода ошибки.
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
},
);
кодОтправлено
Когда Firebase отправляет SMS-код на устройство, этот обработчик активируется с помощью verificationId
и resendToken
( resendToken
поддерживается только на устройствах Android, устройства iOS всегда возвращают null
значение).
После срабатывания, самое время обновить пользовательский интерфейс приложения, чтобы предложить пользователю ввести ожидаемый им SMS-код. После ввода SMS-кода вы можете объединить идентификатор проверки с SMS-кодом, чтобы создать новый 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);
},
);
По умолчанию Firebase не будет повторно отправлять новое SMS-сообщение, если оно было недавно отправлено. Однако вы можете переопределить это поведение, повторно вызвав метод verifyPhoneNumber
с токеном повторной отправки в аргумент forceResendingToken
. В случае успеха SMS-сообщение будет отправлено повторно.
codeAutoRetrievalTimeout
На устройствах Android, которые поддерживают автоматическое разрешение кода SMS, этот обработчик будет вызван, если устройство не разрешит SMS-сообщение автоматически в течение определенного периода времени. По истечении этого периода устройство больше не будет пытаться разрешить входящие сообщения.
По умолчанию устройство ждет 30 секунд, однако это можно настроить с помощью аргумента 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...
},
);
Веб: signInWithPhoneNumber
На веб-платформах пользователи могут войти в систему, подтвердив, что у них есть доступ к телефону, введя SMS-код, отправленный на указанный номер телефона. Для дополнительной безопасности и предотвращения спама пользователям предлагается подтвердить, что они человек, заполнив виджет Google reCAPTCHA . После подтверждения будет отправлен SMS-код.
Firebase Authentication SDK для Flutter будет управлять виджетом reCAPTCHA из коробки по умолчанию, однако обеспечивает контроль над тем, как он отображается и настраивается, если это необходимо. Чтобы начать, вызовите метод signInWithPhoneNumber
с номером телефона.
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');
Вызов метода сначала запустит отображение виджета reCAPTCHA. Пользователь должен завершить тест, прежде чем будет отправлен SMS-код. После завершения вы можете зарегистрировать пользователя, предоставив SMS-код методу confirm
в разрешенном ответе ConfirmationResult
:
UserCredential userCredential = await confirmationResult.confirm('123456');
Как и в других процессах входа, успешный вход активирует все прослушиватели состояния аутентификации, на которые вы подписались в своем приложении.
Конфигурация reCAPTCHA
Виджет reCAPTCHA — это полностью управляемый процесс, обеспечивающий безопасность вашего веб-приложения.
Второй аргумент signInWithPhoneNumber
принимает необязательный экземпляр RecaptchaVerifier
, который можно использовать для управления виджетом. По умолчанию виджет будет отображаться как невидимый виджет при запуске потока входа. «Невидимый» виджет будет отображаться как полностраничное модальное окно поверх вашего приложения.
Однако можно отобразить встроенный виджет, на который пользователь должен будет нажать для подтверждения своей личности.
Чтобы добавить встроенный виджет, укажите идентификатор элемента DOM в аргументе container
экземпляра RecaptchaVerifier
. Элемент должен существовать и быть пустым, в противном случае будет выдана ошибка. Если аргумент container
не указан, виджет будет отображаться как «невидимый».
ConfirmationResult confirmationResult = await auth.signInWithPhoneNumber('+44 7123 123 456', RecaptchaVerifier(
container: 'recaptcha',
size: RecaptchaVerifierSize.compact,
theme: RecaptchaVerifierTheme.dark,
));
При желании вы можете изменить размер и тему, настроив аргументы size
и theme
, как показано выше.
Также можно прослушивать события, например, была ли reCAPTCHA пройдена пользователем, истек ли срок действия reCAPTCHA или возникла ли ошибка:
RecaptchaVerifier(
onSuccess: () => print('reCAPTCHA Completed!'),
onError: (FirebaseAuthException error) => print(error),
onExpired: () => print('reCAPTCHA Expired!'),
);
Тестирование
Firebase обеспечивает поддержку локального тестирования телефонных номеров:
- В консоли Firebase выберите поставщика аутентификации «Телефон» и щелкните раскрывающийся список «Номера телефонов для тестирования».
- Введите новый номер телефона (например
+44 7444 555666
) и тестовый код (например,123456
).
Если предоставить тестовый номер телефона для методов verifyPhoneNumber
или signInWithPhoneNumber
, SMS фактически не будет отправлено. Вместо этого вы можете предоставить тестовый код напрямую PhoneAuthProvider
или с помощью обработчика результатов подтверждения signInWithPhoneNumber
.