javascript - 如何在 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 token 。
然后必须将其发送到服务器端并使用您的 key 进行验证。
这是通过向此 URL 发送帖子来完成的:

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

您不想在客户端允许此 key 。
为了在 Nuxt 中实现这一点，假设版本 2.13+，您可以使用 privateRuntimeConfig在您的 nuxt 配置中。
这将允许您链接仅在服务器端注入(inject)的 .env 文件。
对于这个用例，像这样的 privateRuntimeConfig 就足够了:

privateRuntimeConfig: {
    secretKey: process.env.GOOGLE_SECRET
}

完成此操作后，您将能够作为 this.$config 的一部分访问这些变量。在您的 Nuxt 应用程序中 - 在本例中为 this.$config.secretKey调用 Recaptcha 验证端点时。
更多信息check out the Nuxt blog