Как проверить в js, что пользователь установил флажок в Google recaptcha?

Я добавил следующее до конца главы

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

Я добавил это до конца формы

<div class="g-recaptcha" data-sitekey="== xxxxxx =="></div>

Я вижу репачу, похожую на https://developers.google.com/recaptcha/

Однако, когда пользователь нажимает данные, не устанавливая флажок, данные отправляются. Есть ли другой код, который мне нужно добавить, чтобы проверить, нажал ли пользователь флажок? Надеюсь, в JS?

Источник

7 ответов

Решение

У 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 recaptcha или нет, вы можете сделать это с помощью следующего кода:

<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>
Источник

Пусть браузер сделает всю работу за вас! (на основании ответа slinky2000)

примечание: это только для предотвращения отправки "случайно" неконтролируемой рекапчи. Вы все еще должны проверить recaptcha на стороне сервера, потому что бот не заботится...

Добавьте невидимый тег ввода с 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;'>

Вложите обе ширины div с position=relative; указать bottom:0; выше к нижней части рекапчи.

Теперь браузер просит, чтобы приятно заполнить это поле - указывая на recapcha.

Теперь нам нужен обратный вызов:

<div class="g-recaptcha" data-callback="recaptchaCallback" ...

а также

function recaptchaCallback() { 
    $('#recaptcha_check_empty').val(1);
}
Источник

Чтобы проверить, установлен ли Google recaptcha 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
             }
         });
     })
Источник

если по какой-то причине вы формируете форму вручную, как я, и требуемая не работает.

Первый импорт ReCAPTCHA

      import  ReCAPTCHA  from 'react-google-recaptcha'

Примените его в своем компоненте

      <ReCAPTCHA style={{margin: '5px', transform: 'scale(0.8)'}} ref={recaptchaRef} sitekey={recaptchaKey} onChange={updateRecaptcha}/>

вы можете использовать или просто использовать ReCAPTCHAвы импортировали, я использовал useRef.

      const recaptchaRef = useRef<any>()

А теперь, как мне проверить, если recaptchaRefпроверено?

      if (recaptchaRef.current.props.grecaptcha.getResponse().length !== 0) {
    //your condition
}

по сути, вы говорите: «Если recaptcha верна, то сделайте это»

это полный код формы, который вам поможет (я использую typeScipt)

      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)
}
Источник 
      <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>
Источник
Другие вопросы по тегам