استفاده از Google reCAPTCHA در پروژه

برای استفاده از کپچا در پروژه بسته های مختلفی در nuget هستند، ولی بدون استفاده از پکیج های خارجی هم این امکان وجود دارد.

1. ابتدا وارد سایت گوگل رکپچا از این لینک بشید، سپس آدرس سایت و ورژن کپچایی که برای پروژه رو ثبت کنید (لوکال هاست هم قبول میکنه) و سعی کنید از یک قند شکن خوب استفاده کنید.

در این نمونه از نسخه 3 گوگل رکپچا استفاده کردیم.

2. سایت به ما SiteKey و SecretKey رو میده که بهتره این کلید ها رو توی Appsettings.Development.json قرار بگیره

"googleReCaptcha:SiteKey": "",
"googleReCaptcha:SecretKey": ""

3. بسته زیر رو نصب می‌کنیم:

Install-Package GoogleReCaptcha.V3

4. وارد لایه IoC یا Program.cs میشیم و این بسته رو به برنامه معرفی می‌کنیم:

builder.Services.AddHttpClient<ICaptchaValidator, GoogleReCaptchaValidator>();

5. Partial View جدید اضافه میکنیم تا صفحاتی که به کپچا نیاز داریم نیاز به نوشتن کد تکراری نباشه

@inject IConfiguration Configuration

<script src="https://www.google.com/recaptcha/api.js?render=@(Configuration["googleReCaptcha:SiteKey"])"></script>

<script>
    grecaptcha.ready(function() {
        window.grecaptcha.execute('@(Configuration["googleReCaptcha:SiteKey"])', { action: 'home' }).then(function (token) {
            $("#Captcha").val(token);
        });
    });
</script>

6. همین طور یک ViewModel جدید ایجاد میکنیم تا فرم هایی که نیاز به کپچا دارند از همین ViewModel ارثبری کنند.

public class CaptchaViewModel
{
    public string Captcha { get; set; }
}

به طور مثال

public class RegisterViewModel : CaptchaViewModel
{
    // properties
}

7. در هر View که قصد داریم از کپچا استفاده کنیم، خط زیر رو باید در درون تگ فرم قرار بدیم:

<input type="hidden" asp-for="Captcha" />

در سکشن scripts همان ویو، Partial View که در بالا ساختیم را باید رفرنس بدیم:

<partial name="_CaptchaScripts" />

8. در آخر فقط کافیه فقط موقع بررسی مقادیر در زمان ثبت، با این کد اعتبارسنجی انجام بدیم:

public class AccountController(ICaptchaValidator captchaValidator) : Controller
{
	[HttpPost("Register"),ValidateAntiForgeryToken]
	public async Task<IActionResult> Register(RegisterViewModel model)
	{

		if (await captchaValidator.IsCaptchaPassedAsync(model.Captcha))
    	{
    		ModelState.AddModelError(string.Empty, "اعتبار سنجی کپچا با خطا مواجه شد.");
        	return View(model);
    	}
}