Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Form Design
Webdesign

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

by
Difficulty:BeginnerLength:LongLanguages:

Greek (ελληνικά) translation by Iris Diakoumi (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:

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

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

Βήμα 4

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

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

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

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

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

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

Βήμα 1

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

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

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

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

Βήμα 2

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

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

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

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

Βήμα 3

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

Βήμα 4

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

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

Βήμα 5

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

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

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

Συμπέρασμα

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

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

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.