Подключение Google reCAPTCHA на Vue и валидация ответа на сервере

[Savetchuk]

Если кого-то смущает сообщение в консоли — «reCAPTCHA couldn't find user-provided function: vueRecaptchaApiLoaded», удалите код с секции head и вставьте капчу с помощью JS в методе created():

created () {
    const $script = document.createElement('script')
    $script.async = true
    $script.src = 'https://www.google.com/recaptcha/api.js?onload=vueRecaptchaApiLoaded&render=explicit'
    document.head.appendChild($script)
  },

Это сообщение означает, что браузер загрузил капчу быстрее, чем наше приложение.
Компонент все равно определит капчу.

[Savetchuk]

Только не забудьте удалять скрипты в методе beforeDestroy (если вы используете роутинг).

[Fess_blaga]

1. Вам не кажется, что в методе register строчка

const self = this

явно лишняя? Там (и дальше по коду), обращение к свойствам экземпляра Vue через this вполне отработает.

axios.post('https://yourserverurl.com/register', {
email: this.email,
password: this.password,
recaptchaToken: recaptchaToken
})


2. recaptchaToken в опции data() точно не место)))

[Savetchuk]

Спасибо! Хорошо, что заметили.
Я отредактировал статью.

[almassar]

Почему вторую версию выбрали капчи?

[Savetchuk]

Все просто, я много с ней работал и она у меня во всех проектах.
А до 3й версии руки еще не дошли. Нужно будет попробовать.