recaptcha 相关问题

为什么 Yii2 Captcha 忽略模板中的 {image}

我有这个捕获模板： field($model, '验证代码', [ '模板' => ' 我有这个捕获模板： <?= $form->field($model, 'verifyCode', [ 'template' => ' <div class="mb-4 field-signupform-verification required"> <div class="d-flex gap-2 align-items-center w-100">{input}{image}</div> <div class="invalid-feedback"></div> </div> ',])->widget(Captcha::class, [ 'imageOptions' => [ 'alt' => 'Captcha', 'title' => 'Click to refresh', 'style' => 'cursor: pointer', 'class' => 'ml-auto', ], 'options' => [ 'placeholder' => 'Code from picture', ], ]) ?> 问题是模板中的 {image} 被完全忽略，它只是将 {image} 回显为 html 文本。虽然有一个图像，但它位于输入的左侧，但我希望它位于右侧。怎么了？ 当您执行$form->field(...)->widget(Captcha::class, ...)时，您正在使用yii\captcha\Captcha作为yii\widgets\ActiveField内部的输入小部件。 field() 方法中传递的任何选项都是 ActiveField 小部件的选项，而不是 Captcha 小部件的选项。并且 ActiveField 小部件无法识别其模板中的 {image}，因为输入字段和图像都是由 Captcha 小部件生成的。因此，您需要将模板分成两部分。第一部分是您将在 field() 方法选项中设置的包装 html。第二部分是图像和输入顺序，您将在 widget() 方法选项中设置： <?= $form->field($model, 'verifyCode', [ 'template' => ' <div class="mb-4 field-signupform-verification required"> <div class="d-flex gap-2 align-items-center w-100">{input}</div> <div class="invalid-feedback"></div> </div>', ])->widget(Captcha::class, [ 'template' => '{input} {image}', 'imageOptions' => [ 'alt' => 'Captcha', 'title' => 'Click to refresh', 'style' => 'cursor: pointer', 'class' => 'ml-auto', ], 'options' => [ 'placeholder' => 'Code from picture', ], ]) ?>

使用 Google reCAPTCHA v3 进行语义 UI / 语义 UI 表单验证

我正在尝试找到一种使用 Google reCAPTCHA v3 验证 Semantic UI / Fomantic UI 表单的方法。我在 Stack 上找到了使用 Google reCAPTCHA v2 进行验证的选项。但是，V3的新形式

Ruby on Rails 在表单错误后重置 Recaptcha

我在 Ruby on Rails 的表单上使用 reCAPTCHA gem (https://github.com/ambethia/recaptcha)。当用户提交有错误的表单时，我遇到了问题（就像他们忘记了一个文件......

reCAPTCHA 2.0 未出现在 Safari 中（适用于 Edge、Chrome 和 Firefox）

我刚刚将 Google reCAPTCHA 2.0 集成到我的网站中。它在 Chrome、Firefox 和 Edge 中按预期工作，但在我的 MacBook Pro 上的 Safari 中无法工作/显示。 MacBook Pro：macOS Sierra 版本...

我如何使用 localhost 作为我的 recaptcha 域

我正在研究 flutter web，我想将 recapcha 集成到我的基本表单中。我已经在谷歌控制台上配置了 recaptcha。然而，出于我的开发目的，当我使用它时......

reCaptcha 复选框旋转 15 秒，然后保持未选中状态

我已将 reCaptcha 放在网站上。 reCaptcha 加载没有问题，但一旦您单击该复选框，它就会旋转 15 秒并保持未选中状态。它也不会进行任何后台连接...

Google recaptcha 在尝试在服务器端验证时发送乱码响应

我正在使用谷歌recaptcha v2。客户端工作完美并生成令牌，我将其传递给服务器以进行验证。 我使用该令牌向 google 进行 api 调用，作为响应，我得到了 gibbe...

Recaptcha 密钥，它在我的 Google Cloud Recaptcha 帐户中的什么位置？

我正在尝试在我的网站上设置谷歌验证码，我正在使用的插件要求提供网站密钥和秘密密钥。不知道密钥是什么，我在设置中的任何位置都找不到它

Joomla reCAPTCHA v2.0 旋转

在过去的几天里，我们的电子商务网站的验证码已停止工作。 我们现在无法接受订单，也无法在没有其他错误的情况下禁用它。 请帮忙。这刚刚在洛杉矶开始...

Google ReCaptcha 持续加载

我在我的网站上使用 Google 的 reCaptcha 2.0。它曾经运行良好，但后来有人给我发电子邮件说验证码持续加载 2 分钟.. 5 分钟.. 8 分钟.. 我知道这是一个问题。一旦点击...

Google recaptcha 远程 IP 解释

在recaptcha的文档中它说remoteip参数是可选的，但我不明白它的目的，因为即使我发送与REMOTE_ADDR不同的IP，来自Googl的响应...

通过请求绕过不可见的验证码

我正在尝试使用请求对网站进行扫描，以便机器人更加高效，当我在模拟流程时通过网络监视器查看 GET 和 POST 请求时，我...

Google reCaptcha v2 无法持续工作

我以前从未实现过Google Captcha，所以我不知道问题是什么。当我提交表单时，有时有效，有时无效。如果我提交表格时未检查

如何识别机器人的点击行为？

我开发了这个简单的应用程序，只需一个按钮即可触发不同的文本更改。我的目标是区分人类用户和潜在的机器人。如果点击发生得太快，就像......

React Google Recaptcha“executeRecaptcha”函数未定义问题

当另一个组件调用loginBefore函数时，我需要将返回的验证码令牌分配给captchaToken变量，但executeRecaptcha始终未定义，因此它执行代码块...

动态加载reCAPTCHA使用 JavaScript 加载验证码

有多种使用 JavaScript 加载 reCAPTCHA 的方法，如下所示： 使用 JavaScript 加载验证码 <p>有多种使用 JavaScript 加载 reCAPTCHA 的方法，如下所示：</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;title&gt;Loading captcha with JavaScript&lt;/title&gt; &lt;script src=&#34;https://code.jquery.com/jquery-1.12.0.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#39;text/javascript&#39;&gt; var captchaContainer = null; var loadCaptcha = function() { captchaContainer = grecaptcha.render(&#39;captcha_container&#39;, { &#39;sitekey&#39; : &#39;Your sitekey&#39;, &#39;callback&#39; : function(response) { console.log(response); } }); }; &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id=&#34;captcha_container&#34;&gt;&lt;/div&gt; &lt;input type=&#34;button&#34; id=&#34;MYBTN&#34; value=&#34;MYBTN&#34;&gt; &lt;script src=&#34;https://www.google.com/recaptcha/api.js?onload=loadCaptcha&amp;render=explicit&#34; async defer&gt;&lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>此代码在页面加载时加载验证码。我想在单击“MYBTN”时加载 reCAPTCHA。于是代码就变成了：</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;title&gt;Loading captcha with JavaScript&lt;/title&gt; &lt;script src=&#34;https://code.jquery.com/jquery-1.12.0.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#39;text/javascript&#39;&gt; $(&#39;#MYBTN&#39;).on(&#39;click&#39;,function(){ var captchaContainer = null; var loadCaptcha = function() { captchaContainer = grecaptcha.render(&#39;captcha_container&#39;, { &#39;sitekey&#39; : &#39;Your sitekey&#39;, &#39;callback&#39; : function(response) { console.log(response); } }); }; }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id=&#34;captcha_container&#34;&gt;&lt;/div&gt; &lt;input type=&#34;button&#34; id=&#34;MYBTN&#34; value=&#34;MYBTN&#34;&gt; &lt;script src=&#34;https://www.google.com/recaptcha/api.js?onload=loadCaptcha&amp;render=explicit&#34; async defer&gt;&lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>但是当我单击“MYBTN”并且 reCAPTCHA 未加载时，此代码不起作用。</p> </question> <answer tick="false" vote="14"> <p>你只需要调用loadCaptcha()即可</p> <p></p><div data-hide="false" data-lang="js"> <div> <pre><code>$(&#39;#MYBTN&#39;).on(&#39;click&#39;,function(){ var captchaContainer = null; var loadCaptcha = function() { captchaContainer = grecaptcha.render(&#39;captcha_container&#39;, { &#39;sitekey&#39; : &#39;Your sitekey&#39;, &#39;callback&#39; : function(response) { console.log(response); } }); }; loadCaptcha(); // THIS LINE WAS MISSING });</code></pre> <pre><code>&lt;script src=&#34;https://code.jquery.com/jquery-1.12.0.min.js&#34;&gt;&lt;/script&gt; &lt;div id=&#34;captcha_container&#34;&gt;&lt;/div&gt; &lt;input type=&#34;button&#34; id=&#34;MYBTN&#34; value=&#34;MYBTN&#34;&gt; &lt;script src=&#34;https://www.google.com/recaptcha/api.js?onload=loadCaptcha&amp;render=explicit&#34;&gt;&lt;/script&gt;</code></pre> </div> </div> <p></p> </answer> <answer tick="false" vote="9"> <p><strong>简单情况</strong></p> <p><strong>HTML</strong></p> <pre><code>&lt;input type=&#34;button&#34; id=&#34;MYBTN&#34; value=&#34;create captcha&#34;&gt; &lt;div id=&#34;captcha_container&#34;&gt;&lt;/div&gt; </code></pre> <p><strong>JS</strong></p> <pre><code>var testSitekey = &#39;6LeLzA4UAAAAANNRnB8kePzikGgmZ53aWQiruo7O&#39;; $(&#39;#MYBTN&#39;).click(function() { $(&#39;body&#39;).append($(&#39;&lt;div id=&#34;captcha_container&#34; class=&#34;google-cpatcha&#34;&gt;&lt;/div&gt;&#39;)); setTimeout(function() { grecaptcha.render(&#39;captcha_container&#39;, { &#39;sitekey&#39;: testSitekey }); }, 1000); }); </code></pre> <p><a href="https://jsfiddle.net/ali_soltani/554qx557/" rel="noreferrer"><strong>在线演示（jsfiddle）</strong></a></p> </answer> <answer tick="false" vote="6"> <p>您刚刚在嵌入式脚本中提到了 onload。您可以从嵌入式脚本中删除 onload，也可以将代码保留在函数名称 loadCaptcha 中的 onclick 事件之外。</p> <p><strong>1。第一个解决方案：</strong></p> <pre><code>$(&#39;#MYBTN&#39;).on(&#39;click&#39;,function(){ var captchaContainer = null; var loadCaptcha = function() { captchaContainer = grecaptcha.render(&#39;captcha_container&#39;, { &#39;sitekey&#39; : &#39;Your sitekey&#39;, &#39;callback&#39; : function(response) { console.log(response); } }); } }); &lt;script src=&#34;https://www.google.com/recaptcha/api.js?render=explicit&#34;&gt;&lt;/script&gt; </code></pre> <p><strong>2。第二种解决方案</strong></p> <pre><code>&lt;script type=&#39;text/javascript&#39;&gt; var captchaContainer = null; var loadCaptcha = function() { captchaContainer = grecaptcha.render(&#39;captcha_container&#39;, { &#39;sitekey&#39; : &#39;Your sitekey&#39;, &#39;callback&#39; : function(response) { console.log(response); } }); }; &lt;/script&gt; &lt;script src=&#34;https://www.google.com/recaptcha/api.js?onload=loadCaptcha&amp;render=explicit&#34; async defer&gt;&lt;/script&gt; </code></pre> <p>在第一个解决方案中，当您单击按钮时，您的代码将起作用。即使你不必将 then 放入 loadCaptcha 函数中，你也可以直接调用 grecaptcha.render 。</p> <p>但是当你在脚本标签中提到onload时，它不会根据你的点击起作用，然后它会找到你在脚本中提到的回调函数。当您在脚本的 onload 中编写 loadCaptcha 并在 onClick 事件中编写此函数时。当脚本标签执行时，代码尝试查找 loadCaptcha 函数，该函数在脚本标签执行之前尚未初始化（因为它将在单击事件上初始化），因此您的脚本无法正常工作。</p> </answer> <answer tick="false" vote="3"> <p><strong>JS</strong></p> <pre><code>// Loading captcha with JavaScript on button click jQuery(document).ready(function ($) { $(&#39;#MYBTN&#39;).on(&#39;click&#39;,function() { $.getScript( &#34;https://www.google.com/recaptcha/api.js?render=__YOUR_KEY__&#34; ) .done(function( script, textStatus ) { if(typeof grecaptcha !== &#34;undefined&#34;) { grecaptcha.ready(function () { grecaptcha.execute(&#39;__YOUR_KEY__&#39;, { action: &#39;homepage&#39; }) .then(function (token) { var recaptchaResponse = document.getElementById(&#39;captcha_container&#39;); recaptchaResponse.value = token; }); // Your other code here // You can control captcha badge here }); } }); }); }); </code></pre> <p><strong>HTML</strong></p> <pre><code>// Required HTML: &lt;body&gt; &lt;input type=&#34;button&#34; id=&#34;MYBTN&#34; value=&#34;MYBTN&#34;&gt; &lt;div id=&#34;captcha_container&#34;&gt;&lt;/div&gt; &lt;/body&gt; </code></pre> </answer> <answer tick="false" vote="1"> <p>我已经实现了仅在表单的必填字段之一成为焦点后才加载验证码。我还实现了一个检查变量来查看之前是否插入了验证码的依赖项。</p> <p>这是：</p> <pre><code>jQuery(&#39;#MyRequiredInputId&#39;).focus(function () { if(typeof loadedRecaptcha != &#39;undefined&#39;){ return; } jQuery.getScript(&#34;https://www.google.com/recaptcha/api.js?render=___YOURKEY__&#34;) .done(function (script, textStatus) { if (typeof grecaptcha !== &#34;undefined&#34;) { grecaptcha.ready(function () { var siteKey = &#39;___YOURKEY___&#39;; jQuery(&#39;body&#39;).append(jQuery(&#39;&lt;div id=&#34;captcha_container&#34; class=&#34;google-cpatcha&#34;&gt;&lt;/div&gt;&#39;)); setTimeout(function() { grecaptcha.render(&#39;captcha_container&#39;, { &#39;sitekey&#39;: siteKey }); }, 1000); }); } loadedRecaptcha = true; }); }); </code></pre> <p>请注意，就我而言，我有一个 <pre><code>&lt;div id= &#34;captcha_container&#34;&gt;&lt;/div&gt;</code></pre>，我想在其中显示我的验证码。</p> <p>结果：</p> <p><a href="https://user-images.githubusercontent.com/191149/74003233-fcfc4e80-49c5-11ea-942e-1b8f0f90c7a7.gif" rel="nofollow noreferrer"><img src="https://cdn.txt58.com/i/AXVzZXItaW1hZ2VzLmdpdGh1YnVzZXJjb250ZW50LmNvbS8xOTExNDkvNzQwMDMyMzMtZmNmYzRlODAtNDljNS0xMWVhLTk0MmUtMWI4ZjBmOTBjN2E3LmdpZg==" alt="enter image description here"/></a></p> </answer> <answer tick="false" vote="0"> <p>今天我也遇到了同样的问题，我发现即使没有打开登录模式，也有大约 21 个 Google Recaptcha 请求，这确实太多了）：</p> <p>尝试此方法后：</p> <p>HTML</p> <pre><code>&lt;div class=&#34;row&#34;&gt; &lt;div class=&#34;col-sm-12 btm10&#34;&gt; &lt;div id=&#34;captcha_container&#34;&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>JS</p> <pre><code>&lt;script&gt; var Sitekey = &#39;&lt;?php echo config(&#39;google_key&#39;) ?&gt;&#39;; $(&#39;#loginbtn&#39;).click(function() { $(&#39;body&#39;).append($(&#39;&lt;div id=&#34;captcha_container&#34; class=&#34;google-cpatcha&#34;&gt;&lt;/div&gt;&#39;)); setTimeout(function() { grecaptcha.render(&#39;captcha_container&#39;, { &#39;sitekey&#39;: Sitekey }); }, 1000); }); &lt;/script&gt; </code></pre> <p>最后，我得到了我想要的结果，现在验证码仅在登录模式打开时加载（基于 onClick 函数）。</p> <p><strong>不幸的是，</strong>我发现即使使用上面提到的延迟方法，主Google Recaptcha脚本仍然会在控制台中加载，因为主脚本是在页面头部声明的：</p> <p><pre><code>&lt;script src=&#34;https://www.google.com/recaptcha/api.js&#34;&gt;&lt;/script&gt;</code></pre></p> <p><a href="https://i.stack.imgur.com/zprB6.png" target="_blank"><img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tL3pwckI2LnBuZw==" alt=""/></a></p> <p>因此，我将其从 <pre><code>page head</code></pre> 中删除，然后将一些代码行组合在一起以使其正常工作，并且仅在模式打开时才加载，如下所示：</p> <p>最终代码：</p> <pre><code>&lt;div class=&#34;row&#34;&gt; &lt;div class=&#34;col-sm-12 btm10&#34;&gt; &lt;div id=&#34;captcha_container&#34;&gt;&lt;/div&gt; &lt;/div&gt; //Wherever you want the reCaptcha to appear &lt;/div&gt; &lt;script&gt; //Add to the header or the footer it doesn&#39;t matter var Sitekey = &#39;&lt;?php echo config(&#39;google_key&#39;) ?&gt;&#39;; $(&#39;#loginbtn&#39;).click(function() { $.getScript(&#34;https://www.google.com/recaptcha/api.js&#34;) //The trick is here. $(&#39;body&#39;).append($(&#39;&lt;div id=&#34;captcha_container&#34; class=&#34;google-cpatcha&#34;&gt;&lt;/div&gt;&#39;)); setTimeout(function() { grecaptcha.render(&#39;captcha_container&#39;, { &#39;sitekey&#39;: Sitekey }); }, 1000); }); &lt;/script&gt; </code></pre> <p>您可以在此处查看实际效果： <a href="https://youtu.be/dAZOSMR8iI8" rel="nofollow noreferrer">https://youtu.be/dAZOSMR8iI8</a></p> <p>谢谢你</p> </answer> <answer tick="false" vote="0"> <p>告诉Google您想要显式呈现验证码（当您准备好时）。 <a href="https://www.google.com/recaptcha/api.js?render=explicit" rel="nofollow noreferrer">https://www.google.com/recaptcha/api.js?render=explicit</a> api 脚本运行后，grecaptcha 即可在全球范围内使用。</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code> &lt;!DOCTYPE html&gt; &lt;html lang=&#34;en&#34;&gt; &lt;head&gt; &lt;/head&gt; &lt;body&gt; &lt;div id=&#34;whereIWantRecaptcha&#34;&gt;&lt;/div&gt; &lt;button id=&#34;myButton&#34;&gt;show Recaptcha&lt;/button&gt; &lt;script src=&#34;https://www.google.com/recaptcha/api.js?render=explicit&#34; async defer &gt;&lt;/script&gt; &lt;script&gt; var button = document.querySelector(&#39;#myButton&#39;); button.addEventListener(&#39;click&#39;, function(){ grecaptcha.render(&#39;whereIWantRecaptcha&#39;, { &#39;sitekey&#39; : &#39;6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI&#39; }); }); &lt;/script&gt; &lt;/body&gt; &lt;/html&gt;</code></pre> </div> </div> <p></p> </answer> </body></html>

如何完全推迟加载 Google reCaptcha 直到页面完全加载之后

我在网站上安装了 Google reCaptcha v2（复选框类型）。但即使使用“延迟”属性（基于页面速度测试），它也会显着减慢移动设备上的页面加载速度。所以，我...

如何在网页抓取时绕过不可见的 recaptcha v3

此网站受 recaptcha v3 保护，并将用户重定向到 recaptcha v2，即检测到异常流量或不良 cookie 时解决的复选框，尽管大多数时候它不会出现，所以我们都是

热衷于更改 vue 3 中的导出数据 &

这是我的代码 导出默认值{ name: '表单加载旋转器', 数据（）{ 返回{ 加载：假， 形式 ： { 电话： ””，

在nuxt2中实现验证码

我正在开发 Nuxt.js 2 项目，并且使用 @nuxtjs/recaptcha 包来实现 Google reCAPTCHA 进行表单验证。我已成功将 reCAPTCHA 添加到我的索引页面，但是当我添加...