Question

通读https://www.gstatic.com/recaptcha/api2/v1531759913576/recaptcha__en.js处的代码，有很多对bottomleft的引用（我认为通常与放置图标的bottomright相反）。

但是如何启用此设置并将图标移到左下方？

Answer 1

解决了这个问题。您需要：

window._grecaptcha_callback = () => {
  window.grecaptcha.render({
    sitekey: grecaptcha_key,
    badge: 'bottomleft',
  })
  window.grecaptcha.ready(() => {
    // grecaptcha is ready
  })
}

然后将脚本加载为https://www.google.com/recaptcha/api.js?onload=_grecaptcha_callback。

通过这种方式，您调用execute的方式必须稍微改变一下

window.grecaptcha.execute(0, {action})

例如0代替站点密钥作为第一个参数。

查看代码，还有许多其他未记录的设置：

sitekey, type, theme, size, tabindex, stoken, bind, preload, badge, s, pool, 'content-binding', action

但是除了sitekey和badge之外，我不知道他们做什么。但是它们可能大致对应于settings for v2。

Answer 2

您可以模拟图标的左下角位置和悬停效果。

.grecaptcha-badge {
    right: auto !important;
    left: 0;
    width: 70px !important;

    -webkit-transition: width 0.5s ease-in-out !important;
    -moz-transition: width 0.5s ease-in-out !important;
    -o-transition: width 0.5s ease-in-out !important;
    transition: width 0.5s ease-in-out !important;

    &:hover {
        width: 256px !important;
    }
 }

Answer 3

在过去的两年中，情况可能发生了变化，但是您只需在提交按钮（或data-badge="bottomleft"类中具有的任何元素）中添加g-recaptcha作为属性即可。

它也需要data-theme="dark"，很酷。

仍然，我必须在源代码中搜索data-才能看到可用的代码。 reCaptcha v3的文档似乎充满了漏洞。

Answer 4

这会将徽章放在左下角并减少他的宽度，从而消除幻灯片动画效果。

.grecaptcha-badge {
  width: 70px !important;
  left: 4px;
}

谷歌reCAPTCHA v3左下

4 个答案: