在自适应表单中使用 CAPTCHA using-captcha-in-adaptive-forms
Adobe 建议使用现代、可扩展的数据捕获核心组件,以创建新的自适应表单或将自适应表单添加到 AEM Sites 页面。 这些组件代表有关创建自适应表单的重大改进,确保实现令人印象深刻的用户体验。 本文介绍了使用基础组件创作自适应表单的旧方法。
CAPTCHA(区分计算机和人类的完全自动化公共图灵测试)是一种在线交易中常用的程序,用于区分人类和自动化程序或机器人。 它提出了一个挑战,并评估用户响应以确定是人还是机器人与网站交互。 如果测试失败,它会阻止用户继续操作,并通过阻止机器人发布垃圾邮件或恶意目的来帮助确保在线交易的安全。
AEM Forms支持自适应表单中的验证码。 您可以使用Google的reCAPTCHA服务来实施CAPTCHA。
- AEM Forms支持reCAPTCHA v2和enterprise。 不支持任何其他版本。
- AEM Forms应用程序上的离线模式不支持自适应表单中的验证码。
通过Google为自适应Forms配置reCAPTCHA服务 google-reCAPTCHA
AEM Forms用户可以使用Google的reCAPTCHA服务在自适应表单中实施CAPTCHA。 它提供高级验证码功能以保护您的站点。 有关reCAPTCHA工作方式的更多信息,请参阅Google reCAPTCHA。 包括reCAPTCHA v2和reCAPTCHA Enterprise在内的reCAPTCHA服务已集成到AEM Forms中。 根据要求,您可以配置reCAPTCHA服务以启用:
配置 reCAPTCHA Enterprise steps-to-implement-reCAPTCHA-enterprise-in-forms
-
获取项目ID。
-
为云服务创建配置容器。
-
转到工具>常规>配置浏览器。 See the Configuration Browser documentation for more information.
-
Do the following to enable the global folder for cloud configurations or skip this step to create and configure another folder for cloud service configurations.
- In the Configuration Browser, select the global folder and select Properties.
- In the Configuration Properties dialog, enable Cloud Configurations.
- 选择保存并关闭,以保存配置并退出对话框。
-
In the Configuration Browser, select Create.
-
In the Create Configuration dialog, specify a title for the folder and enable Cloud Configurations.
-
Select Create to create the folder enabled for cloud service configurations.
-
-
Configure the cloud service for reCAPTCHA Enterprise.
-
On your Experience Manager author instance, go to
> Cloud Services.
-
Select reCAPTCHA. The Configurations page opens. Select the configuration container created in the previous step and select Create.
-
Select version as reCAPTCHA Enterprise and specify Name; Project ID, Site Key, and API key(Obtained in Step 2 and 3) for reCAPTCHA Enterprise service.
-
Select key type, the key type should be same as the site key configured in the google cloud project, for example, Checkbox site key or Score-based site key.
-
Specify a threshold score in the range 0–1 (Click to know more about score). Scores greater than or equal to the threshold scores identify human interaction, otherwise considered bot interaction.
注意:
- Form authors can specify a score in the range suitable for uninterrupted form submission.
-
选择创建,创建云服务配置。
-
In the Edit Component dialog, specify the name, project ID, site key, API key (obtained in steps 2 and 3), select the key type, and enter the threshold score. Select Save Settings and then select OK to complete the configuration.
-
Once the reCAPTCHA Enterprise service is enabled, it is available for use in adaptive forms. See using CAPTCHA in adaptive forms.
Configure Google reCAPTCHA v2 steps-to-implement-reCAPTCHA-v2-in-forms
-
Obtain reCAPTCHA API key pair from Google. It includes a site key and a secret key.
-
为云服务创建配置容器。
-
转到工具>常规>配置浏览器。 有关详细信息,请参阅配置浏览器文档。
-
执行以下操作可为云配置启用全局文件夹,或跳过此步骤为云服务配置创建和配置其他文件夹。
-
在配置浏览器中,选择 全局 文件夹,然后选择属性。
-
在配置属性对话框中,启用云配置。
-
选择保存并关闭,以保存配置并退出对话框。
-
-
在配置浏览器中,选择创建。
-
在创建配置对话框中,指定文件夹的标题并启用云配置。
-
选择 创建 以创建为云服务配置启用的文件夹。
-
-
为reCAPTCHA v2配置云服务。
- 在您的AEM创作实例上,转到
> Cloud Services。
- 选择reCAPTCHA。 此时将打开“配置”页面。 选择在上一步中创建的配置容器,然后选择创建。
- 将版本选择为reCAPTCHA v2,指定reCAPTCHA服务(在步骤1中获得)的名称、站点密钥和密钥,然后选择 创建 以创建云服务配置。
- 在“编辑组件”对话框中,指定在步骤1中获取的站点密钥和密钥。 选择保存设置,然后选择 确定 以完成配置。
配置reCAPTCHA服务后,便可在自适应表单中使用。 有关详细信息,请参阅在自适应表单中使用CAPTCHA。
- 在您的AEM创作实例上,转到
在自适应表单中使用reCAPTCHA using-reCAPTCHA
要在自适应表单中使用reCAPTCHA,请执行以下操作:
-
在编辑模式下打开自适应表单。
note note NOTE 确保在创建自适应表单时选择的配置容器包含reCAPTCHA云服务。 您还可以编辑自适应表单属性,以更改与表单关联的配置容器。 -
从组件浏览器中,将 Captcha 组件拖放到自适应表单上。
note note NOTE 不支持在自适应表单中使用多个验证码组件。 此外,不建议在标记为延迟加载的面板或片段中使用验证码。 note note NOTE 验证码对时间敏感,大约一分钟后过期。 因此,建议在自适应表单中将Captcha组件放在提交按钮之前。 -
选择您添加的Captcha组件,然后选择
以编辑其属性。
-
指定验证码小部件的标题。 默认值为验证码。 如果不想显示标题,请选择隐藏标题。
-
从 Captcha服务 下拉列表中,选择 reCAPTCHA 以启用reCAPTCHA服务(如果您已按照Google的reCAPTCHA服务中的说明进行配置)。
-
从“设置”下拉列表中选择配置。
-
如果所选配置具有reCAPTCHA Enterprise版本:
-
你可以选择具有 密钥类型 的reCAPTCHA云配置作为复选框。 在复选框键中,如果验证码验证失败,自定义错误消息将以内联消息的形式显示。 你可以选择大小为 普通 和紧凑。
-
你可以选择具有 密钥类型 的reCAPTCHA云配置作为基于分数的。 在基于得分的键类型中,如果验证码验证失败,自定义错误消息将作为弹出消息显示。
-
当您选择 绑定引用 时,提交的数据是绑定数据,否则是未绑定的数据。 以下是提交表单时未绑定数据和绑定数据(以SSN形式使用绑定引用)的XML示例。
code language-xml <?xml version="1.0" encoding="UTF-8" standalone="no"?> <afData> <afUnboundData> <data> <captcha16820607953761> <captchaType>reCAPTCHAEnterprise</captchaType> <captchaScore>0.9</captchaScore> </captcha16820607953761> </data> </afUnboundData> <afBoundData> <Root xmlns:xfa="http://www.xfa.org/schema/xfa-data/1.0/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"> <PersonalDetails> <SSN>371237912</SSN> <FirstName>Sarah </FirstName> <LastName>Smith</LastName> </PersonalDetails> <OtherInfo> <City>California</City> <Address>54 Residency</Address> <State>USA</State> <Zip>123112</Zip> </OtherInfo> </Root> </afBoundData> <afSubmissionInfo> <stateOverrides/> <signers/> <afPath>/content/dam/formsanddocuments/captcha-form</afPath> <afSubmissionTime>20230608034928</afSubmissionTime> </afSubmissionInfo> </afData>code language-xml <?xml version="1.0" encoding="UTF-8" standalone="no"?> <afData> <afUnboundData> <data/> </afUnboundData> <afBoundData> <Root xmlns:xfa="http://www.xfa.org/schema/xfa-data/1.0/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"> <PersonalDetails> <SSN> <captchaType>reCAPTCHAEnterprise</captchaType> <captchaScore>0.9</captchaScore> </SSN> <FirstName>Sarah</FirstName> <LastName>Smith</LastName> </PersonalDetails> <OtherInfo> <City>California</City> <Address>54 Residency</Address> <State>USA</State> <Zip>123112</Zip> </OtherInfo> </Root> </afBoundData> <afSubmissionInfo> <stateOverrides/> <signers/> <afPath>/content/dam/formsanddocuments/captcha-form</afPath> <afSubmissionTime>20230608035111</afSubmissionTime> </afSubmissionInfo> </afData>
如果所选配置的版本为reCAPTCHA v2:
-
为reCAPTCHA构件选择大小为 Normal 或Compact。 您还可以选择 不可见 选项,以便仅在可疑活动时显示验证码质询。 受reCAPTCHA保护的 徽章 将显示在受保护的表单上,如下所示。
已在自适应表单上启用reCAPTCHA服务。 您可以预览表单并查看验证码是否正常工作。
-
-
保存属性。
根据规则显示或隐藏验证码组件 show-hide-captcha
您可以选择根据您在自适应表单中组件上应用的规则来显示或隐藏CAPTCHA组件。 选择组件,选择
例如,仅当表单中的“货币值”字段的值超过25000时,CAPTCHA组件才必须在自适应表单中显示。
选择表单中的 货币值 字段并创建以下规则:
- 如果选择大小为 不可见 或reCAPTCHA Enterprise基于得分的键的reCAPTCHA v2配置,则显示/隐藏选项不适用。
验证验证码 validate-captcha
您可以在提交表单时验证自适应表单中的验证码,也可以根据用户操作和条件进行验证码验证。
在提交表单时验证验证码 validation-form-submission
要在提交自适应表单时自动验证验证码,请执行以下操作:
- 选择CAPTCHA组件并选择
以查看组件属性。 - 在 验证验证码 部分中,选择在提交表单时验证验证码。
- 选择
以保存组件属性。
在用户操作和条件上验证验证码 validate-captcha-user-action
要根据条件和用户操作验证验证码,请执行以下操作:
-
选择CAPTCHA组件并选择
以查看组件属性。 -
在 验证CAPTCHA 部分中,针对用户操作 选择 验证CAPTCHA。
-
选择
以保存组件属性。note note NOTE 如果您选择大小为 不可见 或reCAPTCHA基于企业得分的密钥的reCAPTCHA v2配置,则用户操作上的有效Captcha不适用。
Experience Manager Forms提供了ValidateCAPTCHA API以使用预定义条件验证验证码。 您可以使用自定义提交操作或通过定义自适应表单中组件的规则来调用API。
以下是使用预定义条件验证CAPTCHA的ValidateCAPTCHA API示例:
if (slingRequest.getParameter("numericbox1614079614831").length() >= 5) {
GuideCaptchaValidatorProvider apiProvider = sling.getService(GuideCaptchaValidatorProvider.class);
String formPath = slingRequest.getResource().getPath();
String captchaData = slingRequest.getParameter(GuideConstants.GUIDE_CAPTCHA_DATA);
if (!apiProvider.validateCAPTCHA(formPath, captchaData).isCaptchaValid()){
response.setStatus(400);
return;
}
}
The example signifies that the ValidateCAPTCHA API validates the CAPTCHA in the form only if number of digits in the numeric box specified by the user while filling the form is greater than 5.
Option 1: Use Experience Manager Forms ValidateCAPTCHA API to validate CAPTCHA using a custom Submit Action
Perform the following steps to use the ValidateCAPTCHA API to validate CAPTCHA using a custom Submit Action:
- Add the script that includes the
ValidateCAPTCHAAPI to custom Submit Action. For more on custom Submit Actions, see Create a custom Submit Action for Adaptive Forms. - Select the name of the custom Submit Action from the Submit Action drop-down list in Submission properties of an Adaptive Form.
- 选择提交。 The CAPTCHA gets validated based on the conditions defined in
ValidateCAPTCHAAPI of the custom Submit Action.
Option 2: Use Experience Manager Forms ValidateCAPTCHA API to validate CAPTCHA on a user action before submitting the form
You can also invoke ValidateCAPTCHA API by applying rules on a component in an Adaptive Form.
For example, you add a Validate CAPTCHA button in an Adaptive Form and create a rule to invoke a service on the click of a button.
The following figure illustrates how you can invoke a service on the click of a Validate CAPTCHA button:
You can invoke the custom servlet that includes ValidateCAPTCHA API using the rule editor and enable or disable the submit button of the Adaptive Form based on the validation result.
Similarly, you can use rule editor to include a custom method to validate CAPTCHA in an Adaptive Form.