Изградња прилагођеног система аутентификације може бити застрашујући задатак. Захтева дубоко разумевање протокола за аутентификацију и процесе аутентификације и ауторизације корисника. Међутим, интеграцијом алата као што је Супабасе, можете се више фокусирати на изградњу основне логике ваше апликације.
Супабасе је Фиребасе алтернатива отвореног кода која пружа развојну платформу засновану на облаку. Нуди низ позадинских услуга као што су потпуно развијена Постгрес база података, услуга аутентификације и функционалности без сервера.
Дизајниран је да буде приступачнији, што вам омогућава да брзо поставите пројекте. Пратите даље да бисте научили како да интегришете услугу аутентификације у ваше Реацт.јс апликације.
Креирајте нови пројекат на Супабасе Девелопер Цонсоле
Да бисте креирали нови пројекат на Супабасе Девелопер Цонсоле, следите ове кораке:
- Пријавите се за а Супабасе налог програмера. Идите на контролну таблу и креирајте нови пројекат.
- Унесите име пројекта и лозинку (ово је опционо за овај водич, али се препоручује приликом подешавања базе података), изаберите регион и на крају кликните Креирајте нови пројекат.
- У одељку АПИ подешавања копирајте пројекат УРЛ анд тхе публиц анон кључ.
Подесите добављача аутентификације
Добављач аутентификације обезбеђује безбедан начин за кориснике да се аутентификују коришћењем различитих друштвених пријава. Супабасе подразумевано обезбеђује добављача е-поште. Поред тога, можете додати друге добављаче као што су Гоогле, ГитХуб или Дисцорд у зависности од ваших преференција.
Овај водич ће показати како да подесите Гоогле провајдера. Да бисте то урадили, следите ове кораке:
- У левом окну изаберите Аутентикација таб.
- На страници са подешавањима аутентификације изаберите Провајдери опцију и на крају изаберите Гоогле провајдер са листе провајдера. Имајте на уму да је добављач е-поште већ подразумевано конфигурисан. Не морате да правите никакве конфигурације.
- Омогућите Провајдер искључи дугме.
- Гоогле провајдер захтева два уноса: ЦлиентИД и ЦлиентСецрет. Ове две вредности ћете добити након креирања апликације на Гоогле Девелопер Цонсоле. За сада копирајте УРЛ за преусмеравање. Користићете га за подешавање апликације на Гоогле Девелопер Цонсоле да бисте добили ЦлиентИД и ЦлиентСецрет.
Подесите свој пројекат на Гоогле Девелопер Цонсоле (ГДЦ)
Да бисте се аутентификовали код Гоогле-а, мораћете да региструјете своју апликацију на Гоогле Девелопер Цонсоле (ГДЦ) и добијете ЦлиентИД и ЦлиентСецрет. Пратите ове кораке да бисте подесили пројекат на ГДЦ:
- Иди на Гоогле Девелопер Цонсоле и пријавите се са својим Гоогле налогом да бисте приступили конзоли.
- Када се пријавите, идите на АПИ-ји и услуге картицу, изаберите Креирајте акредитиве опцију, а затим изаберите ИД ОАутх клијента.
- Наведите тип апликације из понуђених опција, а затим унесите назив своје апликације.
- Након тога наведите УРЛ кућне руте своје апликације (хттп//:лоцалхост: 3000), и на крају, наведите УРЛ за преусмеравање повратног позива. Налепите УРЛ за преусмеравање који сте копирали са странице подешавања Супабасе Гоогле провајдера. Кликните на сачувати да заврши процес.
- Копирај ИД клијента и ЦлиентСецрет и вратите се на контролну таблу пројекта Супабасе и налепите их у поља за унос ЦлиентИД и ЦлиентСецрет на страници подешавања Гоогле провајдера. Кликните сачувати да омогући Провајдеру.
Конфигуришите Супабасе Аутхентицатион Сервице у Реацт.јс апликацији
Направите Реацт.јс апликацију, а затим отворите фасциклу пројекта у свом омиљеном уређивачу кода. Затим, у основном директоријуму фасцикле вашег пројекта, креирајте ЕНВ датотеку која ће држати променљиве окружења: УРЛ вашег пројекта и ваш јавни анонимни кључ. Идите на страницу подешавања Супабасе, отворите одељак АПИ и копирајте УРЛ пројекта и јавни анонимни кључ.
РЕАЦТ_АПП_СУПАБАСЕ_УРЛ= УРЛ пројекта
РЕАЦТ_АПП_СУПАБАСЕ_АПИ_КЕИ = јавности анонимни кључ1. Инсталирајте потребне пакете
Покрените ову команду на свом терминалу да бисте инсталирали потребне зависности:
нпм инсталл @супабасе/auth-ui-react @супабасе/супабасе-јс реаговати реаговати-рутер-дом2. Креирајте страницу за пријаву и компоненте странице за успех
Направите нову фасциклу у директоријуму /срц ваше Реацт.јс апликације и назовите га страницама. Унутар ове фасцикле направите две датотеке: Логин.јс и Суццесс.јс.
3. Компонента странице за пријаву
Ова компонента ће приказати функцију регистрације и пријављивања, користећи Реацт.јс кориснички интерфејс за аутентификацију који обезбеђује Супабасе. Увезли сте кориснички интерфејс за аутентификацију као зависност (@супабасе/аутх-УИ-реацт), што олакшава имплементацију функционалности аутентификације.
У датотеку логин.јс додајте код у наставку:
увоз Реаговати из'реаговати';
увоз {цреатеЦлиент} из'@супабасе/супабасе-јс';
увоз {Аутх, ТхемеСупа} из'@супабасе/аутх-уи-реацт';
увоз {усеНавигате} из'реаговати-рутер-дом';
конст супабасе = цреатеЦлиент(
процес.енв.РЕАЦТ_АПП_СУПАБАСЕ_УРЛ,
процес.енв.РЕАЦТ_АПП_СУПАБАСЕ_АПИ_КЕИ
);
функцијаПријавите се() {
конст навигате = усеНавигате();
супабасе.аутх.онАутхСтатеЦханге(асинц (догађај) =>{
ако (догађај !== "ОДЈАВИТИ СЕ") {
навигација('/успех');
}друго{
навигација('/');
}
})
повратак (
<дивНазив класе="Апликација">
<заглављеНазив класе=„Заглавље апликације“>
супабасеЦлиент={супабасе}
изглед={{тема: ТхемеСупа}}
тхеме="мрачно"
провајдери={['гоогле']}
/>
заглавље>
див>
);
}
извозУобичајено Пријавите се;
Хајде да то разложимо:
- Иницијализујте Супабасе клијент са варијаблама окружења -- УРЛ вашег пројекта и ваш јавни анонимни кључ у ЕНВ датотеци.
- Подесите слушалац догађаја да прати промене у стању аутентификације помоћу методе супабасе.аутх.онАутхСтатеЦханге(), тј. стање аутентикације није "СИГНЕД_ОУТ" онда је корисник навигиран на страницу '/суццесс', у супротном, корисник ће бити навигиран до '/' (почетна/пријава) страница.
- Користићете метод навигације из куке усеНавигате да бисте управљали овим процесом.
- На крају, вратите див који садржи компоненту корисничког интерфејса Реацт Аутх из Супабасе библиотеке са изгледом тхемеСупа (обезбеђује Супабасе), тамном темом и Гоогле провајдером постављеним као својства.
4. Компонента странице успеха
Ова компонента ће приказати страницу о успеху са детаљима о кориснику након што се корисник успешно аутентификује и дугме за одјаву.
У датотеку Суццесс.јс додајте код у наставку:
увоз Реаговати из'реаговати';
увоз {цреатеЦлиент} из'@супабасе/супабасе-јс';
увоз {усеНавигате} из'реаговати-рутер-дом';
увоз {усеЕффецт, усеСтате} из'реаговати';
конст супабасе = цреатеЦлиент(
процес.енв.РЕАЦТ_АПП_СУПАБАСЕ_УРЛ,
процес.енв.РЕАЦТ_АПП_СУПАБАСЕ_АПИ_КЕИ
);
функцијаУспех() {
конст [усер, сетУсер] = усеСтате([]);
конст навигате = усеНавигате();
усеЕффецт (() => {
асинцфункцијагетУсерДата(){
чекати супабасе.аутх.гетУсер().тхен((вредност) => {
ако(вредност.дата?.корисник) {
сетУсер(вредност.дата.корисник)}
}) }
гетУсерДата();
},[]);
конст аватар = корисник?.усер_метадата?.аватар_урл;
конст усерНаме = усер?.усер_метадата?.фулл_Наме;
асинцфункцијасигнОутУсер(){
чекатисупабасе.аутх.Одјава();
навигација('/');
};
повратак (
<дивНазив класе="Апликација">
<заглављеНазив класе=„Заглавље апликације“>
<х1>Пријављивање успешнох1>
<х2>{корисничко име}х2>
<имгсрц={аватар} />
<дугмеонЦлицк={()=> сигнОутУсер()}>Одјавадугме>
заглавље>
див>
);
}
извозУобичајено успех;Хајде да то разложимо:
- Иницијализујте Супабасе клијент са варијаблама окружења -- УРЛ вашег пројекта и ваш јавни анонимни кључ у ЕНВ датотеци.
- Користите Реацт.јс куке, усеСтате и усеЕффецт, да бисте добили податке из АПИ одговора.
- УсеЕффецт кука имплементира асинхрону функцију која позива методу супабасе.аутх.гетУсер. Овај метод преузима корисничке информације повезане са сесијом тренутног корисника.
- Асинхрона функција затим проверава да ли постоје кориснички подаци и поставља их на променљиву стања ако постоје.
- Функција сигнОутУсер користи метод супабасе.аутх.сигнОут да одјави корисника и врати га на страницу за пријаву када кликне на дугме за одјаву.
- На крају, вратите див са неким корисничким информацијама.
5. Конфигуришите путање страница
Коначно, конфигуришите руте за странице за пријаву и успех.
У датотеци апп.јс додајте код у наставку:
увоз Реаговати из'реаговати';
увоз { БровсерРоутер као Рутер, руте, рута } из'реаговати-рутер-дом';
увоз Пријавите се из'./пагес/Логин';
увоз Успех из'./пагес/Суццесс';
функцијаАпликација() {
повратак (
<Рутер>
//Дефиниши руте
"/" елемент={} />
"/успех" елемент={} />
Руте>
Рутер>
);
}
извозУобичајено Апликација;
Хајде да то разложимо:
- Дефинишите две руте: руту за страницу за пријаву и руту за страницу успеха користећи компоненте рутера из библиотеке реацт-роутер.
- Поставите путање руте на '/' и '/суццесс' респективно и доделите компоненте Логин и Суццесс њиховим одговарајућим рутама.
- Коначно, покрените ову команду на свом терминалу да бисте покренули развојни сервер:
нпм почетак- Иди на хттп//:лоцалхост: 3000 на вашем претраживачу да бисте видели резултат. Компонента за пријаву приказује Супабасе-ов Реацт-аутх-УИ са добављачима е-поште и Гоогле-а.
Можете или да се аутентификујете помоћу Гоогле-а или да се пријавите помоћу е-поште и лозинке и користите ове акредитиве за пријављивање. Предност коришћења Супабасе-ових провајдера друштвених пријава или провајдера е-поште је у томе што не морате да бринете о логици регистрације.
Када се корисник региструје код провајдера друштвених мрежа или са е-поштом и лозинком, подаци ће бити ускладиштени у Супабасе-овој бази података Аутх корисника за ваш пројекат. Када се пријаве користећи своје акредитиве, Супабасе ће потврдити детаље у односу на акредитиве коришћене за регистрацију.
Супабасе олакшава аутентификацију у Реацт-у
Супабасе нуди свеобухватан скуп функција изван аутентификације, као што су хостовање базе података, приступ АПИ-ју и стримовање података у реалном времену. Такође нуди функције као што су креатор упита и визуелизација података како би помогли програмерима да ефикасније граде своје апликације и управљају њима.
Са својом интуитивном контролном таблом и робусним АПИ-јем, Супабасе је моћан алат за изградњу скалабилних и сигурних апликација.
