reCAPTCHA בלתי נראה

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

כדי להפעיל את reCAPTCHA הנסתר, אפשר:

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

כדי לבדוק אם המשתמש פתר את בעיית ה-CAPTCHA, ראו אימות תגובת המשתמש.

קישור אוטומטי של האתגר ללחצן

השיטה הקלה ביותר להשתמש בווידג'ט של reCAPTCHA הנסתר בדף היא לכלול את משאב ה-JavaScript הנדרש ולהוסיף כמה מאפיינים ללחצן ה-HTML. המאפיינים הנדרשים הם שם הכיתה 'g-recaptcha', מפתח האתר שלכם במאפיין data-sitekey ושם של פונקציית קריאה חוזרת (callback) ב-JavaScript לטיפול בהשלמת ה-captcha במאפיין data-callback.

<html>
  <head>
    <title>reCAPTCHA demo: Simple page</title>
     <script src="https://www.google.com/recaptcha/api.js" async defer></script>
     <script>
       function onSubmit(token) {
         document.getElementById("demo-form").submit();
       }
     </script>
  </head>
  <body>
    <form id="demo-form" action="?" method="POST">
      <button class="g-recaptcha" data-sitekey="your_site_key" data-callback="onSubmit">Submit</button>
      <br/>
    </form>
  </body>
</html>

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

מקשרים את האתגר ללחצן באופן פרוגרמטי או מפעילים את האתגר.

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

להפעיל את האתגר באופן פרוגרמטי

כדי להפעיל את אימות reCAPTCHA באופן פרוגרמטי, אפשר להציג את האתגר ב-div עם המאפיין data-size="invisible" ולקרוא ל-execute באופן פרוגרמטי.

  1. יוצרים div באמצעות data-size="invisible".

    <div class="g-recaptcha"
      data-sitekey="_your_site_key_"
      data-callback="onSubmit"
      data-size="invisible">
</div>

  2. קוראים ל-grecaptcha.execute מתוך שיטת JavaScript.

    grecaptcha.execute();

    כשהקריאה החוזרת תתבצע, אפשר לקרוא ל-method grecaptcha.render מ-JavaScript API.

תצורה

פרמטרים של משאב JavaScript (api.js)

פרמטר ערך תיאור
onload זה שינוי אופציונלי. השם של פונקציית הקריאה החוזרת שתופעל אחרי שכל יחסי התלות ייטענו.
render explicit
onload		 זה שינוי אופציונלי. הגדרה שקובעת אם לעבד את הווידג'ט באופן מפורש. ברירת המחדל היא onload, שבה הווידג'ט יופיע בתג g-recaptcha הראשון שיימצא.
hl קודים של שפות זה שינוי אופציונלי. מאלץ את הווידג'ט להציג את התוכן בשפה ספציפית. זיהוי אוטומטי של שפת המשתמש אם לא צוין אחרת.

מאפייני תג g-recaptcha ופרמטרים של grecaptcha.render

מאפיין תג g-recaptcha הפרמטר grecaptcha.render ערך ברירת מחדל תיאור
data-sitekey מפתח אתר ה-sitekey שלכם.
data-badge תג bottomright bottomleft inline ימין למטה זה שינוי אופציונלי. משנים את המיקום של תג reCAPTCHA. 'inline' מאפשרת למקם אותו באמצעות CSS.
data-size size בלתי נראית זה שינוי אופציונלי. משמש ליצירת ווידג'ט בלתי נראה שקשור ל-div ומבוצע באופן פרוגרמטי.
data-tabindex tabindex 0 זה שינוי אופציונלי. אינדקס הטאבים של האתגר. אם רכיבים אחרים בדף משתמשים במאפיין tabindex, צריך להגדיר אותו כדי להקל על הניווט של המשתמשים.
data-callback קריאה חוזרת (callback) זה שינוי אופציונלי. השם של פונקציית הקריאה החוזרת, שמופעלת כשהמשתמש שולח תגובה מוצלחת. האסימון g-recaptcha-response מועבר לקריאה החוזרת (callback).
data-expired-callback expired-callback זה שינוי אופציונלי. השם של פונקציית הקריאה החוזרת, שמופעלת כשפג תוקף התגובה ל-reCAPTCHA והמשתמש צריך לבצע אימות מחדש.
data-error-callback error-callback זה שינוי אופציונלי. השם של פונקציית ה-callback, שפועלת כש-reCAPTCHA נתקל בשגיאה (בדרך כלל בקשר לרשת) ולא יכול להמשיך עד שהקישוריות תחודש. אם מציינים פונקציה כאן, אתם אחראים להודיע למשתמש שהוא צריך לנסות שוב.
מבודד false זה שינוי אופציונלי. כדי שבעלי הפלאגין לא יפריעו להתקנות קיימות של reCAPTCHA בדף. אם הערך הוא True, המופע של reCAPTCHA הזה יהיה חלק ממרחב מזהה נפרד.

