reCAPTCHA v3 使用表单提交的 g-recaptcha

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

reCAPTCHA v3 g-recaptch using form submit

问题

以下是翻译好的部分：

我想要使用reCAPTCHA API，但不想重写这个函数。我在提交按钮和表单标签上都有密钥。我可以看到它只是发送了sitekey而没有生成令牌。任何帮助都将很棒。

选项一：在表单标签中使用密钥

  1. <form method="POST" name="Form" id="Form" data-sitekey="Form hjkhjkhjkhjk">

选项二：在按钮标签中使用密钥

  1. <button type="submit" class="g-recaptch btn btn-primary px-4 float-right" data-sitekey="@reCaptchaKey">
  2.    提交
  3. </button>

目标是使用这种方法发送Ajax请求

  1. $("#Form").submit(function(e) {
  2.     e.stopPropagation();
  3.     e.preventDefault();
  4.     let formData = this.dataset.sitekey;
  5.     console.log(formData);
  6.     let submitter_btn = $(e.originalEvent.submitter);
  7.     console.log(submitter_btn.data('sitekey'));
  8. });

工作示例
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

  1. &lt;form method=&quot;POST&quot; name=&quot;Form&quot; id=&quot;Form&quot; data-sitekey=&quot;Form hjkhjkhjkhjk&quot;&gt;

option two using the key in the button tag

  1. &lt;button type=&quot;submit&quot; 
  2.     class=g-recaptch &quot;btn btn-primary px-4 float-right&quot; 
  3.     data-sitekey=&quot;@reCaptchaKey&quot;&gt;
  4.    Submit
  5. &lt;/button&gt;

Goal is use this method for sending ajax request

  1. $(&quot;#Form&quot;).submit(function(e) {
  2.     e.stopPropagation();
  3.     e.preventDefault();
  4.     let formData = this.dataset.sitekey;
  5.     console.log(formData);
  6.     let submitter_btn = $(e.originalEvent.submitter);
  7.     console.log(submitter_btn.data(&#39;sitekey&#39;));
  8. });

Working sample
https://jsfiddle.net/tjmcdevitt/8cawy1kb/18/

答案1

得分: 1

你需要使用grecaptcha对象的execute方法。要做到这一点，你需要在reCAPTCHA脚本加载时添加一个render参数。详细信息请参阅文档。

  1. $(document).ready(function() {
  2.     $("#Form").submit(function(e) {
  3.         e.stopPropagation();
  4.         e.preventDefault();
  5.         let formData = this.dataset.sitekey;
  6.         let submitter_btn = $(e.originalEvent.submitter);
  7.         
  8.         grecaptcha.ready(function() {
  9.             grecaptcha.execute(submitter_btn.data('sitekey'), {
  10.                 action: 'submit'
  11.             }).then(function(token) {
  12.                 // 在这里添加将数据提交到后端服务器的逻辑。
  13.                 console.log(token);
  14.             });
  15.         });
  16.     });
  17. });
  1. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  2. <script src="https://www.google.com/recaptcha/api.js?render=6LeO3zwnAAAAAOlJQ4RePB73qug2OWQ1XjBWyYbV"></script>
  3. <form method="POST" name="Form" id="Form" data-sitekey="Form hjkhjkhjkhjk">
  4.   <label for="fname">First name:</label><br>
  5.   <input type="text" id="fname" name="fname" value="John"><br>
  6.   <label for="lname">Last name:</label><br>
  7.   <input type="text" id="lname" name="lname" value="Doe"><br><br>
  8.   <input type="submit" value="Submit" data-sitekey="6LeO3zwnAAAAAOlJQ4RePB73qug2OWQ1XjBWyYbV">
  9. </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 -->

  1. $(document).ready(function() {
  2.     $(&quot;#Form&quot;).submit(function(e) {
  3.         e.stopPropagation();
  4.         e.preventDefault();
  5.          let formData = this.dataset.sitekey;
  6.          let submitter_btn = $(e.originalEvent.submitter);
  7.         
  8.         grecaptcha.ready(function() {
  9.             grecaptcha.execute(submitter_btn.data(&#39;sitekey&#39;), {
  10.                 action: &#39;submit&#39;
  11.             }).then(function(token) {
  12.                 // Add your logic to submit to your backend server here.
  13.                 consle.log(token);
  14.             });
  15.         });
  16.     });
  17. });

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

  1. &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
  2. &lt;script src=&quot;https://www.google.com/recaptcha/api.js?render=6LeO3zwnAAAAAOlJQ4RePB73qug2OWQ1XjBWyYbV&quot;&gt;&lt;/script&gt;
  3. &lt;form method=&quot;POST&quot; name=&quot;Form&quot; id=&quot;Form&quot; data-sitekey=&quot;Form hjkhjkhjkhjk&quot;&gt;
  4.   &lt;label for=&quot;fname&quot;&gt;First name:&lt;/label&gt;
  5.   &lt;br&gt;
  6.   &lt;input type=&quot;text&quot; id=&quot;fname&quot; name=&quot;fname&quot; value=&quot;John&quot;&gt;
  7.   &lt;br&gt;
  8.   &lt;label for=&quot;lname&quot;&gt;Last name:&lt;/label&gt;
  9.   &lt;br&gt;
  10.   &lt;input type=&quot;text&quot; id=&quot;lname&quot; name=&quot;lname&quot; value=&quot;Doe&quot;&gt;
  11.   &lt;br&gt;
  12.   &lt;br&gt;
  13.   &lt;input type=&quot;submit&quot; value=&quot;Submit&quot; data-sitekey=&quot;6LeO3zwnAAAAAOlJQ4RePB73qug2OWQ1XjBWyYbV&quot;&gt;
  14. &lt;/form&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年7月18日 02:32:34
  • 转载请务必保留本文链接：https://go.coder-hub.com/76707216.html
  • grecaptcha
  • javascript
  • jquery
匿名

发表评论

匿名网友

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

确定