Такие читатели, как вы, помогают поддерживать MUO. Когда вы совершаете покупку по ссылкам на нашем сайте, мы можем получать партнерскую комиссию. Читать далее.

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

Supabase — это альтернатива Firebase с открытым исходным кодом, которая предоставляет облачную платформу для разработки. Он предлагает ряд серверных услуг, таких как полноценная база данных Postgres, служба аутентификации и бессерверные функции.

Он разработан, чтобы быть более доступным, позволяя вам быстро настраивать проекты. Следуйте инструкциям, чтобы узнать, как интегрировать службу аутентификации в ваши приложения React.js.

Создайте новый проект в консоли разработчика Supabase

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

instagram viewer
  1. Подпишитесь на Супабаза аккаунт разработчика. Перейдите на панель инструментов и создайте новый проект.
  2. Введите имя проекта и пароль (это необязательно для этого руководства, но рекомендуется при настройке базы данных), выберите регион и, наконец, нажмите Создать новый проект.
  3. В настройках API скопируйте проект URL-адрес и публичный анон ключ.

Настройка поставщика аутентификации

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

В этом руководстве показано, как настроить Google Provider. Для этого выполните следующие действия:

  1. На левой панели выберите Аутентификация вкладка
  2. На странице настроек аутентификации выберите Провайдеры вариант и, наконец, выберите Провайдер Google из списка поставщиков. Обратите внимание, что провайдер электронной почты уже настроен по умолчанию. Вам не нужно делать какие-либо настройки.
  3. Включить Провайдер Кнопка-переключатель.
  4. Google Provider требует двух входных данных: ClientID и ClientSecret. Вы получите эти два значения после создания приложения в Google Developer Console. А пока скопируйте URL-адрес перенаправления. Вы будете использовать его для настройки приложения в Google Developer Console для получения ClientID и ClientSecret.

Настройте свой проект в Google Developer Console (GDC)

