구글 recetcha에서 사용자가 확인란을 선택한 js를 확인하는 방법은 무엇입니까?
머리 끝에 다음 사항을 추가했습니다.
<script src='https://www.google.com/recaptcha/api.js'></script>
양식이 끝나기 전에 추가했습니다.
<div class="g-recaptcha" data-sitekey="== xxxxxx =="></div>
저는 https://developers.google.com/recaptcha/ 과 유사한 탈환을 볼 수 있습니다.
그러나 사용자가 확인란을 선택하지 않고 데이터를 누르면 데이터가 전송됩니다.사용자가 확인란을 눌렀는지 확인하기 위해 추가해야 할 다른 코드가 있습니까?바라건대 js에?
확인란을 선택하면 Google에서 콜백 옵션을 제공합니다.
양식 요소에 추가합니다.
data-callback="XXX"
예:
<div class="g-recaptcha" data-callback="recaptchaCallback" data-sitekey="== xxxxxx =="></div>
제출 단추의 속성을 비활성화합니다.
예:
<button id="submitBtn" disabled>Submit</button>
그런 다음 콜백 기능을 만들고 필요한 코드를 작성합니다.
예:
function recaptchaCallback() {
$('#submitBtn').removeAttr('disabled');
};
grecaptcha 객체를 호출하여 확인할 수도 있습니다.grecaptcha.getResponse();선택하지 않으면 비어 있고 선택하면 확인 코드가 있습니다.
grecaptcha.getResponse().length === 0체크하지 않으면
function isCaptchaChecked() {
return grecaptcha && grecaptcha.getResponse().length !== 0;
}
if (isCaptchaChecked()) {
// ...
}
Google retrecetch가 선택되어 있는지 여부를 확인하려면 다음 코드를 사용합니다.
<script>
if(grecaptcha && grecaptcha.getResponse().length > 0)
{
//the recaptcha is checked
// Do what you want here
alert('Well, recaptcha is checked !');
}
else
{
//The recaptcha is not cheched
//You can display an error message here
alert('Oops, you have to check the recaptcha !');
}
</script>
Google retrecetch v2가 선택되어 있는지 확인하려면 다음 코드를 사용합니다.
var checkCaptch = false;
var verifyCallback = function(response) {
if (response == "") {
checkCaptch = false;
}
else {
checkCaptch = true;
}
};
$(document).ready(function() {
$("#btnSubmit").click(function() {
if (checkCaptch && grecaptcha.getResponse()!="") {
//Write your success code here
}
});
})
브라우저가 대신 작업을 수행합니다! (slinky2000 답변 기준)
참고: 이는 '우발적'으로 확인되지 않은 recetcha를 보내는 것을 방지하기 위한 것입니다.봇이 신경쓰지 않기 때문에 서버 측에서 재검색을 확인해야 합니다.
다음을 사용하여 보이지 않는 입력 태그 추가required=true바로 아래의 속성div.g-recaptcha.
<input id='recaptcha_check_empty' required tabindex='-1',
style='width:50px; height:0; opacity:0; pointer-events:none;
position:absolute;
bottom:0;'>
양쪽 너비 a를 모두 포함합니다.div와 함께position=relative;지적하자면bottom:0;탈환차의 밑바닥까지.
이제 브라우저는 요약 차트를 가리키며 이 필드를 작성하도록 요청합니다.
이제 콜백이 필요합니다.
<div class="g-recaptcha" data-callback="recaptchaCallback" ...
그리고.
function recaptchaCallback() {
$('#recaptcha_check_empty').val(1);
}
<div class="contact-inner contact-message">
<label for="message-text" class="col-form-label">CAPTCHA</label>
<div class="g-recaptcha" data-sitekey="<?php echo 6LfSJmocAAAAAFFMpMKB1CtYNJYDyDswO7GpxRXS ;?>">
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src='https://www.google.com/recaptcha/api.js'></script>
<!DOCTYPE html>
<html>
<head>
<title>CAPTCHA</title>
</head>
<body>
<div class="contact-inner contact-message">
<label for="message-text" class="col-form-label">CAPTCHA</label>
<div class="g-recaptcha" data-sitekey="<?php echo GOOGLE_KEY ;?>"></div>
</div>
</body>
</html>
만약 어떤 이유로 당신이 나처럼 손으로 양식을 컨디셔닝하고 있고, 필요한 것이 작동하지 않는 경우.
첫 번째 가져오기 ReCAPTCHA
import ReCAPTCHA from 'react-google-recaptcha'
구성 요소에 적용
<ReCAPTCHA style={{margin: '5px', transform: 'scale(0.8)'}} ref={recaptchaRef} sitekey={recaptchaKey} onChange={updateRecaptcha}/>
를 사용할 수 있습니다.useRef아니면 그냥 사용하세요.ReCAPTCHA당신은 수입했고, 나는 사용했습니다.useRef.
const recaptchaRef = useRef<any>()
그리고 이제, 어떻게 확인하죠?recaptchaRef선택되었습니까?
if (recaptchaRef.current.props.grecaptcha.getResponse().length !== 0) {
//your condition
}
기본적으로, 당신은 '재수차가 사실이라면, 이것을 하라'고 말하고 있습니다.
이것은 당신에게 도움이 되는 완전한 양식 코드입니다(나는 타입스크립트를 사용하고 있습니다).
const Formid = // yout formid
const FormSpark = `https://submit-form.com/${Formid}`
type FormState = {
name: string,
mail: string,
message: string
}
const initialState = {
name: '',
mail: '',
message: '',
}
const [wrongmail, setWrongmail] = useState(false)
const [wrongname, setWronname] = useState(false)
const [wrongtext, setWrongtext] = useState(false)
const [alert, setAlert] = useState(false)
const recaptchaRef = useRef<any>()
const recaptchaKey = //your recaptcha public key const [recaptchaToken, setRecaptchaToken] = useState<string>()
const [formstate, setFormState] = useState<FormState>(initialState)
const submit = async(event: FormEvent) =>{
event.preventDefault()
await postSubmission()
}
const updateRecaptcha = (token: string | null)=>{
setRecaptchaToken(token as string)
}
const {name, mail, message} = formstate
const postSubmission = async() => {
const payload = {
...formstate,
"g-recaptcha-response": recaptchaToken
}
try {
if (name && mail && message) {
if (mail.includes('@') && mail.includes('.') && mail.length > 5) {
if (name.includes(' ') && name.length> 5) {
if (message.length > 20) {
if (recaptchaRef.current) {
if (recaptchaRef.current.props.grecaptcha.getResponse().length !== 0) {
console.log('hola')
setAlert(true)
const result = await axios.post(FormSpark, payload)
setFormState(initialState)
recaptchaRef.current.reset()
if (result) {
setTimeout(() => {
setAlert(false)
},2000)
}
}
}
}
}
}
if (!name && !(name.length> 5) && !(name.includes(' '))) {
setWronname(true)
setTimeout(() => {
setWronname(false)
},3000)
}
if (!mail && !mail.includes('@') && !mail.includes('.') && !(mail.length > 5)) {
setWrongmail(true)
setTimeout(()=>{
setWrongmail(false)
},3000)
}
if (!message && !(message.length > 20)) {
setWrongtext(true)
setTimeout(() => {
setWrongtext(false)
},3000)
}
}
} catch(error){
console.log(error);
}
}
const updateForm = (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
const {id, value} = event.target
const formKey = id as keyof FormState
const updatedFormState = {...formstate}
updatedFormState[formKey] = value
setFormState(updatedFormState)
}
언급URL : https://stackoverflow.com/questions/28674946/how-to-check-in-js-that-user-has-checked-the-checkbox-in-google-recaptcha
'programing' 카테고리의 다른 글
| 라라벨:문자열 데이터, 오른쪽 잘림: 1406 데이터가 열에 대해 너무 깁니다. (0) | 2023.09.02 |
|---|---|
| git .gitignore 파일의 파일을 무시하는 것을 제외하고 모두 추가합니다. (0) | 2023.09.02 |
| iOS 기기의 디스플레이가 어두워지거나 꺼지는 것을 방지하려면 어떻게 해야 합니까? (0) | 2023.09.02 |
| 팬더 또는 다른 파이썬 모듈로 특정 열 읽기 (0) | 2023.09.02 |
| 이미지 보기와 텍스트 보기가 포함된 선형 레이아웃 대신 복합 그리기 가능한 테이블을 사용하는 방법 (0) | 2023.09.02 |