Читатели като вас помагат в подкрепа на MUO. Когато правите покупка чрез връзки на нашия сайт, ние може да спечелим комисионна за партньор. Прочетете още.

Изграждането на персонализирана система за удостоверяване може да бъде трудна задача. Това изисква задълбочено разбиране на протоколите за удостоверяване и процесите за удостоверяване и оторизация на потребителите. Въпреки това, чрез интегриране на инструмент като Supabase, можете да се съсредоточите повече върху изграждането на основната логика на вашето приложение.

Supabase е алтернатива на Firebase с отворен код, която предоставя платформа за разработка, базирана на облак. Той предлага набор от бекенд услуги, като пълноценна база данни на Postgres, услуга за удостоверяване и функции без сървър.

Той е проектиран да бъде по-достъпен, което ви позволява бързо да настройвате проекти. Следвайте, за да научите как да интегрирате услугата за удостоверяване във вашите React.js приложения.

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

instagram viewer

За да създадете нов проект в Supabase Developer Console, изпълнете следните стъпки:

  1. Регистрирайте се за a Супабаза акаунт на програмист. Отидете до таблото за управление и създайте нов проект.
  2. Попълнете името на проекта и паролата (това не е задължително за този урок, но се препоръчва при настройка на база данни), изберете региона и накрая щракнете върху Създайте нов проект.
  3. Под Настройки на API копирайте проекта URL адрес и на публичен анон ключ.

Настройте доставчик на удостоверяване

Доставчикът на удостоверяване предоставя сигурен начин за удостоверяване на потребителите чрез различни социални входове. Supabase по подразбиране предоставя имейл доставчик. Освен това можете да добавите други доставчици като Google, GitHub или Discord в зависимост от вашите предпочитания.

