ReCaptcha API v2样式

我没有太多的成功，find如何风格谷歌的新recaptcha（V2）。 最终的目标是使其响应，但我很难将样式应用于宽度等简单的事情。

他们的API文档似乎没有给出关于如何控制除主题参数之外的样式的任何细节，简单的CSS和JavaScript解决scheme并没有为我工作。

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

Answer 1

概述：

抱歉是成为坏消息的回答者，但经过研究和debugging，很明显，没有办法自定义新的reCAPTCHA控件的样式。 这些控件被封装在一个iframe ，它阻止了CSS的使用，而Same-Origin Policy则阻止了JavaScript访问内容，甚至排除了一个拙劣的解决scheme。

为什么不自定义API？

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

摘自你是机器人吗？ 介绍“无CAPTCHA reCAPTCHA” ：

虽然新的reCAPTCHA API听起来很简单，但是在这个适度的checkbox背后却有着高度的复杂性。 validation码一直依赖于机器人无法解决扭曲的文本。 然而，我们最近的研究表明，今天的人工智能技术能够以99.8％的准确率解决扭曲文本的最难变体。 因此，扭曲的文本本身不再是一个可靠的testing。

为了解决这个问题，去年我们为reCAPTCHA开发了一个高级风险分析后端，主动考虑用户与CAPTCHA的整个参与 – 在之前，期间和之后，确定用户是否是人。 这使我们能够更less地依靠input扭曲的文本，从而为用户提供更好的体验。 今年早些时候我们在情人节的post中谈到了这个问题。

如果您能够直接操纵控件元素的样式，则可能会轻易地干扰用户分析逻辑，从而使新的reCAPTCHA成为可能。

什么是自定义主题？

现在，新的API 提供了一个theme选项 ，通过它您可以select一个预设的主题，如light和dark 。 但目前还没有创build自定义主题的方法。 如果我们检查iframe ，我们会发现theme名称在src属性的查询string中传递。 这个URL看起来像下面的内容。

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

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

通过缩小的来源挖掘，我发现实际上有4个有效的主题值，比文档中列出的2个更多，但是default和standard相同。

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

没有自定义主题的代码，并且如果指定了其他theme值，则将使用standard主题。

结论是：

目前，没有办法完全devise新的reCAPTCHA元素，只有iframe周围的包装元素可以被风格化。 这几乎当然是有意的，以防止用户打破用户分析逻辑，使新的无validation码checkbox成为可能。 Google可能会实现一个有限的自定义主题API，可能允许您为现有元素select自定义颜色，但我不希望Google实现完整的CSS样式。

Answer 2

正如上面提到的，没有办法自动取款机。 但如果有人感兴趣的话，只要加上两行，至less可以使它看起来合理，如果它在任何屏幕上。 您可以在@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元素，并使其等于“紧凑”的情况下的移动。

请参阅： https ： //developers.google.com/recaptcha/docs/display

Answer 5

你可以做的是将ReCaptcha控件隐藏在div的后面。 然后在这个div上做你的造型。 并设置CSS“指针事件：无”，所以你可以点击通过div（ 点击通过一个DIV到底层元素 ）。

checkbox应该放在用户点击的地方。

Answer 6

您可以重新创buildrecaptcha，将其包装在一个容器中，只让checkbox可见。 我的主要问题是，我不能全宽，所以现在扩展到容器的宽度。 唯一的问题是，你可以看到一个轻弹过期，但只要它发生，我重置它。

