Како интегрисати Гоогле аутентификацију у Нект.јс апликације користећи НектАутх

Интеграција безбедног система аутентификације је кључни развојни корак који не само да обезбеђује безбедно окружење за кориснике већ и улива поверење у ваш производ. Овај систем осигурава да су њихови подаци заштићени и да само овлашћена лица могу приступити апликацији.

Изградња безбедне аутентификације од темеља може бити дуготрајан процес који захтева темељно разумевање протокола и процеса за аутентификацију, посебно када се рукује различитом аутентификацијом провајдери.

Користећи НектАутх, можете померити фокус на изградњу основних функција. Читајте даље да бисте сазнали како да интегришете пријављивање на Гоогле друштвене мреже у своју апликацију користећи НектАутх.

Како функционише НектАутх

НектАутх.јс је библиотека за аутентификацију отвореног кода која поједностављује процес додавања аутентификација и ауторизација функционалност за Нект.јс апликације као и прилагођавање токова рада аутентификације. Пружа низ функција као што су е-пошта, аутентификација без лозинке и подршка за различите провајдере аутентификације као што су Гоогле, ГитХуб и још много тога.

На високом нивоу, НектАутх делује као средњи софтвер, олакшавајући процес аутентификације између ваше апликације и провајдера. Испод хаубе, када корисник покуша да се пријави, преусмерава се на Гоогле-ову страницу за пријављивање. Након успешне аутентификације, Гоогле враћа корисни терет који укључује податке корисника, као што су његово име и адреса е-поште. Ови подаци се користе за ауторизацију приступа апликацији и њеним ресурсима.

Користећи податке о корисном учитавању, НектАутх креира сесију за сваког аутентификованог корисника и чува токен сесије у безбедном колачићу само за ХТТП. Токен сесије се користи за верификацију идентитета корисника и задржавање статуса аутентификације. Овај процес се такође примењује на друге провајдере са малим варијацијама у примени.

Региструјте своју Нект.јс апликацију на Гоогле Девелопер Цонсоле

НектАутх пружа подршку за Гоогле услугу аутентификације. Међутим, да би ваша апликација била у интеракцији са Гоогле АПИ-јима и омогућила корисницима да се аутентификују њихове Гоогле акредитиве, мораћете да региструјете своју апликацију на Гоогле конзоли за програмере и добити а ИД клијента и Цлиент Сецрет.

Да бисте то урадили, идите на Гоогле Девелопер Цонсоле. Затим се пријавите са својим Гоогле налогом да бисте приступили конзоли. Када се пријавите, направите нови пројекат.

На страници са прегледом пројекта изаберите АПИ-ји и услуге картицу са листе услуга у левом окну менија и на крају, Акредитиви опција.

Кликните на Креирајте акредитиве дугме да бисте генерисали свој ИД клијента и Цлиент Сецрет. Затим наведите тип апликације из датих опција, а затим наведите назив за своју апликацију.

Након тога, наведите УРЛ почетне руте ваше апликације и на крају наведите овлашћени УРИ за преусмеравање за вашу апликацију. За овај случај, требало би да буде http://localhost: 3000/апи/аутх/цаллбацк/гоогле како је наведено у подешавањима Гоогле провајдера НектАутх-а.

Након успешне регистрације, Гоогле ће вам дати ИД клијента и тајну тајну клијента за коришћење у вашој апликацији.

Подесите НектЈС апликацију

Да бисте започели, креирајте пројекат Нект.јс локално:

нпк цреате-нект-апп нект-аутх-апп

Након што је подешавање завршено, идите до новоствореног директоријума пројекта и покрените ову наредбу да бисте покренули развојни сервер.

нпм рун дев

Отворите прегледач и идите на http://localhost: 3000. Ово би требало да буде очекивани резултат.

Код овог пројекта можете пронаћи у њему ГитХуб спремиште.

Подешавање .енв датотеке

У основној фасцикли вашег пројекта креирајте нову датотеку и дајте јој назив .енв да чува ваш ИД клијента, тајну и основну УРЛ адресу.

НЕКСТ_ПУБЛИЦ_ГООГЛЕ_ЦЛИЕНТ_ИД= 'ИД клијента'
НЕКСТ_ПУБЛИЦ_ГООГЛЕ_ЦЛИЕНТ_СЕЦРЕТ= 'тајна'
НЕКСТ_ПУБЛИЦ_НЕКСТАУТХ_УРЛ= ' http://localhost: 3000'

НектАУТХ УРЛ се користи за навођење основног УРЛ-а ваше апликације, који се користи за преусмеравање корисника након што је аутентификација завршена.

Интегришите НектАутх у своју Нект.јс апликацију

Прво, инсталирајте НектАутх-ову библиотеку у свој пројекат.

нпм инсталл нект-аутх

Следеће, у /pages директоријум, креирајте нови фолдер и дајте му име апи. Промените директоријум у апи фасциклу и креирајте другу фасциклу под називом аутх. У фасциклу аутх додајте нову датотеку и дајте јој назив [...нектаутх].јс и додајте следеће редове кода.

увоз НектАутх из"нект-аутх/нект";
увоз ГооглеПровидер из„нект-аутх/провидерс/гоогле“;
извозУобичајено НектАутх({
 провајдери:[
 Гоогле провајдер({
 цлиентИд: процесс.енв. НЕКСТ_ПУБЛИЦ_ГООГЛЕ_ЦЛИЕНТ_ИД,
 цлиентСецрет: процесс.енв. НЕКСТ_ПУБЛИЦ_ГООГЛЕ_ЦЛИЕНТ_СЕЦРЕТ,
 }),
 ]
});

Овај код конфигурише Гоогле као добављача аутентификације. Функција НектАутх дефинише објекат конфигурације Гоогле добављача који има два својства: ИД клијента и Цлиент Сецрет који иницијализује добављача.

Затим отворите пагес/_апп.јс датотеку и унесите следеће измене у код.

увоз'../стилес/глобалс.цсс'
увоз {СессионПровидер} из„нект-аутх/реацт“
функцијаМиАпп({ Компонента, пагеПропс: { сессион, ...пагеПропс } }) {
повратак (


 </SessionProvider>
 )
}
извозУобичајено МиАпп 

НектАутх'с СессионПровидер компонента пружа функцију управљања стањем аутентификације за апликацију Нект.јс. Потребно је а седница проп који садржи податке о сесији аутентикације враћене из Гоогле-овог АПИ-ја, који укључује детаље о кориснику као што су њихов ИД, имејл и приступни токен.

Умотавањем на МиАпп компонента са компонентом СессионПровидер, објекат сесије аутентикације са детаљима о кориснику постаје доступан у целој апликацији, омогућавајући апликацији да опстане и прикаже странице на основу њиховог стања аутентификације.

Конфигуришите датотеку индек.јс

Отвори пагес/индек.јс датотеку, избришите шаблонски код и додајте код испод да бисте креирали дугме за пријаву које усмерава кориснике на страницу за пријаву.

увоз Глава из'следећи/глава'
увоз стилова из'../стилес/Хоме.модуле.цсс'
увоз { усеРоутер } из'следећи/рутер';
извозУобичајенофункцијаКућа() {
конст рутер = усеРоутер();

повратак (