如何在nuxt中使用google recaptcha? [英] How to use google recaptcha in nuxt?

问题描述

我正在使用 nuxt 并想使用这个库:https://github.com/nuxt-community/recaptcha-module.但我不明白如何验证用户是否通过了检查.这个例子并没有告诉我太多(https://github.com/nuxt-community/recaptcha-module/blob/master/example/v3/pages/index.vue).有人能告诉我如何正确地做吗?

I am using nuxt and would like to use this library: https://github.com/nuxt-community/recaptcha-module. But I don't understand how to verify that the user has passed the check. The example doesn't tell me too much (https://github.com/nuxt-community/recaptcha-module/blob/master/example/v3/pages/index.vue). Could someone show me how to do it correctly?

推荐答案

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

This example is only half the story. It returns a Recaptcha V3 token on the client-side.

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

This must then be sent to the serverside and verified using your secret key.

这是通过向此 URL 发送帖子来完成的:

This is done by sending a post to this URL:

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

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

You do not want to allow this secret key on the client side.

为了在 Nuxt 中实现这一点，假设版本为 2.13+，您可以在您的 nuxt 配置中使用 privateRuntimeConfig.

To achieve this in Nuxt, assuming version 2.13+, you can utilise privateRuntimeConfig in your nuxt config.

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

This will allow you to link a .env file to be injected only on the server side.

对于这个用例，像这样的 privateRuntimeConfig 就足够了:

For this use case, a privateRuntimeConfig like this should suffice:

privateRuntimeConfig: {
    secretKey: process.env.GOOGLE_SECRET
}

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

Once you have done this, you will be able to access these variables as part of this.$config within your Nuxt application - in this case this.$config.secretKey when calling the Recaptcha verify endpoint.

更多信息查看 Nuxt 博客

这篇关于如何在nuxt中使用google recaptcha?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！