recaptcha - 谷歌 reCAPTCHA v3 左下角

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.

这样，您调用执行的方式必须稍微更改为简单

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

例如。0而不是站点键作为第一个参数。

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

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

但除此之外sitekey，badge我不知道他们在做什么。但它们可能大致对应于 v2 的设置。

Answer 2

如果您以编程方式使用 V3，则可以改为更改脚本以包含该位置。

这是一个例子：

<script src="https://www.google.com/recaptcha/api.js?render=YOURKEY&badge=bottomleft"></script>

Answer 3

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

.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 4

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

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

Answer 5

也许在过去的 2 年里情况发生了变化，但您可以data-badge="bottomleft"在提交按钮中添加一个属性（或g-recaptcha类中的任何元素）。

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

不过，我不得不搜索源代码data-以查看可用的内容。reCaptcha v3 的文档似乎充满了漏洞。