Создание пользовательской системы аутентификации может оказаться непростой задачей. Это требует глубокого понимания протоколов аутентификации, а также процессов аутентификации и авторизации пользователей. Однако, интегрировав такой инструмент, как Supabase, вы можете больше сосредоточиться на построении базовой логики вашего приложения.
Supabase — это альтернатива Firebase с открытым исходным кодом, которая предоставляет облачную платформу для разработки. Он предлагает ряд серверных услуг, таких как полноценная база данных Postgres, служба аутентификации и бессерверные функции.
Он разработан, чтобы быть более доступным, позволяя вам быстро настраивать проекты. Следуйте инструкциям, чтобы узнать, как интегрировать службу аутентификации в ваши приложения React.js.
Создайте новый проект в консоли разработчика Supabase
Чтобы создать новый проект в консоли разработчика Supabase, выполните следующие действия:
- Подпишитесь на Супабаза аккаунт разработчика. Перейдите на панель инструментов и создайте новый проект.
- Введите имя проекта и пароль (это необязательно для этого руководства, но рекомендуется при настройке базы данных), выберите регион и, наконец, нажмите Создать новый проект.
- В настройках API скопируйте проект URL-адрес и публичный анон ключ.
Настройка поставщика аутентификации
Поставщик аутентификации предоставляет пользователям безопасный способ аутентификации с использованием различных социальных сетей. Supabase по умолчанию предоставляет поставщика услуг электронной почты. Кроме того, вы можете добавить других провайдеров, таких как Google, GitHub или Discord, в зависимости от ваших предпочтений.
В этом руководстве показано, как настроить Google Provider. Для этого выполните следующие действия:
- На левой панели выберите Аутентификация вкладка
- На странице настроек аутентификации выберите Провайдеры вариант и, наконец, выберите Провайдер Google из списка поставщиков. Обратите внимание, что провайдер электронной почты уже настроен по умолчанию. Вам не нужно делать какие-либо настройки.
- Включить Провайдер Кнопка-переключатель.
- 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:
- Идти к Консоль разработчика Google и войдите в свою учетную запись Google, чтобы получить доступ к консоли.
- После входа в систему перейдите к API и сервисы вкладку, выберите Создать учетные данные вариант, а затем выберите Идентификатор клиента OAuth.
- Укажите тип приложения из предложенных вариантов, а затем введите имя вашего приложения.
- После этого укажите URL-адрес домашнего маршрута вашего приложения (http//: локальный: 3000) и, наконец, укажите URL-адрес перенаправления обратного вызова. Вставьте URL-адрес перенаправления, скопированный со страницы настроек Supabase Google Provider. Нажмите на Сохранять чтобы завершить процесс.
- Скопируйте 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 представляет собой мощный инструмент для создания масштабируемых и безопасных приложений.