google 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我不知道他们做什么。但它们可能大致对应于 settings for v2.

Answer 2

也许过去 2 年情况发生了变化，但您可以将 data-badge="bottomleft" 作为属性添加到您的提交按钮中（或者您使用 g-recaptcha class 的任何元素).

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

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

Answer 3

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

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

Answer 4

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

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

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

这是一个例子：

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