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

reCAPTCHA גרסה 2

בדף הזה מוסבר איך להציג ולהתאים אישית את הווידג'ט של reCAPTCHA גרסה 2 בדף האינטרנט.

כדי להציג את הווידג'ט, אפשר:

עיבוד אוטומטי של הווידג'ט או
עיבוד הווידג'ט באופן מפורש

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

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

רינדור אוטומטי של הווידג'ט של reCAPTCHA

השיטה הקלה ביותר לעיבוד הווידג'ט של reCAPTCHA בדף שלכם היא לכלול את משאב ה-JavaScript הנדרש ותג g-recaptcha. התג g-recaptcha הוא רכיב DIV עם שם המחלקה g-recaptcha ומפתח האתר שלכם במאפיין data-sitekey:

<html>
  <head>
    <title>reCAPTCHA demo: Simple page</title>
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
  </head>
  <body>
    <form action="?" method="POST">
      <div class="g-recaptcha" data-sitekey="your_site_key"></div>
      <br/>
      <input type="submit" value="Submit">
    </form>
  </body>
</html>

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

רינדור מפורש של הווידג'ט של reCAPTCHA

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

יש לציין את פונקציית הקריאה החוזרת onload. הפונקציה הזו תופעל לאחר שכל יחסי התלות ייטענו.
```
<script type="text/javascript">
  var onloadCallback = function() {
    alert("grecaptcha is ready!");
  };
</script>
```
מוסיפים את משאב ה-JavaScript, מגדירים את הפרמטר onload לשם של פונקציית הקריאה החוזרת של הטעינה ואת הפרמטר render כ-explicit.
```
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
    async defer>
</script>
```
כשהקריאה החוזרת מבוצעת, אפשר לקרוא ל-method grecaptcha.render מ-JavaScript API.
צריך להגדיר את פונקציית הקריאה החוזרת onload לפני ש-reCAPTCHA API נטען. כדי לוודא שאין מרוץ תהליכים:
- יש להזמין את הסקריפטים קודם לקריאה חוזרת, ואז ל-reCAPTCHA
- שימוש בפרמטרים async ו-defer בתגי 'script'

הגדרות

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

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

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

מאפיין תג g-recaptcha	הפרמטר grecaptcha.render	ערך של Gpa education	ברירת המחדל	תיאור
מפתח אתר נתונים	מפתח אתר			מפתח האתר שלכם.
נושא הנתונים	עיצוב	בהיר כהה	קל	זה שינוי אופציונלי. ערכת הצבעים של הווידג'ט.
data-size	size	רגיל קומפקטי	רגילה	זה שינוי אופציונלי. גודל הווידג'ט.
אינדקס כרטיסיות נתונים	אינדקס טאבים		0	זה שינוי אופציונלי. אינדקס הכרטיסיות של הווידג'ט והאתגר. אם רכיבים אחרים בדף משתמשים במאפיין tabindex, צריך להגדיר אותו כדי להקל על הניווט של המשתמשים.
קריאה חוזרת לנתונים	קריאה חוזרת (callback)			זה שינוי אופציונלי. השם של פונקציית הקריאה החוזרת, שמופעלת כשהמשתמש שולח תגובה מוצלחת. האסימון `g-recaptcha-response` מועבר לקריאה החוזרת (callback).
תפוגת תוקף נתונים (callback)	פג התוקף של הקריאה החוזרת			זה שינוי אופציונלי. השם של פונקציית הקריאה החוזרת, שמופעלת כשפג תוקף התשובה של reCAPTCHA והמשתמש צריך לבצע אימות מחדש.
קריאה חוזרת (callback) של שגיאת נתונים	שגיאה בקריאה חוזרת			זה שינוי אופציונלי. השם של פונקציית הקריאה החוזרת, שמופעלת כש-reCAPTCHA נתקל בשגיאה (בדרך כלל קישוריות רשת) ולא יכול להמשיך עד שהקישוריות תתחדש. אם אתה מציין פונקציה כאן, באחריותך ליידע את המשתמש שעליו לנסות שוב.

ממשק API של JavaScript

שיטה	תיאור
grecaptcha.render( מאגר, פרמטרים )	הפונקציה מציגה את הקונטיינר כווידג'ט של reCAPTCHA ומחזירה את המזהה של הווידג'ט החדש שנוצר. קונטיינר רכיב ה-HTML לעיבוד הווידג'ט של reCAPTCHA. צריך לציין את המזהה של הקונטיינר (מחרוזת) או של רכיב ה-DOM עצמו. פרמטרים אובייקט שמכיל פרמטרים בתור צמדי מפתח=ערך, לדוגמה, {"sitekey": "your_site_key", "עיצוב": "light"}. מידע נוסף על הפרמטרים grecaptcha.render
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 type="text/javascript">
      var onloadCallback = function() {
        grecaptcha.render('html_element', {
          'sitekey' : 'your_site_key'
        });
      };
    </script>
  </head>
  <body>
    <form action="?" method="POST">
      <div id="html_element"></div>
      <br>
      <input type="submit" value="Submit">
    </form>
    <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
        async defer>
    </script>
  </body>
</html>

עיבוד מפורש של מספר ווידג'טים

<html>
  <head>
    <title>reCAPTCHA demo: Explicit render for multiple widgets</title>
    <script type="text/javascript">
      var verifyCallback = function(response) {
        alert(response);
      };
      var widgetId1;
      var widgetId2;
      var onloadCallback = function() {
        // Renders the HTML element with id 'example1' as a reCAPTCHA widget.
        // The id of the reCAPTCHA widget is assigned to 'widgetId1'.
        widgetId1 = grecaptcha.render('example1', {
          'sitekey' : 'your_site_key',
          'theme' : 'light'
        });
        widgetId2 = grecaptcha.render(document.getElementById('example2'), {
          'sitekey' : 'your_site_key'
        });
        grecaptcha.render('example3', {
          'sitekey' : 'your_site_key',
          'callback' : verifyCallback,
          'theme' : 'dark'
        });
      };
    </script>
  </head>
  <body>
    <!-- The g-recaptcha-response string displays in an alert message upon submit. -->
    <form action="javascript:alert(grecaptcha.getResponse(widgetId1));">
      <div id="example1"></div>
      <br>
      <input type="submit" value="getResponse">
    </form>
    <br>
    <!-- Resets reCAPTCHA widgetId2 upon submit. -->
    <form action="javascript:grecaptcha.reset(widgetId2);">
      <div id="example2"></div>
      <br>
      <input type="submit" value="reset">
    </form>
    <br>
    <!-- POSTs back to the page's URL upon submit with a g-recaptcha-response POST parameter. -->
    <form action="?" method="POST">
      <div id="example3"></div>
      <br>
      <input type="submit" value="Submit">
    </form>
    <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
        async defer>
    </script>
  </body>
</html>