微信小程序 login.js 登录文件图形验证码

最新推荐文章于 2024-08-12 11:16:16 发布

kingrome2009

最新推荐文章于 2024-08-12 11:16:16 发布

阅读量2.4k

点赞数

分类专栏：微信小程序

本文链接：https://blog.csdn.net/kingrome2017/article/details/81807444

版权

本文介绍了微信小程序中实现登录功能的关键部分，重点讲解了如何在login.js文件中结合mcaptcha.js库生成图形验证码，并利用httpclient.js进行HTTP请求验证用户输入的验证码，确保登录的安全性。

摘要由CSDN通过智能技术生成

图形验证码
mcaptcha.js

module.exports = class Mcaptcha {
   
  constructor(options) {
   
    this.options = options;
    this.fontSize = options.height * 3 / 4;
    this.init();
    this.refresh(this.options.code);
  }
  init() {
   
    this.ctx = wx.createCanvasContext(this.options.el);
    this.ctx.setTextBaseline("middle");
    this.ctx.setFillStyle(this.randomColor(180, 240));
    this.ctx.fillRect(0, 0, this.options.width, this.options.height);
  }
  refresh(code) {
   
    let arr = (code + '').split('');
    if (arr.length === 0) {
   
      arr = ['e', 'r', 'r', 'o', 'r'];
    };
    let offsetLeft = this.options.width * 0.6 / (arr.length - 1);
    let marginLeft = this.options.width * 0.2;
    arr.forEach((item, index) => {
   
      this.ctx.setFillStyle(this.randomColor(0, 180));
      let size = this.randomNum(24, this.fontSize);
      this.ctx.setFontSize(size);
      let dis = offsetLeft * index + marginLeft - size * 0.3;
      let deg = this.randomNum(-30, 30);
      this.ctx.translate(dis, this.options.height * 0.5);
      this.ctx.rotate(deg * Math.PI / 180);
      this.ctx.fillText(item, 0, 0);
      this.ctx.rotate(-deg * Math.PI / 180);
      this.ctx.translate(-dis, -this.options.height * 0.5);
    })
    this.ctx.draw();
  }
  randomNum(min, max) {
   
    return Math.floor(Math.random() * (max - min) + min);

  }
  randomColor(min, max) {
   
    let r = this.randomNum(min, max);
    let g = this.randomNum(min, max);
    let b = this.randomNum(min, max);
    return "rgb(" + r + "," + g + "," + b + ")";
  }
}

HTTP请求，httpclient.js

const app = getApp()
var utiltime = require('time.js')
var utilsign = require('getsign.js')
function doRequest(url,postData,doSuccess,doFail,doComplete){
   
 
  wx.request({
   
    url: app.globalData.APIUrl+url,
    data:postData,
    header: {
   
         'content-type': 'application/x-www-form-urlencoded' // 默认值
       },
    method: 'POST', 
    success: function(res){
   
      typeof doSuccess == "function" && doSuccess(res.data)
    },
    fail: function(res) {
   
      // console.log(res);
      wx.hideLoading();
      wx.showToast({
   
        title: '服务器异常，请求超时！', //提示的内容,
        icon: "none",
        duration: 3000, //延迟时间,
      });
      typeof doFail == "function" && doFail()
    },
    complete: function() {
   
      typeof doComplete == "function" && doComplete()
    }
  })
  return
}


function doRequestService(url, postData, doSuccess, doFail, doComplete) {
   

  var _time = utiltime.getTimems();
  var jsonstr = objKeySort(postData); //函数执行
  // console.log(jsonstr)
  var _sign = utilsign.getSign(_time, jsonstr);
  var dateStr = JSON.stringify(postData);
  // console.log("验签参数：" + jsonstr);
  var map = {
    paramJson: '{"data":\'' + dateStr + '\',"sign":"' + _sign + &#