특정 페이지에만 캡차 아이콘을 표시하는 방법(VUE reCAPTCHA-v3)

특정 페이지에만 캡차 아이콘을 표시하는 방법(VUE reCAPTCHA-v3)

나는 이 패키지를 사용한다: https://www.npmjs.com/package/vue-recaptcha-v3

나는 나의 main.js:를 덧붙인다.

import { VueReCaptcha } from 'vue-recaptcha-v3'

Vue.use(VueReCaptcha, { siteKey: 'xxxxxxx' })

다음 코드를 추가함:

await this.$recaptcha('login').then((token) => {
    recaptcha = token
})

내 컴포넌트로 구글에서 토큰을 받기 위해

내 문제는 오른쪽 아래 구석에 있는 캡차 아이콘이 모든 페이지에 나타난다는 것이다.

특정 구성 요소에만 표시됨

내가 이것을 바꿔야 할 것 같다.Vue.use(VueReCaptcha, { siteKey: 'xxxxxxxxxxxxxxxxx' }). 아직 까지 올라가고 있는 것 같다.Vue.use. vue 루트 인스턴스 대신 특정 구성 요소에 마운트하려는 경우

어떻게 하면 이 문제를 해결할 수 있을까?

갱신하다

나는 이렇게 노력한다.

Vue.use(VueReCaptcha, {
  siteKey: 'xxxxxxx',
  loaderOptions: {
    useRecaptchaNet: true,
    autoHideBadge: true
  }
})

그것은 배지를 숨긴다.배지가 계속 나타나길 원해하지만 등록 페이지인 1페이지에 불과해.어떻게 하면 좋을까?

npm 패키지를 사용하면서 나도 같은 문제를 겪었는데, 꽤 짜증나.

결국, 나는 그 패키지를 사용하지 않기로 결정했고 구글의 설명서를 따르기로 했다.

다음 줄:

grecaptcha.execute('_reCAPTCHA_site_key_', {action: 'login'}).then(function(token) {
  recaptcha = token
})

npm 패키지의 이 라인과 동일함:

this.$recaptcha('login').then((token) => {
   recaptcha = token 
})

<머리>에 이 선을 추가하기만 하면 되므로 리프레챠가 작동된다.

<script src="https://www.google.com/recaptcha/api.js?render=_reCAPTCHA_site_key"></script>

그러나 <머리>에 대본 태그가 들어가자마자, 당신은 모든 페이지에 대본 태그가 표시되는 것과 같은 이슈에 직면하게 될 것이다.

해킹은 필요한 부품만 <헤드>에 삽입하는 것이다.이것을 할 수 있는 방법들이 있지만 나는 결국 이것을 참고하게 되었다.

컴포넌트 메소드에 넣고 컴포넌트가 로드되면 메소드를 호출할 수 있다.

그래야 네가 필요한 페이지에만 나타날 거야.

main.js에서 autoHideBadge true 설정:

import { VueReCaptcha } from 'vue-recaptcha-v3'
Vue.use(VueReCaptcha, { siteKey: 'your site key', 
  loaderOptions:{autoHideBadge: true }})

배지를 표시하려는 모든 페이지에서 탑재된 배지를 표시할 수 있으며, 어떤 이유로 탑재된 이벤트가 발생한 후 몇 초까지 배지를 표시할 수 있다.$recaptchaInstance는 null이고 사용할 수 없으므로, 페이지 로드 후 5초 후에 탑재된 배지를 표시하는 데 시간 초과를 사용한다.

mounted(){
    setTimeout(()=>{
      const recaptcha = this.$recaptchaInstance
      recaptcha.showBadge()
    },5000)
   },

보여주면 같은 페이지에 다시 숨겨야 한다.

   beforeDestroy() {
    const recaptcha = this.$recaptchaInstance
      recaptcha.hideBadge()
    },

다음 코드만 사용하십시오.

const recaptcha = this.$recaptchaInstance

// Hide reCAPTCHA badge:
recaptcha.value.hideBadge()

// Show reCAPTCHA badge:
recaptcha.value.showBadge()

vue-beatcha-v3 npm

참조URL: https://stackoverflow.com/questions/58922902/how-do-i-display-the-captcha-icon-only-on-certain-pages-vue-recaptcha-v3