web-dev-qa-db-ja.com

Angular JSでの要約

Angular JS、 " https://github.com/VividCortex/angular-recaptcha " urlを参照として使用しています。使用法のセクションとコードの指示に従いましたが、登録ページでreCAPTCHAを取得できません。

私が従った手順-1。公開鍵を生成しました。 2.追加3.recaptchaのdivを追加

  1. ページにanular-recaptcha.jsを追加しました-上記のURLのダウンロードされたフォームのgithubコード。

誰かが私がそれに欠けているものを教えてもらえますか？誰かが私にrecaptchaのデモサンプルリンクを教えてもらえますか？

前もって感謝します。

angularjsrecaptcha
6
Sachin Warke

私のために目覚めた例
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);
    }
3
ahaliav fox

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

ステップ2：次はApp.jsです

Angle-recaptchaライブラリは、getResponse（）メソッドを持つvcRecaptchaServiceを提供します。これは、ユーザーがキャプチャを正常に解決した後にg-captcha-response文字列を提供します。

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

            })
        }
    }
}])

ステップ3： SLIMを使用してAPIエンドポイントでPOSTリクエストを処理するPHPフレームワーク

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

});
?>
2
Harsh Gupta

すでにチェックしている場合は申し訳ありません...

彼らはデモファイルを持っています ここ 。

また、「キャプチャは実際のドメインから使用され、有効な再キャプチャキーを使用した場合にのみ機能するため、ブラウザにロードしただけでは機能しないことに注意してください。」

私は彼らの指示に従いました、そしてそれは私にとって大丈夫でした。

1
Coder Panda

Anglejsとgooglerecaptchaを使用する場合は、使用したライブラリが最適なオプションです。しかし、それが機能するためには、次のことに注意する必要があります。

  1. 説明されているように、ライブラリをangularプロジェクトに含めます。
  2. Webサイトを登録して、サイトキーを取得します。
  3. ウィジェットを含め、サイトキーを使用します。
  4. ユーザーがキャプチャを解決した後、必要なg-captcha-responseを取得します。
  5. G-captcha-reposnseを使用してサーバーにajaxリクエストを送信します。
  6. バックエンドで、Googleのサイト検証APIを使用してg-captcha-responseを検証します。

このリンクには、実際の例を含む適切な説明があります。 angularJSを使用したGoogle reCAPTCHA

0
rahil471