Preface
The company's new project is a PC version. I have been using VUE. After thinking for a long time, I finally decided to use nuxt.js to complete the project. Because the PC side may involve SEO, nuxt.js is the solution to Vue single-page SEO, although I have never been exposed to it before. , but after looking at the documentation, it is a re-encapsulation of vue. The registration page of the project requires machine verification before obtaining the SMS verification code, so I took geetest
Prepare
First, you need to register for geetest and get a key, similar to Baidu Maps. Then the backend needs to write an interface to return the verification parameters, similar to the signature verification before sharing on WeChat. All the front-end needs to do is download gt.js and then reference it. I introduced it in nuxt.config.js, the following code
plugins: [{ src: '~plugins/gt', ssr: false } ],
use
The project UI uses vuetifyjs, and form verification uses vuelidate. The following is the place where it is called.
<v-text-field v-model="vcode" :error-messages="vcodeErrors" placeholder="短信验证码" required @input="$v.vcode.$touch()" @blur="$v.vcode.$touch()">
<div ref="verify" class="get_code" slot="append">{
{tips_vcode}}</div>
</v-text-field>
methods: {
initGeet() {
let self = this;
GeetestInit().then((res) => {
if (res.status == 200) {
let data = res.data;
initGeetest(
{
// 省略配置参数
gt: data.gt,
challenge: data.challenge,
offline: !data.success, // 表示用户后台检测极验服务器是否宕机
new_captcha: data.new_captcha, // 用于宕机时表示是新验证码的宕机
product: "bind",
},
function (captchaObj) {
self.$refs.verify.onclick = function () {
//调用前校验手机号是否填写，获取验证码按钮是否可点击
if (!self.$v.phone.$invalid && self.isgetcode) {
captchaObj.verify();
} else {
self.$v.phone.$touch();
}
};
captchaObj.onSuccess(function () {
// 用户验证成功后，进行实际的提交行为
self.getCode();
});
}
);
}
});
},
}
mounted() {
this.initGeet();
},
Mainly, this binding click event took a long time to solve. The final effect is to click to get the verification code. First, check whether the mobile phone number has been filled in and whether the button is available. Then the slider will pop up for verification. After the verification is successful, the verification code interface will be called. Originally there was a secondary verification interface. After the slider was successful, the interface was requested to verify whether it was successful. I think it was a bit unnecessary to remove it because there is a callback method itself, and it is only used to prevent others from swiping the verification code. , there is no need to make it too troublesome, and we don’t have many users haha.
END
I hope this article is helpful to you. If you have any questions, please feel free to communicate.