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

Вход через Google

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

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

Прежде чем начать этот раздел, убедитесь, что у вас есть:

  1. Пройдены все шаги в Настройке Supabase
  2. Пройдена Начальная настройка, необходимая для аутентификации.

Добавление аутентификации Google​

Давайте посмотрим, как добавить аутентификацию Google из Supabase, создав пример, похожий на этот:

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

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

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

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

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

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

  1. Теперь вам необходимо создать учетные данные, чтобы ваше приложение могло получить доступ к данным Google. Для этого:
    1. Перейдите на страницу credentials, нажмите + CREATE CREDENTIALS и выберите OAuth client ID.
    2. Установите Тип приложения на Веб-приложение.
    3. Далее, в разделе Авторизованные URI-адреса перенаправления, нажмите + ADD URI. Чтобы получить этот URI, откройте Проект Supbase > Аутентификация > Провайдеры. Откройте раздел Google, скопируйте Callback URL и вставьте его сюда.
    4. Нажмите CREATE.
    5. Скопируйте Идентификатор клиента и Секрет клиента; вам понадобится это на следующем шаге.

  1. Для Android вам необходимо создать новые учетные данные с установленным Типом приложения как Android. При создании вам нужно будет указать название пакета и ключ SHA-1. Обратите внимание, что после выхода вашего приложения в промышленную эксплуатацию вам нужно будет заменить ключ SHA-1 на ключ из Play Console.

  1. Аналогично создайте учетные данные для платформы iOS. Обратите внимание, что после выхода вашего приложения в промышленную эксплуатацию вам нужно будет указать App Store ID и Идентификатор команды.

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

Этот шаг предполагает включение входа через Google и предоставление идентификаторов клиента и секрета в Supabase. Вот как это сделать:

  1. Перейдите на панель управления проектом Supabase > Аутентификация > Провайдеры.
  2. Откройте раздел Google и включите Включить вход через Google.
  3. Вставьте Идентификатор клиента и Секрет клиента из учетной записи Web.
  4. Вставьте Авторизованные идентификаторы клиентов из учетной записи Android.
  5. Включите Пропуск проверок nonce, чтобы поддерживать платформу iOS.

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

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

Для включения аутентификации Google из Supabase в FlutterFlow:

  1. В FlutterFlow перейдите в Настройки и Интеграции > Настройки приложения > Аутентификация.
  2. Откройте раздел Аутентификация Supabase и включите переключатель Включить аутентификацию Google.
  3. Вставьте Идентификатор клиента iOS и Веб-версии, полученные на первом этапе.

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

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

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

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

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

  1. Действие создания учетной записи Supabase. Вот как его добавить:
    1. Выберите виджет (например, кнопку), на котором хотите добавить действие.
    2. Выберите Действия из панели свойств (правое меню) и нажмите Открыть. Это откроет Редактор действий в новом всплывающем окне.
    3. Нажмите на + Добавить действие.
    4. Поискайте и выберите Вход (в разделе Бэкенд/База данных > Аутентификация Supabase).
    5. Установите Поставщика аутентификации на Google.
  2. Действие вставки строки Supabase

Первое создает учет