تمت ترجمة هذه الصفحة بواسطة 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 المصغّر بوضوح

يمكن تأجيل العرض من خلال تحديد دالة ردّ الاتصال onload وإضافة مَعلمات إلى مورد JavaScript.

حدِّد دالّة ردّ الاتصال onload. سيتم استدعاء هذه الدالة عند loading جميع الملحقات.
```
<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>
```
عند تنفيذ دالة ردّ الاتصال، يمكنك استدعاء grecaptcha.render method من JavaScript API.
يجب تحديد دالّة ردّ الاتصال onload قبل تحميل واجهة برمجة التطبيقات reCAPTCHA API. للتأكّد من عدم وجود أي قيود عرقية:
- اطلب نصوصك البرمجية مع طلب إعادة الاتصال أولاً، ثم 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`			مفتاح موقعك.
`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`			اختياريّ. تشير هذه السمة إلى اسم دالة معاودة الاتصال، ويتم تنفيذه عندما تواجه خدمة reCAPTCHA خطأ (عادةً ما تكون إمكانية الاتصال بالشبكة) ولا يمكنها المتابعة إلى أن تتم استعادة الاتصال. إذا حدَّدت دالة هنا، ستكون مسؤولاً عن إبلاغ المستخدم بضرورة إعادة المحاولة.

JavaScript API

الطريقة	الوصف
`grecaptcha.render`( وعاء المعلمات )	تعرِض هذه الوظيفة الحاوية كتطبيق reCAPTCHA مصغّر وتُعرِض معرّف التطبيق المصغّر الذي تم إنشاؤه حديثًا. container عنصر 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 رقم تعريف الأداة الاختياري، يتم ضبطه تلقائيًا على أول أداة تم إنشاؤها في حال عدم تحديده.

أمثلة

عرض صريح بعد استدعاء عند التحميل

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