Posts

Showing posts from July, 2019

Using ReCaptcha v2 Insible in MVC Net Core 2 Applications

Suppose There is only one form in the page The form will be submitted in a way that can fire the the onsubmit event like either of the following: <input type="submit" value="Submit" /> <button type="submit">Submit</button> You can not submit a form in a way that can bypass the onsubmit event like the following (because the direct invocation of submit() will not fire the onsubmit event): <button type='button' onclick='getElementById("myForm").submit();'>Submit</button> The flow Clicking on submit -> Model client validation by jquery.validate -> reCaptcha client validation by grecaptcha.execute() -> (reCaptcha puzzle challenges if any) -> submitted by reCaptcha data-callback -> Model server validation -> reCaptcha server validation -> done Only after the reCaptcha client side validation has been passed, the form has chance to reach the back end. However, the ReCapt

Using ReCaptcha v3 in MVC Net Core 2 Applications

/Views/Shared/_reCaptcha.cshtml @using Microsoft.Extensions.Configuration @inject IConfiguration _configuration <script src="https://www.google.com/recaptcha/api.js?render=@_configuration.GetSection('Recaptcha_v3')['SiteKey']"></script> grecaptcha.ready(function () { var $form = getForm(); if ($form.length == 0) { $(".grecaptcha-badge").hide(); } else { $form.on("submit", function(e){ e.preventDefault(); submitWithUserResponseToken($form); }); } }); function getForm() { return $("form").eq(0); } function submitWithUserResponseToken($form) { if ($form.length > 0) { grecaptcha.execute('@_configuration.GetSection("Recaptcha_v3")["SiteKey"]', { action: $form.attr('name') }).then