Recaptcha in Angular JS

前端未结

关注

 4  2079

I am implementing recaptcha in Angular JS, I am using \"https://github.com/VividCortex/angular-recaptcha\" url as reference. I have referred the Usage section and followed t

相关标签:

4条回答

情书的邮戳

2021-01-13 00:36

example that woked for me
register.cshtml:

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

app.js:

var app = angular.module('myApp', ['ngRoute','vcRecaptcha']);

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);
    }

0 讨论(0)

春和景丽

2021-01-13 00:49

Sorry if you have already checked this...

They have a demo file here.

They also mention ..."Keep in mind that the captcha only works when used from a real domain and with a valid re-captcha key, so this file wont work if you just load it in your browser."

I followed their instructions and it worked okay for me.

0 讨论(0)
发布评论:

提交评论
- 加载中...

面向向阳花

2021-01-13 00:54

Step1: Include captcha directive in form.html

<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>

Step2: Next is the App.js

The angular-recaptcha library provides us with the vcRecaptchaService that has a getResponse() method, which provides us with g-captcha-response string after the user has successfully solved the captcha.

 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){

            })
        }
    }
}])

Step 3: Handle the POST request at api endpoint using SLIM PHP framework

<?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"]
    ));
}

});
?>

0 讨论(0)

时光取名叫无心

2021-01-13 00:55
When working with angularjs and google recaptcha, the library you have used is the best option. But you have to take care of the following things for it to work.
1. Include the library as explained into your angular project.
2. Register your website and get the site keys.
3. Include the widget, use your Site Key.
4. Get the required g-captcha-response after the user solves the captcha.
5. Make an ajax request to your server with the G-captcha-reposnse.
6. On your backend verify the g-captcha-response using google's site verify API.
This link has a good explaination with a working example. Google recaptcha with angularJS
0 讨论(0)
发布评论:

提交评论
- 加载中...