আমি গুগল রেক্যাপচা ভি 2 জাভাস্ক্রিপ্ট / jQuery ব্যবহার করে কীভাবে যাচাই করতে পারি?


120

আমার এসপেক্সে একটি সাধারণ যোগাযোগের ফর্ম রয়েছে। আমি ফর্মটি জমা দেওয়ার আগে পুনরায় ক্যাপচা (ক্লায়েন্ট-সাইড) যাচাই করতে চাই। সাহায্য করুন.

কোডের উদাহরণ:

    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default2.aspx.vb" Inherits="Default2" %>
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Test Form</title>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
        <script src="//code.jquery.com/jquery-1.10.2.js"></script>
        <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
        <link rel="stylesheet" href="/resources/demos/style.css">
        <script src="https://www.google.com/recaptcha/api.js" async defer></script>
        <script>
            $("#cmdSubmit").click(function () {
                //need to validate the captcha
            });
        </script> 
    </head>
    <body>
        <form id="form1" runat="server">
            <label class="clsLabe">First Name<sup>*</sup></label><br />
            <input type="text" id="txtFName" name="txtFName" class="clsInput" /><br />
            <div class="g-recaptcha" data-sitekey="my_key"></div>
            <img id="cmdSubmit" src="SubmitBtn.png" alt="Submit Form" style="cursor:pointer;" />
        </form>
    </body>
    </html>

আমি cmdSubmitক্লিক করে ক্যাপচারটি বৈধ করতে চাই ।

সাহায্য করুন.


2
আপনি এ পর্যন্ত কি করেছে? আরও তথ্যের প্রয়োজন, প্রশ্নটি খুব অস্পষ্ট।
জাকি

1
আপনি যদি সার্ভার সাইডের বৈধতার মাধ্যমে গুগলে কোনও পোস্টের অনুরোধ প্রেরণ না করেন তবে আপনি ক্যাপচাও অন্তর্ভুক্ত করতে পারেন না। নীচে প্রস্তাবিত ক্লায়েন্টের পাশের বৈধতাগুলি বটগুলি দ্বারা পাস করা হবে।
ভার্জ অ্যাসল্ট

বৈধ ক্যাপচা ক্লায়েন্টাইড ক্লিক করা হয়> কিছু করুন> পুনর্নির্মাণ ডেটা সার্ভারের পক্ষের বৈধতা দিন> কিছু করুন।
জেপিবি

2
নমুনা উদাহরণ টিউটোরিয়াল এখানে freakyjolly.com/… দেখুন
কোড স্পাই

উত্তর:


103

এই ক্লায়েন্টের পক্ষে যাচাইকরণ reCaptcha- নিম্নলিখিতগুলি আমার জন্য কাজ করেছে:

যদি ক্লায়েন্টের পার্শ্বের grecaptcha.getResponse();রিটার্নগুলিতে পুনঃক্যাপচা বৈধ না nullহয় তবে অন্যটি ব্যতীত অন্য কোনও মান প্রদান করে null

জাভাস্ক্রিপ্ট কোড:

var response = grecaptcha.getResponse();

if(response.length == 0)
    //reCaptcha not verified

else
    //reCaptch verified

112
এটি ভুল। ক্যাপচাকে জেএস দ্বারা যাচাই করা হয়নি, ক্যাপচাকে সফলভাবে উত্তর দেওয়া হয়েছে কিনা তা নির্ধারণ করার জন্য আপনার সাইটের কী এবং গোপন কী সহ আপনার সাইটের কী এবং গোপন কী সহ আপনার প্রতিক্রিয়া জমা করতে হবে। এই উত্তরটি বিপজ্জনকভাবে ভুল।
শান ক্যান্ডেল

9
উদ্ধৃতি: যখন কোনও ব্যবহারকারী পুনরায় কেপচাএ সমাধান করে, তখন একটি নতুন ক্ষেত্র (জি-রিপ্যাচটা-প্রতিক্রিয়া) এইচটিএমএল এ পপুলেটে যাবে। developers.google.com/recaptcha/docs/verify
কোলাওয়েব

