Vue學習之八geetest滑動驗證
本節目錄css
下載gt文件，官網地址，下面咱們就來完成一下基於geetest的滑動驗證怎麼作：html
首先在項目之使用，將咱們下載的文件放到咱們的項目目錄下，我放到了static文件夾下的global文件夾下，而後在項目入口文件main.js中引入，看目錄結構：前端
而後咱們直接就能在各個組件中使用了，首先咱們找個案例分析一下：看圖vue
那麼後端返回的這三個數據是什麼呢，咱們看看看geetest官網怎麼說的：webpack
咱們引入了gt.js以後，就可使用一個函數叫作`initGeetest` 初始化函數，這個函數怎麼用呢，結合ajax或者axios來用，看代碼：ios
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，也就是說要配合後端進行工做。web
咱們來試一下，看看項目中怎麼玩，上面咱們在項目中已經引入gt.js文件了，那麼咱們直接來使用一下：ajax
直接看代碼吧，個人代碼寫的複雜了一些，其實直接在你想作滑動驗證的組件中發送axios請求就行，我把請求和url都放到了一個其餘的文件裏面了，名字叫作api.js，在static文件夾下的global文件夾下vue-router
好，入口文件main.js的代碼以下：vuex
// 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中就好了。
還有就是咱們要將登錄成功後返回回來的我的信息要保存到vuex中，而後標題欄的那個我的信息那部分要用，固然不用vuex也行，組件傳值就能夠，咱們也是爲了用起來更方便：
而後在main.js的vue實例中掛載一下：
而後組件中登錄成功後，那麼this.$store.dispatch('get_user',data) 參數一是actions中的方法，data是登錄成功後返回的數據。
那麼全部的組件中，均可以經過computed計算屬性來監聽這個數據(裏面有token)，來判斷用戶是否是登錄了，而且標題欄也有用戶的信息。
而後用戶點擊退出的時候，別忘了刪cookie，還要刪用戶的信息。
還有個問題就是，你可能發現咱們不一樣的js文件中都導入了vue
import Vue from 'vue'
項目中用的都是一個vue實例，也就是說，即使是你在不一樣的js文件裏面引入了vue，你們使用的仍是一個(相似於後端代碼的單例模式)