Spike captcha

[Xymmer]

We have a catpcha addon - see the Accelerator help document.

Let's implement same in Spartacus for registration and password reset (anywhere else?).

• Do we need the addon?
• There are configuration keys specified in the backend.
• You can also turn off captcha using backend - should we follow that? Backoffice > Base Commerce > Base Store > select your storefront Properties tab > Captcha Widget Enabled
• Do we need API updates?
• Do we need threat modelling?

[Zeyber]

Captcha SPIKE This is a working document subject to change as the Captcha feature requirements do. Can be used to create the docs page later.

Introduction The Spartacus Integrated Captcha feature provides a way to prevent spam and bots from causing harm to your storefront.

Version We can use Google reCAPTCHA v3 which does not require user interaction in order to protect from bots and therefore non-obtrusive. https://www.google.com/recaptcha/intro/v3.html

Appearance When reCAPTCHA v3 exists on page, it places an element in the bottom-right hand corner of the page (which we can move elsewhere):

This is extended when the mouse hovers over it:

Captcha and Backend Front end needs to send a public site key to the backend holding the private key so that captcha requests can be verified with Google as authentic or not. We could handle frontend recaptcha functionality in a few ways:

• We could add the captcha component to the page to handle captcha functionality when the backend sends captcha information and omit it when not. The backend can send the sitekey and extra recaptcha config information to the frontend.

• We can configure captcha on the frontend either completely or partially.

• Default settings can come from the backend which can be overridden by the frontend (or vice versa)

• Captcha can be configured by the frontend or backend.

In my opinion, captcha should be able to be configured by the backend or frontend. We will have defaults set in the frontend for our captcha pages. If settings (differing from the defaults) are configured by the backend or frontend, either one should override our default settings in order to give the users multiple options to override our defaults and to make it easier for users migrating from hybris to not have to reconfigure captcha on spartacus already configured by their backend.

Order of overrides:

1. Defaults set by Spartacus (user will still need to provide credentials to activate Captcha)
2. Frontend global settings override defaults
3. Backend settings override frontend global settings and defaults
4. Frontend component settings override frontend global settings, backend settings and defaults

Captcha Setup/Initialization We need some sort of master service/config/module to initialize recaptcha so that it can be utilized based off of the following setup code:

  <script src="https://www.google.com/recaptcha/api.js?render=reCAPTCHA_site_key"></script>
  <script>
  grecaptcha.ready(function() {
      grecaptcha.execute('reCAPTCHA_site_key', {action: 'homepage'}).then(function(token) {
         ...
      });
  });
  </script>

Setup code could be fired at the first use of our captcha (backend or frontend request) or based on being enabled by a frontend setting.

In correspondence with default grecaptcha implementation, (siteKey) and (captchaOptions) inputs can set on the component.

We can add our own features to this component via the (cmsOptions) input such as visibility and disable settings. These options can easily be added to in future by modifying an interface with optional variables as to not impose breaking changes.

Site Key Follow the options on the official Google reCaptcha website (https://www.google.com/recaptcha/intro/v3.html) in order to set up your domain with reCaptcha and obtain your public and private site keys. You will use your public site key with the siteKey options and configure your backend to use your private key.

Grecaptcha Options Please check the reCaptcha V3 documentation (https://developers.google.com/recaptcha/docs/v3) to learn about captchaOptions.

CMS Options These are options specific to how Spartacus can add custom functionality to the Captcha Component.

Suggested Options:

• disable?: Disables the use of the Captcha Component and deactivates the Captcha guard (can be used as a default global setting to disable all Captcha).
• invisible?: Make the Captcha widget invisible to the user (if possible?)

Captcha Guard We could add a CaptchaGuard guard to the guards arrays in module configurations as a way of implementing a Captcha into a given page.

    ConfigModule.withConfig(<CmsConfig>{
        cmsComponents: {
            SomeComponent: {
                ...
                guards: [CaptchaGuard]
            }
        }
    }

Global Settings Global Captcha settings can be set in the StorefrontModule configuration. Each setting is optional in-case the user wishes to configure settings on the backend or at component level.

    StorefrontModule.withConfig({
        ...
        captcha: {
            siteKey?: GRECAPTCHA_PUBLIC_KEY,
            captchaOptions?: GRECAPTCHA_OPTIONS,
            cmsOptions?: CMS_CUSTOM_OPTIONS
        }
    }

Default Pages which will use Captcha Because reCaptcha v3 does not interfere with user interactions, we do not need to worry about usage interacting with user experience. We should use it for things that could be spammed (auth-related or data-input-related).

• Login
• Registration
• Product Reviews
• Password Reset

Custom Captcha Users can implement their own custom captchas via writing their own custom cms components to handle this. Spartacus will provide Integrated Captcha in the form of Google reCaptcha v3 only.

[meeque]

As discussed on other channels, this issue cannot be fully solved by Spartacus alone. This is because a reCaptcha must always be validated on the server-side. In this case it means that the underlying SAP Commerce OCC API needs to support reCaptcha validation first.

SAP Commerce OCC does not support that yet, but respective changes are planned. Progress can be tracked at RAY-405, but that is not publicly accessible.