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

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

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

JavaScript API

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

أمثلة

المعالجة الصريحة بعد معاودة الاتصال في onload

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