Интегришите Гоогле реЦАПТЦХА у Реацт апликацију

Како су веб и мобилне апликације постале популарније, расте и ризик од нежељене поште и других злонамерних активности. ЦАПТЦХА могу бити згодна безбедносна мера коју вреди интегрисати како би се спречиле ове врсте безбедносних претњи.

ЦАПТЦХА је минимална безбедносна функција, обично интегрисана са веб обрасцима како би се спречили аутоматизовани напади спамботова. Он осигурава да је корисник који приступа апликацији заиста човек, а не бот који извршава злонамерни код.

Шта је ЦАПТЦХА?

Акроним ЦАПТЦХА је скраћеница за потпуно аутоматизовани јавни Тјурингов тест да разликује рачунаре и људе. Односи се на компјутерски генерисан тест који проверава да ли је одређени корисник који комуницира са вашом апликацијом човек, а не бот.

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

Гоогле реЦАПТЦХА долази у две верзије:

• реЦАПТЦХА В3: Ова верзија ради у позадини и одређује укупни резултат на основу понашања корисника.
• реЦАПТЦХА В2: Ова верзија поставља поље за потврду „Ја нисам робот“ на обрасцу за потврду аутентичности.

Овај водич ће истражити Гоогле реЦАПТЦХА В2. Читајте даље да бисте научили како да га интегришете у Реацт апликацију.

Региструјте Реацт апликацију на реЦАПТЦХА Админ Цонсоле

Да бисте започели, потребно је да региструјете своју апликацију на реЦАПТЦХА конзоли за програмере. Пређите на Гоогле-ова реЦАПТЦХА Админ Цонсоле, пријавите се са својим Гоогле налогом и попуните потребне детаље обрасца.

Унесите назив ознаке, изаберите реЦАПТЦХА В2, а у падајућем оквиру изаберите захтеве за верификацију користећи опцију „Ја нисам робот“. На крају, наведите име домена ваше апликације. За локални развој, откуцајте локални домаћин као име домена.

Када региструје вашу апликацију, сајт ће вас преусмерити на нову страницу са вашим генерисаним тајним и кључевима сајта.

Креирајте Реацт клијента

Овај пројекат је двострук: креираћете Реацт клијент који приказује једноставан образац за пријаву помоћу Гоогле реЦАПТЦХА и Екпресс бацкенд који шаље ПОСТ захтеве реЦАПТЦХА АПИ-ју ради верификације токена генерисаног након што корисник заврши реЦАПТЦХА изазов.

Локално креирајте фасциклу пројекта да бисте сместили своје пројектне датотеке. Следећи, креирајте Реацт апликацију и промените тренутни директоријум у директоријум клијента. У основном директоријуму ваше клијентске фасцикле, креирајте .енв датотеку за складиштење тајног кључа АПИ-ја и кључа локације.

РЕАЦТ_АПП_реЦАПТЦХА_СИТЕ_КЕИ = 'кључ сајта'
РЕАЦТ_АПП_реЦАПТЦХА_СЕЦРЕТ_КЕИ = 'тајни кључ'

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

Инсталирајте потребне пакете

Инсталирајте Акиос, користићете ову библиотеку да правите ХТТП захтеве из прегледача и Реацт-Гоогле-реЦАПТЦХА. Овај пакет обезбеђује имплементацију специфичну за Реацт за реЦАПТЦХА АПИ.

нпм инсталл реацт-рецаптцха-гоогле акиос --саве

Интегришите Гоогле реЦАПТЦХА у Реацт апликацију

Отвори срц/Апп.јс датотека, избришите шаблон Реацт кода и додајте код испод:

Ова компонента ће приказати једноставан образац за пријаву који укључује Гоогле реЦАПТЦХА виџет.

Прво увезите Реацт, Акиос и реацт-гоогле-рецаптцха пакете:

увоз Реагујте, { усеСтате, усеРеф } из'реаговати';
увоз Акиос из'акиос';
увоз РеЦАПТЦХА из'реацт-гоогле-рецаптцха';

Затим дефинишите три променљиве стања: суццессМсг, еррорМсг и валидТокен. Ваш код ће ажурирати ова стања након успешног подношења обрасца и реЦАПТЦХА валидације. Поред тога, преузмите веб локацију и тајне кључеве из ЕНВ датотеке.

