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

reCAPTCHA בלתי נראה

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

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

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

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

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

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

השיטה הקלה ביותר לשימוש בווידג'ט ה-reCAPTCHA הבלתי נראה בדף היא לכלול את משאב ה-JavaScript הנדרש ולהוסיף כמה מאפיינים ללחצן ה-HTML. המאפיינים הנדרשים הם שם המחלקה 'g-recaptcha', מפתח האתר שלך במאפיין data-sitekey והשם של קריאה חוזרת של 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" ולהפעיל את הקריאה באופן פרוגרמטי.

יצירת 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();
```
כשהקריאה החוזרת תתבצע, אפשר לקרוא ל-method grecaptcha.render מ-JavaScript API.
יש להגדיר את פונקציית הקריאה החוזרת (callback) בטעינה לפני ש-reCAPTCHA API ייטען. כדי לוודא שאין מרוץ תהליכים:
- מזמינים את הסקריפטים קודם לקריאה חוזרת, ואז ל-reCAPTCHA
- להשתמש בפרמטרים 'async' ו-'defer' בתגי 'script'.

תצורה

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

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

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

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