Front-end Vue project - login page implementation

A, geetest sliding verification

　　geetest official documents Address: https://docs.geetest.com/

　　Products - Speed Validation: CAPTCHA applications based on the depth of learning. Pole test "behavior verification" is a site that can help you with APP identification and interception machine program batch automation SaaS applications. It is verified by a very human experience developed a new generation of products, it is not based on the traditional "question - answer" test mode, but rather high-dimensional data analysis through the use of deep learning behavior for verification generated in the process, found that human behavior differences in behavior patterns and characteristics, more precise distinction between human behavior.

1, web deployment description

　　Client official document: https://docs.geetest.com/install/deploy/client/web/

(1) introducing initialization function

　　By introducing gt.js file, the introduction of initGeetest initialization function.

<script src="gt.js"></script>

　　Note: The initialization behavior verification requirements in business page load time is initialized at the same time , users can not read or verify operation in the business pages of behavioral data, leading to validation policy failure.

　　Here gt.js file, which is used to load the corresponding authentication JS library. In each backend language sdk there are a developer to deploy to the actual environment need to copy the file to the project use.

　　Before the file address is https://static.geetest.com/static/tools/gt.js , instead stored in the user's project to prevent static server problems can not load the file.

(2) calls the initialization function initializes

Ajax ({ 
    URL: "API1 Interface (see deployment server)" , 
    type: "GET" , 
    dataType: "JSON" , 
    Success: function (data) {
         // Make detected data structure of data to ensure data.gt, data.challenge, data.success has a value 
        initGeetest ({
             // following configuration parameters from the server the SDK 
            gt: data.gt, 
            Challenge: data.challenge, 
            Offline: ! data.success, 
            new_captcha: to true 
        }, function (captchaObj) {
             // here be called instance methods verification example captchaObj 
        }) 
    } 
})

　　NOTE: For multiple codes scene same page initialization codes required for each scene recall initGeetest separately initialize method; if there are a plurality of authentication inlet next scene , the need for multiple initialization.

(3) product verification two parameters

　　The behavior verification, the vast majority of real users just a click away through verification. But taking into account the actual risk situation, it is determined to be at risk behavior verification requests, will enter the next stage of verification. In this case, the behavior of pop-up authentication provides two authentication interaction style, user-friendly interface itself is compatible. Here a float floating verification Example:

initGeetest ({
     // omitted necessary configuration parameters 

    Product: 'a float' 
}, function (captchaObj) { 
    captchaObj.appendTo ( "#captchaBox"); // the button is inserted into the host authentication page captchaBox element 
    captchaObj.onReady ( function () {
       // your code 
    }) the onSuccess (. function () {
       // your code 
    }) the onError (. function () {
       // your code 
    }) 
});

2, vue project Login page geetest achieve

　　Observation of the major sites using the login interface information geetest page, you can find the request sent back data contains the value gt, challenge, success is. Geetest verify achieve single-page application Login.vue in.

(1) in the project globally introduced geetest

　　Create a file in the front /src/global/gt.js project, write to the file address https://static.geetest.com/static/tools/gt.js content.

　　In /src/main.js the global introduction of gt.js file:

import '../static/global/gt.js'

(2) adding an interface geetest

　　In /src/restful/api.js added geetest interfaces as follows:

// geetest接口
export const geetest = ()=>{
  return Axios.get('captcha_check/').then(res=>res.data);
}

(3) Configuration method getGeetest

　　Geetest call initialization function initializes in getGeetest method:

<Script> 
  Export default { 
    name: 'the Login' , 
    Data () { 
      return { 
        username: "" , 
        password: "" 
      } 
    }, 
    Methods: { 
      getGeetest () { 
        the this . http.geetest $ () 
          .then (RES = > { 
            the console.log (RES); 
            the let data = res.data;
             // make the detection data, data structures, ensure data.gt, data.challenge, data.success has a value 
            initGeetest ({
               // following configuration parameters from the server SDK
              gt: data.gt,                  // verify the id, the background application is extremely inspection 
              Challenge: data.challenge,    // verify the serial number, the application server SDK to get pole test server 
              Offline:! data.success,       // pole test API the server is down (i.e., in the fallback state) 
              new_captcha: to true ,            // the case of downtime, 2.0, 3.0 or 3.0 represents the validation of the field sdk to true 
              Product: popup,               // pop show 
              with : '100% '                  // default width 300px by 
            }, function (captchaObj) {
               // this instance can be called instance methods verification captchaObj
              captchaObj.appendTo ( "# geetest"); // the button is inserted into the host authentication page captchaObj element 
              captchaObj.onReady ( function () {
                 // your code 
              }) the onSuccess (. function () {
                 // your code 
              }) .onError ( function () {
                 // your code 
              }) 
            }) 
          }) 
          . the catch (ERR => { 
            the console.log (ERR); 
          }) 
      } 
    }, 
    Created () { 
      the this .getGeetest ();
    }
  };
</script>

　　Display as follows: