Configuring ReCaptcha

TABLE OF CONTENTS

Introduction

ReCaptcha is a CAPTCHA system owned by Google. Captchas are tools that are used to differentiate between real users and automated users, such as bots. Captchas provide challenges that are difficult for computers to perform but relatively easy for humans. For example, identifying stretched letters or numbers, or clicking in a specific area. A Captcha is a type of challenge-response test used in computing to determine whether the user is human. Captcha is used mostly for security reasons, Captchas also serve as a benchmark task for artificial intelligence technologies.

ReCaptcha in Znode

Earlier Znode had Captcha implemented for security purposes but then now it is replaced with Invisible ReCaptcha v3. Znode will require a capability to allow the admin to have this ReCaptcha set on the Login Page, Registration Page, and Checkout Page for the logged-in users.


Configuring a ReCaptcha

Znode database default script consists of a data script for the Global attribute required for the ReCaptcha implementation.
Following are the four global attributes available in the default script that is associated with the global attribute group “ReCaptcha” which is in turn associated with the global attribute family “Store”

  1. Require Recaptcha For Login and Registration
  2. Require Recaptcha For Contact and Feedback Forms
  3. Require ReCaptcha at Checkout for Guest Users
  4. Require ReCaptcha at Checkout for Logged-in Users
  5. Is Invisible ReCaptcha Required at Checkout for Logged-in Users




Enabling/Disabling Captcha for web store:

Navigate to: Stores > Additional Attributes > ReCaptcha tab

Following are the four options from where an administrator can enable and disable the ReCaptcha settings.

  1. Is Invisible ReCaptcha Required For Login and Registration - When the value is set as Yes and Store Settings are published, the ReCaptcha is enabled for the “Login” and Registration page.

  2. Is Invisible ReCaptcha Required For Forms - When the value is set as Yes, and Store Settings are published, the ReCaptcha is enabled on the “Contact Us” and “Feedback Form” pages.

  3. Required  ReCaptcha at Checkout for Guest Users - When the value is set as Yes, and Store Settings are published, the ReCaptcha is enabled on the “Checkout page” for the Guest Users.
  4. Required ReCaptcha at Checkout for Logged-in Users - When the value is set as Yes, and Store Settings are published, the ReCaptcha is enabled on the “Checkout page” for the logged-in Users.

Implementing the Znode ReCaptcha feature on any other pages

 To implement the ReCaptcha functionality on other pages or forms as they are implemented on the above-mentioned pages using the available in HtmlExtension Method inZnode.WebStore.Core.Extensions HTML helper extension method for rendering a reCAPTCHA field in a form. It allows you to append a hidden input field to a form and generate the necessary reCAPTCHA scripts.

library by following the below steps-

  1. The  AppendToForm method is an extension method for the HtmlHelper class. It takes a `formId` parameter and returns a MvcHtmlString representing the generated HTML code.
  2. Inside AppendToForm, a `TagBuilder` object is created to build an input element.
  3. The `Recaptcha` method is another extension method for the `HtmlHelper` class. It also takes an optional `formId` parameter and returns a MvcHtmlString.
  4. Inside `Recaptcha`, the `AppendToForm` method is called to generate the hidden input field HTML code.
  5. The reCAPTCHA site key is retrieved using the `GlobalAttributeHelper.SiteKey()` method.
  6. Two strings are generated: `reCaptchaApiScript` and `reCaptchaTokenResponseScript`. These strings contain the necessary scripts to include the reCAPTCHA API and handle the response token.
  7. The generated HTML code is returned as an MvcHtmlString, combining the reCAPTCHA scripts and the result of `AppendToForm`.


it checks if the `IsCaptchaRequiredForLogin` variable is true. This is determined by the `GlobalAttributeHelper.IsCaptchaRequiredForLogin()` method. Additionally, it checks if the reCAPTCHA site key and secret key are not empty.


If the conditions are met, the code retrieves the reCAPTCHA response from the form using `Request.Form["g-recaptcha-response"]`. It then validates the reCAPTCHA response using the `WebstoreHelper.RecaptchaValidate` method. If the reCAPTCHA is not valid, a notification message is set and the current view with the `model` is returned.


Overall, this code ensures that reCAPTCHA validation is performed during the login process if the specified requirements for reCAPTCHA are met. If the reCAPTCHA is valid,then  User able to login on wbestore, same implementation  we have done in Signup () in userController, conatctus(),CustomerFeedback()  in CaseRequestController and  SubmitOrder()  in checkoutcontroller.




If the reCAPTCHA validation fails and sets a notification message before returning the "Login" view.



it checks if the `IsCaptchaRequiredForLogin` variable is true. If it is, then it calls the `Recaptcha` method from the custom HTML helper extension to render the reCAPTCHA field in the form with the `frmRegister` form ID




  1. Model.IsQuoteRequest is checked to determine if it is false. This condition ensures that the reCAPTCHA field is not rendered if the current model represents a quote request.
    1. `IsReCaptchaRequiredForCheckoutLoggedUser` is true and `isGuestUser` is false. This condition indicates that the reCAPTCHA field should be rendered for logged-in users during the checkout process.
    2. `IsReCaptchaRequiredForGuestUser` is true and `isGuestUser` is true. This condition indicates that the reCAPTCHA field should be rendered for guest users during the checkout process.

If any of the above conditions are met, the `Recaptcha` method is called with an empty string for the `formId` parameter. This will render the reCAPTCHA field without associating it with a specific form.

Overall, this code ensures that the reCAPTCHA field is only rendered under specific conditions during the checkout process, based on the requirements for logged-in users and guest users.




Note: If the valueIsCaptchaRequiredForLogin,IsCaptchaRequired,IsReCaptchaRequiredForCheckoutLoggedUser or IsReCaptchaRequiredForGuestUser attribute in admin is set to true then on view then it must have its HTML code added to render the Recaptcha.


Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.