Google验证码reCAPTCHA接入Web

最新推荐文章于 2024-03-29 22:18:19 发布

Joyce的前端日常

最新推荐文章于 2024-03-29 22:18:19 发布

阅读量3.4w

点赞数 6

分类专栏：前端文章标签： reCAPTCHA

本文链接：https://blog.csdn.net/joyce_lcy/article/details/81980683

版权

本文详细介绍了如何接入Google的reCAPTCHA服务，包括获取site key，两种接入方式（DOM插入和JS渲染），以及配置参数如onload、render、hl等，确保服务正常运行并显示中文界面。

摘要由CSDN通过智能技术生成

文章目录

1. 介绍

reCAPTCHA是google旗下的验证码服务（免费的），当然要保证网络能打开google才行，所以常用于国外的网站。如果需要在国内使用，只需将所有的www.google.com替换成www.recaptcha.net即可。
官网：https://developers.google.com/recaptcha/

2. 接入

(1) site key

To start using reCAPTCHA, you need to sign up for an API key pair for your site. The key pair consists of a site key and secret key. The site key is used to invoke reCAPTCHA service on your site or mobile application. The secret key authorizes communication between your application backend and the reCAPTCHA server to verify the user’s response. The secret key needs to be kept safe for security purposes.

申请Site Key: http://www.google.com/recaptcha/admin
Verifying the user’s response：
https://developers.google.com/recaptcha/docs/verify

在本地开发时，可以使用此site key进行测试：
6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI
这里写图片描述

(2) 方式一：DOM中加入

<html>
  <head>
    <title>reCAPTCHA demo</title>
     <script src="https://www.google.com/recaptcha/api.js" async defer></script>
  </head>
  <body>
    <form action="?" method="POST">
      <div class="g-recaptcha" data-callback="robotVerified" data-sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI"></div>
    </form>
  </body>
  <script>
    function robotVerified(){
    
      console.log('Verified: not robot');
    }
  </script>
</html>

(3) 方式二：Js 渲染

<html>
  <head>
    <title>reCAPTCHA demo</title>
    <script src="https://www.google.com/recaptcha/api.js?onloadCallback&render=explicit" async defer></script>
  </head>
  <body>
    <div id="robot"></div>
    <script type="text/javascript">
      var onloadCallback = function() {
    
        console.log("grecaptcha is ready!");
        //render grecaptcha
        grecaptcha.render('robot', {
    
          'sitekey': '6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI',
          'callback': function (</

最低0.47元/天解锁文章

Joyce的前端日常

关注

6
点赞
踩
20

收藏

觉得还不错? 一键收藏
9
评论
Google验证码reCAPTCHA接入Web

1. 介绍reCAPTCHA是google旗下的验证码服务（免费的），当然要保证网络能打开google才行，所以常用于国外的网站。官网：https://developers.google.com/recaptcha/2. 接入(1) site key申请Site Key: http://www.google.com/recaptcha/admin在本地开发时，可以使用此si...
复制链接

扫一扫

专栏目录