猿问
下载APP

如何在单个页面上显示多个Recaptchas?

我在一页上有2个表格。其中一种形式具有始终显示的Recaptcha。另一个应仅在某些事件(例如,最大程度地尝试登录)后才显示recaptcha。所以有时候我需要2个Recaptchas才能出现在同一页面上。这可能吗?我知道我可能两者都可以使用一个,但是我有布局的方式,我更喜欢有2个。谢谢。

更新:嗯,我想这可能是不可能的。有人可以推荐另一个捕获库与reCaptcha一起使用吗?我真的希望能够在同一页面上有2个验证码。

更新2:如果将每种表单放在iframe中怎么办?这是可以接受的解决方案吗?


慕标琳琳
浏览 80回答 3
3回答

繁星点点滴滴

有人问过一个类似的问题,要在ASP页(链接)上执行此操作,并且在该处的共识是不可能使用Recaptcha来做。除非您愿意使用其他验证码,否则似乎一页上的多个表单必须共享验证码。如果您没有被限制在recaptcha中,那么Zend Frameworks Zend_Captcha组件(link)就是一个不错的库。它包含一些

跃然一笑

使用当前版本的Recaptcha(reCAPTCHA API版本2.0),您可以在一页上包含多个Recaptcha。无需克隆Recaptcha或尝试解决此问题。您只需要为Recaptcha放置多个div元素,并在其中显式呈现Recaptcha。使用Google recaptcha api可以轻松实现:https :&nbsp;//developers.google.com/recaptcha/docs/display#explicit_render这是示例html代码:<form>&nbsp; &nbsp; <h1>Form 1</h1>&nbsp; &nbsp; <div><input type="text" name="field1" placeholder="field1"></div>&nbsp; &nbsp; <div><input type="text" name="field2" placeholder="field2"></div>&nbsp; &nbsp; <div id="RecaptchaField1"></div>&nbsp; &nbsp; <div><input type="submit"></div></form><form>&nbsp; &nbsp; <h1>Form 2</h1>&nbsp; &nbsp; <div><input type="text" name="field3" placeholder="field3"></div>&nbsp; &nbsp; <div><input type="text" name="field4" placeholder="field4"></div>&nbsp; &nbsp; <div id="RecaptchaField2"></div>&nbsp; &nbsp; <div><input type="submit"></div></form>在您的javascript代码中,您必须为recaptcha定义一个回调函数:<script type="text/javascript">&nbsp; &nbsp; var CaptchaCallback = function() {&nbsp; &nbsp; &nbsp; &nbsp; grecaptcha.render('RecaptchaField1', {'sitekey' : '6Lc_your_site_key'});&nbsp; &nbsp; &nbsp; &nbsp; grecaptcha.render('RecaptchaField2', {'sitekey' : '6Lc_your_site_key'});&nbsp; &nbsp; };</script>之后,您的recaptcha脚本网址应如下所示:<script src="https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit" async defer></script>或者,也可以给类名称并使用类选择器循环这些元素,然后调用.render(),而不是为Recaptcha字段提供ID。

胡说叔叔

简单明了:1)通常使用以下命令创建您的Recaptcha字段:<div class="g-recaptcha" data-sitekey="YOUR_KEY_HERE"></div>2)加载脚本:<script src="https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit" async defer></script>3)现在调用它来遍历字段并创建Recaptchas:<script type="text/javascript">&nbsp; var CaptchaCallback = function() {&nbsp; &nbsp; jQuery('.g-recaptcha').each(function(index, el) {&nbsp; &nbsp; &nbsp; &nbsp; grecaptcha.render(el, {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'sitekey' : jQuery(el).attr('data-sitekey')&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ,'theme' : jQuery(el).attr('data-theme')&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ,'size' : jQuery(el).attr('data-size')&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ,'tabindex' : jQuery(el).attr('data-tabindex')&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ,'callback' : jQuery(el).attr('data-callback')&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ,'expired-callback' : jQuery(el).attr('data-expired-callback')&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ,'error-callback' : jQuery(el).attr('data-error-callback')&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; });&nbsp; };</script>
打开App,查看更多内容
随时随地看视频慕课网APP
我要回答