قراردادن چند کد امنیتی reCaptcha در یک صفحه

برای آشنایی با reCaptcha اینجا کلیک کنید

سیستم reCaptcha به صورت پیش‌فرض تنها از یک کد امنیتی در یک صفحه پشتیبانی می‌کند. در شرایط مختلف ممکن است بخواهیم از چند کد امنیتی در چند فرم که همگی در یک صفحه واقع شده‌اند استفاده کنیم.

فعال‌سازی reCaptcha به صورت ضمنی( Implicit ) یا اتوماتیک حاوی این محدودیت است و هنگام فعال‌سازی تنها اولین فیلد حاوی کد امنیتی فعال سازی می‌شود

راه حل

برای حل کردن این مشکل شیوه‌ی فعال‌سازی ضمنی یا Implicit را کنار می‌گذاریم و برای ساخت کد امنیتی از شیوه‌ی Explicit استفاده می‌کنیم.
هنگام درج اسکریپت reCaptcha درون یک صفحه، می‌توان نام یک تابع جاوااسکریپت را به عنوان پارامتر برای گوگل ارسال کرد تا پس از بارگزاری کامل اسکریپت، فراخوانی شود.
با تعریف تابعی در کدهای صفحه و اعلام نام آن به سیستم reCaptcha می‌توانیم پس از بارگزاری کامل، فیلدهای دلخواه خود را به تعداد نامحدود ایجاد کنیم.

ابتدا برای درج اسکریپت به جای شیوه‌ی معمول از کدی شبیه قطعه‌ی زیر استفاده می‌کنیم:

<script src="https://www.google.com/recaptcha/api.js?hl=fa&onload=CaptchaCallback&render=explicit"></script>

قطعه کد بالا، شیوه‌ی فعال‌سازی را صریح یا Explicit و نام تابع هدف را CaptchaCallback تعیین می‌کند.

function CaptchaCallback() {
	$( 'div.g-recaptcha' ).each( function() {
		var id = $( this ).attr( 'id' );
 
		if( ! id ) {
			id = getRandomId();
			$( this ).attr( 'id', id );
		}
 
		grecaptcha.render( id, {
			'sitekey' : '.................'
		} );
	} );
}
 
function getRandomId() {
	return 'amib_' + new Date().getTime() + Math.floor( Math.random() * 999999999 );
}

قطعه کد بالا، با استفاده از کتابخانه‌ی jQuery تمامی عنصرهای div که کلاس g-recaptcha داشته باشند را جستجو می‌کند. چنانچه هر یک از این عنصرها حاوی صفت id باشند، آن را بازیابی می‌کند و چنانچه فاقد آن باشند، یک id تصادفی برای آن مشخص می‌کند.
در مرحله‌ی بعد، با استفاده از دستور grecaptcha.render عنصر مورد نظر به کد امنیتی reCaptcha تبدیل می‌شود.
برای استفاده از قطعه کد بالا، فراموش نکنید که کلید API دریافت شده از گوگل را در محل مورد نظر مقابل دستور render درج کنید.