Ενσωματώστε το Google reCAPTCHA σε μια εφαρμογή React

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

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

Τι είναι το CAPTCHA;

Το ακρωνύμιο CAPTCHA σημαίνει Completely Automated Public Turing test to Discovery Computers and Humans Apart. Αναφέρεται σε μια δοκιμή που δημιουργείται από υπολογιστή που ελέγχει για να προσδιορίσει εάν ένας συγκεκριμένος χρήστης που αλληλεπιδρά με την εφαρμογή σας είναι άνθρωπος και όχι bot.

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

Το Google reCAPTCHA διατίθεται σε δύο εκδόσεις:

• reCAPTCHA V3: Αυτή η έκδοση εκτελείται στο παρασκήνιο και καθορίζει μια συνολική βαθμολογία με βάση τη συμπεριφορά του χρήστη.
• reCAPTCHA V2: Αυτή η έκδοση τοποθετεί το πλαίσιο ελέγχου "Δεν είμαι ρομπότ" στη φόρμα ελέγχου ταυτότητας.

Αυτός ο οδηγός θα εξερευνήσει το Google reCAPTCHA V2. Διαβάστε παρακάτω για να μάθετε πώς να το ενσωματώσετε σε μια εφαρμογή React.

Καταχωρίστε την εφαρμογή React στην Κονσόλα διαχειριστή reCAPTCHA

Για να ξεκινήσετε, πρέπει να καταχωρήσετε την αίτησή σας στην κονσόλα προγραμματιστή του reCAPTCHA. Κατευθυνθείτε προς Κονσόλα διαχειριστή reCAPTCHA της Google, συνδεθείτε με τον λογαριασμό σας Google και συμπληρώστε τα απαιτούμενα στοιχεία της φόρμας.

Δώστε το όνομα της ετικέτας, επιλέξτε reCAPTCHA V2και στο αναπτυσσόμενο πλαίσιο, επιλέξτε τα αιτήματα επαλήθευσης χρησιμοποιώντας την επιλογή του πλαισίου ελέγχου "Δεν είμαι ρομπότ". Τέλος, δώστε το όνομα τομέα της εφαρμογής σας. Για τοπική ανάπτυξη, πληκτρολογήστε localhost ως όνομα τομέα.

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

Δημιουργήστε έναν πελάτη React

Αυτό το έργο είναι διπλό: θα δημιουργήσετε έναν πελάτη React που αποδίδει μια απλή φόρμα σύνδεσης με το Google reCAPTCHA και ένα Express backend που κάνει αιτήματα POST στο API του reCAPTCHA για επαλήθευση του διακριτικού που δημιουργείται αφού ο χρήστης ολοκληρώσει το reCAPTCHA πρόκληση.

Δημιουργήστε έναν φάκελο έργου τοπικά για να φιλοξενήσετε τα αρχεία του έργου σας. Επόμενο, δημιουργήστε την εφαρμογή React και αλλάξτε τον τρέχοντα κατάλογο σε αυτόν του πελάτη. Στον ριζικό κατάλογο του φακέλου πελάτη σας, δημιουργήστε ένα αρχείο .env για να αποθηκεύσετε το μυστικό κλειδί API και το κλειδί τοποθεσίας.

REACT_APP_reCAPTCHA_SITE_KEY = 'κλειδί τοποθεσίας'
REACT_APP_reCAPTCHA_SECRET_KEY = 'μυστικό κλειδί'

Μπορείτε να βρείτε τον κωδικό αυτού του έργου σε αυτό Αποθετήριο GitHub.

Εγκαταστήστε τα απαιτούμενα πακέτα

Εγκαταστήστε το Axios, θα χρησιμοποιήσετε αυτήν τη βιβλιοθήκη για να κάνετε αιτήματα HTTP από το πρόγραμμα περιήγησης και το React-Google-reCAPTCHA. Αυτό το πακέτο παρέχει μια υλοποίηση ειδικά για το React για το API reCAPTCHA.

npm εγκατάσταση react-recaptcha-google axios --save

Ενσωματώστε το Google reCAPTCHA στην εφαρμογή React

Ανοιξε το αρχείο src/App.js, διαγράψτε τον κωδικό React του boilerplate και προσθέστε τον παρακάτω κωδικό:

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

Πρώτα, εισαγάγετε τα πακέτα React, Axios και react-google-recaptcha:

εισαγωγή React, { useState, useRef } από'αντιδρώ';
εισαγωγή Αξιος από'αξιος';
εισαγωγή ReCAPTCHA από'react-google-recaptcha';

Στη συνέχεια, ορίστε τρεις μεταβλητές κατάστασης: successMsg, errorMsg και validToken. Ο κωδικός σας θα ενημερώσει αυτές τις καταστάσεις μετά την επιτυχή υποβολή της φόρμας και την επικύρωση reCAPTCHA. Επιπλέον, λάβετε τον ιστότοπο και τα μυστικά κλειδιά από το αρχείο ENV.

