L.J*_*son 29 html javascript recaptcha
我正在建立一个PHP网站,我想在登录表单上放置验证码.我选择了Google的新Invisible reCaptcha,但是我在实现它时遇到了麻烦(HTML部分,PHP正在运行).
我现在为"正常"reCaptcha获得的代码如下(根据Google reCaptcha说明,这有效):
<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>
我注册时在确认电子邮件中发送了一些说明(大约需要24小时才能得到确认).这说明如下:
隐形reCAPTCHA集成
如果您尚未将网站与reCAPTCHA v2集成,请按照我们的开发者指南了解实施细节.
请确保您的网站密钥已被列入Inelible reCAPTCHA白名单.
要启用Invisible reCAPTCHA,而不是将参数放在div中,您可以将它们直接添加到html按钮.
3A.数据回调="".这就像复选框验证码一样,但是对于隐形验证是必需的.
3B.data-badge:这允许您重新定位reCAPTCHA徽章(即徽标和"受reCAPTCHA保护"文本).有效选项为'bottomright'(默认值),'bottomleft'或'inline',将徽章直接放在按钮上方.如果您将徽章设为内联,则可以直接控制徽章的CSS.
验证用户的响应没有变化.
我遇到的问题是HTML实现(因此我需要第3步的帮助.1,2和4对我有用).其余的我使用正常的reCaptcha并根据说明,它应该是相同的事情.我不明白数据回调和数据徽章是什么以及它是如何工作的.如何使用我的表单设置实现隐形reCaptcha的代码示例将是很棒的!
All*_*len 33
实施Google新的Invisible reCAPTCHA与我们将v2添加到我们网站的方式非常相似.您可以像平常一样将其添加为自己的容器,或者将其添加到表单提交按钮的新方法.我希望本指南能够帮助您走上正确的道路.
实现recaptcha需要一些东西:
- Sitekey
- Class
- Callback
- Bind
这将是您的最终目标.
<div class="g-recaptcha" data-sitekey="<sitekey>"
data-bind="recaptcha-submit" data-callback="submitForm">
</div>
使用独立方法时,必须将data-bind设置为提交按钮的ID.如果您没有此设置,您的验证码将不会被隐藏.
还必须使用回调来提交表单.隐形验证码将取消提交按钮中的所有事件,因此您需要回调才能实际传递提交.
<script>
function submitForm() {
var form = document.getElementById("ContactForm");
if (validate_form(form)) {
form.submit();
} else {
grecaptcha.reset();
}
}
</script>
请注意,在示例回调中还有自定义表单验证.在验证失败时重置reCAPTCHA非常重要,否则在CAPTCHA到期之前您将无法重新提交表单.
其中很多与上面的独立CAPTCHA相同,但是没有容器,所有内容都放在提交按钮上.
这将是你的目标.
<button class="g-recaptcha" data-sitekey="<sitekey>"
data-callback="submitForm" data-badge="inline" type="submit">
Submit</button>
这里有一些新东西,数据徽章.这是一个插入DOM的div,其中包含reCAPTCHA运行所需的输入.它有三个可能的值:bottomleft,bottomright,inline.内联将使其直接显示在提交按钮上方,并允许您控制您希望如何设置样式.
<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>
要么
<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>
我希望这能帮助你和未来的程序员.随着技术的发展,我将保持最新状态.
Mch*_*Mch 21
如果您正在寻找可以在同一页面上使用多个表单的完全可自定义的通用解决方案,我将使用render = explicit和onload = aFunctionCallback 参数显式呈现reCaptcha小部件.
这是一个简单的例子:
<!DOCTYPE html>
<html>
<body>
<form action="" method="post">
<input type="text" name="first-name-1"> <br />
<input type="text" name="last-name-1"> <br />
<div class="recaptcha-holder"></div>
<input type="submit" value="Submit">
</form>
<br /><br />
<form action="" method="post">
<input type="text" name="first-name-2"> <br />
<input type="text" name="last-name-2"> <br />
<div class="recaptcha-holder"></div>
<input type="submit" value="Submit">
</form>
<script type="text/javascript">
var renderGoogleInvisibleRecaptcha = function() {
for (var i = 0; i < document.forms.length; ++i) {
var form = document.forms[i];
var holder = form.querySelector('.recaptcha-holder');
if (null === holder){
continue;
}
(function(frm){
var holderId = grecaptcha.render(holder,{
'sitekey': 'CHANGE_ME_WITH_YOUR_SITE_KEY',
'size': 'invisible',
'badge' : 'bottomright', // possible values: bottomright, bottomleft, inline
'callback' : function (recaptchaToken) {
HTMLFormElement.prototype.submit.call(frm);
}
});
frm.onsubmit = function (evt){
evt.preventDefault();
grecaptcha.execute(holderId);
};
})(form);
}
};
</script>
<script src="https://www.google.com/recaptcha/api.js?onload=renderGoogleInvisibleRecaptcha&render=explicit" async defer></script>
</body>
</html>如您所见,我在表单中添加了一个空div元素.为了识别应该使用reCaptcha保护哪些表单,我将为此元素添加一个类名.在我们的例子中,我使用'recaptcha-holder'类名.
回调函数遍历所有现有表单,如果它找到带有'recaptcha-holder'类名的注入元素,它将呈现reCaptcha小部件.
我一直在我的Invisible reCaptcha for WordPress插件上使用这个解决方案.如果有人想知道这是如何工作的,可以在WordPress目录下载该插件:
https://wordpress.org/plugins/invisible-recaptcha/
希望这可以帮助!
Jon*_*a33 19
以下是如何实现客户端+服务器端(php) Invisible reCaptcha功能:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>reCaptcha</title>
<!--api link-->
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<!--call back function-->
<script>
function onSubmit(token) {
document.getElementById('reCaptchaForm').submit();
}
</script>
</head>
<body>
<div class="container">
<form id="reCaptchaForm" action="signup.php" method="POST">
<input type="text" placeholder="type anything">
<!--Invisible reCaptcha configuration-->
<button class="g-recaptcha" data-sitekey="<your site key>" data-callback='onSubmit'>Submit</button>
<br/>
</form>
</div>
</body>
</html>
<?php
//only run when form is submitted
if(isset($_POST['g-recaptcha-response'])) {
$secretKey = '<your secret key>';
$response = $_POST['g-recaptcha-response'];
$remoteIp = $_SERVER['REMOTE_ADDR'];
$reCaptchaValidationUrl = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=$secretKey&response=$response&remoteip=$remoteIp");
$result = json_decode($reCaptchaValidationUrl, TRUE);
//get response along side with all results
print_r($result);
if($result['success'] == 1) {
//True - What happens when user is verified
$userMessage = '<div>Success: you\'ve made it :)</div>';
} else {
//False - What happens when user is not verified
$userMessage = '<div>Fail: please try again :(</div>';
}
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>reCAPTCHA Response</title>
</head>
<body>
<?php
if(!empty($userMessage)) {
echo $userMessage;
}
?>
</body>
</html>