ReCaptcha API v2样式

Question

我没有成功找到如何设计谷歌的新recaptcha(v2).最终的目标是让它具有响应性,但是我很难应用样式来处理宽度等简单的事情.

他们的API文档似乎没有提供关于如何控制除主题参数以外的样式的任何细节,简单的CSS和JavaScript解决方案对我没有用.

基本上,我需要能够将CSS应用到Google的新版reCaptcha中.使用JavaScript是可以接受的.

Answer 1

概述:

很抱歉成为坏消息的回答者,但经过研究和调试后,很明显无法自定义新reCAPTCHA控件的样式.控件包装在一个iframe,它阻止使用CSS来设置它们的样式,而Same-Origin Policy阻止JavaScript访问内容,排除了一个hacky解决方案.

为什么不自定义API？:

与reCAPTCHA API Version 1.0不同,API Version 2.0中没有自定义选项.如果我们考虑这个新API如何工作,那么为什么并不奇怪.

摘自你是机器人吗？介绍"没有CAPTCHA reCAPTCHA":

虽然新的reCAPTCHA API可能听起来很简单,但是这个适度的复选框背后有很高的复杂性.长期以来,CAPTCHA一直依赖于机器人无法解决扭曲的文本.然而,我们的研究最近表明,今天的人工智能技术甚至能够以99.8%的准确度解决扭曲文本中最难的变体.因此,扭曲的文本本身不再是可靠的测试.

为了解决这个问题,去年我们为reCAPTCHA开发了一个高级风险分析后端,该后端主动考虑用户在CAPTCHA之前,期间和之后的整个参与度,以确定该用户是否为人.这使我们能够更少地依赖于输入扭曲的文本,从而为用户提供更好的体验.我们在今年早些时候的情人节那天发表了这篇文章.

如果您能够直接操作控件元素的样式,则可能很容易干扰使新reCAPTCHA成为可能的用户分析逻辑.

自定义主题怎么样？:

现在,新的API 确实提供了一个theme选项,您可以通过该选项选择预设主题,例如light和dark.但是,目前没有办法创建自定义主题.如果我们检查iframe,我们会发现该theme名称是在src属性的查询字符串中传递的.此URL类似于以下内容.

https://www.google.com/recaptcha/api2/anchor?...&theme=dark&...

此参数确定在包装器元素中使用的CSS类名称,iframe并确定要使用的预设主题.

通过缩小的源代码,我发现实际上有4个有效的主题值,超过了文档中列出的2个,但是default和standard它们相同light.

我们可以在这里看到从这个对象中选择类名的代码.

自定义主题没有代码,如果theme指定了任何其他值,它将使用standard主题.

结论:

目前,没有办法完全设计新的reCAPTCHA元素,只有样式周围的包装元素iframe才能被设计.这几乎肯定是故意完成的,以防止用户破坏用户分析逻辑,使新的无验证码复选框成为可能.Google可能会实现有限的自定义主题API,也许允许您为现有元素选择自定义颜色,但我不希望Google实现完整的CSS样式.

Answer 2

正如上面提到的那样,ATM没有办法.但是如果有人感兴趣的话,那么通过添加两行你至少可以使它看起来合理,如果它在任何屏幕上都会中断.您可以在@media查询中指定不同的值.

<div id="recaptchaContainer" style="transform:scale(0.8);transform-origin:0 0"></div>

希望这有助于任何人:-).

Answer 3

不幸的是我们不能设计reCaptcha v2,但它可以让它看起来更好,这里是代码:

点击这里预览

.g-recaptcha-outer{
    text-align: center;
    border-radius: 2px;
    background: #f9f9f9;
    border-style: solid;
    border-color: #37474f;
    border-width: 1px;
    border-bottom-width: 2px;
}
.g-recaptcha-inner{
    width: 154px;
    height: 82px;
    overflow: hidden;
    margin: 0 auto;
}
.g-recaptcha{
    position:relative;
    left: -2px;
    top: -1px;
}

<div class="g-recaptcha-outer">
    <div class="g-recaptcha-inner">
        <div class="g-recaptcha" data-size="compact" data-sitekey="YOUR KEY"></div>
    </div>
</div>

Answer 4

将数据大小属性添加到google recaptcha元素,并在移动设备中使其等于"compact".

参考:google recaptcha docs

Answer 5

我使用以下技巧使其响应并删除边框。这个技巧可能会隐藏 recaptcha 消息/错误。

此样式适用于 rtl lang，但您可以轻松更改它。

.g-recaptcha {
    position: relative;
    width: 100%;
    background: #f9f9f9;
    overflow: hidden;
}

.g-recaptcha > * {
    float: right;
    right: 0;
    margin: -2px -2px -10px;/*remove borders*/ 
}

.g-recaptcha::after{
    display: block;
    content: "";
    position: absolute;
    left:0;
    right:150px;
    top: 0;
    bottom:0;
    background-color: #f9f9f9;
    clear: both;
}

<div class="g-recaptcha" data-sitekey="Your Api Key"></div>
<script src='https://www.google.com/recaptcha/api.js?hl=fa'></script>

Answer 6

您可以做的是将 ReCaptcha 控件隐藏在 div 后面。然后在这个 div 上设置你的样式。并在其上设置CSS“pointer-events：none”，这样您就可以单击div（单击通过DIV到底层元素）。

该复选框应该位于用户单击的位置。

Answer 7

我在尝试为具有浅色和深色模式的网站设计 ReCaptcha v2 样式时遇到了这个答案。进行了更多尝试，发现除此之外transform，filter还应用于iframe元素，因此最终使用默认/浅色 ReCaptcha 并在用户处于深色模式时执行此操作：

.g-recaptcha {
    filter: invert(1) hue-rotate(180deg);
}

当hue-rotate(180deg)用户单击它时，徽标仍然是蓝色的，复选标记仍然是绿色的，同时保持白色invert()变为黑色，反之亦然。

在任何答案或评论中都没有看到这一点，因此决定分享，即使这是一个旧线程。