文章目录
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 (</