I have decided to incorporate bootstrap 4 into my current Umbraco CMS project.
My goal is to integrate reCAPTCHA 2 into a registration form, but I am encountering some difficulties in the process.
I have successfully generated the keys for the reCAPTCHA and stored them in the web.config file for future use.
Below is a snippet of the code detailing my attempts:
Added the following scripts at the end of the header tag:
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
The structure of the form appears as follows:
@using (Html.BeginUmbracoForm<AccountSurfaceController>("RegisterUser", null, new { id = "RegisterForm" }, FormMethod.Post))
{
@Html.AntiForgeryToken()
<div class="form-group">
<div class="alert alert-info alert-dismissible fade show" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<small>Te gjitha fushat e meposhtme duhen plotesuar.</small>
</div>
</div>
<!-- Add more form elements here -->
<div class="form-group">
<div class="col-6">
<label for="captchaContainer" class="form-control-label">Captcha:</label>
</div>
<div class="col-6">
<div id="captchaContainer" class="g-recaptcha" data-sitekey="@ConfigurationManager.AppSettings[DictionaryKeys.ReCaptchaPublicKey]"></div>
</div>
</div>
<button type="submit" class="btn btn-primary">Regjistrohu</button>
}
I have searched through similar questions on Stack Overflow, unfortunately none of the solutions provided were able to resolve my issue. Although the reCAPTCHA element does appear on the page, clicking it triggers an 'too much recursion' error in the console with no visible result.
https://i.sstatic.net/f589b.png
If anyone has encountered this problem before or knows what might be causing this issue, your insights would be greatly appreciated. Thank you in advance.