() translation by (you can also view the original English article)

Paano Pagsamahin ang “No CAPTCHA reCAPTCHA” sa Iyong Website

Ang CAPTCHA inputs ay marahil ang pinaka karaniwan sa lahat ng nakakayamot na karanasan sa web. Sakit ito sa ulo sa karamihan ng gumagamit ng web, maliban pa sa mga may sira ang paningin o kaya sa taong umaasa sa nagbibigay tulong na mga teknolohiya katulad ng screen-readers para makapasok sa web. Subalit ,nakakalungkot man, ang CAPTCHA ay lubos na mahalagang panlaban sa spam.

A necessary evil thanks spammers — Masama ngunit mahalaga (salamat sa mga spammers)

Kakaiba man, kahit na ang tradisyunal na “bali-balikung text” CAPTCHA ay nakakaasiwa sa tao na basahin, ang modernong artificial intelligence na teknolohiya ay walang kahirap hirap sa paglutas nito. Kahit ang Google ay gumagamit ng katulad na teknolohiya sa pagbabasa ng numbero ng bahay at palatandaan sa kalye para siguraduhin ang lokasyon sa Google Street View!

Ang Google robots ay kayang basahin ito ng tama

Kung kaya makatwiran lamang na ang mismong bumuo ng Google ay nakaisip ng pinakamagaling na solusyon sa ngayon, hanggang sa katapusan ng 2014. Kapag walang CAPTCHA reCAPTCHA wala na gaanong kailangang gawin maliban sa pagtapik ng daliri, pagpindot ng mouse, o kaya pag pokus sa input gamit ang keyboard at paggamit ng spacebar.

Madalas madalil lamang ito, subalit kapag ang Google’s risk analysis ay hindi sure na tao ang gumagamit, may pangalawang prompt na lalabas.

Makikita mo paano ito gumagana sa lahat ng web, katulad ng submission page ng @materialup halimbawa.

Kumuha ng No CAPTCHA reCAPTCHA

Huwag na tayong magpaliguy-ligoy pa at pumunta na tayo sa pag set-up ng No CAPTCHA.

Hakbang 1

Una, kailangan natin ng API key, at pumunta sa https://www.google.com/recaptcha/admin. Para makapasok sa pahinang ito, kailangan mong naka log-in sa Google account. Kailangan mong i-register ang iyong website, kung kaya bigyan mo ito ng naaayon na pangalan, pagkatapos ilista ang domains (halimbawa tutsplus.com) kung saan ang partikula na reCAPTCHA gagamitin. Subdomains (katulad ng webdesign.tutsplus.com at code.tutsplus.com) ay awtomatikong maisasaalang-alang.

Hakbang 2

Kapag natapos mo na iyon, bibigyan ka ng site key at ang kapareha nitong secret key:

Hakbang 3

Sa ilalim ng keys, may makikita kang ilang snippets para mailagay moa ng reCAPTCHA sa iyong website. Una nariyan ang JavaScript:

1	<script src='https://www.google.com/recaptcha/api.js'></script>

Maaari mo ring ipakita ali nsa 40 na supported languages ang ginagamit mo sa pamamagitan ng pag-dagdag ng parameter sa string. Dito naglagay kami ng es na magbibigay sa atin ng Spanish reCAPTCHA:

1	<script src='https://www.google.com/recaptcha/api.js?hl=es'></script>

Ilagay ang script tag sa ibaba ng iyong pahina(o kaya sa ilalim ng form kung saan lalabas ng reCAPTCHA, depende kung paano mo iprayoridad ang iyong asset loading).

Hakbang 4

Sumuod ay ang placeholder na kakailanganin para idagdag sa iyong form markup kung saan mo gusto lumabas ang reCAPTCHA:

1	<div class="g-recaptcha" data-sitekey="6LcePAATAAAAAGPRWgx90814DTjgt5sXnNbV5WaW"></div>

Tandaan: ang data-sitekey na katangian nito ang magpapatunay ng halaga ng iyong key, at hindi ang halimbawang replika na ito.

May iba pang katangian na maaari mong idagdag para i-customize ang itsura at katangian ng iyong reCAPTCHA sa puntong ito. Halimbawa, ang paglagay ng data-theme=”dark” dito sa div ay magbibigay ng madilim na bersyon, na mas babagay sa iyong UI:

Para sa mas malawak na detalye kung paano i-configure ang iyong reCAPTCHA tingnan ang developers.google.com.

Pagsama-samahin Ito Lahat

Ngayon mayroon na tayong mga inisyal na kakailanganin oras na para pagsamaha-samahin ito sa working environment.

Hakbang 1

Ilagay natin ang script tag at placeholder sa simpleng porma:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>How to Integrate Google “No CAPTCHA reCAPTCHA” on Your Website</title>
  </head>

  <body>

    <form action="" method="post">

      <label for="name">Name:</label>
      <input name="name" required><br />

      <label for="email">Email:</label>
      <input name="email" type="email" required><br />

      <div class="g-recaptcha" data-sitekey="6LcePAATAAAAAGPRWgx90814DTjgt5sXnNbV5WaW"></div>

      <input type="submit" value="Submit" />

    </form>

    <!--js-->
    <script src='https://www.google.com/recaptcha/api.js'></script>

  </body>
