반응형
javascript / jQuery를 사용하여 Google 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의 클라이언트 측 검증-다음이 저에게 효과적이었습니다.
"grecaptcha.getResponse ();"는 reCaptcha가 클라이언트 측에서 검증되지 않은 경우 널을 리턴하고 그렇지 않으면 널이 아닌 값을 리턴합니다.
자바 스크립트 코드 :
var response = grecaptcha.getResponse();
if(response.length == 0)
//reCaptcha not verified
else
//reCaptch verified
이것을 사용하여 간단한 자바 스크립트로 Google 보안 문자를 확인하십시오.
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 (this) 메소드 양식 버튼의 헤드 섹션에 있습니다.
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;
}
}
단순화 된 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);
};
콜백에서 Recaptcha를 렌더링하는 경우
<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
});
};
그러면 recaptcha 응답이 'correctCaptcha'함수로 전송됩니다.
var correctCaptcha = function(response) {
alert(response);
};
이 모든 것은 Google API 노트에서 가져온 것입니다.
왜 이렇게 하려는지 잘 모르겠습니다. 일반적으로 개인 키와 함께 g-recaptcha-response 필드를 전송하여 서버 측의 유효성을 안전하게 검사합니다. recaptcha가 성공할 때까지 제출 버튼을 비활성화하지 않으려면 위의 작업이 작동합니다.
도움이 되었기를 바랍니다.
폴
HarveyEV의 솔루션을 사용했지만 잘못 읽었으며 Bootstrap 유효성 검사기 대신 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>
다음 코드를 사용하여 recaptcha를 렌더링 할 수 있습니다.
<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 ()"메서드를 사용하여 recaptcha의 유효성을 검사 할 수 있습니다.
<script type="text/javascript">
function IsRecapchaValid()
{
var res = grecaptcha.getResponse(widId);
if (res == "" || res == undefined || res.length == 0)
{
return false;
}
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"/>
Bootstrap 유효성 검사기 내부에서 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;
}
});
grecaptcha.getResponse () 메소드를 사용하여 클라이언트 측에서 간단히 확인할 수 있습니다.
var rcres = grecaptcha.getResponse();
if(rcres.length){
grecaptcha.reset();
showHideMsg("Form Submitted!","success");
}else{
showHideMsg("Please verify reCAPTCHA","error");
}
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>
예상대로 작동합니다.
Google reCAPTCHA 버전 2 ASP.Net을 사용하면 콜백 함수를 사용하여 클라이언트 측에서 Captcha 응답의 유효성을 검사 할 수 있습니다. 에서 예 , 구글의 새로운 reCAPTCHA를은 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" />
반응형
'program tip' 카테고리의 다른 글
| ReactJS : 최대 업데이트 깊이 초과 오류 (0) | 2020.08.09 |
|---|---|
| Visual Studio 솔루션 파일 구문 분석 (0) | 2020.08.09 |
| SQL Server 저장 프로 시저의 선택적 매개 변수? (0) | 2020.08.09 |
| MySQL의 여러 테이블에서 삭제하는 방법은 무엇입니까? (0) | 2020.08.09 |
| 패키지 관리자 콘솔 활성화-마이그레이션 CommandNotFoundException 특정 VS 프로젝트에서만 (0) | 2020.08.09 |