Аутх0 поједностављује процес успостављања корисничког идентитета у вашој веб апликацији. Пружа безбедне и прилагодљиве функције аутентификације и ауторизације преко свог АПИ-ја. Користите га и нећете морати да бринете о изградњи сопственог система за аутентификацију од нуле.
Интеграција са Аутх0 олакшава укључивање поуздане аутентификације у вашу Реацт апликацију и гарантује сигуран приступ вашој апликацији.
Следећи кораци објашњавају шта је потребно за интеграцију Аутх0 у Реацт апликацију.
Шта је Аутх0?
Аутх0 је веб услуга која пружа безбедан АПИ за руковање аутентификацију и ауторизацију корисника у вашим апликацијама.
Пружа прилагодљив систем аутентификације који можете лако интегрисати у своју Реацт апликацију. Једном када повежете Аутх0 са својом апликацијом, она обрађује остатак посла за аутентификацију.
Како ради Аутх0?
Аутх0 пружа функцију универзалне пријаве која имплементира ток аутентификације. Сваки пут када корисник жели да се пријави, АПИ га преусмерава на страницу за пријављивање Аутх0, они се аутентификују, а подаци о успешном учитавању аутентичности се затим шаљу вашој апликацији.
Можете да прилагодите ток рада аутентификације за своју апликацију дефинисањем различитих метода пријављивања. Универзална пријава пружа корисничко име и лозинку као примарну аутентификацију, али можете такође додајте друге опције као што је пријављивање на друштвене мреже, преко провајдера као што је Гоогле, и више фактора Аутентикација.
Предност коришћења ове врсте аутентификације је у томе што не морате бити упознати са идентитетом протоколи попут ОАутх 2.0 или ОпенИД Цоннецт, који се обично користе за креирање безбедне аутентификације система.
Направите нови пројекат на Аутх0 Девелопер Цонсоле
Да бисте започели, прво морате да се пријавите за Аутх0 рачун. Након што се пријавите, идите на своју контролну таблу и кликните Креирајте апликацију да бисте конфигурисали поставке пројекта аутентификације.
Аутх0 пружа различите конфигурације аутентификације у зависности од типа апликације коју градите. За овај водич, попуните назив ваше апликације, изаберите Једностране веб апликације, а затим кликните на сачувати.
Затим изаберите Реаговати са листе технологија које подржава Аутх0.
Конфигуришите УРИ-је апликације
Након што креирате апликацију и конфигуришете потребна подешавања, на контролној табли апликације кликните на Подешавања картицу да бисте подесили потребна својства УРИ-ја.
Подесите следећа својства:
- Дозвољене УРЛ адресе за повратни позив. УРЛ који ће Аутх0 сервер позвати након што се корисник аутентификује.
- Дозвољене УРЛ адресе за одјављивање. УРЛ на који ће Аутх0 преусмерити корисника када се одјави.
- Дозвољено веб порекло. Дозвољена УРЛ адреса са које може доћи захтев за ауторизацију.
За локални развој можете користити http://localhost: 3000 УРЛ. Међутим, када гурнете свој код у производњу, мораћете да наведете УРЛ-ове домена.
Када завршите са попуњавањем УРЛ-ова, наставите и кликните Сачувај измене на дну странице са подешавањима.
Подесите своје жељене провајдере за пријављивање на друштвеним мрежама
У левом окну менија на контролној табли апликације Аутх0 кликните на Аутентикација, а затим изаберите Социалс. Затим кликните на Креирајте везу дугме на страници подешавања друштвених веза.
На крају, изаберите и додајте жељеног провајдера за пријаву на друштвене мреже.
Конфигуришите Аутх0 у своју Реацт апликацију
Интегришите Аутх0 услугу аутентификације у своју Реацт апликацију тако што ћете изградити компоненте за пријаву и успех.
1. Креирајте Реацт апликацију и подесите ЕНВ датотеку
Направите Реацт апликацију, а затим отворите фасциклу пројекта у уређивачу кода. Затим, у основном директоријуму фасцикле вашег пројекта, креирајте ЕНВ датотеку која ће држати променљиве окружења: име вашег домена и ИД клијента. Пријавите се на свој Аутх0 налог, на контролној табли апликације, копирајте име домена и ИД клијента и сачувајте их у својој ЕНВ датотеци на следећи начин:
РЕАЦТ_АПП_АУТХ0_ДОМАИН= име вашег домена
РЕАЦТ_АПП_АУТХ0_ЦЛИЕНТ_ИД= ИД вашег клијента2. Инсталирајте потребне пакете
Покрените ову команду на свом терминалу да бисте инсталирали потребне зависности:
нпм инсталл @аутх0/аутх0-реацт3. Умотајте компоненту апликације са добављачем Аутх0
Аутх0 провајдер користи Реацт Цонтект. Ово вам омогућава да приступите свим његовим својствима из компоненте апликације. Провајдер Аутх0 узима три параметра: домен клијента, ИД клијента и УРИ за преусмеравање.
Отворите датотеку индек.јс, избришите шаблон Реацт кода и додајте код испод:
увоз Реаговати из'реаговати';
увоз РеацтДОМ из'реацт-дом/цлиент';
увоз Апликација из'./Апликација';
увоз{Аутх0Провидер} из'@аутх0/аутх0-реацт';конст роот = РеацтДОМ.цреатеРоот(документ.гетЕлементБиИд('корен'));
роот.рендер(
домен = {процесс.енв. РЕАЦТ_АПП_АУТХ0_ДОМАИН}
цлиентИд = {процесс.енв. РЕАЦТ_АПП_АУТХ0_ЦЛИЕНТ_ИД}
редирецтУри = {прозор.лоцатион.оригин}
>
</Аутх0Провидер>, доцумент.гетЕлементБиИд('роот')
);
4. Направите компоненту странице за пријаву
Направите нову фасциклу у директоријуму /срц ваше Реацт апликације и назовите је страницама. Унутар ове фасцикле направите две датотеке: Логин.јс и Суццесс.јс.
Отворите датотеку логин.јс и додајте код испод. Компонента странице за пријаву ће приказати дугме за пријаву.
увоз Реаговати из'реаговати'
увоз { усеАутх0 } из'@аутх0/аутх0-реацт';конст Логин = () => {
конст { логинВитхРедирецт, исАутхентицатед } = усеАутх0();повратак (исАутхентицатед || (
извозУобичајено Пријавите се
Подразумевано, Аутх0 обезбеђује е-пошту и лозинку као метод провере аутентичности. Поред тога, у зависности од провајдера за пријаву на друштвене мреже које сте изабрали, Аутх0 ће приказати и опцију пријављивања провајдера.
5. Направите компоненту странице за успех
Ова компонента ће приказати две главне карактеристике: профил аутентификованог корисника и дугме за одјаву.
У датотеку Суццесс.јс додајте код у наставку:
увоз Реаговати из'реаговати'
увоз { усеАутх0 } из'@аутх0/аутх0-реацт'конст Успех = () => {
конст { усер, логоут, исАутхентицатед } = усеАутх0();повратак ( је Аутентификован && (
Профил корисника</h1>
{усер.наме}</h2>
{усер.емаил}</p>
извозУобичајено Успех
Када се пријавите и аутентификујете помоћу Аутх0, Аутх0 вас преусмерава назад на вашу апликацију и шаље податке о корисном учитавању вашој апликацији који садрже корисничке детаље. Можете да користите ове податке у својој апликацији за прављење прилагођених корисничких профила и управљање корисничким сесијама. Својство Усер из кукице УсеАутх вам омогућава да приступите одређеним корисничким подацима.
УсеАутх0 кука такође обезбеђује својство под називом исАутхентицатед, које вам омогућава да условно прикажете компоненте. Ако је корисник аутентификован, код ће приказати детаље његовог профила и приказати компоненту дугмета за одјаву.
Насупрот томе, ако нису, приказаћете компоненту дугмета за пријаву. То значи да не морате да наводите руте на основу статуса аутентификације корисника пошто ово својство аутоматски управља овим процесом. Аутх0 дефинише и логику пријављивања и одјављивања, што вам олакшава имплементацију функционалности аутентификације.
Да ли је услуга аутентификације Аутх0 вредна покушаја?
Аутх0 пружа готова решења која испуњавају захтеве за аутентификацију ваше апликације. Поред тога, услуга Аутх0 нуди подршку за веб, мобилне и изворне развојне платформе омогућавајући вам да лако интегришете систем аутентификације са технолошком стеком по вашем избору.
