英文:
reCAPTCHA v3 g-recaptch using form submit
问题
以下是翻译好的部分：
我想要使用reCAPTCHA API，但不想重写这个函数。我在提交按钮和表单标签上都有密钥。我可以看到它只是发送了sitekey而没有生成令牌。任何帮助都将很棒。
选项一：在表单标签中使用密钥
<form method="POST" name="Form" id="Form" data-sitekey="Form hjkhjkhjkhjk">
选项二：在按钮标签中使用密钥
<button type="submit" class="g-recaptch btn btn-primary px-4 float-right" data-sitekey="@reCaptchaKey">
提交
</button>
目标是使用这种方法发送Ajax请求
$("#Form").submit(function(e) {
e.stopPropagation();
e.preventDefault();
let formData = this.dataset.sitekey;
console.log(formData);
let submitter_btn = $(e.originalEvent.submitter);
console.log(submitter_btn.data('sitekey'));
});
工作示例
https://jsfiddle.net/tjmcdevitt/8cawy1kb/18/
英文:
I want to use recaptcha api but didn't want to rewrite this function. I have the key on the submit button and on the form tag. I can see its not generating the tokens just sending the sitekey. Any help would be great.
option one using the key in the form tag
<form method="POST" name="Form" id="Form" data-sitekey="Form hjkhjkhjkhjk">
option two using the key in the button tag
<button type="submit"
class=g-recaptch "btn btn-primary px-4 float-right"
data-sitekey="@reCaptchaKey">
Submit
</button>
Goal is use this method for sending ajax request
$("#Form").submit(function(e) {
e.stopPropagation();
e.preventDefault();
let formData = this.dataset.sitekey;
console.log(formData);
let submitter_btn = $(e.originalEvent.submitter);
console.log(submitter_btn.data('sitekey'));
});
Working sample
https://jsfiddle.net/tjmcdevitt/8cawy1kb/18/
答案1
得分: 1
你需要使用grecaptcha对象的execute方法。要做到这一点，你需要在reCAPTCHA脚本加载时添加一个render参数。详细信息请参阅文档。
$(document).ready(function() {
$("#Form").submit(function(e) {
e.stopPropagation();
e.preventDefault();
let formData = this.dataset.sitekey;
let submitter_btn = $(e.originalEvent.submitter);
grecaptcha.ready(function() {
grecaptcha.execute(submitter_btn.data('sitekey'), {
action: 'submit'
}).then(function(token) {
// 在这里添加将数据提交到后端服务器的逻辑。
console.log(token);
});
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.google.com/recaptcha/api.js?render=6LeO3zwnAAAAAOlJQ4RePB73qug2OWQ1XjBWyYbV"></script>
<form method="POST" name="Form" id="Form" data-sitekey="Form hjkhjkhjkhjk">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit" data-sitekey="6LeO3zwnAAAAAOlJQ4RePB73qug2OWQ1XjBWyYbV">
</form>
英文:
You have to use execute method of grecaptcha object. To do this, you need to add a render parameter to the reCAPTCHA script load. For details see the documentation.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$(document).ready(function() {
$("#Form").submit(function(e) {
e.stopPropagation();
e.preventDefault();
let formData = this.dataset.sitekey;
let submitter_btn = $(e.originalEvent.submitter);
grecaptcha.ready(function() {
grecaptcha.execute(submitter_btn.data('sitekey'), {
action: 'submit'
}).then(function(token) {
// Add your logic to submit to your backend server here.
consle.log(token);
});
});
});
});
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.google.com/recaptcha/api.js?render=6LeO3zwnAAAAAOlJQ4RePB73qug2OWQ1XjBWyYbV"></script>
<form method="POST" name="Form" id="Form" data-sitekey="Form hjkhjkhjkhjk">
<label for="fname">First name:</label>
<br>
<input type="text" id="fname" name="fname" value="John">
<br>
<label for="lname">Last name:</label>
<br>
<input type="text" id="lname" name="lname" value="Doe">
<br>
<br>
<input type="submit" value="Submit" data-sitekey="6LeO3zwnAAAAAOlJQ4RePB73qug2OWQ1XjBWyYbV">
</form>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论