@adobe-commerce/recaptcha 1.0.0-alpha1

package/.eslintrc.js

@@ -0,0 +1,5 @@
+const baseConfig = require('@adobe/elsie/config/eslint');
+
+module.exports = {
+  ...baseConfig,
+};

package/README.md

@@ -0,0 +1,55 @@
+# ReCaptcha Module
+
+## Purpose
+
+This functionality is designed to prevent CAPTCHAs. It provides methods for detecting and bypassing CAPTCHAs, improving user experience and automating interactions with web services.
+`
+
+## Methods
+
+### Private Methods
+
+Private methods are used within the class and are not accessible externally.
+
+- `_updateBadgePosition(currentForm, config);`
+  - Responsible for changing the widget's position if it needs to be placed inline.
+- `_addRecaptchaScript();`
+  - Adds a script to the page.
+- `_fetchStoreConfig();`
+  - Requests configuration from the backend.
+- `_loadConfig();`
+  - Responsible for loading the config from Session Storage.
+
+### Public Methods
+
+    `import {setEndpoint, setConfig, initReCaptcha, verifyReCaptcha } from "@adobe/recaptcha"`
+
+Public methods are available for use when interacting with the functionality.
+
+- `setEndpoint(url : string);`
+  - It sets the URL from which the reCAPTCHA settings will be fetched.
+- `setConfig(configList : [{ badgeId: 'badgeId'}]);`
+  - Initializes the configuration, accepting a URL and a set of parameters. The set of parameters is necessary for customizing form settings. Init on top lvl application.
+- `initReCaptcha();`
+  - Initializes reCAPTCHA and adds a script to the website.
+- `verifyReCaptcha();`
+  - If the method is present, it returns a token.
+
+## Installation
+
+To install this functionality, follow these steps:
+
+1.  npm i: `@adobe/recaptcha`
+
+2.  [ setEndpoint ] - Use this function at the top level to pass the backend URL.
+
+3.  [ setConfig ] - Also use this function at the top level to pass your custom configurations if you plan to use your custom form.
+
+4.  [ initReCaptcha ] - Call the function on the page where Dropins is integrated, or immediately after setEndpoint or setConfig. Adds a script to the website.
+
+5. [ verifyReCaptcha ] This function serves as an example in either the API method or your form submission handler. It returns a token, which can then be initialized in the headers upon receipt.
+
+
+## Summary
+
+This functionality provides methods for preventing and solving CAPTCHAs, enhancing automation and interaction with websites. Using it will help simplify processes related to CAPTCHA.

package/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@adobe-commerce/recaptcha",
+  "version": "1.0.0-alpha1",
+  "license": "SEE LICENSE IN LICENSE.md",
+  "description": "Module allows to efficiently verify that users are humans, not bots or spammers",
+  "engines": {
+    "node": ">=16"
+  },
+  "main": "src/index.ts",
+  "scripts": {
+    "lint": "eslint",
+    "test": "jest",
+    "test:ci": "jest --config jest.config.js --passWithNoTests --coverage",
+    "build": " "
+  },
+  "dependencies": {
+    "@adobe-commerce/fetch-graphql": "~1.0.0",
+    "@adobe/recaptcha": "file:../../packages/recaptcha"
+  },
+  "devDependencies": {}
+}

package/src/configs/index.ts

@@ -0,0 +1,3 @@
+export * from './message.config';
+export * from './typeForms.config';
+export * from './recaptchaBadgeSelector.config';

package/src/configs/message.config.ts

@@ -0,0 +1,7 @@
+export const recaptchaMessage = {
+  failedFetch: 'Failed to fetch config from backend with status:',
+  failedSetStorageConfig: 'Failed to set storage config',
+  failedGetStorageConfig: 'Configuration could not be loaded.',
+  failedExecutionRecaptcha: 'Recaptcha execution failed',
+  failedInitializing: 'An error occurred while initializing ReCaptcha:',
+};

package/src/configs/recaptchaBadgeSelector.config.ts

@@ -0,0 +1 @@
+export const recaptchaBadgeSelector = '.grecaptcha-badge iframe';

package/src/configs/typeForms.config.ts

@@ -0,0 +1,12 @@
+export const typeDefaultForm: Record<string, string> = {
+  PLACE_ORDER: 'placeOrder',
+  CONTACT: 'contactUs',
+  CUSTOMER_LOGIN: 'generateCustomerToken',
+  CUSTOMER_FORGOT_PASSWORD: 'requestPasswordResetEmail',
+  CUSTOMER_CREATE: 'createCustomerV2',
+  CUSTOMER_EDIT: 'updateCustomerV2',
+  NEWSLETTER: 'subscribeEmailToNewsletter',
+  PRODUCT_REVIEW: 'createProductReview',
+  SENDFRIEND: 'SENDFRIEND',
+  BRAINTREE: 'BRAINTREE',
+};

package/src/graphql/recaptchaConfig.graphql.ts

@@ -0,0 +1,12 @@
+export const RECAPTCHA_CONFIGURATION_V3 = `query {
+  recaptchaV3Config {
+    is_enabled
+    website_key
+    minimum_score
+    badge_position
+    language_code
+    failure_message
+    forms
+    theme
+  } 
+}`;

package/src/index.ts

@@ -0,0 +1,222 @@
+import {
+  ReCaptchaV3Response,
+  PropsFormTypes,
+  ReCaptchaV3Model,
+} from './types/recaptcha.types';
+import { recaptchaMessage, recaptchaBadgeSelector } from './configs';
+import {
+  extendConfig,
+  setConfigStorage,
+  getConfigStorage,
+  checkRecaptchaBadge,
+  convertKeysToCamelCase,
+} from './lib';
+import {
+  getRecaptchaToken,
+  verifyReCaptchaLoad,
+} from './services/recaptcha.service';
+import { RECAPTCHA_CONFIGURATION_V3 } from './graphql/recaptchaConfig.graphql';
+
+import { FetchGraphQL } from '@adobe/fetch-graphql';
+
+export const recaptchaFetchApi = new FetchGraphQL().getMethods();
+
+export class RecaptchaModule {
+  _enableReCAPTCHA: boolean = false;
+  _recaptchaBackendEndpoint: string =
+    recaptchaFetchApi.getConfig()?.endpoint || '';
+  _recaptchaScriptUrl: string = 'https://www.google.com/recaptcha/api.js';
+  _configStorageKey: string = 'recaptchaConfig';
+  _logger: boolean = false;
+
+  async _updateBadgePosition(
+    badgeId: string,
+    config: ReCaptchaV3Model
+  ): Promise<void | null> {
+    if (!config) return;
+
+    if (config?.badgePosition === 'inline') {
+      await verifyReCaptchaLoad(badgeId, config, this._logger);
+    } else {
+      const isBadgeLoaded = await checkRecaptchaBadge();
+
+      if (!isBadgeLoaded) return;
+
+      const recaptchaBadge = document.querySelector(
+        recaptchaBadgeSelector
+      ) as HTMLIFrameElement;
+
+      const shouldUpdateSrc =
+        config.theme &&
+        recaptchaBadge &&
+        !recaptchaBadge.src.includes('theme=dark') &&
+        !recaptchaBadge.src.includes('theme=light');
+
+      if (shouldUpdateSrc) {
+        recaptchaBadge.setAttribute(
+          'src',
+          `${recaptchaBadge.src}&theme=${config.theme}`
+        );
+      }
+    }
+  }
+
+  async _addRecaptchaScript(): Promise<void> {
+    const config = await this._loadConfig();
+
+    if (!document.getElementById('recaptchaId') && config) {
+      const webApiKey = config.websiteKey;
+      const isBadgeGlobal = config.badgePosition === 'inline';
+      const languageCode = config.languageCode;
+
+      if (!webApiKey) return;
+
+      const script = document.createElement('script');
+      script.setAttribute('id', 'recaptchaId');
+      script.defer = true;
+      script.src = isBadgeGlobal
+        ? `${this._recaptchaScriptUrl}?render=${webApiKey}&badge=none&hl=${languageCode}`
+        : `${this._recaptchaScriptUrl}?render=${webApiKey}&badge=${config.badgePosition}&hl=${languageCode}`;
+
+      document.head.appendChild(script);
+    }
+  }
+
+  async _fetchStoreConfig(): Promise<ReCaptchaV3Response | undefined> {
+    try {
+      const response = await recaptchaFetchApi.fetchGraphQl(
+        RECAPTCHA_CONFIGURATION_V3,
+        {
+          method: 'GET',
+          cache: 'force-cache',
+        }
+      );
+
+      if (response?.errors?.length) {
+        this._logger && console.error(response.errors[0].message);
+
+        return;
+      }
+
+      return response;
+    } catch (error) {
+      this._logger && console.error(`${recaptchaMessage.failedFetch}:`, error);
+    }
+  }
+
+  async _loadConfig(): Promise<ReCaptchaV3Model | null> {
+    const config = await getConfigStorage(this._configStorageKey);
+
+    if (!config) {
+      this._logger && console.error(recaptchaMessage.failedGetStorageConfig);
+
+      return null;
+    }
+
+    this._enableReCAPTCHA = !!config.isEnabled;
+
+    return config;
+  }
+
+  setEndpoint(url: string) {
+    if (!url) return;
+
+    this._recaptchaBackendEndpoint = url;
+    recaptchaFetchApi.setEndpoint(url);
+  }
+
+  async setConfig(configList: PropsFormTypes[]) {
+    try {
+      const config = await this._fetchStoreConfig();
+
+      if (!config?.data?.recaptchaV3Config) {
+        sessionStorage.removeItem(this._configStorageKey);
+        return;
+      }
+
+      const transformConfig: ReCaptchaV3Model = convertKeysToCamelCase(
+        config?.data?.recaptchaV3Config
+      );
+
+      const extendedRecaptchaConfig = extendConfig(transformConfig, configList);
+
+      if (extendedRecaptchaConfig) {
+        setConfigStorage(
+          this._configStorageKey,
+          extendedRecaptchaConfig,
+          this._logger
+        );
+      }
+    } catch (error) {
+      this._logger &&
+        console.error(recaptchaMessage.failedSetStorageConfig, error);
+
+      sessionStorage.removeItem(this._configStorageKey);
+    }
+  }
+
+  async initReCaptcha(lazyLoadTimeout = 3000) {
+    // IIFE added to fix SonarQube error "Promise returned in function argument where a void return was expected"
+    setTimeout(() => {
+      (async () => {
+        try {
+          const config = await this._loadConfig();
+
+          if (!config?.forms || !config.isEnabled) {
+            return;
+          }
+
+          await this._addRecaptchaScript();
+
+          if (config.badgePosition === 'inline') {
+            await Promise.all(
+              (config.forms as PropsFormTypes[]).map((element) =>
+                this._updateBadgePosition(element.badgeId, config)
+              )
+            );
+          } else {
+            await this._updateBadgePosition('', config);
+          }
+        } catch (error) {
+          this._logger &&
+            console.error(recaptchaMessage.failedInitializing, error);
+        }
+      })();
+    }, lazyLoadTimeout);
+  }
+
+  async verifyReCaptcha(): Promise<string | undefined> {
+    try {
+      const config = await this._loadConfig();
+
+      if (!config?.forms || !config.websiteKey || !config.isEnabled) {
+        return undefined;
+      }
+
+      return await getRecaptchaToken(config.websiteKey);
+    } catch (error) {
+      this._logger && console.error(error);
+    }
+  }
+
+  enableLogger(logger: boolean) {
+    this._logger = logger;
+  }
+
+  getMethods() {
+    return {
+      enableLogger: this.enableLogger.bind(this),
+      setEndpoint: this.setEndpoint.bind(this),
+      setConfig: this.setConfig.bind(this),
+      initReCaptcha: this.initReCaptcha.bind(this),
+      verifyReCaptcha: this.verifyReCaptcha.bind(this),
+    };
+  }
+}
+
+const recaptcha = new RecaptchaModule();
+
+const { initReCaptcha, verifyReCaptcha, setEndpoint, setConfig, enableLogger } =
+  recaptcha.getMethods();
+
+export { setEndpoint, setConfig, initReCaptcha, verifyReCaptcha, enableLogger };

package/src/lib/_checkRecaptchaBadge.ts

@@ -0,0 +1,38 @@
+import { recaptchaBadgeSelector } from '../configs';
+
+const waitForElement = (selector: string): Promise<void> => {
+  return new Promise((resolve, reject) => {
+    try {
+      // Check if the element is already in the DOM
+      if (document.querySelector(selector)) {
+        resolve();
+        return;
+      }
+
+      // Create an observer to watch for changes
+      const observer = new MutationObserver(() => {
+        if (document.querySelector(selector)) {
+          resolve();
+          observer.disconnect();
+        }
+      });
+
+      // Start observing the body for child changes only
+      observer.observe(document.body, {
+        childList: true,
+        subtree: false,
+      });
+    } catch (error) {
+      reject(error);
+    }
+  });
+};
+
+export const checkRecaptchaBadge = async (): Promise<boolean> => {
+  try {
+    await waitForElement(recaptchaBadgeSelector);
+    return true;
+  } catch (error) {
+    return false;
+  }
+};

package/src/lib/_convertKeysToCamelCase.ts

@@ -0,0 +1,13 @@
+export const convertKeysToCamelCase = (obj: {
+  [key: string]: any;
+}): { [key: string]: string | number | boolean } => {
+  const camelCaseKey = (key: string): string => {
+    return key.replace(/_([a-z])/g, (_, letter) => letter.toUpperCase());
+  };
+
+  return Object.keys(obj).reduce((result, key) => {
+    const newKey = camelCaseKey(key);
+    result[newKey] = obj[key];
+    return result;
+  }, {} as { [key: string]: any });
+};

package/src/lib/_extendConfig.ts

@@ -0,0 +1,20 @@
+import { ReCaptchaV3Model } from '../types/recaptcha.types';
+import { typeDefaultForm } from '../configs/typeForms.config';
+
+export const extendConfig = (
+  config: ReCaptchaV3Model,
+  modifyParams: any[]
+): ReCaptchaV3Model | undefined => {
+  if (config && config.forms) {
+    const modifyForm = config.forms.concat(modifyParams).map((el) => {
+      if (typeof el !== 'string') return { ...el, enabledBadgePlace: false };
+
+      return {
+        badgeId: typeDefaultForm[el],
+        enabledBadgePlace: false,
+      };
+    });
+
+    return { ...config, forms: [...new Set(modifyForm)] };
+  }
+};

package/src/lib/_storageConfig.ts

@@ -0,0 +1,37 @@
+import { recaptchaMessage } from '../configs';
+import { ReCaptchaV3Model } from '../types/recaptcha.types';
+
+const getConfigStorage = async (
+  storageKey: string,
+  retries = 1,
+  delay = 1000
+): Promise<ReCaptchaV3Model | null> => {
+  const storedConfig = sessionStorage.getItem(storageKey);
+
+  if (storedConfig !== null) {
+    return JSON.parse(storedConfig);
+  } else if (retries > 0) {
+    await new Promise((resolve) => setTimeout(resolve, delay));
+
+    return getConfigStorage(storageKey, retries - 1, delay);
+  }
+
+  return null;
+};
+
+const setConfigStorage = (
+  storageKey: string,
+  config: ReCaptchaV3Model,
+  logger: boolean
+) => {
+  if (!storageKey || !config.websiteKey) return null;
+
+  try {
+    sessionStorage.setItem(storageKey, JSON.stringify(config));
+  } catch (error) {
+    logger && console.error(recaptchaMessage.failedSetStorageConfig, error);
+    return null;
+  }
+};
+
+export { getConfigStorage, setConfigStorage };

package/src/lib/index.ts

@@ -0,0 +1,4 @@
+export * from './_extendConfig';
+export * from './_storageConfig';
+export * from './_checkRecaptchaBadge';
+export * from './_convertKeysToCamelCase';

package/src/services/recaptcha.service.ts

@@ -0,0 +1,80 @@
+import { recaptchaMessage } from '../configs';
+import {
+  MutationObserverInit,
+  ReCaptchaV3Model,
+} from '../types/recaptcha.types';
+const { failedExecutionRecaptcha } = recaptchaMessage;
+
+export const getRecaptchaToken = async (
+  websiteKey: string
+): Promise<string> => {
+  if (!(window as any).grecaptcha) {
+    return Promise.reject(failedExecutionRecaptcha);
+  }
+
+  try {
+    const token = await window.grecaptcha.execute(websiteKey, {
+      action: 'click',
+    });
+
+    return token;
+  } catch (error) {
+    return Promise.reject(`${failedExecutionRecaptcha} : ${error}`);
+  }
+};
+
+export const waitForReCaptcha = () => {
+  return new Promise((resolve) => {
+    const observer = new MutationObserver((_, obs) => {
+      if (window.grecaptcha) {
+        obs.disconnect();
+        resolve(true);
+      }
+    });
+
+    const observerOptions: MutationObserverInit = {
+      childList: true,
+      subtree: true,
+      attributes: true,
+    };
+
+    observer.observe(document.body, observerOptions);
+  });
+};
+
+export const verifyReCaptchaLoad = async (
+  badgeId: string,
+  config: ReCaptchaV3Model,
+  logger: boolean
+): Promise<void> => {
+  if (!window.grecaptcha) {
+    await waitForReCaptcha();
+  }
+
+  return grecaptcha.ready(() => {
+    const badgeContainers = document.querySelectorAll(`#${badgeId}`);
+
+    if (!badgeContainers.length) return;
+
+    // Handle the case when multiple instances of the drop-in container rendered on the same page
+
+    badgeContainers.forEach(
+      (element) => (element.id = `${element.id}_${Math.random().toString(36)}`) // NOSONAR
+    );
+
+    badgeContainers.forEach((element) => {
+      if (element.innerHTML === '') {
+        try {
+          grecaptcha.render(element.id, {
+            sitekey: config.websiteKey as string,
+            badge: config.badgePosition,
+            size: 'invisible',
+            theme: config.theme ?? 'light',
+          });
+        } catch (error) {
+          logger && console.error(error);
+        }
+      }
+    });
+  });
+};

package/src/types/grecaptcha.d.ts

@@ -0,0 +1,24 @@
+declare namespace grecaptcha {
+  interface RenderParameters {
+    sitekey: string;
+    theme?: string;
+    size?: string;
+    tabindex?: number;
+    callback?: (response: string) => void;
+    'expired-callback'?: () => void;
+    'error-callback'?: () => void;
+    badge?: string;
+  }
+
+  function ready(callback: () => void): void;
+  function execute(
+    siteKey: string,
+    options: { action: string }
+  ): Promise<string>;
+  function render(
+    container: string | HTMLElement,
+    parameters: RenderParameters
+  ): string;
+  function reset(opt_widget_id?: string): void;
+  function getResponse(opt_widget_id?: string): string;
+}

package/src/types/recaptcha.types.ts

@@ -0,0 +1,50 @@
+export interface ReCaptchaV3InitProps {
+  is_enabled?: boolean;
+  website_key?: string;
+  minimum_score?: number;
+  badge_position?: string;
+  language_code?: string;
+  failure_message?: string;
+  theme: string;
+}
+
+export interface ReCaptchaV3Props extends ReCaptchaV3InitProps {
+  forms?: string[];
+}
+
+export interface PropsFormTypes {
+  badgeId: string;
+  enabledBadgePlace?: boolean;
+}
+
+export interface ReCaptchaV3ModifyProps extends ReCaptchaV3InitProps {
+  forms?: PropsFormTypes[];
+}
+
+export interface ReCaptchaV3Response {
+  data?: {
+    recaptchaV3Config?: ReCaptchaV3Props | ReCaptchaV3ModifyProps;
+  };
+  errors?: { message: string }[];
+}
+
+export interface ReCaptchaV3Model {
+  isEnabled?: boolean;
+  websiteKey?: string;
+  minimumScore?: number;
+  badgePosition?: string;
+  languageCode?: string;
+  failureMessage?: string;
+  theme?: string;
+  forms?: PropsFormTypes[] | string[];
+}
+
+export interface MutationObserverInit {
+  childList?: boolean;
+  attributes?: boolean;
+  characterData?: boolean;
+  subtree?: boolean;
+  attributeOldValue?: boolean;
+  characterDataOldValue?: boolean;
+  attributeFilter?: string[];
+}