admin管理员组

文章数量:1633739

一、功能背景：最近我们做的项目需要把一个填写验证码后登录的方式改造成弹窗滑动模块验证成功登录。听需求说这样的登录方式显得逼格高，那么作为开发在找不到怼他的理由的情况下，干就是了。

二、为什么要加这种验证？

验证码是网站用来防止网络入侵的一种手段，现在相对安全而且比较流行的就是滑动验证码。采用这种验证可以保证访问我们系统的是一个活人，而不是一个机器人，或者是一些脚本。

三、实现过程：

（1），前端接入

        开始之前准备AppId，验证码接入需要先在管理后台中注册获取APPID和APPSECRET，注册步骤请参考 快速开始。

        在Head的标签内最后加入以下代码引入验证JS文件（建议直接在入口文件index.html中引入）

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
   <script src="https://ssl.captcha.qq/TCaptcha.js"></script> 
    <title></title>
  </head>

然后在登录页面初始化的时候加个判断是否已经成功引入上面的TCaptcha.js

  if (window.TencentCaptcha === undefined) {
        let script = document.createElement('script');
        let head = document.getElementsByTagName('head')[0];
        script.type = "text/javascript";
        script.charset = "UTF-8";
        script.src = "https://ssl.captcha.qq/TCaptcha.js";
        head.appendChild(script);
      }

接着在页面登录的按钮上面绑定一个@click事件，点击触发弹窗进行验证，验证通过后才调业务登录接口。

 <el-button class="login-btn" @click="toCaptcha">登&nbsp;&nbsp;录</el-button>


toCaptcha() {
        let that = this;
        var captcha1 = new TencentCaptcha(that.appId, function (res) {
          /* callback */
          console.log(res);
          if (res.ret === 0) {
             console.log("response");
            that.$api.loginAuthen(res.ticket, res.randstr).then(
              response => {
                console.log("----------", response);
                if (response.code == 1) {
                  that.loginClick();
                } else {
                  that.$message.error(response.msg);
                }
              }, error => {
                that.$message.error("请求异常");
              }
            );
          } else {
           
          }
        });
        captcha1.show(); // 显示验证码
      },

前端写的比较简单，当然有些参数像appId放在后台配置文件比较安全，前端在页面初始化时通过接口获取appid。

（2），后端接口：获取appId接口，验证接口，登录接口三个。

     //获取appId接口
    /**
     * 腾讯接口 验证
     * @param request
     * @param response
     * @return
     * @throws Exception
     */
    @RequestMapping(value = "/getAppId", method = {RequestMethod.POST, RequestMethod.GET})
    @ResponseBody
    public ResultBean getAppId(HttpServletRequest request,
                                 HttpServletResponse response) throws Exception {
        return ResultBean.ok(1, UpCloudConfig.getTcAid());
    }


/**
     * 腾讯接口 验证
     * @param request
     * @param response
     * @param modelMap
     * @return
     * @throws Exception
     */
    @RequestMapping(value = "/loginAuthen", method = {RequestMethod.POST, RequestMethod.GET})
    @ResponseBody
    public ResultBean loginAuthen(HttpServletRequest request,
                                    HttpServletResponse response,ModelMap modelMap) throws Exception {
        String ticket = request.getParameter("ticket");
        String randstr = request.getParameter("randstr");
        String userIp = CommonUtils.getIpAddr(request);
        String reqUrl = UpCloudConfig.getTcUrl() + "?aid=" + UpCloudConfig.getTcAid()
                + "&AppSecretKey=" + UpCloudConfig.getTcAppSecretKey()
                + "&Ticket=" + URLEncoder.encode(ticket, "UTF-8")
                + "&Randstr=" + URLEncoder.encode(randstr, "UTF-8")
                + "&UserIP=" + URLEncoder.encode(userIp, "UTF-8");
        String returnData = CommonUtils.reqestUrl(reqUrl);
        JSONObject jsonObject = JSON.parseObject(returnData);
        return ResultBean.ok().put("data", jsonObject);
    }

//登录接口我就不写了

ok，完美解决。因为我们用的是腾讯的第三方验证方式，那个appid是我们项目经理申请的，我不知道有没有收费的。大家可以试试，这种方式很方便很容易实现。

本文标签： 腾讯模块环境vuejs

版权声明：本文标题：vue.js环境+腾讯防水墙+实现弹窗滑动模块验证登录 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/xitong/1729172322a1188480.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。