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

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

Предварительные требования

Перед началом работы с этим разделом:

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

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

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

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

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

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

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

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

1. Откройте консоль Firebase и нажмите на Authentication.

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

3. Выберите вкладку Sign-in method.

4. Нажмите на Phone (в разделе 'Native Providers'). Если вы уже добавили другие провайдеры, нажмите на Add new provider, а затем на Phone.

5. Найдите переключатель Phone и включите его.

6. Нажмите кнопку Save.

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

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

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

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

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

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

При нажатии на кнопку 'sign-in' или 'send code' вы добавите действие 'Phone Sign In', которое перенаправит пользователей на страницу, где они смогут ввести код, полученный на телефон.

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

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

2. Выберите Actions в Properties Panel (правое меню) и выберите Add Action.

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

4. Теперь укажите Phone Number через Widget State > TextField (который принимает номер телефона).

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

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

При нажатии на кнопку 'Verify Code' вы добавите действие 'Verify SMS Code', которое откроет домашнюю страницу, если действие выполнено успешно.

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

2. Выберите Actions в Properties Panel (правое меню) и выберите Add Action.

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

4. Теперь укажите SMS Code через Widget State > TextField (который принимает код).

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

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

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

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

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

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

1. Для Test mode вы можете открыть консоль браузера, попробовать войти в систему и получить домен из консоли браузера, а для Run mode просто используйте 'app.flutterflow.io.'
2. Теперь откройте консоль Firebase и нажмите на Authentication.
3. Выберите вкладку Setting.
4. Выберите Authorized domains в левом меню.
5. Нажмите Add domain.

Вот как это должно выглядеть:

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

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

Чтобы протестировать на реальном устройстве, добавьте ключ SHA-256 в консоли Firebase и включите 'Google Play Integrity API' в Google Cloud.

к сведению

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

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

warning

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

1. Откройте Google Developers Console (убедитесь, что ваш проект выбран в выпадающем списке вверху), нажмите на меню Library слева, найдите Google Play Integrity API и включите его.
2. Теперь вы можете протестировать приложение на реальном устройстве с помощью Local Run в FlutterFlow. Следуйте документации по Local Run и ознакомьтесь с настройкой физического устройства, чтобы начать тестирование.

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

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

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

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

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

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

1. Откройте консоль Firebase и нажмите на Authentication.
2. Выберите вкладку Sign-in method.
3. Нажмите на Phone (в разделе Sign-in providers).
4. Прокрутите вниз, найдите меню Phone numbers for testing и нажмите на него.
5. Введите любой тестовый номер телефона (убедитесь, что он выглядит нереальным).
6. Введите код подтверждения, который вы будете использовать на странице подтверждения кода.
7. Нажмите add.

Получаю эту ошибку: "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. Сначала убедитесь, что вы нажали кнопку "Save" при включении аутентификации по телефону в Firebase.

1. Если это уже включено, перейдите в Settings > SMS region policy > выберите Allow > Select regions, которые вы хотите поддерживать, и нажмите Save.