הטמעה של מקשים מבוססי-ניקוד באתרים

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

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

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

לפני שמתחילים

  1. הכנת הסביבה ל-reCAPTCHA

  2. יצירת מפתח שמבוסס על ציון

    אפשרות אחרת היא להעתיק את המזהה של מפתח קיים שמבוסס על ניקוד. כדי לעשות זאת, מבצעים את אחד מהשלבים הבאים:

    • כדי להעתיק את המזהה של מפתח קיים ממסוףGoogle Cloud :

      1. עוברים לדף reCAPTCHA.

        מעבר אל reCAPTCHA

      2. ברשימת מפתחות reCAPTCHA, מעבירים את מצביע העכבר מעל המפתח שרוצים להעתיק ולוחצים על .
    • כדי להעתיק את המזהה של מפתח קיים באמצעות API בארכיטקטורת REST, משתמשים ב-method‏ projects.keys.list.
    • כדי להעתיק את המזהה של מפתח קיים באמצעות ה-CLI של gcloud, משתמשים בפקודה gcloud recaptcha keys list.

הטמעה של המפתח באתר

שירות reCAPTCHA פועל בצורה הכי טובה כשיש לו הקשר לגבי האינטראקציות באתר שלכם. שירות reCAPTCHA עוקב אחרי התנהגות לגיטימית והתנהגות פוגעת כדי ללמוד על האינטראקציות באתר שלכם.

כדי לקבל את התוצאות הטובות ביותר, כדאי להתקין מפתחות מבוססי-ניקוד במקומות הבאים באתר:

  • Forms
  • פעולות (אינטראקציות של משתמשים)
  • ברקע של כל דפי האינטרנט

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

שילוב המפתח עם הקצה הקדמי

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

בהתאם למיקום שבו רוצים להוסיף אימות מסוג reCAPTCHA, בוחרים באפשרות המתאימה:

אפשר לראות דוגמה לכל אפשרות בקוד המקור של אתר ההדגמה.

הוספת אימות באינטראקציה של משתמש

  1. כדי לטעון את reCAPTCHA בדף אינטרנט, מוסיפים את JavaScript API עם המפתח שמבוסס על ניקוד בתוך רכיב <head></head> של דף האינטרנט.

        <head>
    <script src="https://www.google.com/recaptcha/enterprise.js?render=KEY_ID"></script>
    ....
    </head>

    מערכת reCAPTCHA משתמשת בשפת הדפדפן כברירת מחדל. אם רוצים לציין שפה אחרת, משתמשים במאפיין hl=LANG בסקריפט. לדוגמה, כדי להשתמש בצרפתית, מציינים את הערך הבא: <script src="https://www.google.com/recaptcha/enterprise.js?hl=fr"></script>. כאן מפורטות השפות הנתמכות ב-reCAPTCHA.

    אם רוצים לציין מיקום לתג, צריך להשתמש ב-badge=LOCATION כפרמטר שאילתה בתג הסקריפט. לדוגמה, www.google.com/recaptcha/enterprise.js?render=KEY_ID&badge=bottomleft. כברירת מחדל, המיקום מוגדר כ-bottomright. הערכים האפשריים האחרים הם inline ו-bottomleft.

  2. כדי להוסיף אימות מסוג reCAPTCHA לאינטראקציה של משתמש, מבצעים את הפעולות הבאות:

    1. כדי לוודא שהפונקציה grecaptcha.enterprise.execute() תפעל אחרי שהספרייה של reCAPTCHA תיטען, צריך להשתמש בפונקציה grecaptcha.enterprise.ready().

    2. צריך להתקשר אל grecaptcha.enterprise.execute() בכל אינטראקציה שרוצים להגן עליה באמצעות המפתח שמבוסס על הניקוד. מציינים שם משמעותי לאינטראקציה של המשתמש בפרמטר action. הנחיות נוספות זמינות במאמר בנושא פעולות.

      בדוגמה הבאה מוצג אופן ההפעלה של grecaptcha.enterprise.execute() בפעולת התחברות:

      <script>
