تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

اختبار reCAPTCHA غير مرئي

تشرح هذه الصفحة كيفية تفعيل وتخصيص reCAPTCHA غير المرئي على صفحتك على الويب.

لاستدعاء اختبار reCAPTCHA غير المرئي، يمكنك إجراء أي مما يلي:

ربط التحدي تلقائيًا بزر أو
ربط التحدي برمجيًا بزر
استدعاء التحدي بشكل آلي

يمكنك الاطّلاع على الإعدادات للتعرّف على كيفية تخصيص reCAPTCHA غير المرئي. على سبيل المثال، يمكنك تحديد اللغة أو موقع الشارة.

راجع التحقُّق من رد المستخدم لمعرفة ما إذا كان المستخدم قد حل اختبار CAPTCHA بنجاح.

ربط التحدي تلقائيًا بزر

أسهل طريقة لاستخدام أداة reCAPTCHA غير المرئية على صفحتك هي تضمين مورد JavaScript الضروري وإضافة بعض السمات إلى زر html. إنّ السمات المطلوبة هي اسم الفئة "g-recaptcha"، ومفتاح موقعك الإلكتروني في السمة data-sitekey، واسم استدعاء JavaScript للتعامل مع إكمال اختبار CAPTCHA في السمة data-callback.

<html>
  <head>
    <title>reCAPTCHA demo: Simple page</title>
     <script src="https://www.google.com/recaptcha/api.js" async defer></script>
     <script>
       function onSubmit(token) {
         document.getElementById("demo-form").submit();
       }
     </script>
  </head>
  <body>
    <form id="demo-form" action="?" method="POST">
      <button class="g-recaptcha" data-sitekey="your_site_key" data-callback="onSubmit">Submit</button>
      <br/>
    </form>
  </body>
</html>

يجب تحميل النص البرمجي باستخدام بروتوكول HTTPS ويمكن تضمينه من أي نقطة على الصفحة بدون قيود.

اربط التحدي برمجيًا بزر أو استدعِ التحدي.

يمكن تأجيل عملية الربط من خلال تحديد دالة رد الاتصال onload وإضافة معلَمات إلى مورد JavaScript. ويعمل هذا الاختبار بالطريقة نفسها التي يعمل بها تحدي reCAPTCHA العادي.

استدعيت التحدي بطريقة آلية.

يمكن استدعاء اختبار reCAPTCHA آليًا من خلال عرض التحدي في div مع سمة data-size="invisible" وتنفيذ الاستدعاء آليًا.

إنشاء قسم div باستخدام data-size="invisible".

<div class="g-recaptcha"
      data-sitekey="_your_site_key_"
      data-callback="onSubmit"
      data-size="invisible">
</div>

يمكنك استدعاء grecaptcha.execute من طريقة JavaScript.
```
grecaptcha.execute();
```
عند تنفيذ عملية معاودة الاتصال، يمكنك استدعاء الطريقة grecaptcha.render من JavaScript API.
يجب تحديد دالة استدعاء onload قبل تحميل reCAPTCHA API. للتأكّد من عدم وجود شروط للسباق:
- ترتيب النصوص البرمجية مع معاودة الاتصال أولاً، ثم reCAPTCHA
- استخدام المعلمتين `async` و `defer` في علامات `script`

الإعداد

معلمات مورد JavaScript (api.js)

المعلمة	القيمة	الوصف
Onload		اختياريّ. اسم دالة معاودة الاتصال الذي سيتم تنفيذه بمجرد تحميل جميع التبعيات.
عرض	explicit onload	اختياريّ. تحديد ما إذا كان سيتم عرض الأداة بشكل صريح يتم ضبط الإعدادات التلقائية على onload، ما يؤدي إلى عرض الأداة في أول علامة `g-recaptcha` يتم العثور عليها.
hl	الاطّلاع على رموز اللغات	اختياريّ. تفرض هذه السياسة عرض الأداة بلغة معيّنة. ترصد هذه الميزة لغة المستخدم تلقائيًا في حال عدم تحديدها.

سمات علامة g-recaptcha ومعلمات grecaptcha.render