6
তবে এটি সবই কোয়ালাওয়েব নয়! উদ্ধৃতি: আপনি প্রতিক্রিয়া টোকেন পাওয়ার পরে, টোকেনটি বৈধ কিনা তা নিশ্চিত করার জন্য আপনাকে নীচের এপিআই ব্যবহার করে এটি রেক্যাপচএ দিয়ে যাচাই করতে হবে। https://developers.google.com/recaptcha/docs/verify
ডিলান স্মিথ

14
উত্তরটি বলার পক্ষে যারা সঠিক নয়, আপনি কি প্রশ্নটি পড়েছেন? প্রশ্নোত্তর উভয়টি ক্লায়েন্টের পক্ষকে স্পষ্টভাবে নির্দিষ্ট করে - স্পষ্ট অভিপ্রায়টি আরও যাচাইয়ের জন্য সার্ভারে একটি পোস্ট অনুরোধ প্রেরণের আগে ক্যাপচাটি আসলে ক্লায়েন্ট-সাইডে পূরণ করা হয়েছিল তা যাচাই করা ...
রোকোকো

4
আপনি কেবল তখনই জানতে পারবেন যে ব্যবহারকারী এটি ক্লায়েন্টের পক্ষে পূরণ করেছে। 'জি-রিপ্যাচটা-প্রতিক্রিয়া' এর মানটি পূরণ করা হবে, তবে তাদের প্রতিক্রিয়াটি বৈধ কিনা তা পরীক্ষা করার জন্য তাদের Google এ প্রেরণ করা দরকার। উদাহরণস্বরূপ, চিত্রের মিলের সাথে আপনি কিছু বা কিছুই ক্লিক করতে পারেন এবং জমাতে ক্লিক করতে পারেন। এটি সঠিক নয়, তবে 'জি-রিপ্যাক্টা-প্রতিক্রিয়া' এর মানটি পূরণ করা হয়েছে। আপনি এটি যাচাই করতে AJAX ব্যবহার করতে পারেন, তবে আপনার গোপন কীটি সার্ভারের সাইড কোডে রাখতে ভুলবেন না। সংক্ষিপ্ত উত্তর হ'ল সার্ভারকে এটি বৈধ কিনা তা পরীক্ষা করে দেখতে হয়, আপনি এজেএক্সের সাথে বা সম্পূর্ণ ফর্ম পোস্ট সহ এটি করেন কিনা।
শান কেন্ডেল

60

সরল জাভাস্ক্রিপ্ট সহ গুগল ক্যাপচা যাচাই করতে এটি ব্যবহার করুন।

এইচটিএমএল বডি এ এই কোড:

<div class="g-recaptcha" id="rcaptcha" style="margin-left: 90px;" data-sitekey="my_key"></div>
<span id="captcha" style="margin-left:100px;color:red" />

এই কোডটি কল get_action (এই) পদ্ধতি ফর্ম বোতামে শীর্ষ বিভাগে রেখেছিল:

function get_action(form) 
{
    var v = grecaptcha.getResponse();
    if(v.length == 0)
    {
        document.getElementById('captcha').innerHTML="You can't leave Captcha Code empty";
        return false;
    }
    else
    {
        document.getElementById('captcha').innerHTML="Captcha completed";
        return true; 
    }
}

<div class = "g-recaptcha" id = "rcaptcha" શૈલી = "মার্জিন-বাম: 90px;" ডেটা-সাইটকি = "আমার_কি"> </div> বডি বিভাগে স্প্যান ট্যাগের ঠিক উপরে এই কোডটি
প্রবীণ শর্মা

