recaptcha - 如何在单个页面上显示多个recaptchas？

Question

我在一个页面上有 2 个表单。其中一种形式一直显示 Recaptcha。另一个应该仅在某个事件(例如最大化登录尝试)之后显示 Recaptcha。因此，有时我需要 2 个 Recaptchas 才能出现在同一页面上。这可能吗？我知道我可能两个都可以用一个，但是我的布局方式，我更喜欢有 2 个。谢谢。

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

更新 2:如果我将每个表单都放在 iframe 中会怎样？这是一个可以接受的解决方案吗？

Answer 1

使用当前版本的 Recaptcha (reCAPTCHA API version 2.0)，您可以在一页上拥有多个 Recaptcha。

无需克隆 Recaptcha，也无需尝试解决问题。您只需输入多个 <div> Recaptchas 的元素并在其中显式呈现 Recaptchas。

使用 the Google Recaptcha API 很容易.这是示例 HTML 代码:

<form>
    <h1>Form 1</h1>
    <div><input type="text" name="field1" placeholder="field1"></div>
    <div><input type="text" name="field2" placeholder="field2"></div>
    <div id="RecaptchaField1"></div>
    <div><input type="submit"></div>
</form>

<form>
    <h1>Form 2</h1>
    <div><input type="text" name="field3" placeholder="field3"></div>
    <div><input type="text" name="field4" placeholder="field4"></div>
    <div id="RecaptchaField2"></div>
    <div><input type="submit"></div>
</form>

在您的 Javascript 代码中，您必须为 Recaptcha 定义一个回调函数:

<script type="text/javascript">
    var CaptchaCallback = function() {
        grecaptcha.render('RecaptchaField1', {'sitekey' : '6Lc_your_site_key'});
        grecaptcha.render('RecaptchaField2', {'sitekey' : '6Lc_your_site_key'});
    };
</script>

在此之后，您的 Recaptcha 脚本 URL 应如下所示:

<script src="https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit" async defer></script>

或者，您可以提供一个类名并使用您的类选择器循环这些元素并调用 .render()，而不是为您的 Recaptcha 字段提供 ID。 .