在微信小程序开发过程中,安全性一直是开发者关注的焦点。本文将为大家介绍一种简单有效的加密传输方法——Base64,帮助大家在登录环节保护用户名和密码的安全。

一、Base64简介

        Base64是一种基于64个可打印字符来表示二进制数据的表示方法。它常用于在HTTP环境下传输少量二进制数据。Base64编码后的数据具有以下特点:

  1. 编码后的数据只包含英文字母、数字、加号(+)和斜杠(/),易于在网络上传输;

  2. 编码后的数据长度会增加约1/3,但不会增加太多;

  3. Base64编码是一种可逆的编码方式,可以通过解码还原原始数据。

二、Base64在微信小程序登录中的应用

示例一:当引入js-base64库时

  1. 加密过程

(1)在客户端(微信小程序)获取用户输入的用户名和密码; (2)使用Base64对用户名和密码进行编码; (3)将编码后的数据发送给服务器。

// 引入Base64库
const Base64 = require('js-base64').Base64;

// 获取用户名和密码
var username = 'test';
var password = '123456';

// Base64加密
var encodedUsername = Base64.encode(username);
var encodedPassword = Base64.encode(password);

// 发送加密后的数据给服务器
wx.request({
  url: 'https://example.com/login',
  method: 'POST',
  data: {
    username: encodedUsername,
    password: encodedPassword
  },
  success: function(res) {
    // 登录成功处理
  },
  fail: function(err) {
    // 登录失败处理
  }
});

        2.解密过程

(1)服务器接收到客户端发送的加密数据; (2)使用Base64对加密数据进行解码; (3)获取原始的用户名和密码,进行后续操作。

// 引入Base64库
const Base64 = require('js-base64').Base64;

// 接收客户端发送的加密数据
app.post('/login', function(req, res) {
  var encodedUsername = req.body.username;
  var encodedPassword = req.body.password;

  // Base64解密
  var username = Base64.decode(encodedUsername);
  var password = Base64.decode(encodedPassword);

  // 验证用户名和密码
  // ...
});

示例二:当不引入js-base64库时 

1、在utils文件夹中创建base64.js

var base64 = {
  _keyStr: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",
  encode (str) { // 加密
    var output = "";
    var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
    var i = 0;
    str = this._utf16to8(str);
    while (i < str.length) {
      chr1 = str.charCodeAt(i++);
      chr2 = str.charCodeAt(i++);
      chr3 = str.charCodeAt(i++);
      enc1 = chr1 >> 2;
      enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
      enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
      enc4 = chr3 & 63;
      if (isNaN(chr2)) {
        enc3 = enc4 = 64;
      } else if (isNaN(chr3)) {
        enc4 = 64;
      }
      output = output + this._keyStr.charAt(enc1) + this._keyStr.charAt(enc2) + this._keyStr.charAt(enc3) + this._keyStr.charAt(enc4);
    } return output;
  },
  decode (input) { // 解密
    var output = "";
    var chr1, chr2, chr3;
    var enc1, enc2, enc3, enc4;
    var i = 0;
    input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");
    while (i < input.length) {
        enc1 = this._keyStr.indexOf(input.charAt(i++));
        enc2 = this._keyStr.indexOf(input.charAt(i++));
        enc3 = this._keyStr.indexOf(input.charAt(i++));
        enc4 = this._keyStr.indexOf(input.charAt(i++));
        chr1 = (enc1 << 2) | (enc2 >> 4);
        chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
        chr3 = ((enc3 & 3) << 6) | enc4;
        output = output + String.fromCharCode(chr1);
        if (enc3 != 64) {
            output = output + String.fromCharCode(chr2);
        }
        if (enc4 != 64) {
            output = output + String.fromCharCode(chr3);
        }
    } return this._utf8to16(output);
  },
  _utf16to8: function(str) {
    var out, i, len, c;
    out = "";
    len = str.length;
    for(i = 0; i < len; i++) {
        c = str.charCodeAt(i);
        if ((c >= 0x0001) && (c <= 0x007F)) {
            out += str.charAt(i);
        } else if (c > 0x07FF) {
            out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
            out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
            out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
        } else {
            out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
            out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
        }
    }
    return out;
  },
  _utf8to16 (str) { 
    var out, i, len, c;
    var char2, char3;
    out = "";
    len = str.length;
    i = 0;
    while(i < len) {
        c = str.charCodeAt(i++);
        switch(c >> 4)
        {
            case 0: case 1: case 2: case 3: case 4: case 5: case 6:case7:
              out += str.charAt(i-1);
            break;
            case 12: case 13:
              char2 = str.charCodeAt(i++);
              out += String.fromCharCode(((c & 0x1F) << 6) | (char2&0x3F));
            break;
            case 14:
              char2 = str.charCodeAt(i++);
              char3 = str.charCodeAt(i++);
              out += String.fromCharCode(((c & 0x0F) << 12) |
                ((char2 & 0x3F) << 6) |
                ((char3 & 0x3F) << 0));
            break;
        }
    } return out;
  }
}

/* 暴露函数 */
module.exports = base64


2、在微信小程序登录页面引入使用

let Base64 = require('../../utils/base64.js')

// 获取用户名和密码
let username = 'test';
let password = '123456';

// Base64加密
let encodedUsername = Base64.encode(username);
let encodedPassword = Base64.encode(password);

// 发送加密后的数据给服务器
wx.request({
  url: 'https://example.com/login',
  method: 'POST',
  data: {
    username: encodedUsername,
    password: encodedPassword
  },
  success: function(res) {
    // 登录成功处理
  },
  fail: function(err) {
    // 登录失败处理
  }
});

 总结

        通过在微信小程序登录环节使用Base64加密传输用户名和密码,可以有效提高数据安全性。需要注意的是,Base64并非一种加密算法,而是一种编码方式,因此它并不能完全防止数据泄露。在实际开发中,我们还可以结合HTTPS、加密算法(如AES、RSA等)等多种手段,进一步提升小程序的安全性。

 

更多推荐