2
আমি মনে করি এটিই আরও ভাল সমাধান। এইভাবে আপনি প্রতিক্রিয়াটির যাচাইকরণটি আপনার ফর্মটিতে হ্যান্ডলার জমা দিন। এটি ক্যাপচা কলব্যাকটিতে হ্যান্ডেল করার চেষ্টা করার চেয়ে আরও যুক্তিযুক্ত বলে মনে হয়। আমার ধারণা এটি উড়ে বা জমা দেওয়ার সময় আপনার বৈধতা নির্ভর করে কিনা।
লাইটবুলব 1

4
আপনার ব্যবহার করা উচিত ===এবং !==; কোন কারণ না।

28
এই সমাধানটি ভুল। আমি মনে করি আপনি যখন প্রতিক্রিয়া পাবেন, আপনাকে যাচাইয়ের জন্য গুগলে প্যারামিটার (প্রতিক্রিয়া + সিক্রেট + ক্লায়েন্টআইপি) পাঠাতে হবে। বৈধতা পরে। গুগল আমাদের সাফল্য দেয় বা ব্যর্থ হয়। আপনার উদাহরণে, আপনি দ্বিতীয় পদক্ষেপটি ব্যবহার করবেন না। আপনি কি আমাকে ব্যাখ্যা করতে পারেন: আপনার ব্যক্তিগত কীটি। আপনি কখন ব্যবহার করবেন?
মাহমুত এএফই

3
মাহমুত সঠিক, এই উত্তরটি বিপজ্জনকভাবে ভুল এবং অসম্পূর্ণ।
শান ক্যান্ডেল

27

সরলভাবে পলের উত্তর:

উৎস:

<script src="https://www.google.com/recaptcha/api.js"></script>

এইচটিএমএল:

<div class="g-recaptcha" data-sitekey="YOUR_KEY" data-callback="correctCaptcha"></div>

জাতীয়:

var correctCaptcha = function(response) {
        alert(response);
    };

13
অন্যান্য অনেক ভুল সমাধানের মতো, আপনি এখানে টোকেন পেয়ে যাচ্ছেন। আপনি নিজের গোপন কী দিয়ে Google এ এটি না পাঠানো পর্যন্ত আপনি এটিকে বৈধতা দিয়েছেন না।
18

এটি কোনওভাবে আমার উপাদানটিতে সমস্যা সৃষ্টি করে। আমরা যদি উপাদানটির মধ্যে ডেটা-কলব্যাক ব্যবহার করি তবে ওয়েবপ্যাক এটিকে স্বয়ংক্রিয়ভাবে সংকলন করতে পারে না
ফারিস রায়হান

2
এটি গ্রহণযোগ্য উত্তর হওয়া উচিত কারণ এতে রেন্ডার ফাংশনটি ওভাররাইটিংয়ের প্রয়োজন হয় না। খাঁটি জেএসে যাচাইয়ের ক্ষেত্রে, আমি সন্দেহ করি যে এটি সম্ভব, কারণ এর জন্য গোপনীয় চাবিটি জেএসে লাগানো এবং এভাবে প্রত্যেককে তার সমস্ত হাত পেতে অনুমতি দেওয়া প্রয়োজন।
এসকম্যান 11

25

যদি আপনি কলব্যাকে পুনঃনির্ধারণ করেন

<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>

স্থানধারক হিসাবে খালি ডিআইভি ব্যবহার করে

<div id='html_element'></div>

তারপরে আপনি সফল ক্যাপচা সাড়াতে একটি alচ্ছিক ফাংশন কল নির্দিষ্ট করতে পারেন

var onloadCallback = function() {
    grecaptcha.render('html_element', {
      'sitekey' : 'your_site_key',
      'callback' : correctCaptcha
    });
  };

এরপরে পুনঃনির্ধারণের প্রতিক্রিয়াটি তখন 'সঠিকক্যাপচা' ফাংশনে প্রেরণ করা হবে।

var correctCaptcha = function(response) {
    alert(response);
};

এই সমস্ত গুগল এপিআই নোট থেকে ছিল:

গুগল রিক্যাপচা ভি 2 এপিআই নোটস