функцијаАпликација() {
конст [СуццессМсг, сетСуццессМсг] = усеСтате("")
конст [ЕррорМсг, сетЕррорМсг] = усеСтате("")
конст [валид_токен, сетВалидТокен] = усеСтате([]);
конст СИТЕ_КЕИ = процесс.енв. РЕАЦТ_АПП_реЦАПТЦХА_СИТЕ_КЕИ;
конст СЕЦРЕТ_КЕИ = процесс.енв. РЕАЦТ_АПП_реЦАПТЦХА_СЕЦРЕТ_КЕИ;

Дефинишите усеРеф куку која упућује на реЦАПТЦХА компоненту, да ухвати токен генерисан након што корисник заврши реЦАПТЦХА изазове.

конст цаптцхаРеф = усеРеф(нула);

Затим креирајте функцију хандлеСубмит коју позивате када корисник поднесе образац за пријаву. Ова функција добија токен из реЦАПТЦХА компоненте и затим позива ресетовати метод за ресетовање реЦАПТЦХА да би се омогућиле накнадне провере.

Поред тога, проверава да ли токен постоји и позива функцију верифиТокен да би проверио токен. Једном када верификује токен, ажурираће стање валидТокен са подацима АПИ одговора.

конст хандлеСубмит = асинц (е) => {
 е.превентДефаулт();
дозволити токен = цаптцхаРеф.цуррент.гетВалуе();
 цаптцхаРеф.цуррент.ресет();
ако (жетон) {
дозволити валид_токен = чекати верифиТокен (токен);
 сетВалидТокен (валид_токен);
ако (важећи_токен[0].успех истина) {
конзола.Пријава("проверено");
 сетСуццессМсг(„Ура!! послали сте образац")
 } друго {
конзола.Пријава("Не проверено");
 сетЕррорМсг(" Извињавам се!! Потврдите да нисте бот")
 }
 }
 }

Коначно, дефинишите функцију верифиТокен која ће послати ПОСТ захтев крајњој тачки Екпресс сервера користећи Акиос, прослеђујући реЦАПТЦХА токен и тајни кључ у телу захтева. Ако је захтев успешан, он гура податке одговора у низ АПИРеспонсе и као резултат враћа низ.

конст верифиТокен = асинц (жетон) => {
дозволити АПИРеспонсе = [];
покушати {
дозволити одговор = чекати Акиос.пост(` http://localhost: 8000/верифи-токен`, {
 реЦАПТЦХА_ТОКЕН: токен,
 Тајни_кључ: СЕЦРЕТ_КЕИ,
 });
 АПИРеспонсе.пусх (одговор['подаци']);
повратак АПИРеспонсе;
 } улов (грешка) {
конзола.лог (грешка);
 }
 };

На крају, вратите образац са реЦАПТЦХА компонентом. Ова компонента узима референтну куку и кључ сајта као реквизите за конфигурисање и приказ реЦАПТЦХА виџета.

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

повратак (
"Апликација">
„Заглавље апликације“> 
"образац за пријаву">


 {валид_токен.ленгтх > 0 && валид_токен[0].успех истина
? <х3Назив класе="тектСуццесс">{СуццессМсг}х3>
: <х3Назив класе="тектЕррор">{ЕррорМсг} х3>}

Корисничко име</p>
"текст" плацехолдер="Корисничко име..." />

Лозинка</p>
"Лозинка" чувар места = "Лозинка..." />
 цлассНаме="рецаптцха"
 ситекеи={СИТЕ_КЕИ}
 реф={цаптцхаРеф}
 />
"прихвати">Пошаљи</button>
 </form>
 </div>
 </header>
 </div>
 );
}


извозУобичајено Апликација

Коначно, покрените развојни сервер и идите на свој претраживач http://localhost: 3000 да бисте видели резултате.

Креирајте Екпресс Бацкенд

Да бисте започели, у основном директоријуму целе фасцикле пројекта, креирајте експрес веб сервер, и инсталирајте ове пакете:

нпм инсталл екпресс цорс акиос боди-парсер

Подесите Екпресс сервер

Затим отворите датотеку индек.јс у фасцикли пројекта сервера и додајте овај код:

конст екпресс = захтевају('изразити')
конст акиос = захтевају('акиос');
конст цорс = захтевају('цорс');
конст апп = екпресс();
конст бодиПарсер = захтевају('боди-парсер');
конст јсонПарсер = бодиПарсер.јсон();
конст ПОРТ = процес.енв. ПОРТ || 8000;
апп.усе (јсонПарсер);
апп.усе (цорс());
апп.пост("/верифи-токен", асинц (рек, рес) => {
конст { реЦАПТЦХА_ТОКЕН, Сецрет_Кеи} = рек.боди;
покушати {
дозволити одговор = чекати акиос.пост(` https://www.google.com/recaptcha/api/siteverify? тајна=${Сецрет_Кеи}&респонсе=${реЦАПТЦХА_ТОКЕН}`);
конзола.лог (респонсе.дата);
повратак рес.статус(200).јсон({
 успех:истина,
 порука: „Токен је успешно верификован“,
 верифицатион_инфо: респонсе.дата
 });
 } улов(грешка) {
конзола.лог (грешка);
повратак рес.статус(500).јсон({
 успех:лажно,
 порука: „Грешка при верификацији токена“
 })
 }
});
апп.листен (ПОРТ, () => конзола.Пријава(`Апликација је покренута на порту ${ПОРТ}`));

Овај код ради следеће:

• Сервер дефинише Пост руту која прави асинхрони ХТТП ПОСТ захтев Гоогле-овом реЦАПТЦХА АПИ-ју за верификујте реЦАПТЦХА токен користећи Акиос, прослеђујући тајни кључ за аутентификацију у УРЛ-у захтева.
• Ако је реЦАПТЦХА токен успешно верификован, сервер одговара ЈСОН објектом који садржи својство „суццесс“ постављено на труе, својство „мессаге“ који означава да је токен успешно верификован и својство „верифицатион_инфо“ које садржи информације о одговору на верификацију од Гоогле-а АПИ.
• Ако дође до грешке током процеса верификације, сервер одговара ЈСОН објектом који садржи а својство "суццесс" постављено на нетачно и својство "мессаге" које указује да је дошло до грешке при верификацији токен.

На крају, покрените сервер чворова и тестирајте функционалност реЦАПТЦХА функције.

индекс чвора.јс

Могу ли реЦАПТЦХА гарантовати сигурност против спамботова?

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

реЦАПТЦХА није сигурна, јер одлучни лоши актери још увек могу да нађу решење. Али он остаје суштински алат који може значајно смањити ризик од нежељених робота.