Вход через Google

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

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

Перед началом работы с этим разделом убедитесь, что вы выполнили следующие шаги:

1. Все шаги в разделе Настройка Supabase
2. Начальную настройку для аутентификации.

Добавление аутентификации через Google

Давайте разберем, как добавить аутентификацию через Google в Supabase, на примере, который выглядит следующим образом:

Шаги по добавлению аутентификации через Google в Supabase следующие:

1. Создание и настройка проекта Google Cloud

Чтобы начать добавление аутентификации через Google, у вас должен быть активный аккаунт Google Cloud Platform. Вам потребуется создать новый проект или использовать существующий в этом аккаунте.

Вот как это сделать:

1. Если вы еще не создали, создайте новый проект в Google Cloud Console.

2. Если вы еще не настроили, настройте экран согласия OAuth. Это позволит Google отображать экран согласия для пользователя, включая краткое описание вашего проекта, его политик и запрашиваемые области доступа.

3. Теперь вам нужно создать учетные данные, чтобы ваше приложение могло обращаться к данным Google. Для этого:
   1. Перейдите на страницу учетных данных, нажмите + CREATE CREDENTIALS и выберите OAuth client ID.
   2. Установите Application type в значение Web Application.
   3. Ниже, в разделе Authorized redirect URIs, нажмите + ADD URI. Чтобы получить этот URI, откройте Supabase project > Authentication > Providers. Откройте раздел Google, скопируйте Callback URL и вставьте его здесь.
   4. Нажмите CREATE.
   5. Скопируйте Client ID и Client secret; они понадобятся на следующем шаге.

4. Для Android вам нужно создать новые учетные данные с типом приложения Android. При создании укажите имя пакета и ключ SHA-1. Примечание: после публикации приложения вы должны заменить ключ SHA-1 на ключ из Play Console.

5. Аналогично создайте учетные данные для платформы iOS. Примечание: после публикации приложения вы должны указать App Store и Team ID.

2. Настройка аутентификации через Google в Supabase

На этом шаге вы включите вход через Google и укажете идентификаторы клиента и секретный ключ в Supabase. Вот как это сделать:

1. Перейдите в панель управления Supabase > Authentication > Providers.
2. Откройте раздел Google и включите переключатель Enable Sign in with Google.
3. Вставьте Client ID и Client secret из учетных данных Web.
4. Вставьте Authorized Client IDs из учетных данных Android.
5. Включите Skip nonce checks, чтобы поддерживать платформу iOS.

6. Теперь укажите URL перенаправления в панели управления Supabase > Authentication > URL Configuration. Это URL, на который пользователь будет перенаправлен после успешной аутентификации. Вот как это сделать для веб- и мобильных платформ.

3. Включение аутентификации через Google в FlutterFlow

Чтобы включить аутентификацию через Google в Supabase в FlutterFlow:

1. В FlutterFlow перейдите в Setting and Integrations > App Settings > Authentication.
2. Откройте раздел Supabase Authentication и включите переключатель Enable Google Authentication.
3. Вставьте iOS и Web Client ID, полученные на шаге 1.

4. Добавление кнопки входа через Google

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

Вот как добавить кнопку входа через Google из нашего шаблона страницы:

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

Теперь вы можете добавить поток создания учетной записи, который в основном состоит из двух действий в следующем порядке:

1. Действие Supabase create account. Вот как его добавить:
   1. Выберите виджет (например, Button), на который хотите добавить действие.
   2. В панели свойств (правое меню) выберите Actions и нажмите Open. Это откроет Action Flow Editor в новом всплывающем окне.
   3. Нажмите + Add Action.
   4. Найдите и выберите действие Log in (в разделе Backend/Database > Supabase Authentication).
   5. Установите Auth Provider в значение Google.
2. Действие Supabase insert row action

Первое действие создает учетную запись в Supabase и добавляет данные пользователя в Supabase Dashboard > Authentication > Users. Однако это действие не создает запись в таблице "users", которую вы создали здесь. Для этого добавьте еще одно действие под названием Supabase insert row с данными пользователя, такими как email.

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

При нажатии на кнопку входа через Google сработает действие 'Log In', которое вызовет всплывающее окно для входа через Google, где пользователи смогут ввести свои учетные данные.

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

1. Выберите виджет (например, Button), на который хотите добавить действие.
2. В панели свойств (правое меню) выберите Actions и нажмите Add Action.
3. Найдите и выберите действие Log in (в разделе Backend/Database > Supabase Authentication).
4. Установите Auth Provider в значение Google.

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

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

8. Подготовка к тестированию приложения

В настоящее время тестирование функции входа через Google в Supabase в режимах Run или Test невозможно из-за определенных ограничений. Однако для тестирования на веб-платформе вы можете опубликовать приложение с поддоменом с помощью нашей функции публикации для веб.

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

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

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