phone-login

slug: /integrations/authentication/firebase/phone title: Вход по номеру телефона description: Узнайте, как добавить вход по номеру телефона в приложение на FlutterFlow. tags: [Вход по телефону, Аутентификация, Firebase] sidebar_position: 5 keywords: [FlutterFlow, Вход по номеру телефона, Аутентификация, Firebase]

Вход по номеру телефона

Вход по номеру телефона позволяет пользователю войти в приложение, отправив SMS-сообщение с одноразовым кодом на его телефон.

Необходимые шаги

Прежде чем начать:

1. Завершите Настройку Firebase.
2. Завершите Первоначальную настройку, необходимую для аутентификации.

Добавление входа по номеру телефона

Процесс добавления входа по номеру телефона включает следующие шаги:

1. Настройка входа по телефону
2. Включение аутентификации по телефону в Firebase
3. Создание страницы ввода номера телефона
4. Создание страницы ввода кода
5. Добавление действия для входа по телефону
6. Добавление действия для проверки кода
7. Добавление действия для выхода
8. Тестирование входа по телефону
9. Проверка создания пользователя

1. Настройка входа по телефону

Для использования входа по телефону необходимо получить ключ SHA-1 и пересоздать файлы конфигурации. Подробные инструкции можно найти здесь. Примечание: данный шаг часто упускают, убедитесь, что завершили его перед тем, как продолжить.

2. Включение аутентификации по телефону в Firebase

Чтобы включить аутентификацию в Firebase:

1. Откройте консоль Firebase и перейдите в раздел Аутентификация.

2. Нажмите на кнопку Начать (она может не отображаться, если уже настроены другие формы аутентификации).

3. Выберите вкладку Метод входа.

4. Нажмите на Телефон (в разделе 'Native Providers'). Если уже добавлен другой провайдер, нажмите Добавить нового провайдера, затем выберите Телефон.

5. Переключите ползунок Телефон в положение "Включено".

6. Нажмите кнопку Сохранить.

3. Создание страницы ввода номера телефона

Чтобы пользователи могли пройти аутентификацию по номеру телефона, создайте страницу для ввода номера. Вы можете использовать готовый шаблон или создать страницу с нуля.

Вот страница, добавленная из шаблона, и после некоторой модификации она выглядит так:

4. Создание страницы ввода кода

Создайте ещё одну страницу для ввода кода из SMS. Вот как можно создать страницу для проверки кода с использованием шаблонов.

5. Добавление действия для входа по телефону

При нажатии на кнопку «Войти» или «Отправить код» добавьте действие «Вход по телефону», которое перенаправит пользователя на страницу для ввода кода.

Чтобы добавить это действие:

1. Выберите виджет (например, Кнопка), на котором нужно добавить действие.

2. Выберите Действия в Панели свойств (правое меню) и выберите Добавить действие.

3. Найдите и выберите Phone Sign In (в Backend/Database > Firebase Authentication).

4. Укажите Номер телефона через Widget State > TextField (ввод номера телефона).

5. Выберите страницу, созданную для ввода кода.

6. Добавление действия для проверки кода

При нажатии кнопки «Проверить код» добавьте действие «Проверить SMS-код», которое откроет домашнюю страницу при успешном выполнении действия.

1. Выберите виджет (например, Кнопка), на котором нужно добавить действие.

2. Выберите Действия в Панели свойств (правое меню) и выберите Добавить действие.

3. Найдите и выберите Verify SMS Code (в Backend/Database > Firebase Authentication).

4. Укажите SMS-код через Widget State > TextField (поле ввода кода).

7. Добавление действия для выхода

Чтобы пользователи могли выйти из приложения, используйте действие Logout.

8. Тестирование входа по телефону

8.1 Тестирование в режимах Run или Test

Для тестирования входа по телефону в режиме Test или Run необходимо добавить авторизованный домен в консоли Firebase.

1. Для режима Test откройте консоль браузера, попробуйте войти и получите домен из консоли браузера, а для режима Run используйте 'app.flutterflow.io'.
2. Откройте консоль Firebase и перейдите в Аутентификация.
3. Выберите вкладку Настройки.
4. Выберите Авторизованные домены.
5. Нажмите Добавить домен.

8.2 Тестирование на реальном устройстве

Вход по телефону не работает в эмуляторе Android. Он доступен только на реальном устройстве.

Для тестирования на реальном устройстве добавьте ключ SHA-256 в консоли Firebase и включите API "Google Play Integrity" в Google Cloud.

к сведению

Пропустите этот шаг, если он уже выполнен при автоматической интеграции Firebase.

1. Получите ключ SHA-256, добавьте его в проект Firebase и затем пересоздайте файлы конфигурации Firebase в FlutterFlow. Инструкции аналогичны получению ключа SHA-1 и описаны здесь. Ключ SHA-256 находится сразу под ключом SHA-1 в терминале.

warning

При выпуске приложения убедитесь, что используете ключ из консоли Play.

1. Откройте Google Developers Console, выберите проект в выпадающем меню, нажмите Библиотека на левой панели, найдите Google Play Integrity API и включите его.
2. Теперь загрузите и протестируйте приложение, используя инструкции здесь.

9. Проверка создания пользователя

Чтобы подтвердить успешную интеграцию и создание пользователей, перейдите в Firebase проект > Аутентификация > Пользователи и проверьте созданные записи пользователей.

Часто задаваемые вопросы

Как протестировать с фиктивными номерами?

Чтобы протестировать вход по телефону без ограничений, можно добавить фиктивные номера в консоль Firebase.

Чтобы добавить фиктивный номер:

1. Откройте консоль Firebase и выберите Аутентификация.
2. Перейдите на вкладку Метод входа.
3. Нажмите на Телефон (в разделе провайдеров входа).
4. Прокрутите вниз и найдите меню Номера телефонов для тестирования.
5. Введите любой фиктивный номер телефона.
6. Укажите код подтверждения, который будете использовать на странице ввода кода.
7. Нажмите Добавить.

Ошибка "The given sign-in provider is disabled for this Firebase project. Enable it in the Firebase console, under the sign-in method tab of the Auth Section."

1. Убедитесь, что нажали "Сохранить" при включении аутентификации по телефону в Firebase.

2. Если это уже включено, перейдите в Настройки > Политика региона SMS > выберите Разрешить > Выберите регионы и нажмите Сохранить.