AEM/CQ6.2：如何将Google reCaptcha或内置验证码整合到自适应表单上？

问题描述：

有人创建了一个使用自适应表单的表单。AEM/CQ6.2：如何将Google reCaptcha或内置验证码整合到自适应表单上？

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

我试过使用内置的验证码（Form => Captcha）。我确认captcha字段是按要求勾选的，但即使captcha字段为空，我也没有问题提交表单。
我在考虑整合Google的reCaptcha和我见过的最佳指南是这样的：PracticalAEM article。但它并没有真正告诉我如何将这个新组件包含到我现有的设置中。

非常感谢您的帮助！

这似乎真的像一个普通的编程任务。只要在表单上正确阅读重新验证文档和Adobe的文档，以确保您了解它们的工作方式。你一定需要创建一个新的组件来处理它。 – ub1k

答

验证码应该在您的应用程序客户端和服务器的两端执行。让形容验证码是如何工作的：

1）浏览器渲染页面验证码脚本site ID（也就是你没有基于什么样的文章）

2）用户的回答验证码和谷歌返回回一些长字符串，图形验证码（在那一刻技术上验证码还没有验证）

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

4）提交验证码captcha code到后端。（验证码仍未经验证）

这部分是不是你阅读，因为它是基本的所有验证码的文章中描述：

5）后端应该阅读captcha code，并要求谷歌为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验证。

和任何的captcha实现有两个部分：

1）前端，您可以实现验证码检查

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"/>

。内容。XML

3210

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>

注：更换站点-KEY

AEM/CQ6.2：如何将Google reCaptcha或内置验证码整合到自适应表单上？

相关推荐