重新控制模块
目的
这个模块将Google reCAPTCHA整合到Adobe Commercial storefronts中. 这个 支持两者 reCAPTCHA v3 (英语) 财务报告和审定财务报表 reCAPTCHA 企业,提供方法 用于配置、初始化和核实受保护表格上的reCAPTCHA.
模块询问 recaptchaFormConfig 获取每个窗体的图形QL 端点
配置, 自动检测哪一类 reCAPTCHA (v3 或 Enterprise)
配置并装入相应的脚本.
安装
npm i @adobe-commerce/recaptcha
快速启动
import {
setEndpoint,
setConfig,
initReCaptcha,
verifyReCaptcha,
enableLogger,
} from '@adobe-commerce/recaptcha';
// 1. Set the backend GraphQL endpoint
setEndpoint('https://your-store.com/graphql');
// 2. Fetch and store reCAPTCHA configuration
await setConfig([{ badgeId: 'generateCustomerToken' }]);
// 3. Initialize reCAPTCHA (loads script, renders badges)
initReCaptcha();
// 4. Get a token when submitting a protected form
const token = await verifyReCaptcha();
公共方法
setEndpoint(url: string)
设置用于获取 reCAPTCHA 配置的 GraphQL 端点 URL .
setConfig(configList: PropsFormTypes[], options?: { b2bEnabled?: boolean })
从后端通过获取 reCAPTCHA 配置 recaptchaFormConfig 财务报告和审定财务报表
将其存储在会话存储中.
- 查询所有默认窗体类型, 并确定启用的哪些类型
- 何时
options.b2bEnabled实值true,包括COMPANY_CREATE在查询中 - 此窗体类型为 没有 默认包含 - 将响应正常化为统一的配置形状
- 从中检测 reCAPTCHA 类型(v3或企业型)
re_captcha_type字段 - 跳过空窗体
website_key - 如果混合类型(v3和Entertainment)为,警告和禁用reCAPTCHA 在表格中检测
// B2C storefront (default)
await setConfig([{ badgeId: 'generateCustomerToken' }]);
// B2B storefront
await setConfig([], { b2bEnabled: true });
initReCaptcha(lazyLoadTimeout?: number)
初始化 reCAPTCHA, 方法是装入适当的 Google 脚本和渲染 警徽 警徽 警徽.
- 装入
enterprise.js用于企业或api.js用于v3 - 对于内嵌徽章位置, 将无形部件变成 DOM 元素
匹配每个窗体
badgeId - 默认懒惰负载超时: 3000ms
verifyReCaptcha(): Promise<string | undefined>
生成并返回 reCAPTCHA 令牌以提交格式.
- 用途
grecaptcha.enterprise.execute()用于企业或grecaptcha.execute()用于v3 - 回返
undefined如果 reCAPTCHA 未启用或未配置
enableLogger(enabled: boolean)
启用或禁用调试日志 。 启用时,日志前缀为
[ReCaptcha] 并包括:
- 配置和正常化细节
- 检测到哪些 reCAPTCHA 类型并启用哪些形式
- 脚本加载 URL
- 标记渲染活性
- 托肯世代尝试
- 跳过窗体( 缺少密钥) 或混合类型配置的警告
默认窗体类型
默认时询问这些窗体类型( 不需要额外配置 ):
| 窗体类型 | 徽章标识 |
|---|---|
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 |
B2B 窗体类型
B2B 存储前端应该通过 { b2bEnabled: true } 包括 COMPANY_CREATE
在 reCAPTCHA 查询中:
await setConfig([], { b2bEnabled: true });
这需要后端才能曝光 COMPANY_CREATE 内 ReCaptchaFormEnum。 。 。 .
混合类型配置
如果商务管理者已经配置了 RECAPTCHA v3 等一些表格 与企业号,模块将:
- 登录警告并指示更新商务管理员配置
- 完全禁用 reCAPTCHA (返回时没有配置, 没有装入脚本)
所有表格都必须使用相同的reCAPTCHA类型. 在商务管理员中配置此选项 下级 存储 > 配置 > 安全 > Google reCAPTCHA Storefront。 。 。 .