Vue 集成 Google Invisible reCAPTCH

[Vue 官方demo 展示] https://vuejsexamples.com/a-simple-invisible-google-recaptcha-component-with-vue/ (https://vuejsexamples.com/a-simple-invisible-google-recaptcha-component-with-vue/
)

1. 安装依赖

npm i vue-programmatic-invisible-google-recaptcha

2. 在跟目录 main.js 新增：

import VueProgrammaticInvisibleGoogleRecaptcha from 'vue-programmatic-invisible-google-recaptcha'
Vue.component('vue-programmatic-invisible-google-recaptcha', VueProgrammaticInvisibleGoogleRecaptcha)

3. 在 public 目录中的 index.html 中加入全球资源链接：

<script src="https://www.recaptcha.net/recaptcha/api.js?render=explicit" async defer></script>

4. 在需要使用的 .vue 文件中添加控件：

    <vue-programmatic-invisible-google-recaptcha
            ref="invisibleRecaptcha1"
            :sitekey="'6LfbDvYUAAAAAI62Lxxxxx5Bg1_Tu-xxxxxxx'"
            :elementId="'invisibleRecaptcha1'"
            :badgePosition="'left'"
            :showBadgeMobile="false"
            :showBadgeDesktop="true"
            @recaptcha-callback="recaptchaCallback"
    ></vue-programmatic-invisible-google-recaptcha>

注意：这里的回调属性名字，可能与官方教程不一样 recaptcha-callback

5. 触发请求token：（添加到需要触发的地方）

this.$refs.invisibleRecaptcha1.execute()

6. 获取 token 并进行下一步操作：（这个是回调）

recaptchaCallback (recaptchaToken) {
        console.log("recaptcha call back:")
        console.log(recaptchaToken)
      }

可以将这个 token 给到后端进行校验，判断是否是机器人。后端校验可以参考官方教程，没有什么坑。
还有一点可以注意一下：申请 key 时可以使用 192.168 这种域名，方便本地调试。