Перейти к основному содержимому

Вход через Google

Вход через Google позволяет пользователям аутентифицироваться с помощью своих учетных записей Google.

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

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

Включите поставщика входа через Google в Firebase​

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

Добавьте экран входа с действием входа через Google​

Создайте экран входа​

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

Добавьте действие входа​

  1. На кнопке входа через Google выберите Действия в панели свойств (правое меню) и выберите Добавить действие.
  2. Найдите и выберите действие Log In (в разделе Backend/Database > Firebase Authentication).
  3. Установите Auth Provider в значение Google.
  4. Включите Create User Document и установите Collection в значение users. После успешного входа это вставит данные пользователя, такие как email, имя и фото, в коллекцию users. Примечание: если пользователь уже существует, данные не будут добавлены повторно.

Если вы еще не сделали этого, ознакомьтесь с инструкцией по созданию коллекции users.

подсказка

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

Тестирование входа через Google​

Запуск на устройстве​

Для тестирования во время разработки вы можете запустить приложение локально с помощью Local Run в FlutterFlow. Следуйте инструкциям из документации по Local Run и ознакомьтесь с настройкой физического устройства, чтобы начать тестирование.

Запуск в тестовом режиме/режиме запуска​

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

    • Для тестового режима вы можете открыть консоль браузера, попробовать войти и получить домен из консоли браузера. Он должен выглядеть как ff-debug-service-frontend-ygxkweukma-uc.a.run.app. Для пользователей Pro указанный выше URL также будет включать -pro, например ff-debug-service-frontend-pro-ygxkweukma-uc.a.run.app.

    • Для режима запуска просто используйте 'app.flutterflow.io'.

  2. Добавление в консоль Firebase:

    1. Откройте консоль Firebase и нажмите на Authentication, затем выберите вкладку Setting.

    2. Выберите Authorized domains в левом меню.

    3. Нажмите Add domain.

  3. Добавление в консоль Google Cloud:

    1. Перейдите на страницу Project Credentials.

    2. Убедитесь, что вы на правильном проекте. В нашем случае мы используем демонстрационный проект EcommerceFlow, для вас он будет другим.

    credential-page.png

    1. В разделе 'OAuth 2.0 Client IDs' выберите 'Web client (auto created by Google Service)'.

    2. В разделе 'Authorized JavaScript origins' нажмите ADD URI и добавьте оба URL.

    3. Аналогично, в разделе 'Authorized redirect URIs' нажмите ADD URI, добавьте оба URL и добавьте '/__/auth/handler' в конец.

  1. Если веб-клиент еще не создан, вы можете создать новый, нажав + CREATE CREDENTIALS, выбрав OAuth client ID, а затем выбрав тип приложения Web application.

add-app.gif

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

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

verify-google-auth-users.png

к сведению

Чтобы убедиться, что релизная версия для Android будет аутентифицироваться в Google, используйте ключи SHA из Google Play Console — ознакомьтесь с инструкцией по получению ключей SHA для режима релиза.