Vue 项目中使用 reCAPTCHA 人机验证服务

在前段时间的训练中，我偶然接触到谷歌提供的免费人机验证服务 reCAPTCHA，在一番学习后已将它接入到我的 Vue 练习项目中。下面将介绍我的接入过程与踩过的坑。

reCAPTCHA v2

首先，你需要在 ./public/index.html 中添加下面这段代码：

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

这里需要说明一下，在中国请用 www.recaptcha.net 替换 www.google.com ：

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

点击复选框来验证

创建一个 vue 组件，完整代码如下：

<template>
  <!-- 添加一个 div 用作容器 -->
  <div id="grecaptcha"></div>
</template>
<script>
export default {
  data() {
    return {
      sitekey: "6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI"
    };
  },
  methods: {
    submit: function(token) {
      console.log(token);
    },
    loaded() {
      setTimeout(() => {
        window.grecaptcha.render("grecaptcha", {
          sitekey: this.sitekey,
          callback: this.submit
        });
      }, 200);
    }
  },
  mounted() {
    this.loaded();
  }
};
</script>

说明：

data() {
 return {
     sitekey: "6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI"
 }
},

此 sitekey 为测试专用 key，你需要注册一个自己的 sitekey 用在生产环境中。

注册地址（科学上网）：https://www.google.com/recaptcha/admin/create

注册成功后得到两个密钥：

第一个密钥即是 sitekey。

setTimeout(() => {
        window.grecaptcha.render("grecaptcha", {
          sitekey: this.sitekey,
          callback: this.submit
        });
}, 200);

grecaptcha 的渲染 API，延时 200ms 避免报以下错误：

this.submit 为回调函数，接收返回的 token 用于后端验证。

除了 sitekey 和 callback 外，还有其他的参数，详细请看：这里

将接收到的 token 传到后端即可。

      this.axios
        .get("http://localhost:3000/login", {
          params: {
            token: token
          }
        })
        .then(function(response) {
          console.log(response);
        })
        .catch(function(error) {
          console.log(error);
        });

后端验证

let res = await axios
.get("https://recaptcha.net/recaptcha/api/siteverify", {
  params: {
    secret: "6LdFp74UXXXXXXXXXXXXXXXXXXXXXX-XXXXXXXXXXXXXXXXX",
    response: ctx.query.token
  }
});
ctx.body = res.data;

参数：

• secret 为得到的第二个密钥
• response 为接收到的 token

返回：

得到 success: true 表示通过验证。

（写于2019年11月）