我正在使用 AngularJS 并尝试使用 Google 的 reCAPTCHA,我正在使用“显式呈现 reCAPTCHA 小部件”方法在我的网页上显示 reCAPTCHA,
HTML 代码 -
<script type="text/javascript">
var onloadCallback = function()
{
grecaptcha.render('loginCapcha', {
'sitekey' : 'someSiteKey',
'callback' : verifyCallback,
'theme':'dark'
});
};
var auth='';
var verifyCallback = function(response)
{
//storing the Google response in a Global js variable auth, to be used in the controller
auth = response;
var scope = angular.element(document.getElementById('loginCapcha')).scope();
scope.auth();
};
</script>
<div id="loginCapcha"></div>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>
到目前为止,我能够实现用户是人类还是机器人所需的功能,
根据我上面的代码,我的代码中有一个名为“verifyCallback”的回调函数,
它存储由 Google 创建的响应,在一个名为“auth”的全局变量中。
现在,reCAPCHA 的最后一部分是调用 Google API,
使用“ https://www.google.com/recaptcha/api/siteverify ”作为 URL 并使用POST方法,并将密钥和创建的响应
传递给它由谷歌,我在下面的代码中完成了。
我的控制器 -
_myApp.controller('loginController',['$rootScope','$scope','$http',
function($rootScope,$scope,$http){
var verified = '';
$scope.auth = function()
{
//Secret key provided by Google
secret = "someSecretKey";
/*calling the Google API, passing it the Secretkey and Response,
to the specified URL, using POST method*/
var verificationReq = {
method: 'POST',
url: 'https://www.google.com/recaptcha/api/siteverify',
headers: {
'Access-Control-Allow-Origin':'*'
},
params:{
secret: secret,
response: auth
}
}
$http(verificationReq).then(function(response)
{
if(response.data.success==true)
{
console.log("Not a Bot");
verified = true;
}
else
{
console.log("Bot or some problem");
}
}, function() {
// do on response failure
});
}
所以,我实际面临的问题是我无法点击谷歌的 URL,
以下是我发送的请求和错误的截图。
据我了解,它与 CORS 和 Preflight request 有关。
那么我做错了什么?我该如何解决这个问题?