Как я могу добавить Google Recaptcha 3 на Vuetify? - PullRequest
Новая
       45

Как я могу добавить Google Recaptcha 3 на Vuetify?

1 голос
/ 23 октября 2019

Я хочу добавить Google Reaptcha 3 в моем проекте Vuetify

Google Reaptcha 3, как это:

enter image description here

Я получаюссылка отсюда: https://www.npmjs.com/package/vue-recaptcha-v3

Первое: я запускаю npm install vue-recaptcha-v3

Второе: я изменяю свой main.js следующим образом: 

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './registerServiceWorker'
import vuetify from './plugins/vuetify'
import { VueReCaptcha } from 'vue-recaptcha-v3'

Vue.config.productionTip = false
Vue.use(VueReCaptcha, {
  siteKey: '<site key>',
  loaderOptions: {
    useRecaptchaNet: true
  }
})

new Vue({
  router,
  store,
  vuetify,
  render: h => h(App),
  methods: {
    recaptcha() {
      this.$recaptcha('login').then((token) => {
        console.log(token) // Will print the token
      })
    }
  },
  template: '<button @click="recaptcha">Execute recaptcha</button>'
}).$mount('#app')

Моя проблема в том, что яя не могу назвать его из моего компонента

Мой компонент vue выглядит так: 

<template>
  <v-container>
    ...
        <v-row>
          <v-col
            cols="6"
          >
            <v-form v-model="valid" ref="form" 
            >
              <v-text-field
              label="Full Name"
              outlined
              v-model="fullname"
              ></v-text-field>
              <v-text-field
              label="Email"
              outlined
              v-model="email"
              ></v-text-field>
              <v-text-field
              label="Phone"
              outlined
              v-model="phone"
              ></v-text-field>

              <v-row justify="center">
                <v-btn color="green accent-4" :dark="valid" @click="validate()" :disabled="!valid">Save
                  <v-icon dark right>mdi-checkbox-marked-circle</v-icon>
                </v-btn>
              </v-row>
            </v-form>
          </v-col>
        </v-row>
      ...
  </v-container>
</template>

<script>
  export default {
    data: () => ({

    })
  }
</script>

Как я могу вызвать gap recaptcha 3 из моего компонента?

1 Ответ

1 голос
/ 23 октября 2019

При добавлении сайта вы получаете два токена из консоли администратора.

Используйте секрет клиента в приложении Vue и секрет сервера в бэкенде

Добавьте секрет клиента вmain.js 

Vue.use(VueReCaptcha, {
  siteKey: '<site key>'
}

Удалите метод из main.js, который предназначен только для демонстрации 

new Vue({,
  router,
  store,
  vuetify,
  render: h => h(App),
}).$mount('#app')

Добавить recaptcha onлюбые события

В свой компонент Vue добавьте recaptcha 

<template>
 <button @click="recaptcha">Recaptcha</button>
</template>

<script>
  export default {
   ...
   methods: {
   ...
   recaptcha() {
      this.$recaptcha('login').then((token) => {
        console.log(token) // Will print the token
      })
    }
   },
   ....
  }
</script>

Возвращает токен для входа в систему, вы можете использовать его для отправки почтового запроса на перепросмотр для проверки пользователя

...