Tích hợp reCaptcha của Google vào project ASP.NET Core MVC

Chắc hẳn các bạn không còn quá lạ lẫm với với từ "CAPTCHA", chúng có ở khắp mọi nơi, là trợ thủ đắc lực của các trang web, nó giúp cho những website có chức năng đăng ký, hoặc nhận dữ liệu người dùng từ Form, để tránh việc bị spam đăng ký và ddos làm ảnh hưởng xấu đến website.

Hướng dẫn đăng ký reCaptcha

Bước 1: Trước tiên các bạn vào link sau: https://www.google.com/recaptcha/admin/create. Sau đó một form hiện ra và tiến hành nhập thông tin như hình dưới:

Bước 2: Các bạn lưu 2 mã (Site key, secret key) này lại:

Hướng dẫn tích hợp reCaptcha vào project ASP.NET Core MVC

Bước 1: Các bạn tạo mới project ASP.NET Core Web Application (mình dùng Core 3.1), đặt tên là reCaptcha.Demo

Bước 2: Trong reCaptcha.Demo.Models tạo mới class tên là ValidateReCaptchaAttribute.cs và thêm code sau:

using Microsoft.AspNetCore.Mvc.Filters;
using Microsoft.Extensions.Configuration;
using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Net.Http;
using System.Threading.Tasks;

namespace reCaptcha.Demo.Models
{
    public class ValidateReCaptchaAttribute : ActionFilterAttribute
    {
        public const string ReCaptchaModelErrorKey = "ReCaptcha";
        private const string RecaptchaResponseTokenKey = "g-recaptcha-response";
        private const string ApiVerificationEndpoint = "https://www.google.com/recaptcha/api/siteverify";
        private readonly IConfiguration m_configuration;
        private readonly Lazy<string> m_reCaptchaSecret;
        public ValidateReCaptchaAttribute(IConfiguration configuration)
        {
            if (configuration == null)
            {
                throw new ArgumentNullException("configuration");
            }
            this.m_configuration = configuration;
            this.m_reCaptchaSecret = new Lazy<string>(() => m_configuration["ReCaptcha:Secret"]);
        }
        public override async Task OnActionExecutionAsync(ActionExecutingContext context, ActionExecutionDelegate next)
        {
            await DoReCaptchaValidation(context);
            await base.OnActionExecutionAsync(context, next);
        }
        private async Task DoReCaptchaValidation(ActionExecutingContext context)
        {
            if (!context.HttpContext.Request.HasFormContentType)
            {
                // Get request? 
                AddModelError(context, "No reCaptcha Token Found");
                return;
            }
            string token = context.HttpContext.Request.Form[RecaptchaResponseTokenKey];
            if (string.IsNullOrWhiteSpace(token))
            {
                AddModelError(context, "No reCaptcha Token Found");
            }
            else
            {
                await ValidateRecaptcha(context, token);
            }
        }
        private static void AddModelError(ActionExecutingContext context, string error)
        {
            context.ModelState.AddModelError(ReCaptchaModelErrorKey, error.ToString());
        }
        private async Task ValidateRecaptcha(ActionExecutingContext context, string token)
        {
            using (var webClient = new HttpClient())
            {
                var content = new FormUrlEncodedContent(new[]
                {
                        new KeyValuePair<string, string>("secret", this.m_reCaptchaSecret.Value),
                        new KeyValuePair<string, string>("response", token)
                    });
                HttpResponseMessage response = await webClient.PostAsync(ApiVerificationEndpoint, content);
                string json = await response.Content.ReadAsStringAsync();
                var reCaptchaResponse = JsonConvert.DeserializeObject<ReCaptchaResponse>(json);
                if (reCaptchaResponse == null)
                {
                    AddModelError(context, "Unable To Read Response From Server");
                }
                else if (!reCaptchaResponse.success)
                {
                    AddModelError(context, "Invalid reCaptcha");
                }
            }
        }
    }
    public class ReCaptchaResponse
    {
        public bool success { get; set; }
        public string challenge_ts { get; set; }
        public string hostname { get; set; }
        public string[] errorcodes { get; set; }
    }
}

Bước 3: Trong Controllers.HomeControllers.cs thêm mới phương thức sau:

        [HttpPost]
        [ServiceFilter(typeof(ValidateReCaptchaAttribute))]
        public IActionResult DemoRecaptcha()
        {
            if (ModelState.IsValid)
            {
                @ViewData["Message"] = "Model valid";
            }
            else
            {
                @ViewData["Message"] = "Invalid!!!";
            }
            return View();
        }

Bước 4: Add view cho phương thức vừa rồi trong Views.Home.DemoRecaptcha.cs như sau:

@ViewData["Message"]

Bước 5: Add view Views.Home.Index.cs như sau:

@inject Microsoft.Extensions.Configuration.IConfiguration configuration
@{
    ViewData["Title"] = "reCaptcha Demo";
}
@using (Html.BeginForm("DemoRecaptcha", "Home", FormMethod.Post))
{

    <div class="g-recaptcha" data-sitekey="@(configuration["ReCaptcha:SiteKey"])"></div>
    <br>
    <input type="submit" value="Submit" />
}
@section Scripts {
    <script src='https://www.google.com/recaptcha/api.js'></script>
}

Bước 6: Chúng ta tiến hành config site key trong appsettings.json như sau:

{
  "ConnectionStrings": {
    "DefaultConnection": "Server=CNPM-PC\\SQLEXPRESS;Database=reCaptchaDemo;Trusted_Connection=True;MultipleActiveResultSets=true"
  },
  "Logging": {
    "IncludeScopes": false,
    "LogLevel": {
      "Default": "Debug",
      "System": "Information",
      "Microsoft": "Information"
    }
  },
  "ReCaptcha:SiteKey": "6Le9JewUAAAAAHMYtBih8GDoSJBHx3PAAuqRwR0K"
}

Các bạn cần thay đổi:

• Server=CNPM-PC\\SQLEXPRESS → thành tên server của bạn
• Database=reCaptchaDemo → thành tên database bạn muốn kết nối
• Thay đổi ReCaptcha:SiteKey của bạn ở Bước 1.

Bước 7: Cuối cùng, các bạn vào reCaptchaDemo.Startup tìm đến phương thức ConfigureServices và thêm:

services.AddSingleton<IConfigurationRoot>(Configuration);
services.AddSingleton<IConfiguration>(Configuration);
services.AddScoped<ValidateReCaptchaAttribute>();

Bước 8: Các bạn build project và chạy lên xem kết quả:

Lời kết

Đây là ví dụ mẫu, mình chưa thực hiện với các form chưa các entites, nhưng để làm điều ấy rất đơn giản và tương tự. Mình sẽ hướng dẫn ở các bài sau.

Xem chi tiết hơn hướng dẫn bằng tiếng Anh với nguồn code tham khảo dưới đây:

http://the-coderok.azurewebsites.net/2016/07/09/reCaptcha-validation-in-ASP-NET-MVC-Core/

Vậy là xong, hy vọng những gì mình chia sẻ có thể giúp ích cho các bạn.

Chúc các bạn thành công.

By Hiếu Quốc

Có lẽ bạn thích?