আপনি কেন এটি করতে চান তা সম্পর্কে আমি কিছুটা অনিশ্চিত। সাধারণত আপনি সার্ভার-সাইডটি নিরাপদে যাচাই করতে আপনার প্রাইভেট কী সহ জি-রিপ্যাচটা-প্রতিক্রিয়া ক্ষেত্রটি প্রেরণ করবেন। যদি না আপনি সাবমিট বাটনটি অক্ষম করতে না চান যতক্ষণ না রিপ্যাচচা সাফল্যযুক্ত বা এমন হয় - যে ক্ষেত্রে উপরের কাজ করা উচিত।

আশাকরি এটা সাহায্য করবে.

পল


1
এটিকে স্ক্র্যাচ করুন, আমি এটি আবিষ্কার করেছি - আপনার কোডের কিছু অংশ ভুল আছে তাই আমি কোনও সম্পাদনার প্রস্তাব দেব। চিয়ার্স!
উপসর্গ

@ প্রিফিক্স আপনি কি এখনও সম্পাদনার প্রস্তাব দিয়েছেন? আপনার সংস্করণে প্রত্যাশায়
ধন্যবাদ_ইন_আডভান্স

1
সঠিকক্যাপচা কলব্যাক ফাংশন ঘোষণা (গ্র্যাক্যাপ্টা.রেেন্ডারের অভ্যন্তরে) কোট ছাড়াই হওয়া উচিত এবং এটি ওলডক্যালব্যাকের আগে স্থাপন করা উচিত।
প্রতুল সানওয়াল

9

আমি হার্ভেইভের সমাধানটি ব্যবহার করেছি তবে এটি ভুলভাবে পড়েছি এবং বুটস্ট্র্যাপ বৈধকরণকারীর পরিবর্তে jQuery যাচাইকরণের মাধ্যমে এটি করেছি।

  <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js"></script>
  <script>
    $("#contactForm").validate({
      submitHandler: function (form) {
        var response = grecaptcha.getResponse();
        //recaptcha failed validation
        if (response.length == 0) {
          $('#recaptcha-error').show();
          return false;
        }
          //recaptcha passed validation
        else {
          $('#recaptcha-error').hide();
          return true;
        }
      }
    });
  </script>

6

আমি ভেবেছিলাম এগুলি সবই দুর্দান্ত তবে আমার জাভাস্ক্রিপ্ট এবং সি # দিয়ে কাজ করতে আসলে তাদের সমস্যা হয়েছিল। এখানে আমি কি করেছি। আশা করি এটি অন্য কাউকে সাহায্য করবে।

//put this at the top of the page
<script src="https://www.google.com/recaptcha/api.js"></script>

//put this under the script tag
<script>
var isCaptchaValid = false;
function doCaptchaValidate(source, args) {
    args.IsValid = isCaptchaValid;
}
var verifyCallback = function (response) {
    isCaptchaValid = true;
};
</script>

//retrieved from google and added callback
<div class="g-recaptcha" data-sitekey="sitekey" data-callback="verifyCallback">

//created a custom validator and added error message and ClientValidationFucntion
<asp:CustomValidator runat="server" ID="CustomValidator1" ValidationGroup="Initial" ErrorMessage="Captcha Required" ClientValidationFunction="doCaptchaValidate"/>

4

আপনি নিম্নলিখিত কোড ব্যবহার করে আপনার পুনরায় চাপ দিতে পারেন

<div id="recapchaWidget" class="g-recaptcha"></div>

<script type="text/javascript">
   var widId = "";
   var onloadCallback = function ()
   {
    widId = grecaptcha.render('recapchaWidget', {
    'sitekey':'Your Site Key'
            });
   };
 </script>

 <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>

তারপরে আপনি নীচে "ইসরেকাপচালিড ()" পদ্ধতিটি ব্যবহার করে আপনার পুনর্নির্মাণটি বৈধ করতে পারেন।

 <script type="text/javascript">
     function IsRecapchaValid()
      {
      var res = grecaptcha.getResponse(widId);
      if (res == "" || res == undefined || res.length == 0)
         {
          return false;
         }
       return true;
      }
 </script>

