דף זה תורגם על ידי Cloud Translation API.

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 וניתן לכלול אותו מכל נקודה בדף ללא הגבלה.

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

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

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

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

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

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

צריך לקרוא ל-grecaptcha.execute משיטת JavaScript.
```
grecaptcha.execute();
```
לאחר ביצוע הקריאה החוזרת (callback), אפשר להפעיל את השיטה grecaptcha.render מתוך JavaScript API.
צריך להגדיר את פונקציית הקריאה החוזרת (callback) של onload לפני הטעינה של reCAPTCHA API. כדי לוודא שאין תנאי מרוץ:
- לסדר את הסקריפטים קודם עם הקריאה החוזרת (callback) ואז reCAPTCHA
- להשתמש בפרמטרים 'async' ו-'defer' בתגי 'script'

הגדרות אישיות

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

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

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

מאפיין תג g-recaptcha	הפרמטר grecaptcha.render	Value	ברירת המחדל	התיאור
מפתח-אתר לנתונים	מפתח אתרים			מפתח האתר שלך.
תג נתונים	תג	ימין למטה בתוך השורה	צד ימין למטה	אפשרות. ממקמים מחדש את תג ה-reCAPTCHA. 'inline' מאפשר את המיקום שלו באמצעות CSS.
data-size	size [מידה]	מוסתר		אפשרות. משמש ליצירת ווידג'ט בלתי נראה המאוגד ל-div ומבוצע באופן פרוגרמטי.
data-tabindex	Tabindex		0	אפשרות. הכרטיסייה של האתגר. אם רכיבים אחרים בדף משתמשים ב-Tabindex, צריך להגדיר אותה כדי להקל על הניווט של המשתמש.
קריאה חוזרת (callback) של חבילת הגלישה	קריאה חוזרת (callback)			אפשרות. השם של פונקציית הקריאה החוזרת, שמופעל כשהמשתמש שולח תגובה מוצלחת. האסימון `g-recaptcha-response` מועבר אל הקריאה החוזרת.
פקיעת תוקף הנתונים על קריאה חוזרת (callback)	קריאה חוזרת (callback) שפג תוקפה			אפשרות. השם של פונקציית הקריאה החוזרת (callback), שמתבצע כשפג התוקף של תגובת ה-reCAPTCHA והמשתמש צריך לבצע אימות מחדש.
data-error-callback	שגיאת קריאה חוזרת (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)

<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>