在nuxt2中实现验证码

Question

我正在开发 Nuxt.js 2 项目，并且使用 @nuxtjs/recaptcha 包来实现 Google reCAPTCHA 进行表单验证。我已成功将 reCAPTCHA 添加到索引页，但是当我尝试将其显示在同一索引页的右侧边栏中时，它没有按预期显示。

这是我的设置方法：

我已经安装了 @nuxtjs/recaptcha 包，并且它是在我的 nuxt.config.js 中配置的。

我在我的索引页面中添加了 nuxt-recaptcha 组件，并且它在那里工作正常。

但是，当我尝试将 reCAPTCHA 小部件放置在同一索引页面的右侧边栏部分时，它无法正确呈现。

这是我的组件结构的简化示例： `

<div class="sidebar">
  <!-- Other sidebar content -->
  <nuxt-recaptcha sitekey="YOUR_SITE_KEY"></nuxt-recaptcha>
</div>

我已经检查过 sitekey 是否正确，并且 reCAPTCHA 小部件应该出现在侧边栏中，但事实并非如此。

任何人都可以提供有关如何在 Nuxt.js 2 项目中正确集成 @nuxtjs/recaptcha 并将其显示在页面的特定部分（例如右侧边栏）中的指导吗？

谢谢您的帮助！

Answer 1

首先安装@nuxtjs/recaptcha

yarn add @nuxtjs/recaptcha

创建您的站点密钥 https://www.iqcomputing.com/support/articles/generate-google-recaptcha-v2-keys/ 在 nuxt.config.js 中添加此内容

modules: ['@nuxtjs/recaptcha'],
publicRuntimeConfig: {
  recaptcha: {
    siteKey: 'XXXXX',
    version: 2
  }
},

在您的登录页面或组件中

<template>
  <div>
    <b-alert v-model="recaptchaResponseAlert" variant="danger" class="mt-3" dismissible>Please verify that you are a Human.</b-alert>
    <recaptcha
      id="v2-normal"
      @error="onError"
      @success="onSuccess"
      @expired="onExpired"
    />
  </div>
</template>
<script>
export default {
  data() {
    return {
      recaptchaResponse: false,
      recaptchaResponseAlert: false
    }
  },

  mounted() {
    this.$recaptcha.init()
    this.widgetId = this.$recaptcha.render('v2-normal', {
      sitekey: "XXXXX"
    });
  },

  methods:{
    onSuccess (token) {
      this.recaptchaResponse = true
      this.recaptchaResponseAlert = false
      console.log('Succeeded:', this.recaptchaResponse)
    },
    onError (error) {
      this.recaptchaResponse = false
      this.recaptchaResponseAlert = true
      console.log('Error happened:', error)
    },
    onExpired () {
      this.recaptchaResponse = false
      this.recaptchaResponseAlert = true
      console.log('Expired')
    },
  }
}
</script>