Η προστασία από ρομπότ ή "χάκερ" μπορεί να είναι μια δύσκολη εργασία. Ευτυχώς το Captcha σώζει την ημέρα! Αυτό το Σαββατοκύριακο έφτιαξα μια εφαρμογή από πλήξη και εθισμό στον προγραμματισμό, που επέτρεψε σε εμένα και τους φίλους μου να μοιραστούμε / αποθηκεύσουμε εύκολα κείμενο ή ορισμένα αρχεία. Συνειδητοποίησα ότι η δωρεάν σύνδεση με τη βάση δεδομένων μου στο Firestore δεν ήταν καλή ιδέα και χρειαζόμουν κάποιον τρόπο να περιορίσω τις μεταφορτώσεις. Χρειαζόμουν σταθερή προστασία από bot — οι φίλοι μου είναι εξοικειωμένοι με τον προγραμματισμό και μπορούσαν να το δοκιμάσουν με στυλό, αλλά οποιαδήποτε εφαρμογή θα πρέπει να έχει αυτό το είδος προστασίας όταν ασχολείται με την αποθήκευση περιεχομένου χρήστη.

Το Captcha είναι ο τρόπος

Ήξερα αμέσως ότι θα χρησιμοποιούσα captcha, αλλά ποια; Έμαθα για το reCaptchaκαι ενώ γκουγκλάριζα (πόσο ειρωνικό) έμαθα για το hCaptchaπου δεν ήταν από την Google, οπότε το επέλεξα. Το hCaptcha παρέχει τα δεδομένα ταξινόμησής του σε πολλές εταιρείες και λαμβάνετε ανταμοιβήμε ορισμένα διακριτικά που μπορείτε να δωρίσετε σε φιλανθρωπικούς σκοπούς ή να χρησιμοποιήσετε μόνοι σας υπηρεσίες ταξινόμησης εικόνων.

Πώς λειτουργεί;

Είχα το θράσος να κλέψω ένα ωραίο διάγραμμα από το hCaptcha docs site, αλλά θα έπρεπε να είναι παρόμοιο με οποιαδήποτε υπηρεσία Captcha.

Εξήγησε σε παρακαλώ?

Είναι πραγματικά απλό. Όταν ο χρήστης ολοκληρώσει το captcha, λαμβάνει ένα tokenαπό την υπηρεσία captcha. Η ένδειξη είναι απόδειξη, ότι (μάλλον) είναι άνθρωπος. Το να γνωρίζει μόνο ο πελάτης αυτό είναι άχρηστο. Ο διακομιστής σας πρέπει να το γνωρίζει, επομένως περνάτε το διακριτικό μαζί με το προστατευμένο αίτημά σας. Στον διακομιστή, πρέπει να ελέγξετε την εγκυρότητά του. Είναι απλό — απλώς ρωτάτε την υπηρεσία"είναι αυτό ένα έγκυρο διακριτικό;" και απαντά η υπηρεσία.

Υλοποίηση στο Next.js

Ας ξεκινήσουμε με τις εξαρτήσεις.

yarn add @hcaptcha/react-hcaptcha

Υπάρχει επίσης μια βιβλιοθήκη που ονομάζεται next-hcaptcha για το Next.js, αλλά έπρεπε να εφαρμόσω το δικό μου ενδιάμεσο λογισμικό, λόγω κάποιων λεπτομερειών υλοποίησης.

Captcha.tsx

Η χρήση αυτού του στοιχείου είναι απλή. Το εμφανίζετε και περιμένετε το διακριτικό. Μόλις το αποκτήσετε, προσθέστε το στις κεφαλίδες αιτημάτων. Μπορείτε να χρησιμοποιήσετε g-recaptcha-response ή h-captcha-response

Ενδιάμεσο λογισμικό Next.js για έλεγχο εγκυρότητας διακριτικού captcha

Εάν δεν είστε εξοικειωμένοι με το ενδιάμεσο λογισμικό, μπορείτε να ελέγξετε την τεκμηρίωση για Next.js ή Express.

Αλλά TLDR: «τυλίγετε» τη διαδρομή API σας με αυτήν τη λειτουργία. Οπως

Μυστικά, Περιβαλλοντικές μεταβλητές

Ξέχασα να αναφέρω ότι θα χρειαστείτε ένα κλειδί API υπηρεσίας hCaptcha — το μυστικό. Μπορείτε να το βρείτε αφού συνδεθείτε στο hCaptcha. Μπορείτε επίσης να δείτε μερικά περίεργα κλειδιά όπως 0x0000000000000000000000000000000000000000 με βάση το τρέχον περιβάλλον. Αυτά χρησιμοποιούνται για τοπικές δοκιμές. Μπορείτε να βρείτε την τεκμηρίωση εδώ.

Ελπίζω να σας άρεσε :)