如何管理Google reCaptcha v3(不可见)中的错误消息

huangapple go评论79阅读模式
英文:

How to manage the error message in Google reCaptcha v3 ( invisible )

问题

我们正在在我们的网站中实施“新”的Google reCaptcha v3,它应该是不可见的,但是,如果您的实施一切正常,您将收到一个粘性徽章,以验证您的网站受到此技术的保护。

这个不是问题,因为Google提供了有关如何隐藏它以及最重要的是您是否能够做到这一点的信息

问题出现在用户尝试使用旧浏览器访问您的网站时,reCaptcha服务停止工作,并将以下代码放在您的网页末尾:

<div>
  <div>
    <noscript>启用JavaScript以获取reCAPTCHA挑战。</noscript>
    <div class="if-js-enabled">获取<a href="https://support.google.com/recaptcha/?hl=en#6223828">兼容浏览器</a>以获取reCAPTCHA挑战。</div>
    <br>
    <br>
    <a href="https://support.google.com/recaptcha#6262736" target="_blank">为什么我要这样做?</a>
  </div>
</div>

我没有找到任何关于如何处理这个错误的文档、线程等等。

我只是想以最干净的方式处理这个异常并隐藏这段代码。

还有其他人遇到过这个错误吗?

英文:

We are implementing the "new" Google reCaptcha v3 in our website what's supposed to be invisible, but, if all is going ok with your implementation you will receive a sticky badge that verifies that your site is protected by this technology.

That one is not the problem, because Google provides information about how to hide it and the most important, if you could do it or not.

The problem comes when an user tries to go into your website with an old browser, the reCaptcha service stops working and also places this code at the end of your web:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

&lt;div&gt;
  &lt;div&gt;
    &lt;noscript&gt;Enable JavaScript to get a reCAPTCHA challenge.&lt;br&gt;&lt;/noscript&gt;
    &lt;div class=&quot;if-js-enabled&quot;&gt;Get a &lt;a href=&quot;https://support.google.com/recaptcha/?hl=en#6223828&quot;&gt;compatible browser&lt;/a&gt;
to get a reCAPTCHA challenge.
    &lt;/div&gt;
    &lt;br&gt;
    &lt;br&gt;
    &lt;a href=&quot;https://support.google.com/recaptcha#6262736&quot; target=&quot;_blank&quot;&gt;Why do I have to do this?&lt;/a&gt;
  &lt;/div&gt;
&lt;/div&gt;

<!-- end snippet -->

I did not found any documentation, thread, etc.. about how to manage this error..

I just want to manage this exception and hide this piece of code in the cleanest way possible.

Anyone else had to face with this error?

答案1

得分: 1

如果您只想隐藏此内容不让用户看到,您可以使用CSS进行如下操作:

.if-js-enabled, .if-js-enabled ~ * {
    display: none;
}

(我会抑制诱惑,不告诉您停止支持旧的浏览器,假设您有充分的理由这样做 😁)

编辑: 或者,如果您不想依赖Google提供的类名保持不变(尽管理论上在给定版本的reCAPTCHA中它们应该保持不变),您可以将消息放在其他父元素中。假设它显示在与徽标相同的位置,您可以将徽标呈现为内联(参见此答案),然后将CSS规则应用于您分配给父元素的自定义类。

英文:

If you are just looking to hide this content from the user's view, you could do so with CSS:

.if-js-enabled, .if-js-enabled ~ * {
    display: none;
}

(I'll avoid the temptation to tell you to stop supporting old browsers and assume you have a good reason to do so 😁)

EDIT: Alternatively, if you don't want to rely on the class names from Google staying the same (even though they should in theory for a given version of reCAPTCHA), you could place the message within some other parent div. Assuming it is displayed in the same place as the badge, you could render the badge inline (see this answer) and apply the CSS rule to some custom class you assign to the parent div.

huangapple
  • 本文由 发表于 2020年1月3日 16:20:21
  • 转载请务必保留本文链接:https://go.coder-hub.com/59575222.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定