Для аутентификации в Google вам необходимо зарегистрировать свое приложение в Google Developer Console (GDC) и получить ClientID и ClientSecret.. Выполните следующие действия, чтобы настроить проект на GDC:

  1. Идти к Консоль разработчика Google и войдите в свою учетную запись Google, чтобы получить доступ к консоли.
  2. После входа в систему перейдите к API и сервисы вкладку, выберите Создать учетные данные вариант, а затем выберите Идентификатор клиента OAuth.
  3. Укажите тип приложения из предложенных вариантов, а затем введите имя вашего приложения.
  4. После этого укажите URL-адрес домашнего маршрута вашего приложения (http//: локальный: 3000) и, наконец, укажите URL-адрес перенаправления обратного вызова. Вставьте URL-адрес перенаправления, скопированный со страницы настроек Supabase Google Provider. Нажмите на Сохранять чтобы завершить процесс.
  5. Скопируйте ID клиента и ClientSecret и вернитесь на панель инструментов Supabase Project и вставьте их в поля ввода ClientID и ClientSecret на странице настроек Google Provider. Нажмите Сохранять для включения провайдера.

Настройка службы аутентификации Supabase в приложении React.js

Создайте приложение React.js, а затем откройте папку проекта в вашем любимом редакторе кода. Затем в корневом каталоге папки проекта создайте файл ENV для хранения переменных среды: URL-адрес вашего проекта и открытый ключ анона. Перейдите на страницу настроек Supabase, откройте раздел API и скопируйте URL-адрес проекта и открытый ключ анона.

REACT_APP_SUPABASE_URL= URL-адрес проекта
REACT_APP_SUPABASE_API_KEY = публичный анонимный ключ

1. Установите необходимые пакеты

Запустите эту команду на своем терминале, чтобы установить необходимые зависимости:

установка нпм @supabase/auth-ui-react @supabase/supabase-js реагировать реагировать-маршрутизатор-dom

2. Создайте страницу входа и компоненты страницы успеха

Создайте новую папку в каталоге /src вашего приложения React.js и назовите ее pages. Внутри этой папки создайте два файла: Login.js и Success.js.

3. Компонент страницы входа

Этот компонент будет отображать функцию регистрации и входа, используя пользовательский интерфейс аутентификации React.js, предоставляемый Supabase. Вы импортировали пользовательский интерфейс аутентификации как зависимость (@supabase/auth-UI-react), что упростило реализацию функции аутентификации.

В файл login.js добавьте следующий код:

Импортировать Реагировать от«реагировать»;
Импортировать {создатьклиент} от'@supabase/supabase-js';
Импортировать {Авторизация, ThemeSupa} от'@supabase/auth-ui-реагировать';
Импортировать {useNavigate} от'реакция-маршрутизатор-дом';
константа супабаза = создать клиент (
процесс.env.REACT_APP_SUPABASE_URL,
процесс.env.REACT_APP_SUPABASE_API_KEY
); 
функцияАвторизоваться() {
константа перейти = использоватьNavigate(); 
 supabase.auth.onAuthStateChange(асинхронный (событие) =>{
если (событие !== "SIGNED_OUT") {
 навигация('/успех');
 }еще{
 навигация('/');
 }
 })
возвращаться (
<дивclassName="Приложение">
<заголовокclassName="Заголовок приложения">
 supabaseClient={супабаза}
 внешний вид={{тема: ThemeSupa}}
 тема ="темный"
 провайдеры={['Google']}
 /> 
заголовок>
див>
 );
}
экспортпо умолчанию Авторизоваться;

Давайте разберем это:

  • Инициализируйте клиент Supabase с переменными среды — URL-адресом вашего проекта и открытым ключом Anon в файле ENV.
  • Настройте прослушиватель событий для отслеживания изменений в состоянии аутентификации с помощью метода supabase.auth.onAuthStateChange(), т. е. если состояние аутентификации не "SIGNED_OUT", тогда пользователь переходит на страницу "/success", в противном случае пользователь переходит на страницу "/" (домашняя страница/вход).
  • Вы будете использовать метод навигации из хука useNavigate для управления этим процессом.
  • Наконец, верните div, содержащий компонент пользовательского интерфейса React Auth из библиотеки Supabase, с набором свойств themeSupa (предоставляется Supabase), темной темой и провайдером Google в качестве свойств.

4. Компонент страницы успеха

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

В файл Success.js добавьте следующий код:

Импортировать Реагировать от«реагировать»;
Импортировать {создатьклиент} от'@supabase/supabase-js';
Импортировать {useNavigate} от'реакция-маршрутизатор-дом';
Импортировать {useEffect, useState} от«реагировать»;
константа супабаза = создать клиент (
процесс.env.REACT_APP_SUPABASE_URL,
процесс.env.REACT_APP_SUPABASE_API_KEY
); 
функцияУспех() {
константа [пользователь, setUser] = useState([]); 
константа перейти = использоватьNavigate(); 
 использоватьЭффект (() => {
асинхронныйфункцияполучитьUserData(){
Ждите supabase.auth.getUser().затем((ценить) => {
если(ценить.данные?.пользователь) {
setUser(ценить.данные.пользователь)} 
 }) }
 получитьданные пользователя();
 },[]);
константа аватар = пользователь?.user_metadata?.avatar_url; 
константа userName = user?.user_metadata?.full_Name; 
асинхронныйфункцияsignOutUser(){
Ждитесупабаза.auth.выход();
 навигация('/');
 };
возвращаться (
<дивclassName="Приложение">
<заголовокclassName="Заголовок приложения">
<h1>Авторизация успешнаh1>
<h2>{имя пользователя}h2>
<изображениеисточник={аватар} />
<кнопкапо щелчку={()=> signOutUser()}>Выйтикнопка>
заголовок>
див>
 );
}
экспортпо умолчанию Успех;

Давайте разберем это:

  • Инициализируйте клиент Supabase с переменными среды — URL-адресом вашего проекта и открытым ключом Anon в файле ENV.
  • Использовать Хуки React.js, useState и useEffect для получения данных из ответа API.
  • Хук useEffect реализует асинхронную функцию, которая вызывает метод supabase.auth.getUser. Этот метод извлекает информацию о пользователе, связанную с сеансом текущего пользователя.
  • Затем асинхронная функция проверяет, существуют ли пользовательские данные, и устанавливает их в переменную состояния, если они существуют.
  • Функция signOutUser использует метод supabase.auth.signOut для выхода пользователя и возврата его на страницу входа, когда он нажимает кнопку выхода.
  • Наконец, верните div с некоторой информацией о пользователе.

5. Настройте маршруты страниц

Наконец, настройте маршруты для страниц входа и успеха.

В файл app.js добавьте следующий код:

Импортировать Реагировать от«реагировать»;
Импортировать { Браузермаршрутизатор как Маршрутизатор, маршруты, маршрут } от'реакция-маршрутизатор-дом';
Импортировать Авторизоваться от'./страницы/Вход';
Импортировать Успех от'./страницы/Успех';
функцияПриложение() {
возвращаться (
<Маршрутизатор>
//Определяем маршруты
"/" элемент={} />
"/успех" элемент={} />
Маршруты>
Маршрутизатор>
 );
}
экспортпо умолчанию Приложение;

Давайте разберем это:

  • Определите два маршрута: маршрут для страницы входа и маршрут для страницы успеха, используя компоненты Router из библиотеки react-router.
  • Задайте для маршрутов пути «/» и «/success» соответственно и назначьте компоненты «Вход» и «Успех» соответствующим маршрутам.
  • Наконец, запустите эту команду на своем терминале, чтобы запустить сервер разработки: 
 нпм начинать
  • Перейдите к http//: локальный: 3000 в браузере, чтобы просмотреть результат. Компонент входа в систему отображает пользовательский интерфейс Supabase React-auth-UI как с электронной почтой, так и с поставщиками Google.

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

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

Supabase упрощает аутентификацию в React

Supabase предлагает полный набор функций помимо аутентификации, таких как размещение базы данных, доступ к API и потоковая передача данных в реальном времени. Он также предлагает такие функции, как построитель запросов и визуализация данных, чтобы помочь разработчикам более эффективно создавать свои приложения и управлять ими.

Благодаря интуитивно понятной панели инструментов и надежному API Supabase представляет собой мощный инструмент для создания масштабируемых и безопасных приложений.