שלב את Google reCAPTCHA ביישום React

שלב את Google reCAPTCHA ביישום React
קוראים כמוך עוזרים לתמוך ב-MUO. כאשר אתה מבצע רכישה באמצעות קישורים באתר שלנו, אנו עשויים להרוויח עמלת שותף. קרא עוד.

ככל שיישומי אינטרנט וניידים הפכו פופולריים יותר, כך גדל גם הסיכון לספאם ופעילות זדונית אחרת. CAPTCHAs יכולים להיות אמצעי אבטחה שימושי שכדאי לשלב כדי למנוע סוגים אלה של איומי אבטחה.





CAPTCHA הוא תכונת אבטחה מינימלית, המשולבת בדרך כלל עם טפסי אינטרנט כדי למנוע התקפות אוטומטיות של ספבוטים. זה מבטיח שהמשתמש הניגש לאפליקציה הוא אכן אנושי, ולא בוט שמבצע קוד זדוני.



מה זה CAPTCHA?

ראשי התיבות CAPTCHA מייצגים Completely Automated Public Turing Test כדי להבחין בין מחשבים לבני אדם. זה מתייחס למבחן שנוצר על ידי מחשב שבודק אם משתמש מסוים שמקיים אינטראקציה עם האפליקציה שלך הוא אדם ולא בוט.





ישנם סוגים שונים של מבחני CAPTCHA שתוכלו לשלב באפליקציה שלכם כמו CAPTCHA מבוססי טקסט ואודיו. עם זאת, הסוג הפופולרי והיעיל ביותר הוא Google reCAPTCHA. הוא בודק כדי להבחין בין משתמשים אמיתיים ובוטים באמצעות אלגוריתמים מתקדמים לניתוח סיכונים.

Google reCAPTCHA מגיע בשתי גרסאות:



  • reCAPTCHA V3: גרסה זו פועלת ברקע וקובעת ציון כולל על סמך התנהגות המשתמש.
  • reCAPTCHA V2: גרסה זו מציבה את תיבת הסימון 'אני לא רובוט' בטופס האימות.

מדריך זה יחקור את Google reCAPTCHA V2. המשך לקרוא כדי ללמוד כיצד לשלב אותו באפליקציית React.

רשום את אפליקציית React ב-reCAPTCHA Admin Console

כדי להתחיל, עליך לרשום את האפליקציה שלך במסוף המפתחים של reCAPTCHA. פנה אל מסוף הניהול reCAPTCHA של Google , היכנס באמצעות חשבון Google שלך, ומלא את פרטי הטופס הנדרשים.



ספק את שם התווית, בחר reCAPTCHA V2 , ובתיבה הנפתחת, בחר את הבקשות לאימות באמצעות אפשרות הסימון 'אני לא רובוט'. לבסוף, ספק את שם הדומיין של האפליקציה שלך. לפיתוח מקומי, הקלד מארח מקומי בתור שם הדומיין.

כיצד לשנות את מיקום הגיבוי של itunes
הגדרות Google reCAPTCHA

לאחר רישום האפליקציה שלך, האתר יפנה אותך לדף חדש עם הסוד ומפתחות האתר שנוצרו.



מפתחות reCAPTCHA

צור לקוח React

הפרויקט הזה הוא כפול: תיצור לקוח React שמציג טופס התחברות פשוט עם ה-reCAPTCHA של Google ו-Express-end שמבצע בקשות POST ל-API של reCAPTCHA כדי לאמת את האסימון שנוצר לאחר שמשתמש משלים את אתגר reCAPTCHA.

צור תיקיית פרויקט באופן מקומי כדי לאכלס את קבצי הפרויקט שלך. הַבָּא, צור את אפליקציית React ושנה את הספרייה הנוכחית לזו של הלקוח. בספריית השורש של תיקיית הלקוח שלך, צור קובץ .env לאחסון המפתח הסודי של ה-API ומפתח האתר.

 REACT_APP_reCAPTCHA_SITE_KEY = 'site key' 
REACT_APP_reCAPTCHA_SECRET_KEY = 'secret key'