λειτουργίαApp() {
συνθ [SuccessMsg, setSuccessMsg] = useState("")
συνθ [ErrorMsg, setErrorMsg] = useState("")
συνθ [valid_token, setValidToken] = useState([]);
συνθ SITE_KEY = process.env. REACT_APP_reCAPTCHA_SITE_KEY;
συνθ SECRET_KEY = διεργασία.env. REACT_APP_reCAPTCHA_SECRET_KEY;

Ορίστε ένα άγκιστρο userRef που αναφέρεται στο στοιχείο reCAPTCHA, για να καταγράψετε το διακριτικό που δημιουργείται αφού ένας χρήστης ολοκληρώσει τις προκλήσεις reCAPTCHA.

συνθ captchaRef = useRef(μηδενικό);

Στη συνέχεια, δημιουργήστε μια συνάρτηση handleSubmit για κλήση όταν ένας χρήστης υποβάλλει τη φόρμα σύνδεσης. Αυτή η συνάρτηση λαμβάνει το διακριτικό από το στοιχείο reCAPTCHA και στη συνέχεια καλεί το επαναφορά μέθοδος επαναφοράς του reCAPTCHA για να επιτραπούν οι επόμενοι έλεγχοι.

Επιπλέον, ελέγχει αν υπάρχει το διακριτικό και καλεί τη συνάρτηση verifyToken για να επαληθεύσει το διακριτικό. Μόλις επαληθευτεί το διακριτικό, θα ενημερώσει την κατάσταση validToken με τα δεδομένα απόκρισης API.

συνθ handleΥποβολή = ασυγχρονισμός (ε) => {
 e.preventDefault();
αφήνω token = captchaRef.current.getValue();
 captchaRef.current.reset();
αν (κουπόνι) {
αφήνω valid_token = αναμένω verifyToken (κουπόνι);
 setValidToken (valid_token);
αν (valid_token[0].επιτυχία αληθής) {
κονσόλα.κούτσουρο("επαληθεύτηκε");
 setSuccessMsg("Ουρα!! έχετε υποβάλει τη φόρμα")
 } αλλού {
κονσόλα.κούτσουρο("Δεν επαληθεύεται");
 setErrorMsg(" Συγνώμη!! Βεβαιωθείτε ότι δεν είστε bot")
 }
 }
 }

Τέλος, ορίστε τη συνάρτηση verifyToken που θα στείλει ένα αίτημα POST σε ένα τελικό σημείο διακομιστή Express χρησιμοποιώντας το Axios, περνώντας το διακριτικό reCAPTCHA και το μυστικό κλειδί στο σώμα αιτήματος. Εάν το αίτημα είναι επιτυχές, ωθεί τα δεδομένα απόκρισης στον πίνακα APIresponse και ως αποτέλεσμα επιστρέφει τον πίνακα.

συνθ verifyToken = ασυγχρονισμός (κουπόνι) => {
αφήνω APIresponse = [];
δοκιμάστε {
αφήνω ανταπόκριση = αναμένω Axios.post(` http://localhost: 8000/verify-token`, {
 reCAPTCHA_TOKEN: διακριτικό,
 Secret_Key: SECRET_KEY,
 });
 APIresponse.push (response['δεδομένα']);
ΕΠΙΣΤΡΟΦΗ APIresponse;
 } σύλληψη (λάθος) {
κονσόλα.log (σφάλμα);
 }
 };

Τέλος, επιστρέψτε μια φόρμα με το στοιχείο reCAPTCHA. Αυτό το στοιχείο δέχεται το άγκιστρο αναφοράς και το κλειδί τοποθεσίας ως στηρίγματα για τη διαμόρφωση και την εμφάνιση του γραφικού στοιχείου reCAPTCHA.

Όταν ένας χρήστης υποβάλλει τη φόρμα, το στοιχείο αποδίδει ένα μήνυμα επιτυχίας ή σφάλματος με βάση την τιμή της κατάστασης validToken. Εάν το διακριτικό reCAPTCHA είναι έγκυρο, που σημαίνει ότι ένας χρήστης ολοκλήρωσε με επιτυχία τις προκλήσεις reCAPTCHA, εμφανίζει το μήνυμα επιτυχίας, διαφορετικά εμφανίζει το μήνυμα σφάλματος.

ΕΠΙΣΤΡΟΦΗ (
"Εφαρμογή">
"Επικεφαλίδα εφαρμογής"> 
"Σύνδεση-φόρμα">


 {valid_token.length > 0 && valid_token[0].επιτυχία αληθής
? <h3όνομα τάξης="textSuccess">{SuccessMsg}h3>
: <h3όνομα τάξης="Σφάλμα κειμένου">{ErrorMsg} h3>}

Όνομα χρήστη</p>
"κείμενο" placeholder="Ονομα χρήστη..." />

Κωδικός πρόσβασης</p>
"Κωδικός πρόσβασης" κράτημα θέσης = "Κωδικός πρόσβασης..." />
 className="recaptcha"
 sitekey={SITE_KEY}
 ref={captchaRef}
 />
"υποβάλλουν">Υποβολή</button>
 </form>
 </div>
 </header>
 </div>
 );
}