সুতরাং, এর মতো: রিটার্ন রিস & অ্যান্ড রেজোলিউশন সার্ভারের বৈধতা সম্পর্কে ভুলে যাবেন না।
অ্যালেক্স গুরস্কি

1

আমি প্লেকের সমাধানটি বুটস্ট্র্যাপ বৈধকারীর অভ্যন্তরে ব্যবহার করেছি এবং এটি কাজ করে। আমি তার সাথে একটি মন্তব্য যুক্ত করেছি তবে আমার কাছে এর প্রতিনিধি নেই;)। সরলীকৃত সংস্করণ:

        $('#form').validator().on('submit', function (e) {
           var response = grecaptcha.getResponse();
           //recaptcha failed validation
           if(response.length == 0) {
               e.preventDefault();
               $('#recaptcha-error').show();
           }
           //recaptcha passed validation
           else {
               $('#recaptcha-error').hide();
           }
           if (e.isDefaultPrevented()) {
              return false;
           } else {
              return true;
           }
       });

1

উত্স লিঙ্ক

এখানে চিত্র বর্ণনা লিখুন

আপনি কেবল গ্র্যাক্যাপচা.জেটরেসপনস () পদ্ধতিটি ব্যবহার করে ক্লায়েন্টের পক্ষে পরীক্ষা করতে পারেন

          var rcres = grecaptcha.getResponse();
          if(rcres.length){
            grecaptcha.reset();
            showHideMsg("Form Submitted!","success");
          }else{
            showHideMsg("Please verify reCAPTCHA","error");
          }

0

দুর্ভাগ্যক্রমে, কেবলমাত্র ক্লায়েন্ট-সাইডে (ওয়েব ব্রাউজার) ক্যাপচাকে বৈধতা দেওয়ার কোনও উপায় নেই, কারণ ক্যাপচার প্রকৃতিটিতে প্রক্রিয়াটি সম্পূর্ণ করতে কমপক্ষে দুটি অভিনেতা (পক্ষ) প্রয়োজন। ক্লায়েন্ট-পক্ষ - একটি মানবকে কিছু ধাঁধা, গণিতের সমীকরণ, পাঠ্য স্বীকৃতি সমাধান করতে বলে এবং প্রতিক্রিয়াটি অ্যালগরিদমের পাশাপাশি ক্যাপচা সমাধানের টাইমস্ট্যাম্প, সিউডো-র্যান্ডম চ্যালেঞ্জ কোডের মতো কিছু মেটাডেটা দ্বারা এনকোড করা হচ্ছে। একবার ক্লায়েন্ট-সাইড ক্যাপচা প্রতিক্রিয়া কোডের সাথে ফর্মটি জমা দিলে সার্ভার-সাইডকে এই ক্যাপচা প্রতিক্রিয়া কোডটি একটি পূর্বনির্ধারিত নিয়মের সেট সহ বৈধকরণ করতে হবে, অর্থাত্‍। যদি 5 মিনিটের সময়কালের মধ্যে ক্যাপচা সমাধান করা হয়, যদি ক্লায়েন্টের আইপি ঠিকানাগুলি একই রকম হয় and এটি খুব সাধারণ বিবরণ, কীভাবে ক্যাপচাগুলি কাজ করে, প্রতিটি একক বাস্তবায়ন (যেমন গুগলের রেপ্যাপ্টা, কিছু বেসিক গণিত সমীকরণ স্ব-তৈরি ক্যাপচারগুলি সমাধান করে),

বিশেষ দ্রষ্টব্য। ক্লায়েন্টের (ওয়েব ব্রাউজার) জাভাস্ক্রিপ্ট কোড কার্যকর করতে অক্ষম করার একটি বিকল্প রয়েছে যার অর্থ প্রস্তাবিত সমাধানগুলি সম্পূর্ণ অকেজো।


