实施来自Google的新Invisible reCaptcha [英] Implement the new Invisible reCaptcha from Google
问题描述
我正在构建一个PHP网站，我想在登录表单上添加一个验证码。我使用了Google的新隐形reCaptcha ，但我在实施时遇到问题它（HTML部分，PHP正在工作）。
现在我得到的用于正常reCaptcha的代码如下所示（根据Google reCaptcha指令这个工程）：
< form action = test.php method =POST>
< input type =textname =emailplaceholder =Email>
< input type =passwordname =passwordplaceholder =Password>
<！ - < Google reCaptcha> - >
< div class =g-recaptchadata-sitekey =< sitekey>>< / div>
<！ - < / Google reCaptcha> - >
< input type =submitname =loginclass =loginmodal-submitvalue =Login>
< / form>
当我注册时，在确认电子邮件中发送了一些说明（大约需要24小时才能获得确认）。这表示以下内容：
隐形reCAPTCHA集成
- 请确保您的网站密钥已被列入白名单的隐形reCAPTCHA。
如果您尚未将您的网站与reCAPTCHA v2集成，请按照我们的开发者指南获取实施细节。
- 验证用户的回复没有变化。 >
要启用隐形reCAPTCHA，而不是将参数放在div中，可以直接将它们添加到html按钮。
3a。数据回调=。这可以像复选框captcha一样工作，但需要隐藏。
3b。数据徽章：这允许您重新定位reCAPTCHA徽章（即徽标和受reCAPTCHA保护文本）。有效选项为'bottomright'（默认），'bottomleft'或'inline'，它们将徽章直接放在按钮上方。如果您使用内嵌徽章，则可以直接控制徽章的CSS。
我遇到的问题是HTML实现（因此我需要步骤3和1,2的帮助。 4正在为我工作）。其余的我与正常的reCaptcha一起工作，并根据指示，它应该是同样的事情。我不明白数据回调和数据徽章是什么以及它是如何工作的。一个代码示例如何实现隐形reCaptcha与我的表单如何设置将是非常好的！ 解决方案
隐形reCAPTCHA
实现Google的新Invisible reCAPTCHA与我们将v2添加到我们的网站非常相似。您可以像正常一样将其添加为自己的容器，或者将其添加到表单提交按钮的新方法。我希望本指南能够帮助您沿着正确的道路前进。
独立的CAPTCHA容器
实施recaptcha需要一些事情：
- Sitekey
- 类
- 回拨
- 绑定
这将是您的最终目标。
< div class =g-recaptchadata-sitekey =< sitekey> data-bind =recaptcha-submitdata-callback =submitForm>< / div>
使用独立方法时，必须将data-bind设置为提交按钮的ID。如果您没有此设置，您的验证码将不会隐藏。
回调也必须用于提交表单。一个不可见的验证码将取消提交按钮中的所有事件，因此您需要回调才能真正通过提交。
<脚本>
函数submitForm（）{
var form = document.getElementById（ContactForm）;
if（validate_form（form））{
form.submit（）;
} else {
grecaptcha.reset（）;
}
}
< / script>
注意在示例回调中还有自定义表单验证。在验证失败时重置reCAPTCHA非常重要，否则在CAPTCHA过期之前您将无法重新提交表单。
隐形CAPTCHA按钮
很多情况与上面的独立CAPTCHA相同，但是没有容器，所有内容都放在提交按钮上。
这是您的目标。
< button class =g-recaptchadata- sitekey = LT; sitekey> 中data-callback =submitFormdata-badge =inlinetype =submit>提交< / button>
这里有一些新东西，数据徽章。这是一个插入到包含reCAPTCHA功能所需输入的DOM中的div。它有三个参数，bottomleft，bottomright，inline。 Inline将使其直接显示在提交按钮上方，并允许您控制您希望如何设计风格。
开启您的问题
< form action =test.phpmethod =POSTid =theForm>
< script>
函数submitForm（）{
document.getElementById（theForm）。submit（）;
}
< / script>
< input type =textname =emailplaceholder =Email>
< input type =passwordname =passwordplaceholder =Password>
< div class =g-recaptchadata-sitekey =< sitekey> data-bind =recaptcha-submitdata-callback =submitForm>< / div>
< input type =submitname =loginclass =loginmodal-submitid =recaptcha-submitvalue =Login>
< / form>
或
< form action =test.phpmethod =POSTid =theForm>
< script>
函数submitForm（）{
document.getElementById（theForm）。submit（）;
}
< / script>
< input type =textname =emailplaceholder =Email>
< input type =passwordname =passwordplaceholder =Password>
< button class =loginmodal-submit g-recaptchadata-sitekey =< sitekey> data-callback =submitFormdata-badge =inlinetype =submitvalue =Login>提交< / button>
< / form>
我希望这可以帮助您和未来的编码人员。随着技术的发展，我会随时更新。
I'm building a PHP website where I would like to put a captcha on the login form. I went with Google's new Invisible reCaptcha but I'm having trouble with implementing it (HTML part, the PHP is working).
The code I've got now for the "normal" reCaptcha is the following (as according to the Google reCaptcha instructions and this works):
<form action=test.php method="POST">
<input type="text" name="email" placeholder="Email">
<input type="password" name="password" placeholder="Password">
<!-- <Google reCaptcha> -->
<div class="g-recaptcha" data-sitekey="<sitekey>"></div>
<!-- </Google reCaptcha> -->
<input type="submit" name="login" class="loginmodal-submit" value="Login">
</form>
There were some instructions sent in the confirmation email when I signed up (took about 24 hours to get the confirmation). That says the following:
Invisible reCAPTCHA Integration
If you haven’t integrated your site with reCAPTCHA v2, please follow our developer guide for implementation details.
Please make sure that your site key that has been whitelisted for Invisible reCAPTCHA.
To enable the Invisible reCAPTCHA, rather than put the parameters in a div, you can add them directly to an html button.
3a. data-callback="". This works just like the checkbox captcha, but is required for invisible.
3b. data-badge: This allows you to reposition the reCAPTCHA badge (i.e. logo and ‘protected by reCAPTCHA’ text) . Valid options as ‘bottomright’ (the default), ‘bottomleft’ or ‘inline’ which will put the badge directly above the button. If you make the badge inline, you can control the CSS of the badge directly.
Verifying the user’s response has no changes.
The problem I have is with the HTML implementation (therefore I need help with step 3. 1,2 and 4 is working for me). The rest I have working with normal reCaptcha and according to the instructions, it should be the same thing. I do not understand what the data-callback and data-badge is and how it works. A code example of how to implement invisible reCaptcha with how my form is setup would be great!
Invisible reCAPTCHA
Implementing Google's new Invisible reCAPTCHA is very similar to how we add v2 to our site. You may add it as its own container like normal, or the new method of adding it to the form submit button. I hope this guide will help you along the correct path.
Standalone CAPTCHA Container
Implementing recaptcha requires a few things:
- Sitekey
- Class
- Callback
- Bind
This will be your final goal.
<div class="g-recaptcha" data-sitekey="<sitekey>" data-bind="recaptcha-submit" data-callback="submitForm"></div>
When using the standalone method, you must have data-bind set to the ID of your submit button. If you do not have this set, your captcha will not be invisible.
A callback must also be used to submit the form. An invisible captcha will cancel all events from the submit button, so you need the callback to actually pass the submission on.
<script>
function submitForm() {
var form = document.getElementById("ContactForm");
if (validate_form(form)) {
form.submit();
} else {
grecaptcha.reset();
}
}
</script>
Notice in the example callback that there is also custom form validation. It is very important that you reset the reCAPTCHA when the validation fails, otherwise you will not be able to re-submit the form until the CAPTCHA expires.
Invisible CAPTCHA Button
A lot of this is the same as with the standalone CAPTCHA above, but instead of having a container, everything is placed on the submit button.
This will be your goal.
<button class="g-recaptcha" data-sitekey="<sitekey>" data-callback="submitForm" data-badge="inline" type="submit">Submit</button>
There's something new here, data-badge. This is a div that gets inserted into the DOM that contains the inputs required for reCAPTCHA to function. It has three parameters, bottomleft, bottomright, inline. Inline will make it display directly above the submit button, and allow you to control how you would like it to be styled.
On to your question
<form action="test.php" method="POST" id="theForm">
<script>
function submitForm() {
document.getElementById("theForm").submit();
}
</script>
<input type="text" name="email" placeholder="Email">
<input type="password" name="password" placeholder="Password">
<div class="g-recaptcha" data-sitekey="<sitekey>" data-bind="recaptcha-submit" data-callback="submitForm"></div>
<input type="submit" name="login" class="loginmodal-submit" id="recaptcha-submit" value="Login">
</form>
Or
<form action="test.php" method="POST" id="theForm">
<script>
function submitForm() {
document.getElementById("theForm").submit();
}
</script>
<input type="text" name="email" placeholder="Email">
<input type="password" name="password" placeholder="Password">
<button class="loginmodal-submit g-recaptcha" data-sitekey="<sitekey>" data-callback="submitForm" data-badge="inline" type="submit" value="Login">Submit</button>
</form>
I hope this helps you and future coders. I'll keep this up-to-date as the technology evolves.
这篇关于实施来自Google的新Invisible reCaptcha的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
