thinkjs使用geetest

本文介绍如何在项目中集成极验滑块验证码,包括申请ID/KEY、创建服务调用第三方API、编写控制器和前台AJAX交互等步骤。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

参考的是cmswing,及geetest官方的源码
步骤如下:
1. 极验申请id/key
2. 创建service,调用第三方
3. 控制器编写
4. 前台ajax传值,获取,显示

service代码

'use strict';

/**
 *调用第三方极验验证
 */

import Geetest from 'geetest';
export default class extends think.service.base {
  /**
   * init
   * @return {}         []
   */
  init(http){
    super.init(http);
  }

  /* 初始化 */
  async register(){

    // 配置公匙
    let geetest = new Geetest({
        geetest_id: 'bd6d60a559314a9b73235c7aedad68ce',
        geetest_key: 'df5cc9df7498fa104362fec789cbb053'
      });

    // 初始化
      let register=() =>{
      let deferred = think.defer();
      // 向极验申请一次验证所需的challenge
      geetest.register(function (err,data) {
        console.log(data);
        deferred.resolve({
          gt: geetest.geetest_id,
          challenge: data.challenge,
          success: data.success
        });
      });
      return deferred.promise;
    }

    return await register();
  }

  // 二次服务器验证
  async validate(data,type){

    // 配置公匙
    let geetest = new Geetest({
        geetest_id:  'bd6d60a559314a9b73235c7aedad68ce',
        geetest_key: 'df5cc9df7498fa104362fec789cbb053'
      });

    //验证
    let validate = (data)=>{
      let deferred = think.defer();
      geetest.validate({

        challenge: data.geetest_challenge,
        validate: data.geetest_validate,
        seccode: data.geetest_seccode

      }, function (err, result) {
        console.log(result);
        var data = {status: "success"};

        if (err || !result) {
          console.log(err);
          data.status = "fail";
        }

        deferred.resolve(data);
      });
      return deferred.promise;
    }
    return await validate(data);
  }

}

模块是后台admin 控制器是public


'use strict';

export default class extends think.controller.base {

    /**
     * public action
     * @return {Promise} []
     */
    async signinAction(){
        //用户登录
        let is_login = await this.islogin();
        let Geetest = think.service("geetest");
        console.log(Geetest);
        if(this.isPost()){
            //验证码
            // if(1==this.setup.GEETEST_IS_ADMLOGIN){
            if(1){
                let Geetest = think.service("geetest"); //加载 commoon 模块下的 geetset service
                let geetest = new Geetest();
                let res = await geetest.validate(this.post());
                if("success" != res.status){
                    this.http.error = new Error("验证码不正确");
                    return think.statusAction(702, this.http);
                }
            }


            let username = this.post('username');
            let password = this.post('password');
            password = encryptPassword(password);
            let res = await this.model("member").signin(username,password,this.ip(),1,1);
            if(0<res.uid){
                //记录用户登录行为
                await this.model("action").log("user_login","member",res.uid,res.uid,this.ip(),this.http.url);
                //console.log(11111111111111);
                await this.session('userInfo', res);
                //TODO 用户密钥
                this.redirect('/admin/index');
            }else { //登录失败
                let fail;
                switch(res) {
                    case -1: fail = '用户不存在或被禁用'; break; //系统级别禁用
                    case -2: fail = '密码错误'; break;
                    case -3: fail = '您无权登陆后台!'; break;
                    default: fail = '未知错误';  // 0-接口参数错误(调试阶段使用)
                }
                this.http.error = new Error(fail);
                return think.statusAction(702, this.http);
            }

        }else{
            if(is_login){
                this.redirect('/admin/index');
            }else{
                let Geetest = think.service("geetest"); 
                console.log(Geetest);
                return this.display();
            }
        }
    }

    async islogin(){
        let user = await this.session('userInfo');
        let res = think.isEmpty(user) ? false : true;
        return res;
    }

    //验证码
    async geetestAction(){
        let Geetest = think.service("geetest"); //加载 commoon 模块下的 geetset service
        let geetest = new Geetest();
        if(this.isPost()){
            let post =this.post();
            let res = await geetest.validate(post);
            return this.json(res);
        }else {
            let res = await geetest.register(this.get('type'));
            //console.log(res);
            return this.json(res);
        }
    }



}

public_signin.html主要部分js

<div class="form-group">
  <div class="form-control rounded input-lg text-center no-border">
  <div id="captcha"></div>
     <p id="wait" class="show">正在加载验证码......</p>
  </div>
</div>
<div class="alert alert-danger hide" id="notice">
  <button type="button" class="close" data-dismiss="alert">×</button>
  <i class="fa fa-ban-circle"></i>请先拖动验证码到相应位置.
</div>


$(function () {
  var handlerEmbed = function (captchaObj) {
  $("#validate-submit").click(function (e) {
     var validate = captchaObj.getValidate();
     if (!validate) {              $("#notice").addClass("show").removeClass("hide");
       setTimeout(function () {
                       $("#notice").addClass("hide").removeClass("show");
        }, 2000);
        e.preventDefault();
       }

});

// 将验证码加到id为captcha的元素里
captchaObj.appendTo("#captcha");

captchaObj.onReady(function () {
    $("#wait")[0].className = "hide";
});

    // 更多接口参考:http://www.geetest.com/install/sections/idx-client-sdk.html
};

    $.ajax({
        // 获取id,challenge,success(是否启用failback)
        url: "/admin/public/geetest?t=" + (new Date()).getTime(), // 加随机数防止缓存
        type: "get",
        dataType: "json",
        success: function (data) {
            console.log(data);

            // 使用initGeetest接口
            // 参数1:配置参数
            // 参数2:回调,回调的第一个参数验证码对象,之后可以使用它做appendTo之类的事件
            initGeetest({
                gt: data.gt,
                challenge: data.challenge,
                product: "float", // 产品形式,包括:float,embed,popup。注意只对PC版验证码有效
                offline: !data.success // 表示用户后台检测极验服务器是否宕机,一般不需要关注
            }, handlerEmbed);
        }
    });
})
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值