看到这个演示http://codepen.io/alejandrolechuga/pen/YpmOJX

 function recaptchaReady () { grecaptcha.render('myrecaptcha', { 'sitekey': '6Lc7JBAUAAAAANrF3CJaIjt7T9IEFSmd85Qpc4gj', 'expired-callback': function () { grecaptcha.reset(); console.log('recatpcha'); } }); } 

 .recaptcha-wrapper { height: 70px; overflow: hidden; background-color: #F9F9F9; border-radius: 3px; box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.08); -webkit-box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.08); -moz-box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.08); height: 70px; position: relative; margin-top: 17px; border: 1px solid #d3d3d3; color: #000; } .recaptcha-info { background-size: 32px; height: 32px; margin: 0 13px 0 13px; position: absolute; right: 8px; top: 9px; width: 32px; background-image: url(recaptcha/api2/logo_48.png); background-repeat: no-repeat; } .rc-anchor-logo-text { color: #9b9b9b; cursor: default; font-family: Roboto,helvetica,arial,sans-serif; font-size: 10px; font-weight: 400; line-height: 10px; margin-top: 5px; text-align: center; position: absolute; right: 10px; top: 37px; } .rc-anchor-checkbox-label { font-family: Roboto,helvetica,arial,sans-serif; font-size: 14px; font-weight: 400; line-height: 17px; left: 50px; top: 26px; position: absolute; color: black; } .rc-anchor .rc-anchor-normal .rc-anchor-light { border: none; } .rc-anchor-pt { color: #9b9b9b; font-family: Roboto,helvetica,arial,sans-serif; font-size: 8px; font-weight: 400; right: 10px; top: 53px; position: absolute; a:link { color: #9b9b9b; text-decoration: none; } } g-recaptcha { // transform:scale(0.95); // -webkit-transform:scale(0.95); // transform-origin:0 0; // -webkit-transform-origin:0 0; } .g-recaptcha { width: 41px; /* border: 1px solid red; */ height: 38px; overflow: hidden; float: left; margin-top: 16px; margin-left: 6px; > div { width: 46px; height: 30px; background-color: #F9F9F9; overflow: hidden; border: 1px solid red; transform: translate3d(-8px, -19px, 0px); } div { border: 0; } } 

 <script src='https://www.google.com/recaptcha/api.js?onload=recaptchaReady&&render=explicit'></script> <div class="recaptcha-wrapper"> <div id="myrecaptcha" class="g-recaptcha"></div> <div class="rc-anchor-checkbox-label">I'm not a Robot.</div> <div class="recaptcha-info"></div> <div class="rc-anchor-logo-text">reCAPTCHA</div> <div class="rc-anchor-pt"> <a href="https://www.google.com/intl/en/policies/privacy/" target="_blank">Privacy</a> <span aria-hidden="true" role="presentation"> - </span> <a href="https://www.google.com/intl/en/policies/terms/" target="_blank">Terms</a> </div> </div> 

Answer 7

只需添加一个黑客解决scheme，使其响应。

在一个额外的div中包裹recaptcha：

 <div class="recaptcha-wrap"> <div id="g-recaptcha"></div> </div> 

添加样式。 这假设黑暗的主题。

 // Recaptcha .recaptcha-wrap { position: relative; height: 76px; padding:1px 0 0 1px; background:#222; > div { position: absolute; bottom: 2px; right:2px; font-size:10px; color:#ccc; } } // Hides top border .recaptcha-wrap:after { content:''; display: block; background-color: #222; height: 2px; width: 100%; top: -1px; left: 0px; position: absolute; } // Hides left border .recaptcha-wrap:before { content:''; display: block; background-color: #222; height: 100%; width: 2px; top: 0; left: -1px; position: absolute; z-index: 1; } // Makes it responsive & hides cut-off elements #g-recaptcha { overflow: hidden; height: 76px; border-right: 60px solid #222222; border-top: 1px solid #222222; border-bottom: 1px solid #222; position: relative; box-sizing: border-box; max-width: 294px; } 

这产生以下结果：

现在它将水平resize，并且没有边框。 recaptcha的标志会在右侧被切断，所以我把它藏在右边。 这也隐藏了隐私和条款链接，所以你可能想要添加回来。

我试图在包装元素上设置高度，然后垂直居中recaptcha降低高度。 不幸的是，任何组合的溢出：隐藏和较小的高度似乎杀死iframe。

Answer 8

在V2.0中是不可能的。 iframe阻止了这一切。 添加一个自定义的主题，而不是黑暗或轻的一个很难。

Answer 9

通过隐形reCAPTCHA的集成，您可以执行以下操作：

要启用隐形reCAPTCHA，而不是将参数放在div中，可以直接将它们添加到htmlbutton。

一个。 数据callback=””。 这就像checkboxvalidation码，但需要隐藏。

湾 数据徽章：这允许您重新定位reCAPTCHA徽章（即徽标和“受reCAPTCHA保护”文本）。 有效的选项为“bottomright”（默认），“bottomleft”或“inline”，将徽章直接放在button上方。 如果您使用内联徽章，则可以直接控制徽章的CSS。

Answer 10

我使用下面的技巧，使其响应和删除边界。 这个技巧也许隐藏了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 11

晚会之后，但也许我的解决scheme将有助于某人。

当视口更改或布局不稳定时，我还没有find任何适用于响应式网站的解决scheme。

所以我为django-cms创build了一个jQuery脚本，可以dynamic地适应不断变化的视口。 我将尽快更新这个响应，因为我需要一个更为模块化的，没有jQuery依赖性的现代变体。

HTML

 <div class="g-recaptcha" data-sitekey="{site_key}" data-size={size}> </div> 

CSS

 .g-recaptcha { display: none; } .g-recaptcha.g-recaptcha-initted { display: block; overflow: hidden; } .g-recaptcha.g-recaptcha-initted > * { transform-origin: top left; } 

JS

 window.djangoReCaptcha = { list: [], setup: function() { $('.g-recaptcha').each(function() { var $container = $(this); var config = $container.data(); djangoReCaptcha.init($container, config); }); $(window).on('resize orientationchange', function() { $(djangoReCaptcha.list).each(function(idx, el) { djangoReCaptcha.resize.apply(null, el); }); }); }, resize: function($container, captchaSize) { scaleFactor = ($container.width() / captchaSize.w); $container.find('> *').css({ transform: 'scale(' + scaleFactor + ')', height: (captchaSize.h * scaleFactor) + 'px' }); }, init: function($container, config) { grecaptcha.render($container.get(0), config); var captchaSize, scaleFactor; var $iframe = $container.find('iframe').eq(0); $iframe.on('load', function() { $container.addClass('g-recaptcha-initted'); captchaSize = captchaSize || { w: $iframe.width() - 2, h: $iframe.height() }; djangoReCaptcha.resize($container, captchaSize); djangoReCaptcha.list.push([$container, captchaSize]); }); }, lateInit: function(config) { var $container = $('.g-recaptcha.g-recaptcha-late').eq(0).removeClass('.g-recaptcha-late'); djangoReCaptcha.init($container, config); } }; window.djangoReCaptchaSetup = window.djangoReCaptcha.setup; 

Answer 12

如果有人仍然感兴趣，有一个简单的JavaScript库（没有jQuery依赖），命名为自定义recaptcha。 它可以让你自定义button与CSS和实施一些JS事件（就绪/检查）。 这个想法是使默认的recaptcha“不可见”，并把它放在一个button。 只要改变一下recaptcha的ID就可以了。

 <head> <script src="download/custom-recaptcha.min.js"></script> <style type="text/css"> #captcha { float: left; margin: 2%; background-color: rgba(72, 61, 139, 0.5); /* darkslateblue with 50% opacity */ border-radius: 2px; font-size: 1em; color: #C0FFEE; } #captcha.success { background-color: rgba(50, 205, 50, 0.5); /* limegreen with 50% opacity */ color: limegreen; } </style> </head> <body> <div id="captcha" data-sitekey="your_site_key" data-label="Click here" data-label-spacing="15"></div> </body> 

有关更多信息，请参阅https://azentreprise.org/read.php?id=1 。

Answer 13

大！ 现在，这里的样式可用于reCaptcha ..我只是使用内联样式，如：

 <div class="g-recaptcha" data-sitekey="XXXXXXXXXXXXXXX" style="transform: scale(1.08); margin-left: 14px;"></div> 

无论你想要做什么小的自定义内联样式…

希望它会帮助你！