2021-08-21 vue2+golang使用google的recaptcha验证

无道 2021-08-21 0 条评论 前端相关 阅读277 手机阅读

前言

还是来记录下。

申请key

reCAPTCHA (google.com)

去上面地址添加地址获取两个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端

使用的是这个库

ezzarghili/recaptcha-go: Validate Google reCAPTCHA v2 & v3 form submission package in golang (github.com)

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会在右下角生成一个用户声明,授权之类的,需要隐藏。

全文完 [
有帮助?打赏
支付宝打赏
微信打赏
]
标签: recaptcha golang vue2
修改: 08月21日 14:47
这篇文章还没有评论呢~
点击刷新/生成验证码