Vue.js + reCaptcha V3

仅支持无感知验证，

vue-recaptcha-v3

yarn add vue-recaptcha-v3

src/main.js

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

Vue.use(VueReCaptcha, {
    siteKey: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
    loaderOptions: {
        // 是否使用国内的 recaptcha.net 域名
        useRecaptchaNet: true,
        // 是否隐藏“由reCAPTCHA 提供保护 隐私 - 使用条件”
        autoHideBadge: process.env.NODE_ENV === 'production',
        // 更多选项见 https://github.com/AurityLab/recaptcha-v3
    }
});

src/views/login/index.vue

<template>
    <button @click="getRecaptchaToken">登录</button>
</template>
<script src="./index.js"></script>

src/views/login/index.js

export default {
    methods: {
        async getRecaptchaToken() {
            let self = this;
            try {
                // (optional) Wait until recaptcha has been loaded.
                await self.$recaptchaLoaded();
                // Execute reCAPTCHA with action "login".
                const token = await self.$recaptcha('login');
                // Do stuff with the received token.
                self.login(token);
            } catch (e) {
                const instance = self.$recaptchaInstance;
                console.log('recaptcha fail', e, instance);
                alert('Recaptcha initialization failed.');
            }
        },
        login(recaptchaToken = null) {
            // 登录
        },
    },
}