day 88 Vue學習之八geetes

2020 年 1 月 16 日
筆記

本節目錄

一 geetest前端web中使用

　　下載gt文件，官網地址，下面我們就來完成一下基於geetest的滑動驗證怎麼做：

　　首先在項目之使用，將我們下載的文件放到我們的項目目錄下，我放到了static文件夾下的global文件夾下，然後在項目入口文件main.js中引入，看目錄結構：

　　然後我們直接就能在各個組件中使用了，首先我們找個案例分析一下：看圖

　　那麼後端返回的這三個數據是什麼呢，我們看看看geetest官網怎麼說的：

　　我們引入了gt.js之後，就可以使用一個函數叫做`initGeetest` 初始化函數，這個函數怎麼用呢，結合ajax或者axios來用，看程式碼：

ajax({      url: "API1介面（詳見服務端部署）",這個url就是我們上面那個例子中的請求路徑      type: "get",      dataType: "json",      success: function (data) {          //請檢測data的數據結構， 保證data.gt, data.challenge, data.success有值，你就會發現，這三個數據正好是我們上面這個例子中後端返回給前端的三個數據          initGeetest({              // 以下配置參數來自服務端 SDK              gt: data.gt,              challenge: data.challenge,              offline: !data.success,              new_captcha: true  //這個參數先不用管它，放在這裡就行了          }, function (captchaObj) {              // 這裡可以調用驗證實例 captchaObj 的實例方法          })      }  })

　　官網還說了一句話：以上初始化過程，需要結合服務端 SDK 使用，因為初始化所傳入的配置參數來自服務端 SDK，也就是說要配合後端進行工作。

　　我們來試一下，看看項目中怎麼玩，上面我們在項目中已經引入gt.js文件了，那麼我們直接來使用一下：

　　直接看程式碼吧，我的程式碼寫的複雜了一些，其實直接在你想做滑動驗證的組件中發送axios請求就行，我把請求和url都放到了一個其他的文件裡面了，名字叫做api.js，在static文件夾下的global文件夾下

　　好，入口文件main.js的程式碼如下：

// The Vue build version to load with the `import` command  // (runtime-only or standalone) has been set in webpack.base.conf with an alias.  import Vue from 'vue'  import App from './App'  import router from './router'    import ElementUI from 'element-ui';  import 'element-ui/lib/theme-chalk/index.css';  Vue.use(ElementUI);  import VueCookie from 'vue-cookies'  Vue.use(VueCookie);    Vue.config.productionTip = false;    //引入全局的geetest  import '../static/global/gt'    //將api引入  import * as api from './restful/api'  Vue.prototype.$http = api;    /* eslint-disable no-new */  new Vue({    el: '#app',    router,    components: { App },    template: '<App/>'  });

　　api.js文件內容如下：

import Axios from 'axios'  Axios.defaults.baseURL = 'https://www.luffycity.com/api/v1' ;  const captchaCheckUlr = '/captcha_check/';  export function testGeet() {      return Axios.get(`${captchaCheckUlr}`).then(res=>res.data) //根據後端返回的數據結構來處理的，那現在得到的是一個含有包含那三個數據的自定義對象{challenge:"b58455a1f1493a9037e86f0a4f478eba"gt:"37ca5631edd1e882721808d35163b3ad"success:1}  }

　　路由資訊文件index.js內容如下：

import Vue from 'vue'  import Router from 'vue-router'  // import Home from '@/components/Home/Home'  import Login from '@/components/Login/Login'    Vue.use(Router);    export default new Router({    mode:'history',    routes: [      {        path: '/',        redirect:{name:'Login'}      },      {        path: '/',        name: 'Login',        component: Login      }    ]  })

　　組件Login.vue內容如下：

<template>    <div id="login">      <div id="geetest"></div>    </div>  </template>    <script>    export default {      name: 'Login',      data() {        return {}      },      methods: {        getGeetest() {          this.$http.testGeet().then(res => {            console.log(res);            //使用gt的initGeetest函數來初始化咱們的滑動驗證            initGeetest({              // 以下配置參數來自服務端 SDK，這是第一次驗證，也就是獲取到了後端的這個三個數據              gt: res.data.gt,              challenge: res.data.challenge,              offline: !res.data.success,              new_captcha: true            }, function (captchaObj) {              // 這裡可以調用驗證實例 captchaObj 的實例方法              console.log(captchaObj);              //通過調用captchaObj對象的appendTo方法，給某個標籤添加上滑動驗證對象，就行了，看寫法              captchaObj.appendTo('#geetest') //參數是一個標籤選擇器，那麼這個標籤就加上了滑動驗證的頁面效果              })          }).catch(err => {            })        }      },        created() {        this.getGeetest();      }    }  </script>    <style scoped>    #login {      width: 200px;      height: 40px;    }    </style>

　　App.vue組件的內容如下：

<template>    <div id="app">        <router-view/>    </div>  </template>    <script>  export default {    name: 'App'  }  </script>    <style>    </style>

　　好，拿到上面的程式碼一運行，就有了。

　　頁面效果如下：

　　點擊這個按鈕之後的效果如下：

　　滑動之後的效果如下：

　　好，現在滑動驗證的效果就有了。

　　但是做一個滑動驗證還需要第二次驗證，上面拿到後端的那三個數據算是第一次驗證了，也就是第一次和後端交互了，那麼第二次驗證是什麼呢，官網上也有說法，直接看我的圖吧：

　　官方程式碼是這樣寫的：通過 ajax 方式進行二次驗證，就是滑動完成，需要將滑動完數據發送給後端進行驗證

initGeetest({      // 省略配置參數  }, function (captchaObj) {      // 省略其他方法的調用        // 這裡調用了 onSuccess 方法，該方法介紹見下文      captchaObj.onSuccess(function () {  //這是滑動驗證成功之後立馬發送ajax請求進行登陸，就可以寫在這個方法裡面，但是我們上面的那個業務場景並不是直接就登陸，還需要點擊登陸按鈕，所以我們登陸請求不是寫在這裡的          var result = captchaObj.getValidate();            // ajax 偽程式碼          ajax(apirefer, {              geetest_challenge: result.geetest_challenge,              geetest_validate: result.geetest_validate,              geetest_seccode: result.geetest_seccode,                // 其他服務端需要的數據，比如登錄時的用戶名和密碼          }, function (data) {              // 根據服務端二次驗證的結果進行跳轉等操作          });      });  });

　　然後我針對上面的場景寫了一個簡單的登陸頁面：

　　然後我們寫一下login.vue組件的程式碼，其他文件的程式碼和之前一樣：

<template>    <div id="login">      <div>        用戶名：<input v-model="username" type="text" name="username">      </div>      <div>        密碼：<input v-model="password" type="password" name="password">      </div>      <div id="geetest"></div>      <div>        <button @click="loginHandler">登陸</button>      </div>    </div>  </template>    <script>    export default {      name: 'Login',      data() {        return {          username: '', //保存用戶名和密碼          password: '',          geetestObj: {} //二次驗證的時候需要的三個geetest數據        }      },      methods: {        getGeetest() {          this.$http.testGeet().then(res => {            console.log(res);            //使用gt的initGeetest函數來初始化咱們的滑動驗證            initGeetest({              // 以下配置參數來自服務端 SDK              gt: res.data.gt,              challenge: res.data.challenge,              offline: !res.data.success,              new_captcha: true            }, (captchaObj) => {              // 這裡可以調用驗證實例 captchaObj 的實例方法              console.log(captchaObj);              //通過調用captchaObj對象的appendTo方法，給某個標籤添加上滑動驗證對象，就行了，看寫法              captchaObj.appendTo('#geetest'); //參數是一個標籤選擇器，那麼這個標籤就加上了滑動驗證的頁面效果                //進行二次驗證              // captchaObj.onSuccess(function () { //別忘了改成箭頭函數，不然this不是你當前的組件對象              captchaObj.onSuccess(() => {                //通過這個captchaObj.getValidate()方法，會得到一個自定義對象，這個對象裡面有三個數據，將來點擊提交按鈕的時候，不僅僅要提交用戶名和密碼，還要將這三個數據提交給後端進行驗證                let result = captchaObj.getValidate();                console.log(result);//{geetest_challenge: "a56e62f9d5d985b1d5f94a7477359bc940", geetest_validate: "7157b987d41f2acdae4e60fbd832376f", geetest_seccode: "7157b987d41f2acdae4e60fbd832376f|jordan"}                this.geetestObj = result; //保存這個數據                  // // ajax 偽程式碼,這些程式碼是官網提供的，這是我們做滑動驗證成功之後，直接發送登陸請求的寫法，寫在這個captchaObj.onSuccess的方法中，但是我們的場景不是這樣的，                // ajax(apirefer, {                //   geetest_challenge: result.geetest_challenge,                //   geetest_validate: result.geetest_validate,                //   geetest_seccode: result.geetest_seccode,                //                //   // 其他服務端需要的數據，比如登錄時的用戶名和密碼                // }, function (data) {                //   // 根據服務端二次驗證的結果進行跳轉等操作              });                })          }).catch(err => {            })        },          //點擊登陸按鈕，將數據發送給對應的登陸url        loginHandler() {          console.log(this.username, this.password, this.geetestObj);//輸入的用戶名密碼還有geetest三個數據，就都有了，          //組合數據，當作登陸請求的參數          let params = {            geetest_challenge: this.geetestObj.geetest_challenge,            geetest_validate: this.geetestObj.geetest_validate,            geetest_seccode: this.geetestObj.geetest_seccode,            username: this.username,            password: this.password,          };          //其實我們在前端還可以對我們發送的這五個數據進行不為空的驗證，我就不寫啦          // 偽程式碼：就可以了          // axios.post('登陸url',params).then(res=>{}).catch(error=>{});        }        },        created() {        this.getGeetest();      }    }  </script>    <style scoped>    #login {      width: 200px;      height: 200px;    }    </style>

　　然後就能夠登陸了，發送了登陸認證請求之後，後端會驗證我們的發送的五個數據(還有個記住密碼的選填數據，這個數據可以自己加到咱們的數據裡面，暫時咱們沒用昂)，驗證成功之後，後端會返回給前端一個token，作為你已經登陸成功的標識，以後再點擊網站的其他頁面的時候，就通過這個token值就能判斷當前用戶是不是登陸了，怎麼玩呢，通過vue-cookie保存到cookie中就行了。