極驗geetest滑動驗證前端

1.導入全局的geetest.js

// main.js導入gt文件
import '../static/global/gt.js'

2.設計訪問接口

// api.js文件

// 引入axios
import Axios from 'axios'
// 引入VueCookies
import VueCookies from 'vue-cookies'

// 設置默認URL
Axios.defaults.baseURL = 'https://www.xxx.com/api/v1';

// 滑塊驗證碼
const captchaCheckUrl = '/captcha_check/';

// 滑塊驗證碼
export function geetest() {
    return Axios.get(`${captchaCheckUrl}`).then(res => res.data)
}

/*
geetest()方法執行完的結果：
訪問網址：https://www.xxx.com/api/v1/captcha_check/
{
    "error_no": 0,
    "data": {
        "success": 1,
        "gt": "37ca5631edd1e882721808d35163b3ad",
        "challenge": "2df4904f10c0a3f07fc5b60a429d5ef5"
    }
}
*/

3.設置驗證碼宿主頁面

<div class="inp">
    <input v-model="username" type="text" placeholder="用戶名 / 手機號碼" class="user">
    <input v-model="password" type="password" name class="pwd" placeholder="密碼">
    
    <!-- 驗證碼開始位置 -->
    <div id="geetest"></div>
    <!-- 驗證碼結束位置 -->
    
    <div class="rember">
        <p>
            <input type="checkbox" class="no" name="a">
            <span>記住密碼</span>
        </p>
        <p>忘記密碼</p>
    </div>
    <button class="login_btn" @click="loginHandler">登錄</button>
    <p class="go_login">
        沒有賬號
        <span>立即注冊</span>
    </p>
</div>

4.調用方法getGeetest()

created() {
    this.getGeetest();
}

5.定義方法getGeetest()

// 驗證碼事件
getGeetest() {
    this.$http.geetest()
    //////////////////////////////////////////////////////////
        .then(res => {
            let data = res.data;
            console.log(data);
            /*
            {
                "success": 1,
                "gt": "37ca5631edd1e882721808d35163b3ad",
                "challenge": "2df4904f10c0a3f07fc5b60a429d5ef5"
            }
            */
            
            initGeetest(
                {
                    // 以下配置參數來自服務端 SDK
                    gt: data.gt,
                    challenge: data.challenge,
                    offline: !data.success,
                    new_captcha: true,
                    width: '100%'
                },
                (captchaObj) => {
                    console.log(captchaObj);
                    // 這里可以調用驗證實例 captchaObj 的實例方法
                    // 將驗證碼放在宿主頁面，呼應【步驟3】
                    captchaObj.appendTo("#geetest");
                    // 這里調用了 onSuccess 方法，該方法介紹見下文
                    captchaObj.onSuccess(() => {
                        var result = captchaObj.getValidate();
                        console.log(result);
                        this.geetestObj = result
                    });
                }
            );
        })
    //////////////////////////////////////////////////////////
        .catch(err => {
            console.log(err);
        });
}

/*
geetest()方法執行完的結果：
訪問網址：https://www.xxx.com/api/v1/captcha_check/
{
    "error_no": 0,
    "data": {
        "success": 1,
        "gt": "37ca5631edd1e882721808d35163b3ad",
        "challenge": "2df4904f10c0a3f07fc5b60a429d5ef5"
    }
}
*/

 

下面是登錄組件的一個完整應用，前幾步就按照操作弄就可以。后面主要部分應用在login組件上。

示例代碼如下：

<template>
    <div class="box">
        <img src="https://www.luffycity.com/static/img/Loginbg.3377d0c.jpg" alt="登錄頁背景圖片">
        <div class="login">
            <!-- 登錄框上方內容 -->
            <div class="login-title">
                <img src="https://www.luffycity.com/static/img/Logotitle.1ba5466.png" alt>
                <p>幫助有志向的年輕人通過努力學習獲得體面的工作和生活!</p>
            </div>

            <!-- 登錄框內容 -->
            <div class="login_box">
                <div class="title">
                    <span>密碼登錄</span>
                    <span>短信登錄</span>
                </div>
                <div class="inp">
                    <input v-model="username" type="text" placeholder="用戶名 / 手機號碼" class="user">
                    <input v-model="password" type="password" name class="pwd" placeholder="密碼">
                    <div id="geetest"></div>
                    <div class="rember">
                        <p>
                            <input type="checkbox" class="no" name="a">
                            <span>記住密碼</span>
                        </p>
                        <p>忘記密碼</p>
                    </div>
                    <button class="login_btn" @click="loginHandler">登錄</button>
                    <p class="go_login">
                        沒有賬號
                        <span>立即注冊</span>
                    </p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Login",
        data() {
            return {
                username: "",
                password: "",
                geetestObj: {},
            };
        },
        methods: {
            // 登錄按鈕點擊事件
            loginHandler() {
                if (!this.geetestObj) {
                    return;
                }
                else {
                    // 登錄狀態
                    let params = {
                        geetest_challenge: this.geetestObj.geetest_challenge,
                        geetest_seccode: this.geetestObj.geetest_seccode,
                        geetest_validate: this.geetestObj.geetest_validate,
                        username: this.username,
                        password: this.password,
                    };
                    this.$http.login(params)
                        .then(res => {
                            if (res.error_no === 0) {
                                // 登陸成功后,返回之前訪問的頁面
                                this.$router.go(-1);
                                // 將返回的數據賦值給變量data
                                let data = res.data;
                                // 通過for-in循環來遍歷data,將data中每個字典對象,存儲到cookie
                                for (let key in data) {
                                    this.$cookies.set(key, data[key])
                                }
                                // 分發actions中聲明的方法
                                this.$store.dispatch('getUser', data);
                            }
                        })
                        .catch(err => {
                            console.log(err)
                        })
                }
            },

// 驗證碼事件
getGeetest() {
    this.$http.geetest()
        .then(res => {
            let data = res.data;
            console.log(data);
            initGeetest(
                {
                    // 以下配置參數來自服務端 SDK
                    gt: data.gt,
                    challenge: data.challenge,
                    offline: !data.success,
                    new_captcha: true,
                    width: '100%'
                },
                (captchaObj) => {
                    console.log(captchaObj);
                    // 這里可以調用驗證實例 captchaObj 的實例方法
                    captchaObj.appendTo("#geetest");
                    // 這里調用了 onSuccess 方法，該方法介紹見下文
                    captchaObj.onSuccess(() => {
                        var result = captchaObj.getValidate();
                        console.log(result);
                        this.geetestObj = result
                    });
                }
            );
        })
        .catch(err => {
            console.log(err);
        });
}
        },
        created() {
            this.getGeetest();
        }
    };
</script>