Angularjs 角JS中的Recaptcha_Angularjs_Recaptcha

Angularjs 角JS中的Recaptcha

angularjs

Angularjs 角JS中的Recaptcha,angularjs,recaptcha,Angularjs,Recaptcha,我正在Angular JS中实现recaptcha，我使用“”url作为参考。我已经参考了用法部分并按照代码说明进行了操作，但仍然无法在注册页面中获取recaptcha 我遵循的步骤- 1.生成了一个公钥。 2.补充 3.为recaptcha添加了div 在上面url的页面下载表单github代码中添加了anular-recaptcha.js 有人能告诉我我缺少什么吗？任何人都可以给我演示示例链接为recaptcha 提前谢谢很抱歉，如果您已经检查了此他们有一个演示文件他们还提到……“请记

我正在Angular JS中实现recaptcha，我使用“”url作为参考。我已经参考了用法部分并按照代码说明进行了操作，但仍然无法在注册页面中获取recaptcha

我遵循的步骤- 1.生成了一个公钥。 2.补充 3.为recaptcha添加了div

在上面url的页面下载表单github代码中添加了anular-recaptcha.js

有人能告诉我我缺少什么吗？任何人都可以给我演示示例链接为recaptcha

提前谢谢

很抱歉，如果您已经检查了此

他们有一个演示文件

他们还提到……“请记住，验证码仅在从真实域使用且具有有效的重新验证码密钥时有效，因此，如果您只是将其加载到浏览器中，则此文件将无法工作。”

我按照他们的指示做了，效果很好。

这个例子对我来说很有用
register.cshtml：

<div vc-recaptcha key="'domain-key'" on-success="setResponse(response)"></div>

controller.js：

var ctrl = function ($rootScope, $scope, $location, $routeParams, registrationService) {

        $scope.reCaptchaResponse = "";
        $scope.setResponse = function (response) {
            $scope.reCaptchaResponse = response;
        };
        $scope.register = function () {
            var registration = {
                                ...
                reCaptchaResponse: $scope.reCaptchaResponse
            }
            $http.post(serviceBase + 'Register', registration).then(function (results) {                
                //return result
            });
        }
    }

Controller.cs：

[HttpPost]
    public JsonResult Register(UserDTO registration)
    {
        string responseFromServer = "";
        WebRequest request = WebRequest.Create("https://www.google.com/recaptcha/api/siteverify?secret=mysecret&response=" + registration.ReCaptchaResponse);
        request.Method = "GET";
        using (WebResponse response = request.GetResponse())
        {
            using (Stream stream = response.GetResponseStream())
            {
                StreamReader reader = new StreamReader(stream);
                responseFromServer = reader.ReadToEnd();
            }
        }

        if(responseFromServer != "")
        {
            bool isSuccess = false;          
            Dictionary<string, string> values = JsonConvert.DeserializeObject<Dictionary<string, string>>(responseFromServer);
            foreach (var item in values)
            {
                if (item.Key == "success" && item.Value == "True")
                {
                    isSuccess = true;
                    break;
                }                        
            }

            if(isSuccess)
            {
                //do something
            }
            else
            {
                //return reCaptcha error
            }

        }

        return Json(result);
    }

[HttpPost]
公共JsonResult寄存器（用于注册的用户数据）
{
字符串responseFromServer=“”；
WebRequest=WebRequest.Create（“https://www.google.com/recaptcha/api/siteverify?secret=mysecret&response=“+注册。重述责任）；
request.Method=“GET”；
使用（WebResponse=request.GetResponse（））
{
使用（Stream=response.GetResponseStream（））
{
StreamReader=新的StreamReader（流）；
responseFromServer=reader.ReadToEnd（）；
}
}
如果（responseFromServer！=“”）
{
bool isSuccess=错误；
字典值=JsonConvert.DeserializeObject（responseFromServer）；
foreach（值中的var项）
{
if（item.Key==“success”&&item.Value==“True”）
{
isSuccess=true；
打破
}                        
}
如果（isSuccess）
{
//做点什么
}
其他的
{
//返回reCaptcha错误
}
}
返回Json（结果）；
}

使用angularjs和google recaptcha时，您使用的库是最佳选择。但是你必须注意以下几点，它才能工作

按照说明将库包含到您的angular项目中

注册您的网站并获取网站密钥

包括小部件，使用您的站点密钥

在用户解决验证码后获得所需的g-captcha-response

使用G-captcha-resose向服务器发出ajax请求

在您的后端，使用谷歌的站点验证API验证g-captcha-response

此链接通过一个工作示例进行了很好的解释

步骤1:在form.html中包含captcha指令

<body ng-app="angularRecaptcha">
    <div class="col-md-6 col-md-offset-3 signupform" ng-controller="recapCtrl as recap">
      <form name="recap.signupForm" ng-submit="recap.signup()">
        .....
        ..
        <!--Recaptcha Widget--->
        <div vc-recaptcha key="recap.publicKey"></div>
        ...
        .....
    </form>
  </div>
<body>

步骤3:使用SLIM PHP框架在api端点处理POST请求