Този урок ще покаже как да настроите доставчик на Google. За да направите това, изпълнете следните стъпки:

  1. В левия прозорец изберете Удостоверяване раздел.
  2. В страницата с настройки за удостоверяване изберете Доставчици опция и накрая изберете Доставчик на Google от списъка с доставчици. Забележете, че имейл доставчикът вече е конфигуриран по подразбиране. Не е необходимо да правите никакви конфигурации.
  3. Активирайте Доставчик бутон за превключване.
  4. Доставчикът на Google изисква два входа: 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 Developer Console и влезте с вашия акаунт в Google за достъп до конзолата.
  2. След като влезете, отворете API и услуги раздел, изберете Създайте идентификационни данни опция и след това изберете OAuth клиентски идентификатор.
  3. Посочете вида на приложението от предоставените опции и след това попълнете името на вашето приложение.
  4. След това посочете URL адреса на началния маршрут на вашето приложение (http//:localhost: 3000) и накрая посочете URL адреса за пренасочване на обратно извикване. Поставете URL адреса за пренасочване, който сте копирали от страницата с настройки на Supabase Google Provider. Кликнете върху Запазване за да завършите процеса.
  5. Копирайте ClientID и ClientSecret и се върнете към таблото за управление на Supabase Project и ги поставете в полетата за въвеждане ClientID и ClientSecret на страницата с настройки на Google Provider. Кликнете Запазване за да активирате Доставчика.

Конфигурирайте услугата за удостоверяване на Supabase в приложение React.js

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

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

1. Инсталирайте необходимите пакети

Изпълнете тази команда на вашия терминал, за да инсталирате необходимите зависимости:

npm инсталирайте @supabase/auth-ui-react @supabase/supabase-js реагират реагират-рутер-дом

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

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

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

Този компонент ще изобрази функция за регистрация и влизане, като използва React.js потребителския интерфейс за удостоверяване, предоставен от Supabase. Импортирахте потребителския интерфейс за удостоверяване като зависимост (@supabase/auth-UI-react), което улеснява прилагането на функцията за удостоверяване.

Във файла login.js добавете кода по-долу:

импортиране Реагирайте от"реагира";
импортиране {createClient} от„@supabase/supabase-js“;
импортиране {Auth, ThemeSupa} от„@supabase/auth-ui-react“;
импортиране {useNavigate} от'react-router-dom';
конст supabase = createClient(
процес.env.REACT_APP_SUPABASE_URL,
процес.env.REACT_APP_SUPABASE_API_KEY
); 
функцияВлизам() {
конст навигация = useNavigate(); 
 supabase.auth.onAuthStateChange(асинхронен (събитие) =>{
ако (събитие !== "ОТПИСАН") {
 навигация('/успех');
 }друго{
 навигация('/');
 }
 })
връщане (
<дивclassName="приложение">
<заглавкаclassName=„Заглавка на приложението“>
 supabaseClient={supabase}
 външен вид={{тема: ThemeSupa}}
 тема="тъмен"
 доставчици={["google"]}
 /> 
заглавка>
див>
 );
}
износпо подразбиране Влизам;

Нека да го разбием:

  • Инициализирайте клиент на Supabase с променливите на средата -- вашия URL адрес на проекта и вашия публичен anon ключ в ENV файла.
  • Настройте слушател на събития за проследяване на промените в състоянието на удостоверяване с помощта на метода supabase.auth.onAuthStateChange(), т.е. състоянието на удостоверяване не е „SIGNED_OUT“, тогава потребителят е навигиран до страницата „/success“, в противен случай потребителят е навигиран до „/“ (начална страница/вход) страница.
  • Ще използвате метода на навигация от куката useNavigate, за да управлявате този процес.
  • И накрая, върнете div, съдържащ React Auth UI компонента от библиотеката на Supabase с външен вид на themeSupa (предоставен от Supabase), тъмна тема и доставчик на Google, зададен като свойства.

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

Този компонент ще визуализира успешна страница с подробности за потребителя, след като потребителят бъде удостоверен успешно и бутон за излизане.

Във файла Success.js добавете кода по-долу:

импортиране Реагирайте от"реагира";
импортиране {createClient} от„@supabase/supabase-js“;
импортиране {useNavigate} от'react-router-dom';
импортиране {useEffect, useState} от"реагира";
конст supabase = createClient(
процес.env.REACT_APP_SUPABASE_URL,
процес.env.REACT_APP_SUPABASE_API_KEY
); 
функцияУспех() {
конст [потребител, setUser] = useState([]); 
конст навигация = useNavigate(); 
 useEffect (() => {
асинхроненфункцияgetUserData(){
изчакайте supabase.auth.getUser().then((стойност) => {
ако(стойност.данни?.потребител) {
setUser(стойност.данни.потребител)} 
 }) }
 getUserData();
 },[]);
конст аватар = потребител?.user_metadata?.avatar_url; 
конст потребителско име = потребител?.потребителски_метаданни?.пълно_име; 
асинхроненфункцияsignOutUser(){
изчакайтенадбаза.auth.отписване();
 навигация('/');
 };
връщане (
<дивclassName="приложение">
<заглавкаclassName=„Заглавка на приложението“>
<h1>Успешен входh1>
<h2>{потребителско име}h2>
<imgsrc={avatar} />
<бутонonClick={()=> signOutUser()}>Изходбутон>
заглавка>
див>
 );
}
износпо подразбиране Успех;

Нека да го разбием:

  • Инициализирайте клиент на Supabase с променливите на средата -- вашия URL адрес на проекта и вашия публичен anon ключ в ENV файла.
  • Използвайте React.js куки, useState и useEffect, за да получите данни от отговора на API.
  • Куката useEffect имплементира асинхронна функция, която извиква метода supabase.auth.getUser. Този метод извлича потребителската информация, свързана със сесията на текущия потребител.
  • След това асинхронната функция проверява дали потребителските данни съществуват и ги задава на променливата на състоянието, ако съществуват.
  • Функцията signOutUser използва метода supabase.auth.signOut, за да излезе от потребителя и да го навигира обратно към страницата за вход, когато щракне върху бутона за излизане.
  • Накрая върнете div с част от потребителската информация.

5. Конфигурирайте маршрутите на страницата

И накрая, конфигурирайте маршрутите както за страниците за влизане, така и за страниците за успех.

Във файла app.js добавете кода по-долу:

импортиране Реагирайте от"реагира";
импортиране { BrowserRouter като Рутер, маршрути, маршрут } от'react-router-dom';
импортиране Влизам от'./pages/Login';
импортиране Успех от'./pages/Success';
функцияПриложение() {
връщане (
<Рутер>
//Определяне на маршрутите
"/" елемент={} />
"/успех" елемент={} />
Маршрути>
Рутер>
 );
}
износпо подразбиране Приложение;

Нека да го разбием:

  • Дефинирайте двата маршрута: маршрут за страницата за вход и маршрут за страницата за успех, като използвате компонентите на Router от библиотеката react-router.
  • Задайте пътищата на маршрута съответно на '/' и '/success' и присвоете компонентите Login и Success към съответните им маршрути.
  • И накрая, изпълнете тази команда на вашия терминал, за да завъртите сървъра за разработка: 
 npm започнете
  • Навигирайте до http//:localhost: 3000 в браузъра си, за да видите резултата. Компонентът за влизане изобразява React-auth-UI на Supabase както с имейла, така и с доставчиците на Google.

Можете или да се удостоверите с помощта на Google, или да се регистрирате с вашия имейл и парола и да използвате тези идентификационни данни за влизане. Предимството на използването на доставчиците за социално влизане на Supabase или доставчика на имейл е, че не е нужно да се притеснявате за логиката на регистрация.

След като потребителят се регистрира със социален доставчик или с имейл и парола, данните ще бъдат съхранени в потребителската база данни за Auth на Supabase за вашия проект. Когато влязат с идентификационните си данни, Supabase ще потвърди данните спрямо идентификационните данни, използвани за регистрация.

Supabase прави удостоверяването в React лесно

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

Със своето интуитивно табло за управление и стабилен API, Supabase е мощен инструмент за изграждане на мащабируеми и сигурни приложения.