Вход по телефону

При входе по телефону пользователь получает SMS с одноразовым кодом и вводит его в приложении.

Как подключить

Девять шагов:

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

1. Подготовить проект

Понадобится ключ SHA-1 и перегенерация файлов конфигурации — подробности в первичной настройке. Этот шаг чаще всего пропускают, а без него вход не заработает.

2. Включить провайдера в 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. Действие Phone Sign In

По нажатию кнопки «Sign In» или «Send Code» срабатывает действие Phone Sign In: пользователю уходит SMS, а приложение открывает страницу ввода кода.

1. Выберите виджет — например, кнопку.
2. В панели свойств справа откройте Actions и нажмите Add Action.
3. Найдите и выберите Phone Sign In (раздел Backend/Database > Firebase Authentication).
4. В Phone Number подставьте значение из Widget State > TextField с номером.
5. В Select Page укажите страницу ввода кода.

6. Действие Verify SMS Code

По нажатию кнопки «Verify Code» срабатывает действие Verify SMS Code; при успехе открывается домашняя страница.

1. Выберите виджет — например, кнопку.
2. В панели свойств справа откройте Actions и нажмите Add Action.
3. Найдите и выберите Verify SMS Code (раздел Backend/Database > Firebase Authentication).
4. В SMS Code подставьте значение из Widget State > TextField с кодом.

7. Добавить выход

Выход из аккаунта — действие Logout.

8. Проверка входа

8.1. В Test и Run mode

Домен, с которого идёт запрос, нужно внести в список разрешённых в консоли Firebase.

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

Должно получиться так:

8.2. На реальном устройстве

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

Для этого добавьте в проект Firebase ключ SHA-256 и включите Google Play Integrity API в Google Cloud.

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

   внимание

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

   

2. Откройте Google Developers Console, проверьте выбранный проект, перейдите в Library, найдите Google Play Integrity API и включите его.

3. Запустите приложение на устройстве через Local Run — см. документацию и подключение физического устройства.

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

Записи новых пользователей появятся в Firebase project > Authentication > Users.

Частые вопросы

Как проверить вход, не тратя реальные SMS?

В консоли Firebase можно завести вымышленные номера с заранее известным кодом:

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

Смотреть видеозагрузится с loom.com

Ошибка «The given sign-in provider is disabled for this Firebase project»

1. Проверьте, что при включении провайдера в Firebase вы нажали Save.

   

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