Day27:27 - 优化 - 後端 - recaptcha 验证机制

မင်္ဂလာပါ，我是Charlie！

在Day26当中我们完成了修改密码的部分，而今天我们将加强我们网站的验证机制，也就是Google的验证码机制。

================================◉‿◉=================================

首先我们必须先申请到金钥的部分，搜寻Google Recaptcha，点选reCaptcha - Google，并写点入v3 - admin console：

进来之後会显示注册新网站，这边先新增网域127.0.0.1跟localhost，并且按下提交：

按下去之後就会显示完成注册，请务必保管好金钥的部分：

获取完密钥跟网站金钥後，要先安装vue-recaptcha：

https://www.npmjs.com/package/vue-recaptcha#auto-load-script

$ npm install –save vue-recaptcha

安装完後，首先我们先在注册的registerPage.vue，新增recaptcha的component：

import VueRecaptcha from 'vue-recaptcha'

  export default{
    name:"registerPage",
    components:{
      'headerComponent':() => import('@/components/header.vue'),
      VueRecaptcha
    },.....

接着使用vue-recaptcha元件，这里我们选择自动注入google script：

<vue-recaptcha
@verify="captchaVerified"
@expired="captchaExpired"
sitekey="Your site key"
:loadRecaptchaScript="true"
>
</vue-recaptcha>

接着重整，就可以看到验证了：

接着新增captchaExipred跟captchaVierified，设定新增的变数：

captchaExpired(){
this.captchaVerify = false
},
captchaVerified(){
this.captchaVerify = true
},

并设定如果captchaVerify没过，就不可以submit到後端。

再来是token验证的部分，先在captchaVerified方法中新增传入参数recaptchaToken，并且在data中新增recaptchaToken，在认证完时获取token。

接着在onSubmit当中，在data中加上recaptcha token栏位：

var data = {
"username":this.username,
"email":this.email,
"password":this.password,
"password1":this.password1,
"phone":this.phone,
"address":this.address,
"recaptchaToken":this.recaptchaToken
}

然後在後端当中，用requests.post验证：

if "recaptchaToken" not in resdata:
	return R.badRequest("recaptcha token does not exist!")
recaptchaToken = resdata["recaptchaToken"]
googleres = requests.post(GOOGLE_RECAPTCHA_API%(secretKey,recaptchaToken))
googledata = json.loads(googleres.text)
print(googledata)
if not googledata["success"]:
	return R.badRequest(googledata["error-codes"])

其中GOOGLE_RECAPTCHA_API是以google验证API为底的字串：

GOOGLE_RECAPTCHA_API = "https://www.google.com/recaptcha/api/siteverify?secret=%s&response=%s"

secretKey则是网站密钥的部分。

这些完成之後就可以测试是否能正常验证，如果正确验证的话，可以如法炮制的加在login上面。

================================◉‿◉=================================

Day27结束了！在今天我们完成了recaptcha的前後端验证，而明天我们将完成二阶段登入的部分，See ya next day！