این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

reCAPTCHA v2، reCAPTCHA v2

این صفحه نحوه نمایش و سفارشی کردن ویجت reCAPTCHA v2 را در صفحه وب خود توضیح می دهد.

برای نمایش ویجت، می توانید یکی از موارد زیر را انجام دهید:

رندر خودکار ویجت یا
ویجت را به صراحت رندر کنید

برای یادگیری نحوه سفارشی کردن ویجت خود به تنظیمات مراجعه کنید. برای مثال، ممکن است بخواهید زبان یا طرح زمینه را برای ویجت مشخص کنید.

برای بررسی اینکه آیا کاربر با موفقیت CAPTCHA را حل کرده است، به تأیید پاسخ کاربر مراجعه کنید.

ویجت reCAPTCHA به صورت خودکار ارائه شود

ساده ترین روش برای رندر کردن ویجت reCAPTCHA در صفحه شما، گنجاندن منبع جاوا اسکریپت لازم و یک تگ 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 را به صراحت رندر کنید

به تعویق انداختن رندر را می توان با مشخص کردن عملکرد پاسخ به تماس بارگیری و افزودن پارامترها به منبع جاوا اسکریپت به دست آورد.

عملکرد پاسخ به تماس onload خود را مشخص کنید. این تابع زمانی فراخوانی می شود که همه وابستگی ها بارگذاری شوند.
```
<script type="text/javascript">
  var onloadCallback = function() {
    alert("grecaptcha is ready!");
  };
</script>
```
منبع جاوا اسکریپت را وارد کنید، پارامتر onload را به نام تابع پاسخ به تماس onload خود و پارامتر render را به explicit تنظیم کنید.
```
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
    async defer>
</script>
```
هنگامی که پاسخ تماس شما اجرا می شود، می توانید متد grecaptcha.render را از JavaScript API فراخوانی کنید.
قبل از بارگیری API reCAPTCHA، عملکرد پاسخ به تماس onload شما باید تعریف شود. برای اطمینان از عدم وجود شرایط مسابقه:
- ابتدا اسکریپت های خود را با پاسخ به تماس و سپس reCAPTCHA سفارش دهید
- از پارامترهای async و defer در تگ‌های «اسکریپت» استفاده کنید

پیکربندی

پارامترهای منبع جاوا اسکریپت (api.js).

پارامتر	ارزش	شرح
در حال بارگذاری		اختیاری. نام تابع پاسخ به تماس شما که باید پس از بارگیری همه وابستگی ها اجرا شود.
ارائه دادن	صریح در حال بارگذاری	اختیاری. اینکه آیا ویجت را به طور صریح رندر کنید. به‌طور پیش‌فرض برای بارگذاری، که ویجت را در اولین تگ `g-recaptcha` که پیدا می‌کند، نمایش می‌دهد.
hl	کدهای زبان را ببینید	اختیاری. ویجت را مجبور می‌کند به زبان خاصی ارائه شود. در صورت نامشخص بودن، زبان کاربر را به صورت خودکار تشخیص می دهد.

ویژگی های تگ g-recaptcha و پارامترهای grecaptcha.render

ویژگی تگ g-recaptcha	پارامتر grecaptcha.render	ارزش	پیش فرض	شرح
داده-سایت کلید	سایت کلید			کلید سایت شما
موضوع داده	موضوع	نور تاریک	سبک	اختیاری. تم رنگی ویجت.
اندازه داده	اندازه	فشرده معمولی	طبیعی	اختیاری. اندازه ویجت.
داده tabindex	tabindex		0	اختیاری. فهرست برگه ویجت و چالش. اگر عناصر دیگر در صفحه شما از tabindex استفاده می کنند، باید آن را طوری تنظیم کنید که ناوبری کاربر را آسان تر کند.
داده برگشت به تماس	پاسخ به تماس			اختیاری. نام تابع پاسخ به تماس شما، که زمانی اجرا می شود که کاربر یک پاسخ موفقیت آمیز ارسال کند. نشانه `g-recaptcha-response` به تماس شما ارسال می شود.
data-expired-callback	منقضی شده است			اختیاری. نام تابع پاسخ به تماس شما که زمانی اجرا می‌شود که پاسخ reCAPTCHA منقضی شود و کاربر نیاز به تأیید مجدد دارد.
داده-خطا-بازخوانی	پاسخ به تماس خطا			اختیاری. نام تابع پاسخ به تماس شما، زمانی که reCAPTCHA با خطا مواجه می‌شود (معمولاً اتصال به شبکه) اجرا می‌شود و نمی‌تواند تا زمانی که اتصال بازیابی شود ادامه یابد. اگر تابعی را در اینجا مشخص کنید، شما مسئول اطلاع دادن به کاربر هستید که باید دوباره تلاش کند.

JavaScript API

روش	شرح
grecaptcha ارائه ( ظرف، مولفه های )	ظرف را به‌عنوان ویجت reCAPTCHA ارائه می‌کند و شناسه ویجت جدید ایجاد شده را برمی‌گرداند. ظرف عنصر HTML برای رندر کردن ویجت reCAPTCHA. شناسه کانتینر (رشته) یا خود عنصر DOM را مشخص کنید. مولفه های یک شی حاوی پارامترهایی به عنوان جفت کلید=مقدار، برای مثال، {"sitekey": "your_site_key"، "theme": "light"}. پارامترهای grecaptcha.render را ببینید .
grecaptcha تنظیم مجدد ( opt_widget_id )	ویجت reCAPTCHA را بازنشانی می کند. opt_widget_id شناسه ویجت اختیاری، در صورت نامشخص بودن، روی اولین ویجت ایجاد شده پیش‌فرض می‌شود.
grecaptcha getResponse ( opt_widget_id )	پاسخ ویجت reCAPTCHA را دریافت می کند. opt_widget_id شناسه ویجت اختیاری، در صورت نامشخص بودن، روی اولین ویجت ایجاد شده پیش‌فرض می‌شود.

مثال ها

رندر صریح پس از پاسخ به تماس در بارگذاری

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