如何在nuxt中使用google recaptcha？

Question

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

Answer 1

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

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

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

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

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

privateRuntimeConfig要在 Nuxt 中实现此目的，假设版本为 2.13+，您可以在 nuxt 配置中使用。

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

对于这个用例，像这样的 privateRuntimeConfig 应该足够了：

privateRuntimeConfig: {
    secretKey: process.env.GOOGLE_SECRET
}

完成此操作后，您将能够在this.$configNuxt 应用程序中访问这些变量 - 在本例中this.$config.secretKey是在调用 Recaptcha 验证端点时。

欲了解更多信息，请查看 Nuxt 博客