توضح هذه الصفحة كيفية عرض أداة 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
. سيتم استدعاء هذه الدالة عند تحميل جميع التبعيات.<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
من واجهة برمجة تطبيقات JavaScript.
الإعدادات
معلَمات مورد JavaScript (api.js)
المعلمة | القيمة | الوصف |
---|---|---|
تحميل | اختياريّ. اسم دالة رد الاتصال المطلوب تنفيذها بعد تحميل جميع التبعيات. | |
عرض | تحميل صريح |
اختياريّ. ما إذا كان سيتم عرض الأداة بشكل صريح الإعدادات التلقائية للتحميل، والتي ستعرض الأداة في أول علامة g-recaptcha تعثر عليها. |
hl | راجع رموز اللغة | اختياريّ. لفرض عرض الأداة بلغة معينة. يكتشف تلقائيًا لغة المستخدم إذا لم يتم تحديده. |
سمات علامة g-recaptcha ومعلمات grecaptcha.render
سمة علامة g-recaptcha | معلمة grecaptcha.render | القيمة | الخيار التلقائي | الوصف |
---|---|---|---|---|
مفتاح موقع البيانات | مفتاح الموقع | مفتاح موقعك الإلكتروني. | ||
مظهر-البيانات | مظهر | ضوء داكن | ضوء | اختياريّ. مظهر اللون للأداة. |
حجم البيانات | size | صغير عادي | normal | اختياريّ. حجم الأداة. |
فهرس علامة تبويب البيانات | فهرس علامة التبويب | 0 | اختياريّ. فهرس علامة التبويب للأداة والتحدي. إذا كانت هناك عناصر أخرى في صفحتك تستخدم index.، ينبغي تعيينها لتسهيل تنقل المستخدم. | |
رد اتصال البيانات | معاودة الاتصال | اختياريّ. اسم دالة رد الاتصال، التي يتم تنفيذها عندما يرسل المستخدم استجابة ناجحة. يتمّ تمرير الرمز g-recaptcha-response إلى معاودة الاتصال. |
||
رد اتصال منتهي الصلاحية للبيانات | معاودة الاتصال منتهية الصلاحية | اختياريّ. اسم دالة رد الاتصال، التي يتم تنفيذها عند انتهاء صلاحية استجابة reCAPTCHA ويحتاج المستخدم إلى إعادة إثبات الملكية. | ||
رد اتصال خطأ البيانات | معاودة الاتصال بالخطأ | اختياريّ. اسم وظيفة رد الاتصال، والذي يتم تنفيذه عندما يواجه reCAPTCHA خطأ (عادةً ما يكون اتصال الشبكة) ولا يمكن المتابعة حتى تتم استعادة الاتصال. إذا حددت دالة هنا، فإنك مسؤول عن إبلاغ المستخدم بضرورة إعادة المحاولة. |
JavaScript API
الطريقة | الوصف |
---|---|
grecaptcha.render( أو الحاوية
المَعلَمات
|
لعرض الحاوية كأداة reCAPTCHA وعرض معرّف الأداة التي تم إنشاؤها حديثًا. حاوية عنصر HTML لعرض أداة reCAPTCHA. حدِّد رقم تعريف الحاوية (سلسلة) أو عنصر DOM نفسه. المعلّمات كائن يحتوي على معلّمات كأزواج المفتاح/القيمة، على سبيل المثال، {"sitekey": "your_site_key"، "theme": "light"}. راجع معلمات grecaptcha.render. |
grecaptcha.reset( ) #id_widget_id
)
|
لإعادة تعيين أداة reCAPTCHA. opt_widget_id معرّف الأداة الاختياري، ويتم ضبطه تلقائيًا على الأداة الأولى التي يتم إنشاؤها في حال عدم تحديدها. |
grecaptcha.getResponse( ) #id_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>