How to create captcha in asp.net core Asp.net Mvc 6?

Question

I am developing an asp.net MVC 6 application in the asp.net core and I want to create a captcha for my login page. in previous .net frameworks I used system.drawing to create a captcha, but since we don’t have system.drawing in the core of framework.net, how can I achieve this?

one solution should reference the complete .net infrastructure, but that is not what I want. I want to use the basic structure.

the other is to create a project with .net framework 6 and Mvc 5 and use the web api to get the captcha image, but also this is not what I want.

is there any other solution?

Answer 1

I made a wrapper for recaptcha that works with aspnetcore, check https://www.nuget.org/packages/PaulMiami.AspNetCore.Mvc.Recaptcha , and there is some documentation at https://github.com/PaulMiami/reCAPTCHA/wiki / Getting-started

In short, you need to do the following:

• Configure the service in your Startup class.

public void ConfigureServices(IServiceCollection services) { services.AddMvc(); services.AddRecaptcha(new RecaptchaOptions { SiteKey = Configuration["Recaptcha:SiteKey"], SecretKey = Configuration["Recaptcha:SecretKey"] }); } 

2. In the file "_ViewImports.cshtml" add.

 @addTagHelper *, PaulMiami.AspNetCore.Mvc.Recaptcha 

3. In your opinion.

 <form asp-controller="Home" asp-action="Index" method="post"> <recaptcha /> <input type="submit" value="submit" /> </form> @section Scripts { <recaptcha-script /> } 

4. In your controller.

 [ValidateRecaptcha] [HttpPost] public IActionResult Index(YourViewModel viewModel) { if (ModelState.IsValid) { return new OkResult(); } return View(); } 

Answer 2

I implemented Recaptcha in my main ASP.NET applications. In my account:

 @if (Model.RecaptchaSiteKey.Length > 0) { <script src='https://www.google.com/recaptcha/api.js'></script> } @if (Model.RecaptchaSiteKey.Length > 0) { <div class="form-group"> <div class="col-md-offset-2 col-md-10"> <div class="g-recaptcha" data-sitekey="@Model.RecaptchaSiteKey"></div> @Html.ValidationMessage("recaptchaerror", new { @class = "text-danger" }) </div> </div> } 

I implemented the extension method on the controller so that I can easily check the captcha server side from any controller where I use it.

 public static async Task<RecaptchaResponse> ValidateRecaptcha( this Controller controller, HttpRequest request, string secretKey) { var response = request.Form["g-recaptcha-response"]; var client = new HttpClient(); string result = await client.GetStringAsync( string.Format("https://www.google.com/recaptcha/api/siteverify?secret={0}&response={1}", secretKey, response) ); var captchaResponse = JsonConvert.DeserializeObject<RecaptchaResponse>(result); return captchaResponse; } 

Then this snippet from the login method in my AccountController checks the server side of the captcha using this extension method:

 if ((Site.CaptchaOnLogin) && (Site.RecaptchaPublicKey.Length > 0)) { var recpatchaSecretKey = Site.RecaptchaPrivateKey; var captchaResponse = await this.ValidateRecaptcha(Request, recpatchaSecretKey); if (!captchaResponse.Success) { ModelState.AddModelError("recaptchaerror", "reCAPTCHA Error occured. Please try again"); return View(model); } } 

Note that you must use this keyword to call extension methods on the controller.

I am using this in several projects now, so if you need to see more code, the simplest thing in my project is SimpleAuth , but I also use cloudscribe it

Answer 3

You can do this without special packaging. According to recaptcha site -

Client Side Integration

Paste this snippet before the closing </head> in your HTML template:

 <script src='https://www.google.com/recaptcha/api.js'></script> 

Insert this snippet at the end of where you want to see the reCAPTCHA widget:

 <div class="g-recaptcha" data-sitekey="YOURSITEKEY"></div> 

Server integration

When your users submit the form into which you integrated reCAPTCHA, you will receive, as part of the payload, a string called "g-recaptcha-response". To check whether Google has verified this user, send a POST request with these parameters:

URL: https://www.google.com/recaptcha/api/siteverify

secret (required): YOURSECRETKEY

answer (required): value of "g-recaptcha-response".

remoteip: IP address of the end user.

Answer 4

Follow these steps to create a Captcha in Mvc.

• Add the CaptchaMvc library to the reference level in your application like this.

• Now create an index as follows.

View

  @using CaptchaMvc.HtmlHelpers @using MathCaptcha; @using CaptchaMvc; @using (Html.BeginForm()) { @Html.ValidationSummary(true) <fieldset> <legend>Captcha Example</legend> @Html.MathCaptcha() @*@Html.Captcha(3)*@ <input type="submit" value="Send" /> </fieldset> } 

@ Html.MathCaptcha (), then it will generate a mathematical CAPTCHA. If you use @Html. Captcha (3), then it will generate Char CAPTCHA. 3 - CAPTCHA length.

3. In the post action method, I wrote code to test the CAPTCHA.

     [HttpPost] public ActionResult Index(string empty) { // Code to validate the CAPTCHA image if (this.IsCaptchaValid("Captcha not valid")) { // do your stuff } return View(); } 

Answer 5

To easily, you can use this component, you can see how to use this link https://www.nuget.org/packages/IgniteCaptcha/1.0.0