Πώς να ενσωματώσετε το «No CAPTCHA reCAPTCHA» στην ιστοσελίδα σας

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

Οι εισαγωγές CAPTCHA είναι ίσως οι συνηθέστερες από όλες τις απογοητευτικές εμπειρίες στο διαδίκτυο. Είναι αρκετά επώδυνες για την πλειοψηφία των χρηστών, πόσο μάλλον για τους χρήστες με προβλήματα όρασης ή οποιονδήποτε βασίζεται σε βοηθητικές τεχνολογίες όπως οι αναγνώστες οθόνης, για να έχουν πρόσβαση στο διαδίκτυο. Ωστόσο, δυστυχώς τα CAPTCHA είναι απολύτως απαραίτητα στη μάχη ενάντια στο spam.

A necessary evil thanks spammers — Ένα αναγκαίο κακό (ευχαριστούμε spammers)

Κατά ειρωνικό τρόπο, παρόλο που παραδοσιακά CAPTCHAs με «παραμορφωμένο κείμενο» είναι δύσκολο να διαβαστούν από ανθρώπους, η σύγχρονη τεχνολογία τεχνητής νοημοσύνης μπορεί να τα επιλύσει πιο εύκολα. Ακόμα και η Google χρησιμοποιεί παρόμοια τεχνολογία να διαβάσει αριθμούς σπιτιών και οδικές πινακίδες για να επιβεβαιώσει τις τοποθεσίες Google Street View!

Τα ρομπότ της Google μπορούν να τα διαβάσουν με επιτυχία

Είναι λογικό επομένως ότι οι προγραμματιστές της Google βρήκαν την καλύτερη λύση CAPTCHA μέχρι στιγμής, προς το τέλος του 2014. Το No CAPTCHA reCAPTCHA δεν απαιτεί τίποτα περισσότερο από ένα δάχτυλο, ένα κλικ του ποντικιού, ή επιλέγοντας είσοδο με το πληκτρολόγιό σας και χτυπώντας το πλήκτρο κενού (space).

Στις περισσότερες περιπτώσεις είναι τόσο απλό, αλλά αν η ανάλυση κινδύνων της Google συνεχίζει να μην είναι σίγουρη για το αν είστε άνθρωπος, θα εμφανιστεί μια δεύτερη προτροπή.

Μπορείτε να το δείτε σε χρήση στο διαδίκτυο, όπως για παράδειγμα στη σελίδα υποβολής του @materialup.

Αποκτήστε το No CAPTCHA reCAPTCHA

Ας προχωρήσουμε λοιπόν και ας σετάρουμε το No CAPTCHA.

Βήμα 1

Πρώτον, χρειαζόμαστε ένα κλειδί API, οπότε ας πάμε στο https://www.google.com/recaptcha/admin. Για να έχετε πρόσβαση σε αυτήν τη σελίδα θα πρέπει να είστε συνδεδεμένοι με λογαριασμό Google. Θα σας ζητηθεί να καταχωρήσετε την ιστοσελίδα σας, οπότε δώστε της ένα κατάλληλο όνομα και, στη συνέχεια, καταγράψτε τα ονόματα domains (για παράδειγμα tutsplus.com) όπου θα χρησιμοποιηθεί αυτό το συγκεκριμένο reCAPTCHA. Τα subdomains (όπως webdesign.tutsplus.com και code.tutsplus.com) λαμβάνονται υπόψη αυτόματα .

Βήμα 2

Μετά από αυτό θα σας δοθεί ένα κλειδί ιστοσελίδας και το αντίστοιχο μυστικό κλειδί:

Βήμα 3

Κάτω από τα κλειδιά θα δείτε μερικά αποσπάσματα για να συμπεριλάβετε το reCAPTCHA στον ιστότοπό σας. Αρχικά υπάρχει η JavaScript:

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

Μπορείτε επίσης να καθορίσετε ποια από τις 40 υποστηριζόμενες γλώσσες χρησιμοποιείτε, προσθέτοντας μια παράμετρο στη συμβολοσειρά. Εδώ προσθέτουμε την es, η οποία θα μας δώσει ένα reCAPTCHA στην ισπανική γλώσσα:

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

Τοποθετήστε αυτήν την ετικέτα script στο τέλος της σελίδας σας (ή ακριβώς κάτω από τη φόρμα όπου θα εμφανίζονται τα reCAPTCHA, ανάλογα με το ποιά προτεραιότητα θα δώσετε στη φόρτωση των στοιχείων της ιστοσελίδας σας).

Βήμα 4

Επόμενο είναι το placeholder που θα πρέπει να προσθέσετε στον κώδικα της φόρμας σας, όπου θέλετε να εμφανίζονται τα reCAPTCHA:

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

Σημείωση: το χαρακτηριστικό data-sitekey θα περιέχει την τιμή του δικού σας κλειδιού, όχι αυτό το ενδεικτικό παράδειγμα.

Υπάρχουν και άλλα χαρακτηριστικά που μπορείτε να προσθέσετε σε αυτό το σημείο για να παραμετροποιήσετε την εμφάνιση και τη λειτουργικότητα του reCAPTCHA σας. Για παράδειγμα, προσθέτοντας το data-theme="dark" σε αυτό το div θα σας δώσει μια σκοτεινή εκδοχή, που μπορεί να ταιριάζει καλύτερα με το UI σας:

Για περισσότερες λεπτομέρειες σχετικά με τη ρύθμιση των παραμέτρων του reCAPTCHA σας ρίξτε μια ματιά στο developers.google.com.

Δημιουργώντας το

Τώρα που έχουμε τα αρχικά συστατικά ήρθε η ώρα να τα τοποθετήσουμε σε ένα λειτουργικό περιβάλλον.

Βήμα 1