<?php
$app->post('/signup',function() use($app){
$req =  $app->request()->getBody(); //get request pramans
$data = json_decode($req, true); //parse json string

//Should be some validations before you proceed
//Not in the scope of this answer.

$captcha = $data['g-recaptcha-response']; //Captcha response send by client

    //Build post data to make request with fetch_file_contents
    $postdata = http_build_query(
      array(
        'secret' => '-----YOUR SECRET KEY-------', //secret KEy provided by google
        'response' => $captcha,                    // g-captcha-response string sent from client
        'remoteip' => $_SERVER['REMOTE_ADDR']
      )
    );

    //Build options for the post request
    $opts = array('http' =>
      array(
        'method'  => 'POST',
        'header'  => 'Content-type: application/x-www-form-urlencoded',
        'content' => $postdata
      )
    );

    //Create a stream this is required to make post request with fetch_file_contents
    $context  = stream_context_create($opts); 

/* Send request to Googles siteVerify API */
$response=file_get_contents("https://www.google.com/recaptcha/api/siteverify",false,$context);
$response = json_decode($response, true);


if($response["success"]===false) { //if user verification failed

    /* return error scenario to client */
    echo json_encode(array(
        "error" => 7,
        "message" => "Robots Not allowed (Captcha verification failed)",
        "captchaResult" => $response["success"],
        "captcahErrCodes" => $response["error-codes"]  //error codes sent buy google's siteVerify API
    ));
} else {

         //Should be some Datatbase insertion to sign up the user
         //before you return the success response
         //Not in the scope of this answer.

    /* return success scenario to client */
    echo json_encode(array(
    "error" => 0,
    "message" => "Successfully signed up!",
        "email" => $data['email'],
        "captchaResult" => $response["success"]
    ));
}

});
?>

您遇到了什么具体问题？感谢Panda Xpress，我能够运行recaptcha，我在recaptcha演示中发现js文件的一些路径被破坏。谢谢，您能在这里详细说明一下，以便它也能帮助其他人吗？另外，请接受对您有帮助的答案。谢谢。嗨，我刚刚在演示文件中更改了recaptcha JS的路径。在演示文件中，它被设置为“”。我把它改成了“”，这对我很有效。“请记住，验证码只有在…”时才有效。“谢谢你的这句话，你是救生员：）
 angular.module(‘angularRecaptcha’,[‘vcRecaptcha’])
.controller('recapCtrl',['vcRecaptchaService','$http',function(vcRecaptchaService,$http){
    var vm = this;
    vm.publicKey = "----YOUR------SITE--------KEY---";

    vm.signup = function(){

     /* vcRecaptchaService.getResponse() gives you the g-captcha-response */

        if(vcRecaptchaService.getResponse() === ""){ //if string is empty
            alert("Please resolve the captcha and submit!")
        }else {
            var post_data = {  //prepare payload for request
                'name':vm.name,
                'email':vm.email,
                'password':vm.password,
                'g-recaptcha-response':vcRecaptchaService.getResponse()  //send g-captcah-response to our server
            }


/* MAKE AJAX REQUEST to our server with g-captcha-string */
                $http.post('http://sitename.com/api/signup',post_data).success(function(response){
                if(response.error === 0){
                    alert("Successfully verified and signed up the user");
                }else{
                    alert("User verification failed");
                }
            })
            .error(function(error){

            })
        }
    }
}])

<?php
$app->post('/signup',function() use($app){
$req =  $app->request()->getBody(); //get request pramans
$data = json_decode($req, true); //parse json string

//Should be some validations before you proceed
//Not in the scope of this answer.

$captcha = $data['g-recaptcha-response']; //Captcha response send by client

    //Build post data to make request with fetch_file_contents
    $postdata = http_build_query(
      array(
        'secret' => '-----YOUR SECRET KEY-------', //secret KEy provided by google
        'response' => $captcha,                    // g-captcha-response string sent from client
        'remoteip' => $_SERVER['REMOTE_ADDR']
      )
    );

    //Build options for the post request
    $opts = array('http' =>
      array(
        'method'  => 'POST',
        'header'  => 'Content-type: application/x-www-form-urlencoded',
        'content' => $postdata
      )
    );

    //Create a stream this is required to make post request with fetch_file_contents
    $context  = stream_context_create($opts); 

/* Send request to Googles siteVerify API */
$response=file_get_contents("https://www.google.com/recaptcha/api/siteverify",false,$context);
$response = json_decode($response, true);


if($response["success"]===false) { //if user verification failed

    /* return error scenario to client */
    echo json_encode(array(
        "error" => 7,
        "message" => "Robots Not allowed (Captcha verification failed)",
        "captchaResult" => $response["success"],
        "captcahErrCodes" => $response["error-codes"]  //error codes sent buy google's siteVerify API
    ));
} else {

         //Should be some Datatbase insertion to sign up the user
         //before you return the success response
         //Not in the scope of this answer.

    /* return success scenario to client */
    echo json_encode(array(
    "error" => 0,
    "message" => "Successfully signed up!",
        "email" => $data['email'],
        "captchaResult" => $response["success"]
    ));
}

});
?>