דף זה תורגם על ידי 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

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

מציינים את פונקציית הקריאה החוזרת onload. הפונקציה הזו תופעל אחרי שכל יחסי התלות ייטענו.
```
<script type="text/javascript">
  var onloadCallback = function() {
    alert("grecaptcha is ready!");
  };
</script>
```
מוסיפים את משאב ה-JavaScript, מגדירים את הפרמטר onload לשם של פונקציית הקריאה החוזרת 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 חייבת להיות מוגדר לפני טעינת ה-API של reCAPTCHA. כדי להבטיח שלא יהיו גזעים תנאים:
- יש להזמין את הסקריפטים קודם לקריאה חוזרת, ולאחר מכן ל-reCAPTCHA
- שימוש בפרמטרים async ו-defer בתגי 'script'

תצורה

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

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

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

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

ממשק API של JavaScript

שיטה	תיאור
`grecaptcha.render`( מאגר תגים, פרמטרים )	הקוד הזה יוצר את הווידג'ט בקונטיינר כווידג'ט של reCAPTCHA ומחזיר את המזהה של הווידג'ט החדש שנוצר. container רכיב ה-HTML להצגת הווידג'ט של reCAPTCHA. מציינים את המזהה של המאגר (מחרוזת) או את אלמנט ה-DOM עצמו. parameters אובייקט שמכיל פרמטרים כצמדי מפתח/ערך, לדוגמה, {"sitekey": "your_site_key", "theme": "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>