Implementacija v JavaScript-u

Eden izmed možnih načinov implementacije je v jeziku JavaScript. Pred samo implementacijo, se je potrebno registrirati na spletni strani ponudnika orodja, prijaviti svojo spletno stran in na tak način pridobiti ključ ter identifikacijsko številko. 

Smiselno je izpostaviti tudi to, da je potrebno za implementacijo uporabiti md5 kodirno funkcijo in pridobiti IP naslov uporabnika. Ker za to ni podpore v JavaScriptu, smo za md5 uporabili knjižnico JavaScript-MD5, za pridobitev IP naslova pa storitev ipify.org. Obe orodji sta na voljo po MIT licenci.

Na tej strani bo predstavljena le implementacija na strani odjemalca, medtem ko je validiranje na strani strežnika predstavljeno v poglavju Validiranje na strežniku.

Primer delovanja

Kako implementirati

Pri implementaciji je potrebno dodati dve stvari. Najprej je potrebno znotraj forme dodati značko input z atributom type nastavljenim na hidden. Prav tako ji moramo nastaviti nek unikaten ID. Ob uspešno prestanem izzivu bo orodje v to polje zapisalo šifro, ki jo je potrebno še dodatno validirati na strani strežnika.

<input type="hidden" id="skritaSifra" name="skritaSifra"/>

Nato je potrebno znotraj značk <form></form> dodati še gumb, ki je namenjen potrditvi obrazca in bo hkrati sprožil preverjanje, ter naslednji izseki JavaScript kode:

<script language="JavaScript">
  //Obvezni
  var s_s_c_user_id = 'ID_UPORABNIKA';
  var s_s_c_session_id = 'ID_SEJE';
  var s_s_c_captcha_field_id = 'ID_POLJA';
  var s_s_c_submit_button_id = 'ID_GUMBA';
  var s_s_c_web_server_sign = 'SERVER_SIGN';
  var s_s_c_web_server_sign2 = 'SERVER_SIGN2';

  //Opcijski
  document.s_s_c_debugmode = 1;
  document.s_s_c_without_submit_search = 1;
  document.s_s_c_popupmode = 1;

</script>
<script language=JavaScript src="http://backs.keycaptcha.com/swfs/cap.js"></script>

Opise vrednosti posameznih spremenljivk lahko najdete v spodnji tabeli:

Spremenljivka Opis Obvezno
s_s_c_user_id
Identifikacijska številka, ki jo prejmemo ob registraciji.
Da
s_s_c_session_id
Unikatni niz znakov, ki ne sme biti daljši od 16 znakov.
Da
s_s_c_captcha_field_id
Unikatno ime oz. ID vsebnika.
Da
s_s_c_submit_button_id
ID potrditvenega gumba.
Da
s_s_c_web_server_sign
Kombinacija ID seje, IP naslova uporabnika in našega ključa, nad čemer izvedemo še md5 funkcijo. Primer: md5(ID_SEJE+IP_UPORABNIKA+KLJUČ).
Da
s_s_c_web_server_sign2
Kombinacija ID seje in našega ključa, nad čemer izvedemo še md5 funkcijo. Primer: md5(ID_SEJE+KLJUČ).
Da
s_s_c_debugmode
V kolikor je vrednost te spremenljivke nastavljena na 1, se bo potrditev forme izvedla kljub nepravilno opravljenem izzivu.
Ne
s_s_c_without_submit_search
V kolikor je vrednost te spremenljivke ni nastavljena na 1, bo orodje vezalo preverjanje na vse potrditvene gumbe in ne le na tistega, ki je definiran s s_s_c_submit_button_id.
Ne
s_s_c_popupmode
V kolikor je vrednost te spremenljivke nastavljena na 1, se bo izziv prikazal v dvižnem (angl. pop-up) okviru.
Ne

Celoten primer kode

V našem primeru smo najprej v glavi dokumenta uvozili knjižnico za uporabo md5 in pridobili IP naslov uporabnika, nato pa smo dodali gradnike, ki smo jih spoznali zgoraj. Za ustvarjanje unikatnega ID-ja seje, smo uporabili trenutni čas v milisekundah, kar je za primer predstavitve zadostno, v realnem scenariju, pa bi bilo potrebno implementirati nekaj bolj kompleksnega.

<!DOCTYPE html>
<html>
  <head>
    <script src="js/md5.min.js"></script>
    <script type="application/javascript">
    	//IP naslov uporabnika
      var ipNaslov;
      function getIP(json) {
        ipNaslov = json.ip;
      }
    </script>
    <script type="application/javascript" src="https://api.ipify.org?format=jsonp&callback=getIP"></script>
  </head>
  <body>
    <form action="KeyCaptchaJS2.php">
      <script language="JavaScript">
        if (ipNaslov) {
          var s_s_c_user_id = '1234567'
          var s_s_c_session_id = (new Date().getTime()).toString(16);
          var s_s_c_captcha_field_id = 'skritaSifra'
          var s_s_c_submit_button_id = 'gumbPotrdi'
          var s_s_c_web_server_sign = md5(s_s_c_session_id + ipNaslov + "224966e8df5345da5b1a45f420db46bd");
          var s_s_c_web_server_sign2 = md5(s_s_c_session_id + "224966e8df5345da5b1a45f420db46bd");

          document.s_s_c_debugmode = 0;
          document.s_s_c_without_submit_search = 1;
          document.s_s_c_popupmode = 1;
        }
      </script>
      <script language=JavaScript src="http://backs.keycaptcha.com/swfs/cap.js"></script>
      <input type="hidden" id="skritaSifra" name="skritaSifra"/> 
      Vpiši svoje ime:<br>
      <input type="text" placeholder="Ime" id="ime"/><br>
      <input type="submit" value="Potrdi" id="gumbPotrdi"/><br>
    </form>
  </body>
</html>