Ας τοποθετήσουμε το script tag και το placeholder σε μια απλή φόρμα:

<!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>

Εδώ έχουμε χρησιμοποιήσει μια βασική δομή σελίδας με φόρμα που περιέχει μια είσοδο για name, μια για email και ένα κουμπί για υποβολή (submit). Δεν υπάρχει καμία μορφοποίηση εδώ, επειδή δεν είναι καθόλου απαραίτητη για αυτό το tutorial.

our captcha form — Θα πρέπει να έχετε κάτι που μοιάζει κάπως έτσι

Για να δείξουμε ότι ο έλεγχος του reCAPTCHA έγινε επιτυχώς, θα πρέπει να εκτελέσουμε ορισμένους ελέγχους από την πλευρά του server. Σε αυτή την περίπτωση θα το κάνουμε με PHP, οπότε αποθηκεύστε αυτό το αρχείο σε ένα νέο project ως index.php.

Βήμα 2

Θα παρατηρήσετε ότι η μέθοδος της φόρμας είναι post, οπότε όταν εισάγουμε τα δεδομένα της φόρμας, αυτά θα επιστραφούν στη σελίδα μέσα σε ένα πίνακα από μεταβλητές. Μπορούμε να εμφανίσουμε αυτές τις μεταβλητές προσπελαύνοντάς τες, οπότε προσθέστε το παρακάτω, κάπου στη σελίδα σας:

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

Αυτό παίρνει κάθε ζευγάρι κλειδιού/τιμής που βρίσκεται στον πίνακα $_POST και το εμφανίζει με κάποια μορφοποίηση. Τώρα όταν υποβάλετε τη φόρμα θα πρέπει να δείτε κάτι σαν το παρακάτω:

Θα δείτε την τιμή που επιστρέφεται για το name και το email, αλλά και μια τιμή για την g-recaptcha-response. Αν αποτύχατε να περάσετε επιτυχώς το τεστ CAPTCHA αυτή η τιμή θα είναι κενή, αλλά αν μαρκάρατε το πλαίσιο «I'm not a robot» θα δείτε μια τεράστια ακολουθία χαρακτήρων.

Αυτή είναι η τιμή πρέπει να στείλουμε στην Google, έτσι ώστε να επαληθευτεί, οπότε ας το κάνουμε.

Βήμα 3

Ευτυχώς, η ομάδα προγραμματιστών της Google έχει ήδη κάνει τη δύσκολη δουλειά για εμάς, οπότε πηγαίνετε στο project reCAPTCHA στο Github και κατεβάστε ένα αντίγραφο της βιβλιοθήκης recaptchalib.php. Τοποθετήστε το στη ρίζα του έργου σας και στη συνέχεια κάντε του αναφορά στην κορυφή του αρχείου σας index.php:

<?php

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

?>

Βήμα 4

Αυτή η βιβλιοθήκη περιέχει μια συλλογή από συναρτήσεις που στέλνουν το g-recaptcha-response (μαζί με το μυστικό μας κλειδί) στη Google μέσω ενός HTTP αιτήματος. Στη συνέχεια, συλλέγουν την απάντηση, ελέγχοντας κατά πόσον ή όχι το CAPTCHA ήταν επιτυχές. Για να το χρησιμοποιήσετε αυτό θα πρέπει να πρώτα να δημιουργήσετε δύο μεταβλητές, πριν από το τελευταίο PHP tag:

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

// empty response
$response = null;

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

Το ReCaptcha() ελέγχει εάν υπάρχει το μυστικό μας κλειδί. Εάν όχι, τερματίζει τη διαδικασία και μας συμβουλεύει να πάμε να αποκτήσουμε ένα. Περνάμε στη συνέχεια τα στοιχεία μας από τα ακόλουθα:

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

Βήμα 5

Υποθέτοντας ότι όλα είναι καλά με την υποβληθείσα φόρμα μας, η μεταβλητή $response θα επιστρέψει «success» και μπορούμε να συνεχίσουμε να επεξεργαζόμαστε τα δεδομένα της φόρμας. Αυτό μπορεί να μοιάζει κάπως έτσι: Αφαιρέστε το κομμάτι όπου εμείς προσπελάσαμε τα δεδομένα της φόρμας και, στη συνέχεια, προσθέστε τον ακόλουθο έλεγχο πάνω από τη φόρμα:

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

Τέλος, προσθέστε ένα PHP tag κλεισίματος μετά από τη φόρμα:

1	<?php } ?>

Αυτό εμφανίζει τη φόρμα, εκτός αν έχει υποβληθεί με επιτυχία, στην οποία περίπτωση εμφανίζει μια μικρή ευχαριστήρια ειδοποίηση. Εδώ είναι το τελικό demo.

Συμπέρασμα

Αυτό ήταν μια πολύ πρόχειρη και έτοιμη εφαρμογή σε PHP του reCAPTCHA CAPTCHA. Είναι διαθέσιμη για βελτιώσεις, αλλά ελπίζουμε ότι θα σας δώσει μια ιδέα από τα βασικά. Τα εύσημα για τη βιβλιοθήκη πηγαίνουν στην ομάδα προγραμματιστών της Google και επίσης θα πρέπει να πω ένα γρήγορο ευχαριστώ στον Matt Aussaguel που μου το επεσήμανε.

Χρήσιμες Πηγές

ReCAPTCHA 1.0.0 στο Github
Τεκμηρίωση του ReCAPTCHA
Είστε ρομπότ; Παρουσιάζοντας το «No CAPTCHA reCAPTCHA» Google Blog για την Ασφάλεια
Plugin Ενσωμάτωσης ReCaptcha σε Wordpress για σύνδεση, εγγραφή, φόρμες σχολίων, Ninja Forms και Contact Form 7