在NUXT3应用程序上集成了recaptcha v3-DEV365 开发者社区

CAPTCHA代表完全自动化的公共图灵测试，告诉计算机和人类分开

recaptcha是由Google提供的免费验证码系统，通过将RECAPTCHA添加到网站，Web主机可以区分人类和自动化的访问，这使他们能够阻止自动化软件，同时帮助他们的欢迎用户轻松进入。

但是，如果您在这里，您知道什么是recaptcha及其工作原理...问题是与我们所爱的Nuxt3

集成

nuxt使用plugins系统，使我们能够扩展我们的应用功能：

允许在客户端和服务器端上可用函数
使用。您最喜欢的vue.js插件
用户外部软件包和模块。

怎么运行的

仅在插件文件夹中创建插件文件就足够了。 nuxt为您完成了一切。非常舒服，你吗？
More info here

recaptchav3

我们使用vue-recaptcha-v3 npm软件包

使用npm i vue-recaptcha-v3

安装它

然后在插件文件夹上创建一个新文件，我们将其命名为google-recaptcha.ts，其中以下内容：

import { VueReCaptcha } from 'vue-recaptcha-v3';

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.use(VueReCaptcha, {
        siteKey: '<YourSiteKey>',
    });
});

我们从NUXT3使用了新的deleenuxtplugin方法，它仅需一个参数（nuxtapp），然后将VueReCaptcha模块添加到Vueapp的使用方法中，最后将site键添加到模块选项中，瞧，您的应用程序现在recaptcha recaptcha recaptcha recaptcha v3。

重新加载您的应用程序，并检查网站底部显示了recaptcha徽章

定制

vue-recaptcha-v3插件提供了配置某些零件行为的可选选项。

loaderOptions: {
    autoHideBadge: false,
    explicitRenderParameters: {
        badge: 'bottomleft',
    }
},

整个代码看起来如下：

import { VueReCaptcha } from 'vue-recaptcha-v3';

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.use(VueReCaptcha, {
        siteKey: '<YourSiteKey>',
        loaderOptions: {
            autoHideBadge: false,
            explicitRenderParameters: {
                badge: 'bottomleft',
            },
        },
    });
});

可用的选项描述了here。

用法

好吧，我可以在我的网站上看到recaptcha徽章，下一步是什么？

现在，您需要获取令牌并在您的请求中发送它以对您的后端进行验证：

要在组件设置上获取recaptcha令牌，请添加方法以获取recaptcha代币

// First import the useReCaptcha composable
import { useReCaptcha } from 'vue-recaptcha-v3';

export default defineComponent({
    setup() {
        // initialize a instance
        const recaptchaInstance = useReCaptcha();

        const recaptcha = async () => {
            // optional you can await for the reCaptcha load
            await recaptchaInstance?.recaptchaLoaded();

            // get the token, a custom action could be added as argument to the method
            const token = await recaptchaInstance?.executeRecaptcha('yourActionHere');

            return token;
        };

        return {
            recaptcha,
        };
    },
    ...
});

最后，您可以在自己的组件方法上使用

...
methods: {
    async onSubmit(): Promise<void> {
        // get the token on your method
        const token = await this.recaptcha();

        // use the token as your convenience
    }
},
...

就是这样，Google recaptcha v3在新的NUXT3上工作

另一个资源

官方Nuxt plugins docs