vue2.0 在登录页面添加极验验证

我们在做vue项目时，用户登录是一个重点，当然，手机号码注册登录屡见不鲜，但要防机器大量注册呢，也就是通俗说的防机器人，这时一个 极验验证  就能完美解决这种问题。

话不多说  上代码：

 

　　　做之前  要先引入一个gt.js

　　　　http://static.geetest.com/static/tools/gt.js   

　　　　反正我是在login页面引入的  

 

　　　想用极验验证  ，首先要获取到UUID 

　　　　uuid有四种算法：

　　　　1、

function uuid() {

    var s = [];

    var hexDigits = "0123456789abcdef";

    for (var i = 0; i < 36; i++) {

        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);

    }

    s[14] = "4";  // bits 12-15 of the time_hi_and_version field to 0010

    s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);  // bits 6-7 of the clock_seq_hi_and_reserved to 01

    s[8] = s[13] = s[18] = s[23] = "-";

 

    var uuid = s.join("");

    return uuid;

}

 

 

 

　　　　2、　　　　　　　　　　function guid() {

    　　　　　　　　　　　　　　　　　　return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {

        　　　　　　　　　　　　　　var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);

        　　　　　　　　　　　　　　return v.toString(16);

   　　　　　　　　　　　　　　　　 });

　　　　　　　　　　　　　　　　　　}

 

 

　　　　3、　　　　　　　　function guid() {

    　　　　　　　　　　　　function S4() {

       　　　　　　　　　　return (((1+Math.random())*0x10000)|0).toString(16).substring(1);

    　　　　　　　　　　　　}

    　　　　　　　　　　　　return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4());

　　　　　　　　　　　　　　}

 

 

　　　　4、　　　　　　　　function uuid(len, radix) {

    　　　　　　　　　　var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');

    　　　　　　　　　　var uuid = [], i;

    　　　　　　　　　　radix = radix || chars.length;

 

    　　　　　　　　　　if (len) {

      　　　　　　　　　　// Compact form

      　　　　　　　　　　for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random()*radix];

    　　　　　　　　　　} else {

      　　　　　　　　　　// rfc4122, version 4 form

      　　　　　　　　　　　　var r;

 

      　　　　　　　　　　// rfc4122 requires these characters

      　　　　　　　　　　　　uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';

      　　　　　　　　　　　　uuid[14] = '4';

 

      　　　　　　　　　　// Fill in random data.  At i==19 set the high bits of clock sequence as

      　　　　　　　　　　// per rfc4122, sec. 4.1.5

      　　　　　　　　　　　　for (i = 0; i < 36; i++) {

        　　　　　　　　　　if (!uuid[i]) {

          　　　　　　　　　　r = 0 | Math.random()*16;

          　　　　　　　　　　uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r];

        　　　　　　　　　　}

      　　　　　　　　　　}

    　　　　　　　　　　}

 

    　　　　　　　　return uuid.join('');

　　　　　　　　　　　}

 

 

　　　　　然后就是  

 

 

 

 

 

 

 

 

 

 

  

 

然后~  执行你的点击事件  吼吼  

成功之后   再发送那个手机验证码  。 

 

不要忘了   获取uuid和init方法  是在进入这个login页面就要立即执行的  

所以   放在mounted里 比较合适   

放在methods也行   只需要在  这里调用就好了；

 

 

总的来说  就是两层验证  第一层是这个极验验证   第二层  才是手机号验证码。