ממשק API של JavaScript

שיטה תיאור
grecaptcha.render (
מאגר תגים,
פרמטרים,
קבלה בירושה
) 		הקוד הזה יוצר את הווידג'ט בקונטיינר כווידג'ט של reCAPTCHA ומחזיר את המזהה של הווידג'ט החדש שנוצר.
מאגר תגים
רכיב ה-HTML לעיבוד הווידג'ט של reCAPTCHA. מציינים את המזהה של הקונטיינר (מחרוזת) או של רכיב ה-DOM עצמו.
פרמטרים
אובייקט שמכיל פרמטרים בתור צמדי מפתח=ערך, לדוגמה, {"sitekey": "your_site_key", "theme": "light"}. מידע נוסף על הפרמטרים grecaptcha.render
קבלה בירושה
משתמשים במאפייני data-* הקיימים ברכיב אם הפרמטר התואם לא צוין. הפרמטרים יקבלו עדיפות על פני המאפיינים.
grecaptcha.execute(
opt_widget_id
) 		הפעלה פרוגרמטית של בדיקת reCAPTCHA. משמש אם reCAPTCHA הנסתר נמצא ב-div במקום בלחצן.
opt_widget_id
מזהה ווידג'ט אופציונלי, ברירת המחדל היא הווידג'ט הראשון שנוצר אם לא צוין.
grecaptcha.reset(
opt_widget_id
) 		איפוס הווידג'ט של reCAPTCHA.
opt_widget_id
  מזהה ווידג'ט אופציונלי. אם לא צוין מזהה, ברירת המחדל היא הווידג'ט הראשון שנוצר.
grecaptcha.getResponse(
opt_widget_id
) 		קבלת התגובה לווידג'ט של reCAPTCHA.
opt_widget_id
מזהה ווידג'ט אופציונלי, ברירת המחדל היא הווידג'ט הראשון שנוצר אם לא צוין.

דוגמאות

רינדור מפורש אחרי קריאה חוזרת (callback) של onload

<html>
  <head>
    <title>reCAPTCHA demo: Explicit render after an onload callback</title>
    <script>
        var onSubmit = function(token) {
          console.log('success!');
        };

        var onloadCallback = function() {
          grecaptcha.render('submit', {
            'sitekey' : 'your_site_key',
            'callback' : onSubmit
          });
        };
    </script>
  </head>
  <body>
    <form action="?" method="POST">
      <input id="submit" type="submit" value="Submit">
    </form>
    <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
        async defer>
    </script>
  </body>
</html>

הפעלת אתגר ה-reCAPTCHA הבלתי נראה אחרי האימות בצד הלקוח.

<html>
  <head>
  <script>
    function onSubmit(token) {
      alert('thanks ' + document.getElementById('field').value);
    }

    function validate(event) {
      event.preventDefault();
      if (!document.getElementById('field').value) {
        alert("You must add text to the required field");
      } else {
        grecaptcha.execute();
      }
    }

    function onload() {
      var element = document.getElementById('submit');
      element.onclick = validate;
    }
  </script>
  <script src="https://www.google.com/recaptcha/api.js" async defer></script>
  </head>
  <body>
    <form>
      Name: (required) <input id="field" name="field">
      <div id="recaptcha" class="g-recaptcha"
          data-sitekey="_your_site_key_"
          data-callback="onSubmit"
          data-size="invisible"></div>
      <button id="submit">submit</button>
    </form>
    <script>onload();</script>
  </body>
</html>