Kako implementirati hCaptcha?

Prejšnja
Naslednja

Za delovanje hCaptche je potrebna implementacija na strani odjemalca kot tudi na samem strežniku. Ko uporabnik reši CAPTCHA-o, se pošlje zahteva na strežnik razvijalca hCaptche. V kolikor ta potrdit, da gre za osebo, vrne geslo, ki se shrani v obrazec katerega del je hCaptcha. Ko uporabnik potrdi obrazec, se skupaj z ostalimi podatki na naš strežnik prenese tudi geslo. Nato moramo le še preveriti veredostojnost geslo, kar storimo preko API-ja.

Pred samo implementacijo, se je potrebno na spletni strani www.hcaptcha.com registrirati. Na tak način pridobimo javen in skrit ključ za API, kateri je potreben za dostop do vseh funkcionalnosti.

Primer delovanja

Na strani odjemalca

Za delovanje je potrebno na strani odjemalca dodati dva odseka kode.

Najprej je potrebno uvoziti JavaScript iz njihove strani, pri čemer ni pomembno kje na strani to storimo, le da naložimo vir preko protokola HTTPS. Uvoz izvedemo z dodajo tega izseka kode:

<script src="https://hcaptcha.com/1/api.js" async defer></script>

Nato je potrebno dodati še vsebnik znotraj katerega se naj prikaže CAPTCHA. Ponavadi se uporabi <div>, lahko pa uporabimo tudi bilo katero drugo označbo. Atribut class mora vsebovati vrednost h-captcha, dodati pa je potrebno tudi atribut data-sitekey katerega vrednost je naš ključ za API.

<div class="h-captcha" data-sitekey="JAVNI_KLJUC"></div>

Preprost primer uporabe bi izgledal približno tako:

Na strani strežnika

Po uspešni izvedbi, bo hCaptcha v HTML kodo vrinil geslo. Verodostojnost tega gesla, je potrebno na strani strežnika preveriti, zato je smiselno, da dodamo CAPTCHA-o znotraj nekega obrazca oziroma forme, saj se bo na tak način geslo avtomatsko preneslo na strežnik.

Na strani strežnika iz POST zahteve prevzamemo vrednost atributa h-captcha-response, v katero je shranjeno zgoraj omenjeno geslo. Geslo in skrivno šifro, ki smo jo prejeli ob registraciji, preverimo preko API-ja na naslovu https://hcaptcha.com/siteverify. Opcijsko lahko zraven posredujemo tudi IP naslov uporabnika.

Spodaj lahko vidimo primer implementacije v programskem jeziku PHP:

/* Definiramo skrivno sifro in povezavo do API-ja*/
$secret_key = '0x0000000000000000000000000000000000000000';
$url = 'https://hcaptcha.com/siteverify';
/*Iz zahteve prevzamemo vrednost gesla*/
$token = $_POST["h-captcha-response"];
/*Podatke shranimo v polje*/
$data = array('secret' => $secret_key, 'response' => $token);
/*Izvedemo POST zahtevo*/
$options = array(
'http' => array(
'header' => "Content-type: application/x-www-form-urlencoded\r\n",
'method' => 'POST',
'content' => http_build_query( $data )
)
);
$context = stream_context_create( $options );
$result = file_get_contents( $url, false, $context );
/*Odgovor je v JSON formatu*/
$response = json_decode( $result );
/*Preko paramtera success vidimo, če je preverjanje uspelo ali ne*/
$response->success;

Končni izdelek lahko preizkusimo spodaj:

Prejšnja
Naslednja