2021-08-21 vue2+golang使用google的recaptcha验证
2021-08-21 vue2+golang使用google的recaptcha验证
无道
发布于 2021-08-23 10:45:51
发布于 2021-08-23 10:45:51
前言
还是来记录下。
申请key
去上面地址添加地址获取两个key
一个前端使用，一个后端。
目前我采用的是v2版本，因为后续的vue,golang都支持v2
vue端
本次使用的是vue2，等之后需要在vue3中使用的时候再来填坑。
本次使用的是：
vue-recaptcha这个库
DanSnow/vue-recaptcha: Google ReCAPTCHA component for Vue.js (github.com)
安装使用不说了，官网有例子的：
<template>
<vue-recaptcha sitekey="Your key here"></vue-recaptcha>
</template>
<script>
import VueRecaptcha from 'vue-recaptcha';
export default {
...
components: { VueRecaptcha }
};
</script>其实最简单用法就是给<vue-recaptcha/>加个@verify事件，回调参数是一串token
将这串token传递给后端。后端访问google的服务器后，判断是否是人机。
当然，使用这个库还没完，需要在index.html中添加一个script
<script src="https://www.google.com/recaptcha/api.js?onload=vueRecaptchaApiLoaded&render=explicit" async defer>
</script>官网是这个，但是国内不能访问，所以需要，换成这个：
<script src="//recaptcha.net/recaptcha/api.js?onload=vueRecaptchaApiLoaded&render=explicit" async defer></script>golang端
使用的是这个库
import "gopkg.in/ezzarghili/recaptcha-go.v4"
func main(){
var resp = "前端传回来的"
captcha, _ := recaptcha.NewReCAPTCHA(recaptchaSecret, recaptcha.V2, 10 * time.Second) // for v2 API get your secret from https://www.google.com/recaptcha/admin
err = reCAPTCHA.Verify(resp)
}你以为就完了吗？不是的，还是需要替换里面的google.com地址为：
https://recaptcha.net/recaptcha/api/siteverify
然而，这些个库不能自定义domain，所以只有clone一份到自己的参考，手动更改地址：
image-20210821144359961
可以把后端的验证，封装成一个辅助方法：
func VerifyReCaptchaV2(resp string) error {
key := wconf.GetString("captcha.recaptcha.v2_key")
reCAPTCHA, err := recaptcha.NewReCAPTCHA(key, recaptcha.V2, time.Second*10)
if err != nil {
return err
}
err = reCAPTCHA.Verify(resp)
if err != nil {
return err
}
return nil
}隐藏右下角
/*remove recaptcha logo*/
.grecaptcha-badge {
visibility: hidden;
}google会在右下角生成一个用户声明，授权之类的，需要隐藏。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2021-08-21，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录