ReCaptcha API v2样式 [英] ReCaptcha API v2 Styling

问题描述

我没有太多成功找到如何风格Google的新recaptcha（v2）。最终的目标是使其响应，但我很难应用样式甚至简单的东西，如宽度。

I have not had much success finding how to style Google's new recaptcha (v2). The eventual goal is to make it responsive, but I am having difficulty applying styling for even simple things like width.

他们 API文档似乎没有提供任何有关如何控制样式的细节，除了主题参数，以及简单的CSS& JavaScript解决方案并不适用于我。

Their API documentation does not appear to give any specifics on how to control styling at all other than the theme parameter, and simple CSS & JavaScript solutions haven't worked for me.

基本上，我需要能够将CSS应用于Google的新版本reCaptcha。使用JavaScript是可以接受的。

Basically, I need to be able to apply CSS to Google's new version of reCaptcha. Using JavaScript with it is acceptable.

推荐答案

概述：

作为坏消息的回答者，但在研究和调试之后，很清楚，没有办法自定义新的reCAPTCHA控件的样式。这些控件包装在 iframe 中，这会阻止使用CSS对其进行样式化，同源策略阻止JavaScript访问内容，排除即使是一个解决方案。

Overview:

Sorry to be the answerer of bad news, but after research and debugging, it's pretty clear that there is no way to customize the styling of the new reCAPTCHA controls. The controls are wrapped in an iframe, which prevents the use of CSS to style them, and Same-Origin Policy prevents JavaScript from accessing the contents, ruling out even a hacky solution.

与 reCAPTCHA API Version 1.0 ，则在 API版本中没有自定义选项2.0 。如果我们考虑这个新API是如何工作的，那么为什么不会有什么惊喜。

Unlike reCAPTCHA API Version 1.0, there are no customize options in API Version 2.0. If we consider how this new API works, it's no surprise why.

虽然新的reCAPTCHA API听起来很简单，但背后有很高的复杂性那个温和的复选框。 CAPTCHA长期以来一直依赖于机器人无法解决扭曲的文本。然而，我们的研究最近表明，今天的人工智能技术可以解决即使是最困难的变形文本，99.8％的准确率。因此，扭曲的文本本身不再是一个可靠的测试。

While the new reCAPTCHA API may sound simple, there is a high degree of sophistication behind that modest checkbox. CAPTCHAs have long relied on the inability of robots to solve distorted text. However, our research recently showed that today’s Artificial Intelligence technology can solve even the most difficult variant of distorted text at 99.8% accuracy. Thus distorted text, on its own, is no longer a dependable test.

为了解决这个问题，去年我们开发了一个高级风险分析后端reCAPTCHA，积极考虑用户的与CAPTCHA的整个参与 - 在之前，期间和之后 - 以确定该用户是否是人。这使我们更少依赖打字失真的文本，反过来，为用户提供更好的体验。

To counter this, last year we developed an Advanced Risk Analysis backend for reCAPTCHA that actively considers a user’s entire engagement with the CAPTCHA—before, during, and after—to determine whether that user is a human. This enables us to rely less on typing distorted text and, in turn, offer a better experience for users. We talked about this in our Valentine’s Day post earlier this year.

如果你能够直接操作控制元素的样式，

If you were able to directly manipulate the styling of the control elements, you could easily interfere with the user-profiling logic that makes the new reCAPTCHA possible.

现在，新的API 提供主题

Now the new API does offer a theme option, by which you can choose a preset theme such as light and dark. However there is not presently a way to create a custom theme. If we inspect the iframe, we will find the theme name is passed in the query string of the src attribute. This URL looks something like the following.

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

此参数确定在

i.stack.imgur.com/4X4Ks.pngalt =element class name>

通过缩小源代码，我发现实际上有4个有效主题值，这超过了文档中列出的2，但默认和标准与 light 。

Digging through the minified source, I found that there are actually 4 valid theme values, which is more than the 2 listed in the documentation, but default and standard are the same as light.

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

We can see the code that selects the class name from this object here.

如果指定了任何其他主题值，它将使用标准主题。

There is no code for a custom theme, and if any other theme value is specified, it will use the standard theme.

目前，没有办法对新的reCAPTCHA元素进行完全风格化， iframe 可以风格化。这几乎肯定是故意做的，以防止用户打破用户分析逻辑，使得新的无需验证码的复选框可能。 Google可能会实施有限的自定义主题API，也许允许您为现有元素选择自定义颜色，但我不希望Google实施完整的CSS样式。

At present, there is no way to fully style the new reCAPTCHA elements, only the wrapper elements around the iframe can be stylized. This was almost-certainly done intentionally, to prevent users from breaking the user profiling logic that makes the new captcha-free checkbox possible. It is possible that Google could implement a limited custom theme API, perhaps allowing you to choose custom colors for existing elements, but I would not expect Google to implement full CSS styling.

这篇关于ReCaptcha API v2样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！