</html>

Dito gumamit kami ng barebones na istraktura ng pahina na may porma na naglalaman ng input ng pangalan, ng input ng email at submit button. Hindi kailangan ng pagi-istilo o kung ano man dito dahil hindi naman kailangan sa pagtuturong ito.

our captcha form — Kailangan may ganitong itsura ka

Para ipakita na ang naipasa ang pagsusuri sa reCAPTCHA kailangan nating gawin ang ilan pang server-side na pagsusuri. Gagawin natin ito sa PHP, kung kaya i-save ang file na ito sa bagong proyekto bilang index.php.

Hakbang 2

Mapapansinn mo na ang pamamaraan sa pormang ito ay post, kung kaya kapag ipinadala mo ang form data babalik ito sa pahina sa loob ng array of variables. Maaari nating palabasin ang mga variables sa pamamagitan ng pag loop over dito, kung kaya idagdag ang mga ito sa iyong pahina kahit saan:

    <?php 
      foreach ($_POST as $key => $value) {
        echo '<p><strong>' . $key.':</strong> '.$value.'</p>';
      }
    ?>

Mapupunta ang bawat key/value sa ating $_POST array at lalabas itong may kaunting formatting. Ngayon kapag ipinadala mo ang form dapat may makita kang katulad nito:

Makikita mo ang ibinalik na value sa pangalan at email, at value para sa g-recaptcha-response. Kapag hindi mo nakumpleto ang pagsusuri sa CAPTCHA ang value nito ay lalabas na blanko, subalit kung nilagyan mo ng check ang “I’m not a robot” na box makikita moa ng malaking string ng characters.

Ang value na ito ang dapat ipadala sa Google para masuri ito, gawin natin ang susunod.

Hakbang 3

Ang nakakatuwa, ang grupo na gumawa ng Google ang gumawa ng maraming trabaho para sa atin dito, kung kaya ituloy ang proyekto ng reCAPTCHA sa Github at kumuha ng kopya sa recaptchalib.php library. Ilagay ito sa root ng iyong proyekto at tukuyin ito sa taas ng idex.php na file:

<?php

// grab recaptcha library
require_once "recaptchalib.php";

?>

Hakbang 4

Ang library na ito ay naglalaman ng koleksyon ng functions na ngpapadala ng g-recaptcha-response (kasama ang secret key) sa Google sa pamamagitan ng HTTP request. Iniipon nito ang sagot, sinusuri kung gumana ang CAPTCHA. Para gamitin ito kailangan muna i-set up ang ilang variables, bago isara ang PHP tag:

// your secret key
$secret = "6LcePAATAAAAABjXaTsy7gwcbnbaF5XgJKwjSNwT";

// empty response
$response = null;

// check secret key
$reCaptcha = new ReCaptcha($secret);

ReCaptcha() nagsusuri kung ang secret key ay nariyan. Kung hindi, hindi gagana ang buong proseso at magsasabi na kumuha nito. Susuriin natin ang mga detalye sa pamamagitan ng mga ito:

// if submitted check response
if ($_POST["g-recaptcha-response"]) {
    $response = $reCaptcha->verifyResponse(
        $_SERVER["REMOTE_ADDR"],
        $_POST["g-recaptcha-response"]
    );
}

Hakbang 5

Ipagpalagay na nating maayos lahat ang ipinadala nating form, ang variable $response ay magsasabi ng “success” at maaari na nating ituloy gawin ang form data. Narito kung ano magiging itsura nito: alisin ang bit kung saan ginawa natin ang pag loop over sa form data, pagkatapos idagdag ang mga check na ito sa taas ng form:

    <?php
      if ($response != null && $response->success) {
        echo "Hi " . $_POST["name"] . " (" . $_POST["email"] . "), thanks for submitting the form!";
      } else {
    ?>

At bilang panghuli, magdagdag ng panghuling PHP tag pagkatapos ng form:

1	<?php } ?>

Ipapakita nito ang form, kung panigurado itong naipadala, kung gayon maglalabas ito ng maliit na thank you notice. Narito ang panghuling demo.

Konklusyon

Ito ay napakahirap at nakahanda ng PHP implementasyon ng No CAPTCH reCAPTCHA. Ito ay bukas para mas mapabuti ito, subalit sana ay maibigay namin ang pagpapaintindi ng basics. Ang pagpapasalamat para sa library ay para sa grupo ng Google developer at magbibigay din ako ng maiksing pagpapasalamat sa Matt Aussaguel sa pagtuturo nito sa akin.

Mahalagang Pagkukunan

ReCAPTCHA 1.0.0 sa Github
ReCAPTCHA documentation
Robot ka ba? Ipinakikilala “No CAPTCHA reCAPTCHA” Google Security Blog
WordPress ReCaptcha Integration reCaptcha plugin para sa login, signup, comment forms, Ninja Forms at Contact Form 7