function onClick(e) {
  e.preventDefault();
  grecaptcha.enterprise.ready(async () => {
    const token = await grecaptcha.enterprise.execute('KEY_ID', {action: 'LOGIN'});
    // IMPORTANT: The 'token' that results from execute is an encrypted response sent by
    // reCAPTCHA to the end user's browser.
    // This token must be validated by creating an assessment.
    // See https://cloud.google.com/recaptcha/docs/create-assessment
  });
}
</script>

      ‫grecaptcha.enterprise.execute() יוצר אסימון כמו בדוגמה הבאה: 

      03AGdBq27tvcDrfiRuxQnyKs-SarXVzPODXLlpiwNsLqdm9BSQQRtxhkD-Wv6l2vBSnL_JQd80FZp3IeeF_TxNMrqhyQchk7hmg_ypDctt_F5RTr9zNO9TSDX3Fy0qHQTuaM9E3hrAkA1v1l7D-fCreg7uq8zoudfh1ZRmN49-2iAMAn4E8_ff-nmlLTNGVZmCSyeze-5xM24pM_JhhUVcCMIDKYtDUnr2imxg2ubIqMscCZGUtdXNUO_LRSzuwWDlLyAr3V2nVn29Z48PQa2QzbymEXzO9pCtoGQmY7kiZ8ILfD9DAJSSyUTMwJXVJptUeBmLM341fq_STYZBbPQJ0zYOEDvJoFsIwGMfuphkDet0nK56b0mkzaL8RCRy2oK31Mcx6n3PhGkCnQ6QIhiV5ZVmV1Hz9M3w99zYw6ekc3wPCNMZ6V6x1ApVpIk3reFfByRQ0C0_pRWwbKZHLXQ_oSTI1UI7kyH1VeXngsJAx2l7zcp0hQNipajC4YwL7Jb8X4cCD0NeiaY1YCrI5j87mK5axcMikq460I4niIFeDBlHGF-ndqu3CJstosAur-C_x827f-dPPjA9Vrw8MDb3x4KUb0vbA8xE9mJxPYGY0rPCR27vJ38Voa7DjEBGX9c-iufv5_wfj-yIfIAHy0iijnRLI0CVkWF2-iPdWv7LnkTwL3WKbF_MrEGZXmtyLX9dEZArfxmToeMuSdYkfikkgR2-k4Xzxlz15RbHJuWSAYqEyTTnpUXmOvDuTN92b0kYqbRelcLUI_Shm-8dq9e-L7K6YWQv32gV6NukZKY15dyrJaW10frBgTOGSTTpIyB7MNEL8S27WjWtOb-zWsgimIhoRNfS8BiJWkmK4gTj51m7Wur-qsDbHgV6gXlMvjJs_B7oXX-mKsKhY9ACtwukotBelGYQOvf1RDHjH3Yi1RDfELBY6AkwUK4tq8cACVGpCwa0gKUo-sbORTsGu_r7VTzYo1AaZD5HV4XUm8yoqszel6DmIfkJcI7PfzzvfUJuvMQ1itZSzpzuth3glbKBYsIjbKqG-q8cxtZ7u0l32j46ASo2zlCJWUjwP3W1P7MUenEoIZtjlyTB_tT6Fk8RxGgRv3oLP7NPFJGs9ZGOAl6tBHpZF8Y_FqEOCMKtBl2JYOE5h6_Es3buSdiMm7mtLr64pboGiEColF1vbVvYpyaaqGFPXBM6ekZSXEXLAI0_7rj_fCLgnB21KXfac95vZbM9vyJCASvDcWKwqajQwy5aGMNe9GtbMogYbZfz5UGWAIi24Vd8KSv3qKOOwvzbcw4H0HYdsBXA

  3. אחרי שהטוקן נוצר, שולחים את טוקן reCAPTCHA אל ה-backend ויוצרים מבדק תוך שתי דקות.

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

הוספת reCAPTCHA לכפתור HTML

  1. כדי לטעון את reCAPTCHA בדף אינטרנט, מוסיפים את JavaScript API עם המפתח שמבוסס על ניקוד בתוך רכיב <head></head> של דף האינטרנט.

        <head>
    <script src="https://www.google.com/recaptcha/enterprise.js?render=KEY_ID"></script>
    ....
    </head>

    מערכת reCAPTCHA משתמשת בשפת הדפדפן כברירת מחדל. אם רוצים לציין שפה אחרת, משתמשים במאפיין hl=LANG בסקריפט. לדוגמה, כדי להשתמש בצרפתית, מציינים את הערך הבא: <script src="https://www.google.com/recaptcha/enterprise.js?hl=fr"></script>. כאן מפורטות השפות הנתמכות ב-reCAPTCHA.

  2. כדי להוסיף reCAPTCHA לכפתור HTML פשוט, צריך לבצע את הפעולות הבאות:

    1. מגדירים פונקציית קריאה חוזרת לטיפול באסימון.

      <script>
   function onSubmit(token) {
     document.getElementById("demo-form").submit();
   } // Use `requestSubmit()` for extra features like browser input validation.
</script>

      מידע נוסף זמין במאמר בנושא השיטה requestSubmit()‎.

    2. מוסיפים מאפיינים ללחצן ה-HTML.

      <button class="g-recaptcha"
data-sitekey="KEY_ID"
data-callback="onSubmit"
data-action="submit">Submit</button>

      אם רוצים לציין מיקום לתג, צריך להשתמש במאפיין data-badge=LOCATION ברכיב שכולל את class=g-recaptcha. כברירת מחדל, המיקום מוגדר כ-bottomright. הערכים האפשריים האחרים הם inline ו-bottomleft.

    3. כשמשתמשים בלחצן הזה כדי לשלוח טופס באתר, פרמטר ה-POST‏ g-recaptcha-response מכיל את אסימון התגובה.

  3. אחרי שהטוקן נוצר, שולחים את טוקן reCAPTCHA אל ה-backend ויוצרים מבדק תוך שתי דקות.

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

המאמרים הבאים