还是来记录下。
去上面地址添加地址获取两个key
一个前端使用,一个后端。
目前我采用的是v2版本,因为后续的vue,golang都支持v2
本次使用的是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>
使用的是这个库
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一份到自己的参考,手动更改地址:
可以把后端的验证,封装成一个辅助方法:
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会在右下角生成一个用户声明,授权之类的,需要隐藏。