הטמעה של מפתחות לתיבות סימון (אתגר תיבת סימון) באתרים

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

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

  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 בדף האינטרנט, משתמשים באחת מהשיטות הבאות:

הצגת הווידג'ט באופן אוטומטי

באמצעות השיטה הזו, אפשר לעבד את הווידג'ט בכל אובייקט (כמו div או span) עם המחלקה g-recaptcha.

בדף האינטרנט, כוללים את משאב ה-JavaScript הנדרש ואת רכיב ה-HTML עם המחלקה g-recaptcha.

ברכיב עם המחלקה g-recaptcha, צריך לכלול גם את המאפיין data-sitekey ולהגדיר אותו כך שיהיה שווה למפתח של תיבת הסימון.

כדי לציין פעולה, כוללים את המאפיין data-action ומגדירים אותו לשם של פעולה. הוראות נוספות זמינות במאמר בנושא פעולות.

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

מערכת reCAPTCHA משתמשת בשפת הדפדפן כברירת מחדל. אם רוצים לציין שפה אחרת, משתמשים במאפיין hl=LANG בסקריפט. לדוגמה, כדי להשתמש בצרפתית, מציינים את הערך הבא: . כאן מפורטות השפות הנתמכות ב-reCAPTCHA.

הדוגמה הבאה היא קטע של קוד לדוגמה:

    
      
        reCAPTCHA demo: Simple page
        
      
      
        

          
KEY_ID" data-action="LOGIN">

הצגה מפורשת של הווידג'ט

בשיטה הזו, אפשר להציג את הווידג'ט באמצעות סקריפט JavaScript קיים באמצעות ה-method‏ grecaptcha.enterprise.render(). כדאי להשתמש בשיטה הזו כדי להימנע מתנאי מירוץ או אם רוצים להציג את הווידג'ט על סמך הלוגיקה הקיימת של JavaScript.

כדי לוודא שלא מתרחשים מצבי מירוץ כשמבצעים רינדור מפורש של הווידג'ט, כדאי לעיין בשיקולים הבאים:

  • צריך להגדיר את הסקריפטים כך שפונקציית הקריאה החוזרת תופיע ראשונה, ואחריה reCAPTCHA API.
  • משתמשים בפרמטרים async ו-defer בתגי script.

כדי להציג את הווידג'ט באופן מפורש, פועלים לפי השלבים הבאים:

  1. כדי לדחות את העיבוד של הווידג'ט:

    1. מציינים את onload פונקציית הקריאה החוזרת לפני ש-reCAPTCHA API ויחסי תלות אחרים נטענים.

    2. אחרי שפונקציית הקריאה החוזרת מופעלת, מפעילים את method‏ grecaptcha.enterprise.render() עם הפרמטרים הבאים מתוך JavaScript API.

      • ‫container: רכיב ה-HTML שבו יוצג הווידג'ט של reCAPTCHA. מציינים את המזהה של מאגר התגים (מחרוזת) או את רכיב ה-DOM עצמו.

      • ‫parameters: אובייקט שמכיל פרמטרים כצמדי מפתח/ערך, למשל, {"sitekey": "KEY_ID", "theme": "light"}.

      • ‫action: מציינים את שם הפעולה שמשויך לרכיב המוגן.

      grecaptcha.enterprise.render('html_element', {
   'sitekey' : 'KEY_ID',
   'action': 'LOGIN',
 });

  2. כדי לעבד את הווידג'ט, מוסיפים את משאב ה-JavaScript. מגדירים את onload לשם של פונקציית הקריאה החוזרת onload וכוללים את render=explicit.

    מערכת reCAPTCHA משתמשת בשפת הדפדפן כברירת מחדל. אם רוצים לציין שפה אחרת, משתמשים במאפיין hl=LANG בסקריפט. לדוגמה, כדי להשתמש בצרפתית, מציינים את הערך הבא: . כאן מפורטות השפות הנתמכות ב-reCAPTCHA.

דוגמה 1

בדוגמת הקוד הבאה אפשר לראות איך מתבצע רינדור מפורש אחרי קריאה חוזרת (callback) של onload:


   
    reCAPTCHA demo: Explicit render after an onload callback

דוגמה 2

בדוגמת הקוד הבאה מוצג רינדור מפורש של כמה ווידג'טים:


  
    reCAPTCHA demo: Explicit render for multiple widgets

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