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.

  1. יש לציין את פונקציית הקריאה החוזרת onload. תתבצע קריאה לפונקציה הזו כאשר כל יחסי התלות נטענו.

    <script type="text/javascript">
  var onloadCallback = function() {
    alert("grecaptcha is ready!");
  };
</script>

  2. מוסיפים את משאב ה-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.

תצורה

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

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

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

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

ממשק API של JavaScript

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