-1

if (typeof grecaptcha !== 'undefined' && $("#dvCaptcha").length > 0 && $("#dvCaptcha").html() == "") {
                dvcontainer = grecaptcha.render('dvCaptcha', {
                    'sitekey': ReCaptchSiteKey,
                    'expired-callback' :function (response){
                        recaptch.reset();
                        c_responce = null;
                    },
                    'callback': function (response) {
                        $("[id*=txtCaptcha]").val(c_responce);
                        $("[id*=rfvCaptcha]").hide();
                        c_responce = response;

                    }
                });
            }
            
            function callonanybuttonClick(){
             
                if (c_responce == null) {
                    $("[id*=txtCaptcha]").val("");
                    $("[id*=rfvCaptcha]").show();

                    return false;
                }
                else {
                    $("[id*=txtCaptcha]").val(c_responce);
                    $("[id*=rfvCaptcha]").hide();
                    return true;
                }
            
}
<div id="dvCaptcha" class="captchdiv"></div>
    <asp:TextBox ID="txtCaptcha" runat="server" Style="display: none" />
    <label id="rfvCaptcha" style="color:red;display:none;font-weight:normal;">Captcha validation is required.</label>

ক্যাপচা বৈধতা প্রয়োজন।


-1
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src='https://www.google.com/recaptcha/api.js'></script>
    <script type="text/javascript">
        function get_action() {
            var v = grecaptcha.getResponse();
            console.log("Resp" + v);
            if (v == '') {
                document.getElementById('captcha').innerHTML = "You can't leave Captcha Code empty";
                return false;
            }
            else {
                document.getElementById('captcha').innerHTML = "Captcha completed";
                return true;
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server" onsubmit="return get_action();">
    <div>
    <div class="g-recaptcha" data-sitekey="6LeKyT8UAAAAAKXlohEII1NafSXGYPnpC_F0-RBS"></div>
    </div>
   <%-- <input type="submit" value="Button" />--%>
   <asp:Button ID="Button1" runat="server"
       Text="Button" />
    <div id="captcha"></div>
    </form>
</body>
</html>

এটি আশানুরূপ কাজ করবে।


-1

গুগল রেক্যাপচা সংস্করণ 2 এএসপি.নেট তার কলব্যাক ফাংশনগুলি ব্যবহার করে ক্লায়েন্টের পক্ষে ক্যাপচা প্রতিক্রিয়াটিকে বৈধতা দেয়। ইন এই উদাহরণে , গুগল নতুন আরো তথ্যের ASP.Net RequiredField ভ্যালিডেটার ব্যবহার যাচাই করা হবে না।

<script type="text/javascript">
    var onloadCallback = function () {
        grecaptcha.render('dvCaptcha', {
            'sitekey': '<%=ReCaptcha_Key %>',
            'callback': function (response) {
                $.ajax({
                    type: "POST",
                    url: "Demo.aspx/VerifyCaptcha",
                    data: "{response: '" + response + "'}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (r) {
                        var captchaResponse = jQuery.parseJSON(r.d);
                        if (captchaResponse.success) {
                            $("[id*=txtCaptcha]").val(captchaResponse.success);
                            $("[id*=rfvCaptcha]").hide();
                        } else {
                            $("[id*=txtCaptcha]").val("");
                            $("[id*=rfvCaptcha]").show();
                            var error = captchaResponse["error-codes"][0];
                            $("[id*=rfvCaptcha]").html("RECaptcha error. " + error);
                        }
                    }
                });
            }
        });
    };
</script>


    <asp:TextBox ID="txtCaptcha" runat="server" Style="display: none" />
    <asp:RequiredFieldValidator ID="rfvCaptcha" ErrorMessage="The CAPTCHA field is required." ControlToValidate="txtCaptcha"
        runat="server" ForeColor="Red" Display="Dynamic" />

    <br />
    <asp:Button ID="btnSubmit" Text="Submit" runat="server" />
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.