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

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

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

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

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

  1. הכנת הסביבה ל-Google Cloud Fraud Defense.

  2. יצירת מפתח שמבוסס על ניקוד.

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

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

      1. נכנסים לדף Google Cloud Fraud Defense.

        כניסה ל-Google Cloud Fraud Defense

      2. לוחצים על הכרטיסייה Keys.
      3. ברשימת מפתחות ה-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 לקצה העורפי ויוצרים בדיקה תוך שתי דקות.

    בשילובים של 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. מגדירים פונקציית קריאה חוזרת (callback) כדי לטפל בטוקן.

      <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 לקצה העורפי ויוצרים בדיקה תוך שתי דקות.

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

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