谷歌 reCAPTCHA v3 左下角

Posted 2023-02-18

【中文标题】谷歌 reCAPTCHA v3 左下角

【英文标题】：google reCAPTCHA v3 bottomleft

【发布时间】：2018-12-28 20:49:40

【问题描述】：

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

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

【参考方案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。

【参考方案2】：

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

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

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

【参考方案3】：

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

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

【参考方案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;
    
 

【参考方案5】：

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

这是一个例子：

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

【讨论】：

谢谢！我不知道他们为什么没有记录这一点