εξαγωγήΠροκαθορισμένο App

Τέλος, εκτελέστε τον διακομιστή ανάπτυξης και κατευθυνθείτε στο πρόγραμμα περιήγησής σας http://localhost: 3000 για να δείτε τα αποτελέσματα.

Δημιουργήστε το Express Backend

Για να ξεκινήσετε, στον ριζικό κατάλογο ολόκληρου του φακέλου του έργου, δημιουργήστε έναν διακομιστή ιστού Express, και εγκαταστήστε αυτά τα πακέτα:

npm εγκατάσταση express cors axios body-parser

Ρύθμιση του διακομιστή Express

Στη συνέχεια, ανοίξτε το αρχείο index.js στο φάκελο του έργου διακομιστή και προσθέστε αυτόν τον κώδικα:

συνθ εκφράζω = απαιτώ('εξπρές')
συνθ αξιος = απαιτώ('αξιος');
συνθ κορς = απαιτώ('κορς');
συνθ app = express();
συνθ bodyParser = απαιτώ("αναλυτής σώματος");
συνθ jsonParser = bodyParser.json();
συνθ PORT = διεργασία.env. ΛΙΜΑΝΙ || 8000;
app.use (jsonParser);
app.use (cors());
app.post("/verify-token", ασυγχρονισμός (απαιτ., ανταπ.) => {
συνθ { reCAPTCHA_TOKEN, Secret_Key} = req.body;
δοκιμάστε {
αφήνω ανταπόκριση = αναμένω axios.post(` https://www.google.com/recaptcha/api/siteverify? μυστικό=${Secret_Key}&response=${reCAPTCHA_TOKEN}`);
κονσόλα.log (response.data);
ΕΠΙΣΤΡΟΦΗ res.status(200).json({
 επιτυχία:αληθής,
 μήνυμα: "Το διακριτικό επαληθεύτηκε με επιτυχία",
 verification_info: answer.data
 });
 } σύλληψη(λάθος) {
κονσόλα.log (σφάλμα);
ΕΠΙΣΤΡΟΦΗ res.status(500).json({
 επιτυχία:ψευδής,
 μήνυμα: "Σφάλμα επαλήθευσης διακριτικού"
 })
 }
});
app.listen (PORT, () => κονσόλα.κούτσουρο(`Η εφαρμογή ξεκίνησε στη θύρα ${PORT}`));

Αυτός ο κώδικας κάνει τα εξής:

• Ο διακομιστής ορίζει μια διαδρομή Post που κάνει ένα ασύγχρονο αίτημα HTTP POST στο reCAPTCHA API της Google σε επαληθεύστε το διακριτικό reCAPTCHA χρησιμοποιώντας το Axios, περνώντας κατά μήκος του μυστικού κλειδιού για έλεγχο ταυτότητας στη διεύθυνση URL αιτήματος.
• Εάν το διακριτικό reCAPTCHA επαληθευτεί με επιτυχία, ο διακομιστής αποκρίνεται με ένα αντικείμενο JSON που περιέχει μια ιδιότητα "επιτυχία" που έχει οριστεί σε true, μια ιδιότητα "μήνυμα" υποδεικνύοντας ότι το διακριτικό επαληθεύτηκε με επιτυχία και μια ιδιότητα "verification_info" που περιέχει πληροφορίες σχετικά με την απάντηση επαλήθευσης από την Google API.
• Εάν παρουσιαστεί σφάλμα κατά τη διαδικασία επαλήθευσης, ο διακομιστής αποκρίνεται με ένα αντικείμενο JSON που περιέχει ένα Η ιδιότητα "success" ορίστηκε σε false και μια ιδιότητα "message" που υποδεικνύει ότι υπήρξε σφάλμα κατά την επαλήθευση του ένδειξη.

Τέλος, εκτελέστε τον διακομιστή κόμβου και δοκιμάστε τη λειτουργικότητα της δυνατότητας reCAPTCHA.

κόμβος index.js

Μπορούν τα reCAPTCHA να εγγυηθούν την ασφάλεια κατά των ανεπιθύμητων μηνυμάτων;

Σύμφωνα με την Google, η υπηρεσία reCAPTCHA έχει ποσοστό επιτυχίας άνω του 99%, που σημαίνει ότι μόνο ένα μικρό ποσοστό ανεπιθύμητων μηνυμάτων μπορεί να παρακάμψει τη δυνατότητα ασφαλείας reCAPTCHA.

Το reCAPTCHA δεν είναι αλάνθαστο, αφού αποφασισμένοι κακοί ηθοποιοί μπορούν ακόμα να βρουν λύσεις. Ωστόσο, παραμένει ένα ουσιαστικό εργαλείο που μπορεί να μειώσει σημαντικά τον κίνδυνο από τα ανεπιθύμητα μηνύματα.