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

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

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

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

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

1. Откройте консоль Firebase и щелкните на Authentication (внутри раздела Build в левом боковом меню).
2. Нажмите на кнопку Начать (она может быть не видна, если вы уже настроили другие формы аутентификации).
3. Выберите вкладку Метод входа в систему.
4. Щелкните на Телефон (в разделе Native Providers). Если вы уже добавили какого-либо другого провайдера, нажмите на кнопку Добавить нового провайдера, а затем выберите пункт Телефон.
5. Найдите переключатель Телефон и включите его.
6. Щелкните на кнопке Сохранить.
7. Если вы хотите использовать функцию Phone Sign-In в режиме «Run Mode» (по ссылкам app.flutterflow.io/run/…), также выполните следующие действия:
   1. Выберите вкладку Настройка (помимо вкладки Метод входа).
   2. В левом боковом меню выберите пункт Авторизованные домены.
   3. Нажмите кнопку Добавить домен.
   4. Введите app.flutterflow.io и нажмите на кнопку добавления.

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

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

1. В навигационном меню (в левой части экрана) щелкните по пункту «Выбор страницы».
2. Щелкните на значке Новая страница (). Откроется всплывающее окно.
3. Введите название страницы и нажмите кнопку + Создать новую под шаблоном Пустая страница.
4. В навигационном меню щелкните на дереве виджетов (Widget Tree).
5. Добавьте виджет TextField внутри столбца Column и измените его Подсказки на Номер телефона.
6. Добавьте виджет Button (Кнопка) под TextField (Текстовое поле) и измените его текст на Send Code (Отправить код).

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

Вот как создается страница проверки кода:

1. В навигационном меню (в левой части экрана) щелкните по пункту Выбор страницы.
2. Щелкните на значке Новая страница. Откроется всплывающее окно.
3. Введите название страницы и нажмите кнопку + Создать новую под шаблоном Пустая страница.
4. В навигационном меню щелкните на Дереве виджетов.
5. Добавьте виджет TextField внутри Column и измените его «Текст подсказки» на «Введите код».
6. Добавьте виджет Button (Кнопка) под TextField (Текстовое поле) и измените его текст на Verify Code (Проверить код).

Чтобы добавить действие «Регистрация по телефону» на кнопку, выполните следующие действия:

1. Выберите кнопку (с текстом Send Code) в дереве виджетов или в области холста.
2. Выберите пункт Действия на панели свойств (правое меню) и нажмите + Добавить действие.
   1. Найдите и выберите действие Регистрация по телефону.
   2. Теперь можно указать номер телефона. Для этого щелкните на кнопке UNSET. В результате слева откроется всплывающее окно.
   3. Выберите Состояние виджета, а затем выберите имя текстового поля, принимающего номер телефона. Номер телефона можно указать и из других переменных, например из переменной ответа API, документа Firestore или переменной, содержащей данные о вошедшем в систему пользователе.
   4. Щелкните на раскрывающемся списке Страница проверки SMS-кода и выберите созданную вами страницу для проверки кода. В случае успешного выполнения этого действия выбранная страница будет открыта.

Чтобы добавить действие «Проверить код» на кнопку, выполните следующие действия:

1. Выберите кнопку (с текстом Verify Code) в дереве виджетов или в области холста.
2. На панели свойств (правое меню) выберите пункт Действия и нажмите + Добавить действие.
   1. Найдите и выберите действие Проверить SMS-код.
   2. Чтобы указать SMS-код, щелкните на кнопке UNSET. В результате слева откроется всплывающее окно.
   3. Выберите Состояние виджета, а затем выберите имя текстового поля, принимающего код.

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

Ниже приведены инструкции по добавлению кнопки с действием Выход.

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

1. Тестирование в режиме Run
2. Тестирование на реальном устройстве

Для тестирования аутентификации в режиме Run Mode:

1. Нажмите на кнопку Run (правый верхний угол экрана).
2. Введите номер телефона (в международном формате), на который вы хотите получить OTP-код, и нажмите кнопку Отправить код.
3. Введите полученный по телефону OTP-код и нажмите кнопку Проверить код.
4. Нажмите на кнопку Выход.

Phone Sign In не работает в эмуляторе Android. Его можно протестировать только на реальном устройстве.

Для тестирования на реальном устройстве:

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

• Откройте консоль Google Developers Console. (Убедитесь, что ваш проект выбран в раскрывающемся списке вверху)
• Нажмите на меню Library (Библиотека) слева и найдите раздел Android Device Verification (Проверка устройств Android).
• Выберите раздел Android Device Verification и нажмите кнопку Включить.

• Теперь загрузите и протестируйте приложение, используя инструкции, приведенные здесь.

Для подтверждения успешной интеграции и создания пользователей перейдите в проект Firebase > Аутентификация > Пользователи и проверьте записи о пользователях.

Если вы выпускаете приложение в Play Store, необходимо добавить отпечатки SHA-сертификатов из консоли Play Console.

Чтобы получить ключи для выпуска приложения, перейдите в Play Store Console > Ваш проект > Настройка выпуска > Подписание приложений и скопируйте ключи SHA-1 и SHA-256.

Если вы выпускаете приложение в Play Store, необходимо добавить отпечатки SHA-сертификатов из консоли Play Console.

Чтобы получить ключи для выпуска приложения, перейдите в Play Store Console > Ваш проект > Управление выпуском -> Подписание приложений и скопируйте ключи SHA-1 и SHA-256.

Для включения функции «Регистрация по телефону» на устройствах iOS не требуется выполнять дополнительные действия.

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

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

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

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

Чтобы добавить фиктивный номер, выполните следующие действия:

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

Видео:https://www.loom.com/share/4bd4663ef068492ab51042362193c80a?sid=f5291f01-5da4-4348-aae6-341d8034e4b5

Получаем ошибку: «Данный провайдер входа в систему отключен для данного проекта Firebase. Включите его в консоли Firebase на вкладке «Метод входа» раздела Auth».

• Во-первых, убедитесь, что вы нажали кнопку «Сохранить» при включении аутентификации по телефону в Firebase.

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