Готово и вычищено всего за 4 шага.
Под капотом
Supabase — это альтернатива Firebase с открытым исходным кодом. Я уже рассказывал историю с кратким введением в Supabase, которое вы можете прочитать здесь. В сегодняшней истории, как и было обещано, мы рассмотрим часть аутентификации, предоставленную Supabase.
Начиная
Аутентификация с использованием Supabase почти не отличается от аутентификации с использованием Firebase. Как и в случае с Firebase, мы также инициализируем экземпляр Supabase, указав URL-адрес нашего проекта Supabase и ключ проекта.
Чтобы получить учетные данные вашего проекта, сначала вам нужно создать проект или базу данных на панели инструментов Supabase. Когда база данных будет готова к использованию, перейдите на страницу настроек в нижней левой боковой панели, где в разделе конфигурации вы найдете все свои учетные данные. Сохраните учетные данные, так как они понадобятся нам для инициализации экземпляра Supabase. Давайте начнем вечеринку и выполним 5 шагов, чтобы добавить аутентификацию Google.
Локальная установка Supabase
Точно так же, как Firebase и другие третьи стороны предоставляют модули npm, Supabase можно установить локально в репозиторий с помощью модуля npm.
yarn add @supabase/supabase-js
После установки мы готовы инициализировать или подключить наш интерфейс к нашему проекту Supabase.
Подключение фронтенда к Supabase
Каждый проект Supabase имеет свой уникальный URL проекта и ключ проекта. Эти ключи важны для идентификации пользователя и подключения панели инструментов Supabase или проекта к внешнему репозиторию.
import { createClient } from "@supabase/supabase-js"; export const supabaseApp = createClient(YOUR_SUPABASE_DATABSE_URL, YOUR_SUPABASE_KEY); // you can store the YOUR_SUPABASE_DATABSE_URL & YOUR_SUPABASE_KEY in env files
Наш клиент Supabase теперь подключен к панели управления проекта, чтобы подтвердить один раз, supabaseApp
и просмотреть детали, совпадающие с информацией на панели инструментов.
Добавление учетных данных Google в Supabase Dashboard
В разделе «Аутентификация» на панели инструментов Supabase немного прокрутите вниз и включите метод подписи Google. После включения он покажет идентификатор клиента и форму ввода секрета клиента.
- Перейдите в консоль разработчика Google
https://console.cloud.google.com/apis/dashboard?project=tweetcast-301807
и получите свои учетные данные OAuth для клиентской стороны в разделе учетных данных в меню слева.
- Это даст вам идентификатор клиента Google и секрет клиента Google, а взамен попросит вас указать URL-адрес и URL-адрес перенаправления.
- URL-адрес всегда будет конечной точкой, на которой размещен интерфейс или к которому осуществляется доступ. Например, для целей тестирования ваш URL-адрес будет http://localhost:3000, а для перенаправления добавьте этот суффикс
http://{YOUR_SUPABASE_PROJECT_URL}/auth/v1/callback
к URL-адресу вашего проекта.
Для подробного понимания и шагов по добавлению идентификатора и секрета клиента Google прочитайте инструкции на https://supabase.io/docs/guides/auth/auth-google.
Добавление аутентификации в интерфейсе
Теперь вступает в игру кульминационная часть, нам просто нужно добавить несколько строк кода на стороне клиента и войти в систему с помощью кнопки Google, чтобы завершить задачу.
const login = () => { const { users, error } = await supabaseApp.auth.signIn({ provider: 'google' }); };
Вы будете шокированы, прочитав код. Буквально, эта большая строка кода поможет вам добавить аутентификацию Google, это как легкая прогулка.
Мне больше нечего описывать, пользователь может управлять остальными вещами, связанными с аутентификацией пользователей, самостоятельно.
Просмотр аутентифицированных пользователей в панели управления проекта
Аутентифицированные пользователи добавляются в таблицу аутентификации. Добравшись туда, вы можете просмотреть таблицу пользователя, содержащую столбцы UID пользователя, электронной почты, телефона, провайдера и так далее. Каждый пользователь идентифицируется с помощью UID только во всем проекте Supabase.
Заключение
Всего за 4 шага вы можете добавить аутентификацию Google, широко используемый механизм аутентификации, в свой проект. В следующий раз мы расскажем о новых историях о добавлении GitHub и другой сторонней аутентификации только с использованием Supabase. До следующего раза, хорошего дня, люди!
For more such stories visit our website - 💻 iHateReading
Дополнительные материалы на plainenglish.io