این صفحه نحوه فعال کردن و سفارشی کردن reCAPTCHA نامرئی را در صفحه وب خود توضیح می دهد.
برای فراخوانی reCAPTCHA نامرئی، می توانید یکی از موارد زیر را انجام دهید:
- به طور خودکار چالش را به یک دکمه یا متصل کنید
- به صورت برنامهای چالش را به یک دکمه یا متصل کنید
- به صورت برنامه ای چالش را فراخوانی کنید
برای یادگیری نحوه سفارشی کردن reCAPTCHA نامرئی به تنظیمات مراجعه کنید. برای مثال، ممکن است بخواهید زبان یا مکان نشان را مشخص کنید.
برای بررسی اینکه آیا کاربر با موفقیت CAPTCHA را حل کرده است ، به تأیید پاسخ کاربر مراجعه کنید.
چالش را به صورت خودکار به یک دکمه متصل کنید
ساده ترین روش برای استفاده از ویجت reCAPTCHA نامرئی در صفحه شما این است که منابع جاوا اسکریپت لازم را در خود جای دهید و چند ویژگی به دکمه html خود اضافه کنید. ویژگی های لازم عبارتند از یک نام کلاس ' g-recaptcha
'، کلید سایت شما در ویژگی data-sitekey
، و نام یک callback جاوا اسکریپت برای انجام تکمیل کپچا در ویژگی 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 بارگیری شود و می تواند از هر نقطه ای از صفحه بدون محدودیت وارد شود.
چالش را به صورت برنامه ای به یک دکمه متصل کنید یا چالش را فراخوانی کنید.
به تعویق انداختن اتصال را می توان با مشخص کردن عملکرد پاسخ به تماس بارگذاری شده و افزودن پارامترها به منبع جاوا اسکریپت به دست آورد. این مانند چالش معمولی reCAPTCHA عمل می کند.
به صورت برنامه ای چالش را فراخوانی کنید.
فراخوانی تأیید reCAPTCHA به صورت برنامهای میتواند با رندر کردن چالش در یک div با ویژگی data-size="invisible"
و فراخوانی برنامهنویسی execute حاصل شود.
یک div با
data-size="invisible"
ایجاد کنید.<div class="g-recaptcha" data-sitekey="_your_site_key_" data-callback="onSubmit" data-size="invisible"> </div>
grecaptcha.execute را از روش جاوا اسکریپت فراخوانی کنید.
grecaptcha.execute();
هنگامی که پاسخ تماس شما اجرا می شود، می توانید متد
grecaptcha.render
را از JavaScript API فراخوانی کنید.
پیکربندی
پارامترهای منبع جاوا اسکریپت (api.js).
پارامتر | ارزش | توضیحات |
---|---|---|
onload | اختیاری. نام تابع پاسخ به تماس شما که باید پس از بارگیری همه وابستگی ها اجرا شود. | |
render | صریح در حال بارگذاری | اختیاری. اینکه آیا ویجت را به طور صریح رندر کنید. بهطور پیشفرض برای بارگذاری، که ویجت را در اولین تگ g-recaptcha که پیدا میکند، نمایش میدهد. |
hl | کدهای زبان را ببینید | اختیاری. ویجت را مجبور میکند به زبان خاصی ارائه شود. در صورت نامشخص بودن، زبان کاربر را به صورت خودکار تشخیص می دهد. |
ویژگی های تگ g-recaptcha و پارامترهای grecaptcha.render
ویژگی تگ g-recaptcha | پارامتر grecaptcha.render | ارزش | پیش فرض | توضیحات |
---|---|---|---|---|
data-sitekey | سایت کلید | کلید سایت شما | ||
data-badge | نشان | پایین سمت چپ به صورت خطی | سمت راست پایین | اختیاری. جای نشان reCAPTCHA را تغییر دهید. 'inline' به شما امکان می دهد آن را با CSS قرار دهید. |
data-size | اندازه | نامرئی | اختیاری. برای ایجاد یک ویجت نامرئی که به یک div متصل شده و به صورت برنامهریزی اجرا میشود استفاده میشود. | |
data-tabindex | tabindex | 0 | اختیاری. فهرست برگه چالش. اگر عناصر دیگر در صفحه شما از tabindex استفاده می کنند، باید آن را طوری تنظیم کنید که ناوبری کاربر را آسان تر کند. | |
data-callback | پاسخ به تماس | اختیاری. نام تابع پاسخ به تماس شما، که زمانی اجرا می شود که کاربر یک پاسخ موفقیت آمیز ارسال کند. رمز g-recaptcha-response به تماس شما ارسال می شود. | ||
data-expired-callback | منقضی شده است | اختیاری. نام تابع پاسخ به تماس شما که زمانی اجرا میشود که پاسخ reCAPTCHA منقضی شود و کاربر نیاز به تأیید مجدد دارد. | ||
data-error-callback | پاسخ به تماس خطا | اختیاری. نام تابع پاسخ به تماس شما، زمانی که reCAPTCHA با خطا مواجه میشود (معمولاً اتصال شبکه) اجرا میشود و تا زمانی که اتصال بازیابی نشود، نمیتواند ادامه یابد. اگر تابعی را در اینجا مشخص کنید، شما مسئول اطلاع دادن به کاربر هستید که باید دوباره تلاش کند. | ||
جدا شده | نادرست | اختیاری. برای اینکه صاحبان افزونه با نصب های موجود reCAPTCHA در یک صفحه تداخل نداشته باشند. اگر درست باشد، این نمونه reCAPTCHA بخشی از یک فضای ID جداگانه خواهد بود. |
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>