Question

有人创建了一个使用自适应表单的表单。

我想在表单上包含某种验证码功能。

我尝试使用内置验证码（Form =＆gt; Captcha）。我确保根据需要勾选验证码字段，但即使验证码字段为空，我也无需提交表单。
我正在考虑整合Google的reCaptcha和我见过的最佳指南：PracticalAEM article。但它并没有真正告诉我如何将这个新组件包含到我现有的设置中。

非常感谢您的帮助！

Answer 1

应在应用程序客户端和服务器的两端实现验证码。让我们描述一下reCaptcha的工作原理：

1）带有site ID的reCaptcha脚本的浏览器呈现页面（这是您根据文章所做的）

2）用户回答reCaptcha和google使用验证码返回一些长字符串（在那一刻技术上验证密码仍未验证）

3）你的前端必须决定如何处理响应（通常你把它放在必填字段中）

4）将reCaptcha captcha code提交给backEnd。（验证码仍未验证）

您阅读的文章中未对此部分进行描述，因为它是所有验证码的基础：

5）后端应阅读captcha code并请求Google验证captcha code当前site ID

    ReCaptchaImpl reCaptcha = new ReCaptchaImpl();
    reCaptcha.setPrivateKey("your_private_key");

    String challenge = request.getParameter("recaptcha_challenge_field");
    String uresponse = request.getParameter("recaptcha_response_field");
    ReCaptchaResponse reCaptchaResponse = reCaptcha.checkAnswer(remoteAddr, challenge, uresponse);

    if (reCaptchaResponse.isValid()) {
       ....
    } else {
       //send response to browser with message "Captcha is invalid"
    }

正如您所看到的，只有从谷歌到后端的响应是reCaptcha验证。

对于任何验证码实现，有两个部分：

1）您可以在哪里进行验证码检查

2）后端，您可以验证检查是否正确完成。

Answer 2

看看这是否有帮助。我在一个简单的html表单上做了这个（不适应）。

文件夹结构..

 recaptcha (main component folder name)
 > _cq_editConfig.xml
 > .content.xml
 > dialog.xml
 > recaptch.html

<强> cq_editConfig.xml

 <?xml version="1.0" encoding="UTF-8"?>
 <jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0"
  xmlns:jcr="http://www.jcp.org/jcr/1.0"    
  xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
  cq:disableTargeting="true"
  jcr:primaryType="cq:EditConfig"/>

<强> .content.xml

 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" 
  xmlns:jcr="http://www.jcp.org/jcr/1.0" 
  xmlns:sling="http://sling.apache.org/jcr/sling/1.0" 
  allowedParents="[*/parsys]" 
  componentGroup="ABC Commons"   
  jcr:description="ABC reCaptcha"/>

<强> dialog.xml

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
jcr:primaryType="cq:Dialog"
title="ABC reCaptcha Component"       
xtype="dialog">
<items jcr:primaryType="cq:WidgetCollection"></items>
</jcr:root>

<强> recaptcha.html

<div class="col-md-12">
 <div id="response-div" style="color:red; font-weight: bold;"></div>
 <script src='https://www.google.com/recaptcha/api.js?onload=reCaptchaCallback&render=explicit' async defer></script>
 <div id="rcaptcha" class="g-recaptcha" data-sitekey="SITE-KEY"></div>
 <input type="hidden" value="true" id="recaptchaRequired" name="recaptchaRequired" />    
 <button id="addButton" class="btn plus btn-success">Submit</button>
 </div>           
</div>

<script>
 var RC2KEY = 'SITE-KEY';
 var doSubmit = false;

 function reCaptchaVerify(response) {
  if (response === document.querySelector('.g-recaptcha-response').value) {
    doSubmit = true;
   }
 }

 function reCaptchaExpired () {
   /* do something when it expires */
 }

 function reCaptchaCallback () {    
   grecaptcha.render('rcaptcha', {
    'sitekey': RC2KEY,
    'callback': reCaptchaVerify,
    'expired-callback': reCaptchaExpired
   });
 }

 $("#addButton").click(function (e) {
    e.preventDefault();
    if (doSubmit) {
        //alert('submit pressed');
        $( "form:first" ).submit();
    } else {
        //alert('recaptcha not selected');
        document.getElementById("response-div").innerHTML = "Recaptcha is required!";            
    }
 }); 

</script>

注意：替换SITE-KEY

AEM / CQ6.2：如何在自适应表单上集成Google reCaptcha或内置验证码？

2 个答案: