reCAPTCHA גרסה 2

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

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

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

יש לעיין בקטע אימות תגובת המשתמש כדי לבדוק אם המשתמש פתר את ה-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 במפורש

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

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

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

  2. מוסיפים את המשאב של JavaScript, מגדירים את הפרמטר onload לשם של פונקציית הקריאה החוזרת (loadback) של טעינת המערכת ואת הפרמטר render ל-explicit.

    <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
    async defer>
</script>

    כשמתבצעת קריאה חוזרת (callback) אפשר להפעיל את השיטה grecaptcha.render ב-JavaScript API.

הגדרה

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

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

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

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

ממשק API של JavaScript

‏Method תיאור
grecaptcha.עיבוד(
מאגר,
פרמטרים
) 		יוצר את המאגר כווידג'ט reCAPTCHA ומחזיר את המזהה של הווידג'ט החדש שנוצר.
מאגר תגים
רכיב ה-HTML לעיבוד ה-Widget של reCAPTCHA. מציינים את המזהה של מאגר התגים (מחרוזת) או את רכיב ה-DOM עצמו.
פרמטרים
אובייקט שמכיל פרמטרים בתור צמדי מפתח/ערך, לדוגמה, {"sitekey": "your_site_key", "theme": "light"}. לעיון בפרמטרים של grecaptcha.render .
grecaptcha.reset (
מזהה_ווידג'ט
) 		מאפס את הווידג'ט של reCAPTCHA.
opt_Widget_id
מזהה אופציונלי של ווידג'ט, המוגדר כברירת מחדל לווידג'ט הראשון שנוצר אם לא צוין.
grecaptcha.getResponse(
מזהה_ווידג'ט
) 		קבלת התגובה לווידג'ט reCAPTCHA.
opt_Widget_id
מזהה אופציונלי של ווידג'ט, המוגדר כברירת מחדל לווידג'ט הראשון שנוצר אם לא צוין.

דוגמאות

עיבוד מפורש אחרי קריאה חוזרת (callback) בטעינה

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