سمة علامة g-recaptcha	المَعلمة grecaptcha.render	القيمة	تلقائي	الوصف
data-sitekey	مفتاح الموقع			مفتاح موقعك.
شارة البيانات	شارة	مضمَّن في أسفل يسار الشاشة	أسفل اليمين	اختياريّ. غيِّر موضع شارة reCAPTCHA. "مضمّنة" يتيح لك تحديد موضعه باستخدام CSS
حجم البيانات	الحجم	غير مرئي		اختياريّ. يُستخدم لإنشاء تطبيق مصغّر غير مرئي مرتبط بـ div ويتم تنفيذه آليًا.
data-tabindex	فهرس Tab		0	اختياريّ. فهرس Tab للتحدي. إذا كانت العناصر الأخرى في صفحتك تستخدم علامة Tabindex، يجب ضبطها لتسهيل التنقّل بين المستخدمين.
data-callback	رد الاتصال			اختياريّ. اسم دالة معاودة الاتصال، ويتم تنفيذه عندما يرسل المستخدم ردًا ناجحًا. يتم تمرير الرمز المميّز `g-recaptcha-response` إلى معاودة الاتصال.
data-expired-callback	expired-callback			اختياريّ. تشير هذه السمة إلى اسم دالة معاودة الاتصال، ويتم تنفيذه عند انتهاء صلاحية استجابة reCAPTCHA وحاجة المستخدم إلى إعادة إثبات الملكية.
data-error-callback	خطأ في الاتصال			اختياريّ. تشير هذه السمة إلى اسم دالة معاودة الاتصال، ويتم تنفيذه عندما تواجه خدمة reCAPTCHA خطأ (عادةً ما تكون إمكانية الاتصال بالشبكة) ولا يمكنها المتابعة إلى أن تتم استعادة الاتصال. إذا حدَّدت دالة هنا، ستكون مسؤولاً عن إبلاغ المستخدم بضرورة إعادة المحاولة.
	معزولة		خطأ	اختياريّ. لكي لا يتداخل مالكو المكوّنات الإضافية مع عمليات تثبيت reCAPTCHA الحالية على الصفحة. إذا كانت القيمة هي true، ستكون نسخة reCAPTCHA هذه جزءًا من مساحة رقم تعريف منفصلة.

JavaScript API

الطريقة	الوصف
grecaptcha.render( وعاء والمعلَمات موروث )	يعرض الحاوية كتطبيق مصغّر reCAPTCHA ويعرض معرّف التطبيق المصغّر الذي تم إنشاؤه حديثًا. حاوية عنصر HTML لعرض تطبيق reCAPTCHA المصغّر. حدِّد معرّف الحاوية (سلسلة) أو عنصر DOM نفسه. المَعلمات كائن يحتوي على معلَمات كأزواج المفتاح/القيمة، مثل {"sitekey": "your_site_key", "theme": "light"}. اطّلِع على مَعلمات grecaptcha.render. اكتساب استخدِم سمات data-* الحالية على العنصر إذا لم يتم تحديد المَعلمة المقابلة. وسيكون للمعلَمات الأولوية على السمات.
grecaptcha.execute( opt_widget_id )	استدعاء اختبار reCAPTCHA آليًا. يتم استخدامه إذا كان reCAPTCHA غير المرئي على div بدلاً من زر. opt_widget_id رقم تعريف الأداة الاختياري، يتم ضبطه تلقائيًا على أول تطبيق مصغّر يتم إنشاؤه في حال عدم تحديده.
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>
        var onSubmit = function(token) {
          console.log('success!');
        };

        var onloadCallback = function() {
          grecaptcha.render('submit', {
            'sitekey' : 'your_site_key',
            'callback' : onSubmit
          });
        };
    </script>
  </head>
  <body>
    <form action="?" method="POST">
      <input id="submit" type="submit" value="Submit">
    </form>
    <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
        async defer>
    </script>
  </body>
</html>

استدعاء اختبار reCAPTCHA غير المرئي بعد عملية التحقّق من جهة العميل.

<html>
  <head>
  <script>
    function onSubmit(token) {
      alert('thanks ' + document.getElementById('field').value);
    }

    function validate(event) {
      event.preventDefault();
      if (!document.getElementById('field').value) {
        alert("You must add text to the required field");
      } else {
        grecaptcha.execute();
      }
    }

    function onload() {
      var element = document.getElementById('submit');
      element.onclick = validate;
    }
  </script>
  <script src="https://www.google.com/recaptcha/api.js" async defer></script>
  </head>
  <body>
    <form>
      Name: (required) <input id="field" name="field">
      <div id="recaptcha" class="g-recaptcha"
          data-sitekey="_your_site_key_"
          data-callback="onSubmit"
          data-size="invisible"></div>
      <button id="submit">submit</button>
    </form>
    <script>onload();</script>
  </body>
</html>