如何在nuxt中使用Google Recaptcha？

编程问答 2022-08-14

问题描述

我正在使用nuxt，并且想使用这个库：https://github.com/nuxt-community/recaptcha-module。但是我不明白如何验证用户是否通过了检查。该示例并没有告诉我太多（https://github.com/nuxt-community/recaptcha-module/blob/master/example/v3/pages/index.vue）。有人可以告诉我如何正确执行操作吗？

解决方法

在您的nuxt.config.js中使用https://github.com/nuxt-community/recaptcha-module 

modules: [
  '@nuxtjs/recaptcha',],recaptcha: {
  hideBadge: true,siteKey: "ABC...",// Better would be from 'process.env.API_KEY' and with '.env' file
  version: 2,// Or 3
},

请记住，modules与buildModules是不相同（有时，由于类似的命名，它可能会造成混淆）。

,

这个例子只是故事的一半。它将在客户端返回Recaptcha V3令牌。

然后必须将其发送到服务器端并使用您的密钥进行验证。

这是通过向该URL发送帖子来完成的：

const url = `https://www.google.com/recaptcha/api/siteverify?secret=${secretKey}&response=${token}`;

您不想在客户端允许此密钥。

要在Nuxt（版本2.13+）中实现此目的，可以在nuxt配置中使用privateRuntimeConfig。

这将允许您链接.env文件，使其仅在服务器端注入。

在这种情况下，像这样的privateRuntimeConfig就足够了：

privateRuntimeConfig: {
    secretKey: process.env.GOOGLE_SECRET
}

完成此操作后，您将可以在Nuxt应用程序中以this.$config的一部分访问这些变量-在本例中为this.$config.secretKey，当调用Recaptcha验证端点时。

有关更多信息，check out the Nuxt blog

javascriptrecaptcharecaptchavue.js