javascript/jQuery를 사용하여 구글 reCAPTCHA v2의 유효성을 확인하려면 어떻게 해야 합니까?
저는 간단한 연락처 양식을 aspx에 가지고 있습니다.양식을 제출하기 전에 reCaptcha(클라이언트 측)의 유효성을 확인하고 싶습니다.제발 도와주세요.
샘플 코드:
<%@ 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딸깍하는 소리
제발 도와주세요.
이 클라이언트 측 확인:reCaptcha다음은 나에게 효과가 있었습니다.
클라이언트 측에서 reCaptcha가 유효하지 않은 경우grecaptcha.getResponse();돌아온다nullelse is가 아닌 다른 값을 반환합니다.null.
Javascript 코드:
var response = grecaptcha.getResponse();
if(response.length == 0)
//reCaptcha not verified
else
//reCaptch verified
간단한 Javascript로 Google Captcha의 유효성을 확인할 수 있습니다.
HTML 본문의 다음 코드:
<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;
}
}
콜백으로 리퀘스트차를 렌더링하는 경우
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>
빈 DIV를 자리 표시자로 사용
<div id='html_element'></div>
그런 다음 성공적인 CAPTCHA 응답에 대한 선택적 함수 호출을 지정할 수 있습니다.
var onloadCallback = function() {
grecaptcha.render('html_element', {
'sitekey' : 'your_site_key',
'callback' : correctCaptcha
});
};
그러면 재검색 응답이 '올바른 Captcha' 기능으로 전송됩니다.
var correctCaptcha = function(response) {
alert(response);
};
이 모든 것은 Google API 노트에서 가져온 것입니다.
Google Retrievecha v2 API 참고 사항
저는 당신이 왜 이것을 하기를 원하는지 약간 확신할 수 없습니다.일반적으로 서버 측을 안전하게 확인하기 위해 개인 키와 함께 g-recaptcha-response 필드를 보냅니다.재검색이 성공할 때까지 제출 단추를 비활성화하지 않은 경우(이 경우 위에서 설명한 내용이 작동해야 합니다.
이게 도움이 되길 바랍니다.
폴.
단순화된 Paul의 대답:
출처:
<script src="https://www.google.com/recaptcha/api.js"></script>
HTML:
<div class="g-recaptcha" data-sitekey="YOUR_KEY" data-callback="correctCaptcha"></div>
JS:
var correctCaptcha = function(response) {
alert(response);
};
Harvey EV의 솔루션을 사용했는데 잘못 읽어서 부트스트랩 검증기 대신 jQuery validate로 했습니다.
<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>
모두 훌륭하다고 생각했지만 실제로 자바스크립트와 c#로 작업하는 데 어려움을 겪었습니다.여기 제가 한 일이 있습니다.다른 사람에게 도움이 되길 바랍니다.
//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"/>
다음 코드를 사용하여 재검색을 렌더링할 수 있습니다.
<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>
그런 다음 다음 "IsRecapchaValid()" 메서드를 사용하여 recapcha의 유효성을 확인할 수 있습니다.
<script type="text/javascript">
function IsRecapchaValid()
{
var res = grecaptcha.getResponse(widId);
if (res == "" || res == undefined || res.length == 0)
{
return false;
}
return true;
}
</script>
안타깝게도 captcha의 특성상 프로세스를 완료하려면 적어도 두 명의 행위자(측)가 필요하기 때문에 클라이언트 측(웹 브라우저)에서만 captcha를 검증할 수 있는 방법이 없습니다.클라이언트 측은 인간에게 퍼즐, 수학 방정식, 텍스트 인식을 풀도록 요청하고 응답은 캡차 해결 타임스탬프, 의사 무작위 챌린지 코드와 같은 일부 메타데이터와 함께 알고리즘에 의해 인코딩됩니다.클라이언트 측에서 captcha 응답 코드와 함께 양식을 제출하면 서버 측에서 미리 정의된 규칙 집합(captcha가 5분 내에 해결된 경우, 클라이언트의 IP 주소가 동일한 경우 등)을 사용하여 이 captcha 응답 코드의 유효성을 검사해야 합니다.이것은 캡치가 어떻게 작동하는지, 모든 구현(구글의 ReCaptcha와 같은 기본적인 수학 방정식 풀이 자체적으로 만든 캡치의 매우 일반적인 설명입니다.그러나 유일한 공통점은 클라이언트 측(웹 브라우저)이 사용자의 응답을 캡처하고 서버 측(웹 서버)이 이 응답을 확인하여 양식 제출이 사람에 의해 이루어졌는지 로봇에 의해 이루어졌는지 여부를 알 수 있다는 것입니다.
NB. 클라이언트(웹 브라우저)에는 JavaScript 코드 실행을 비활성화하는 옵션이 있으며, 이는 제안된 솔루션이 전혀 쓸모가 없음을 의미합니다.
grecaptcha.getResponse() 메서드를 사용하여 클라이언트 측에서 간단히 확인할 수 있습니다.
var rcres = grecaptcha.getResponse();
if(rcres.length){
grecaptcha.reset();
showHideMsg("Form Submitted!","success");
}else{
showHideMsg("Please verify reCAPTCHA","error");
}
Bootstrap validator 안에서 Palek의 솔루션을 사용했는데 작동합니다.나는 그의 의견에 코멘트를 추가했지만 나는 대표자가 없습니다;).단순화된 버전:
$('#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;
}
});
다음은 .NET을 사용하여 REVERCHA를 검증한 방법입니다.
프런트 엔드
<div id="rcaptcha" class="g-recaptcha" data-sitekey="[YOUR-KEY-GOES-HERE]" data-callback="onFepCaptchaSubmit"></div>
백엔드:
public static bool IsCaptchaValid(HttpRequestBase requestBase)
{
var recaptchaResponse = requestBase.Form["g-recaptcha-response"];
if (string.IsNullOrEmpty(recaptchaResponse))
{
return false;
}
string postData = string.Format("secret={0}&response={1}&remoteip={2}", "[YOUR-KEY-GOES-HERE]", recaptchaResponse, requestBase.UserHostAddress);
byte[] data = System.Text.Encoding.ASCII.GetBytes(postData);
HttpWebRequest request = (HttpWebRequest)WebRequest.Create("https://www.google.com/recaptcha/api/siteverify");
request.Method = "POST";
request.ContentType = "application/x-www-form-urlencoded";
request.ContentLength = data.Length;
using (var stream = request.GetRequestStream())
{
stream.Write(data, 0, data.Length);
}
var response = (HttpWebResponse)request.GetResponse();
var responseString = "";
using (var sr = new System.IO.StreamReader(response.GetResponseStream()))
{
responseString = sr.ReadToEnd();
}
return System.Text.RegularExpressions.Regex.IsMatch(responseString, "\"success\"(\\s*?):(\\s*?)true", System.Text.RegularExpressions.RegexOptions.Compiled);
}
컨트롤러의 POST 작업 내에서 위의 메서드를 호출합니다.
사용자가 reCAPTCHA를 시도하지 않은 상태에서 서버로의 이동을 방지하려면 제출 시 작업에 유효성 검사 기능을 추가합니다.
<form id="start_game" action="start-game" method="post" onsubmit="return validate_form();">
그런 다음 이 기능을 다음과 같이 만듭니다.
function validate_form() {
const recaptcha_box_checked = (grecaptcha.getResponse()) ? true : false;
if (recaptcha_box_checked) {
return true;
}
else {
alert("You must check the 'I am not a robot' box before you can start a game!");
return false;
}
}
이제 사용자는 확실히 이를 뒤집을 수 있지만 백엔드는 비밀 키를 사용하여 구글 서버로 g-recaptcha-response를 확인합니다.이것은 사용자가 단순히 상자를 확인하는 것을 잊어버렸을 때 다른 페이지나 두 페이지를 거쳐야 하는 것을 막습니다.
JS로만 단독으로 검증할 수 없습니다.그러나 reCAPTCHA가 유효한지 또는 사용자가 reCAPTCHA를 클릭했는지 여부를 확인하기 위해 제출 버튼을 클릭한 경우 아래 코드를 사용하여 확인할 수 있습니다.
let recaptchVerified = false;
firebase.initializeApp(firebaseConfig);
firebase.auth().languageCode = 'en';
window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container',{
'callback': function(response) {
recaptchVerified = true;
// reCAPTCHA solved, allow signInWithPhoneNumber.
// ...
},
'expired-callback': function() {
// Response expired. Ask user to solve reCAPTCHA again.
// ...
}
});
여기서는 변수 recetchVerified를 사용하여 처음에는 false로 만들고 Recetcha가 검증되면 true로 만듭니다.
그래서 나는 사용자가 제출 버튼을 클릭할 때 recetchVerified 변수를 사용하여 캡처를 확인했는지 확인할 수 있습니다.
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>캡차 유효성 검사가 필요합니다.
<%@ 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>
그것은 예상대로 작동할 것입니다.
언급URL : https://stackoverflow.com/questions/27902539/how-can-i-validate-google-recaptcha-v2-using-javascript-jquery
'programing' 카테고리의 다른 글
| 각도 2: 구성 요소의 호스트 요소를 스타일화하는 방법은 무엇입니까? (0) | 2023.05.26 |
|---|---|
| 각각의 경우(VB.NET)에서 마지막 루프를 어떻게 찾습니까? (0) | 2023.05.26 |
| PostgreSQL에서 중복 업데이트 시 삽입하시겠습니까? (0) | 2023.05.21 |
| Git repo에 파일을 보관하지만 변경 내용을 추적하지 않음 (0) | 2023.05.21 |
| HTML 테이블에서 열을 숨기는 방법은 무엇입니까? (0) | 2023.05.21 |