CODEWITHSUNDEEP
blazorrecaptcha
devapi velvet
devapi velvet

Reputation: 21

ReCaptcha v3 in Blazor

How I can implement recaptcha v3 in blazor application? please provide me a complete example.

I am following below link for v2 but I want same functionality using recaptcha v3. https://github.com/sample-by-jsakamoto/Blazor-UseGoogleReCAPTCHA

Upvotes: 1

Views: 3335

Answers (1)

matishadow
matishadow

Reputation: 21

For the backend part it's the same.

For the frontend (Blazor WebAssembly):

  1. Include the script in your index.html file: <script src='https://www.google.com/recaptcha/api.js?render=XXX'></script>
  2. In your scripts.js add this function to your window so you can call it in C#:
window.getCaptcha = async function () {
  await grecaptcha.ready(function() {});

  const token = await grecaptcha.execute('XXX', {action: 'formSubmission'})

  return token;
}
  1. Call this JavaScript function to get the captcha before submitting it to backend
    [Inject]
    private IJSRuntime JsRuntime { get; set; }
    
    private async Task HandleValidSubmit()
    {
        var captcha = await JsRuntime.InvokeAsync<string>("getCaptcha");

        // Form submission code
    }

Upvotes: 2

Related Questions