简述前后端项目RSA+AES加解密

一、登录机制

　　在项目中，我们可以大致得出一个登录的过程，主要分为 登录验证、登录保持、退出三个部分。登录验证是指客户端提供用户名和密码，向服务器提出登录请求，服务器判断客户端是否可以登录并向客户端确认。登录保持是指客户端登录后，服务器能够分辨出已登录的客户端，并为其持续提供登录权限的服务器。退出是指客户端主动退出登录状态。而登录保持容易想到的方案是，客户端登录成功后，服务器为其分配sessionId（token），客户端随后每次请求资源时都带上sessionId（token）。

注意：session与token的区别，可阅读以下文章

1.1 登录验证

- 图解

流程
- 客户端向服务器 第一次 发起登录请求（不传输用户名和密码）；
- 服务器利用RSA算法产生一对serverRSAPublicKey和serverRSAPrivateKey，并保留serverRSAPrivateKey，将serverRSAPublicKey发送给客户端；
- 客户端收到serverRSAPublicKey之后，同样利用RSA算法产生一对clientRSAPublicKey与clientRSAPrivateKey，客户端自己保留clientRSAPrivateKey，并用serverRSAPublicKey对登录的数据以及clientRSAPublicKey进行加密，用加密后的数据 第二次 发出登录请求；
- 服务器收到加密后的数据，利用保留的serverRSAPrivateKey对密文进行解密，（经过判断，确定用户可以登录之后，生成一个加密字符串Token，）同时生成一对对称的AES密钥，并且利用密文中的clientRSAPublicKey对Token以及aesKey进行加密，将aesKey与Token全部返回给客户端；
- 客户端收到clientRSAPublicKey加密的aesKey与Token后，利用保留的clientRSAPrivateKey对其进行解密，并将其存储在localStorage中，使客户端每次发送请求headers都携带Token这一字段（基于Token的身份验证是无状态的，并且具有时效性）；

编码

HTML(由于目前成功的接口只找到username与password这两个字段的接口，为了方便讲解，先调用一下)

<template>

  <div class="security-main" style="width: 348px;height: 340px;margin:20px">

    <el-form :model="loginData" :rules="loginRules" ref="loginForm" style="margin-top:20px">

      <el-form-item prop="username">

        <el-input

          id="phoneNumber"

          v-model.trim="loginData.username"

          maxlength=""

          placeholder="请输入手机号"

        ></el-input>

      </el-form-item>

      <el-form-item prop="password">

        <el-input

          id="verificationCode"

          style="width: 55%;float:left;"

          maxlength=""

          v-model.trim="loginData.password"

          placeholder="请输入验证码"

        ></el-input>

        <el-button

          type="primary"

          class="btn-verificationCode"

          style="width: 43%;float: right;padding: 12px 0px;"

        >获取验证码</el-button>

      </el-form-item>

      <el-form-item>

        <el-button :disabled="loginBtnDisabled" type="primary" @click="submitForm('loginForm')">

          <i class="el-icon-loading" v-if="isLogining"></i>登录

        </el-button>

      </el-form-item>

    </el-form>

  </div>

</template>

<script>

import { loginData, loginRules } from "../js/login/data";

import { loginHandler } from "../js/login/bussiness";

const _loginData = _.cloneDeep(loginData);

export default {

  name: "security",

  data() {

    return {

      loginData, //登录的表单数据

      loginRules, //登录表单的校验规则

      loginBtnDisabled: false, //登录button是否禁用

      isLogining: false, //是否登录中

      serverRSAPublicKey: "", //服务端rsa公钥

      clientRSAPublicKey: "", //客户端rsa公钥

      clientRSAPrivateKey: "" //客户端rsa私钥

    };

  },

  components: {},

  mounted() {

    // console.log(_loginData);

  },

  methods: {

    submitForm(formName) {

      this.$refs[formName].validate(valid => {

        if (valid) {

          this.isLogining = true;

          this.loginBtnDisabled = true;

          loginHandler({ vue: this });

          // this.$refs[formName].resetFields();

        } else {

          return false;

        }

      });

    }

  }

};

</script>

<style lang="scss">

.security-main {

}

</style>

<style scoped lang="scss">

.security {

  width: %;

  height: %;

  &-main {

  }

}

</style>

所涉及到的数据data(loginData里面的uuid相当于userId)

//登录表单data

export const loginData = {

    clientPublicKey: '', //客户端生成的RSA公钥base64后的字符串  不可为空

    username: '', //手机号  不可为空

    password: '', //手机验证码

    uuid: '', //获取服务端RSA公钥时返回的uuid    string    放到header中，key为uuid

}

//登录表单校验规则

export const loginRules = {

    username: [

        { required: true, message: '请输入手机号', trigger: 'blur' },

        // { pattern: /^1(3[0-2]|4[5]|5[56]|7[6]|8[56])[0-9]{8}$|^1709[0-9]{7}$|^1(3[4-9]|4[7]|5[0-27-9]|7[8]|8[2-478])[0-9]{8}$|^1705[0-9]{7}$|^1(33|53|7[37]|8[019])[0-9]{8}$|^1700[0-9]{7}$|^1(99|98|66)[0-9]{8}$/, message: '手机号码格式不正确', trigger: 'blur' }

    ],

    password: [

        { required: true, message: '请输入手机验证码', trigger: 'blur' },

        // { pattern: /^\d{4,}$/, message: '手机验证码格式不正确', trigger: 'blur' }

    ],

}

JS文件中（利用node-rsa工具进行密钥的处理）

import RSA from 'node-rsa'

import { getServerRSAPublicKey, login } from '../../api/tuning'

/**

 * [loginHandler 处理用户登录数据加密逻辑]

 *  1-----获取RSA key

 *  2-----获取AES key(通过登录)

 * @param  {[JSON]} config [配置]

 * @return {[type]}        [description]

 */

export async function loginHandler(config) {

    const { vue } = config;

    try {

        //1、不传输登录数据，获取RSA公钥 ----- 会返回一个serverPublicKey 与一个  uuid

        const rsaPromise = await getServerRSAPublicKey({})

        //2、请求成功后   处理获取服务端RSA公钥

        const getRSAKeyReturnCode = handleGetServerRSAPublicKey({ vue, promise: rsaPromise, dataKey: 'loginData' })

        //4、处理好客户端与服务器的rsa

        if (getRSAKeyReturnCode === ) {

            //5、用服务端返回的rsa公钥对登录的数据（客户端保留私钥、把公钥发送给服务器）进行加密

            const rsaEncryptBody = RSAPublicKeyEncrypt(vue.serverRSAPublicKey, JSON.stringify(vue.loginData))

            const loginConfig = {

                data: {

                    encryptContent: rsaEncryptBody

                },

                headers: { uuid: vue.loginData.uuid }

            }

            //6、服务端利用保留的rsa私钥对加密的数据进行解密   并且在服务端生成aes对称密钥

            // 并用获取到的客户端公钥对aes密钥以及客户端需要的token进行加密  传递给客户端

            const loginPromise = await login(loginConfig)

            handleLoginData({ vue, promise: loginPromise, })

        }

    } catch (error) {

        console.log(error)

    } finally {

        vue.isLogining = false

        vue.loginBtnDisabled = false;

        vue.$refs['loginForm'].resetFields();

    }

}

/**

 * [handleGetServerRSAPublicKey 处理获取服务端RSA公钥]

 * @param  {[JSON]} config  [参数]

 * @return {[type]}         [description]

 */

export function handleGetServerRSAPublicKey(config) {

    const { vue, promise, dataKey } = config

    if (promise.data.code === ) {

        const { serverPublicKey, uuid } = promise.data.body;

        // 3、生成客户端的  RSA  公钥与私钥  引用node-rsa工具

        const clientRSAKeyPair = generateClientRSAKeyPair();

        // console.log(clientRSAKeyPair.clientRSAPublicKey.replace(/\r|\n|\s/g, '').split('-----'))

        // console.log(clientRSAKeyPair.clientRSAPublicKey.split('-----')[2])

        const clientRSAPublicKey = clientRSAKeyPair.clientRSAPublicKey.replace(/\r|\n/g, '').split('-----')[]

        // console.log(clientRSAKeyPair.clientRSAPrivateKey.split('-----'))

        const clientRSAPrivateKey = clientRSAKeyPair.clientRSAPrivateKey.replace(/\r|\n/g, '')

        // console.log(clientRSAPrivateKey)

        vue[dataKey].clientPublicKey = clientRSAPublicKey

        vue[dataKey].uuid = uuid;

        vue.serverRSAPublicKey = '-----BEGIN PUBLIC KEY-----' + serverPublicKey + '-----END PUBLIC KEY-----'

        vue.clientRSAPublicKey = clientRSAPublicKey

        vue.clientRSAPrivateKey = clientRSAPrivateKey

    }

    return promise.data.code

}

/**

 * [generateClientRSAKeyPair 客户端生成RSA公钥私钥对]

 * @return {[type]} [description]

 */

export function generateClientRSAKeyPair() {

    // 首先生成1024位密钥

    const NodeRSAKey = new RSA({ b:  })

    // 导出公钥

    const clientRSAPublicKey = NodeRSAKey.exportKey('public')

    // 导出私钥

    const clientRSAPrivateKey = NodeRSAKey.exportKey('pkcs8')

    return {

        clientRSAPublicKey,

        clientRSAPrivateKey,

    }

}

/**

   * [RSAPublicKeyEncrypt RSA公钥加密]

   * @param   {[String]}  publicKey     [公钥]

   * @param   {[String]}  originalBody  [要加密的明文字符串]

   * @return  {[String]}                [RSA公钥加密结果(Base64字符串)]

   */

export function RSAPublicKeyEncrypt(publicKey, originalBody) {

    /*if (!SecurityUtils.currentRSAPublicKey ||

      SecurityUtils.currentRSAPublicKey !== SecurityUtils.publicKey) {

      SecurityUtils.publicRSAInstance = new RSA(publicKey)

    }*/

    const NodeRSAKey = new RSA(publicKey)

    NodeRSAKey.setOptions({ encryptionScheme: 'pkcs1', environment: 'browser' })

    const encryptBase64 = NodeRSAKey.encrypt(originalBody, 'base64', 'utf8')

    return encryptBase64

}

/**

 * [RSAPublicKeyDecrypt RSA私钥解密]

 * @param   {[String]}  privateKey      [私钥]

 * @param   {[String]}  encryptBody     [要解密的数据]

 * @return  {[JSON]}                    [RSA私钥解密结果(JSON)]

 */

export function RSAPrivateKeyDecrypt(privateKey, encryptBody) {

    /*if (!SecurityUtils.currentRSAPrivateKey ||

      SecurityUtils.currentRSAPrivateKey !== SecurityUtils.privateKey) {

      SecurityUtils.privateRSAInstance = new RSA(privateKey)

    }*/

    const NodeRSAKey = new RSA(privateKey)

    NodeRSAKey.setOptions({ encryptionScheme: 'pkcs1', environment: 'browser' })

    const originalBody = NodeRSAKey.decrypt(encryptBody, 'utf8')

    return JSON.parse(originalBody)

}

/**

 * [handleLoginData 处理用户登录逻辑]

 * @param  {[JSON]} config  [参数]

 * @return {[type]}         [description]

 */

export function handleLoginData(config) {

    const { vue, promise } = config

    if (promise.data.code === ) {

        // 7、在客户端使用保留的rsa私钥对返回的数据进行解密  数据是accessToken  与aesKey

        promise.data.body = RSAPrivateKeyDecrypt(vue.clientRSAPrivateKey, promise.data.body);

        // 8、将这两个字段存入localStorage中

        const { aesKey, accessToken } = promise.data.body

        window.localStorage.setItem('aesKey', aesKey)

        window.localStorage.setItem('auth-token', accessToken);

        // 9、登录成功后，接下来的代码可以写一些页面的跳转或者开发者项目的逻辑

        // vue.$router.push({ name: '' })

    } else if (promise.data.code === ) {

        const config = {

            vue,

            redirectUrl: promise.data.redirect

        }

    } else {

        vue.$message({

            type: 'fail',

            message: promise.data.msg,

            duration: ,

        })

    }

    return promise.data.code

}

第一次发起登录，获取serverRSAPublicKey；

api文件中（相当于发送axios请求）

import fetch from '../../../utils/fetch'

import adrsConfig from '../config/adrs.config'

import urlConfig from '../config/url.config'

/**

 * [getServerRSAPublicKey   获取服务端RSA公钥]

 * @param  {[JSON]}     config  [请求参数]

 * @return {[Promise]}          [Promise]

 */

export function getServerRSAPublicKey(config) {

    const defaultConfig = {

        url: adrsConfig.IS_USE_RAP ? (adrsConfig.RAP_URL + urlConfig.GET_RSA_PUBLIC_KEY_URL) : (adrsConfig.USER_SERVICE_URL + urlConfig.GET_RSA_PUBLIC_KEY_URL),

        method: 'get',

        data: {},

    }

    const mergeConfig = _.assign({}, defaultConfig, config)

    return fetch(mergeConfig)

}

/**

 * [login  用户进行登录 ]

 * @param  {[JSON]}     config  [请求参数]

 * @return {[Promise]}          [Promise]

 */

export function login(config) {

    const defaultConfig = {

        url: adrsConfig.IS_USE_RAP ? (adrsConfig.RAP_URL + urlConfig.SYS_LOGIN_URL) : (adrsConfig.USER_SERVICE_URL + urlConfig.SYS_LOGIN_URL),

        method: 'post',

        data: {},

    }

    const mergeConfig = _.assign({}, defaultConfig, config)

    return fetch(mergeConfig)

}

1.2 登录保持

*** 注意：签名指用私钥加密的消息（只有拥有私钥的用户可以生成签名）

    在最原始的方案中，登录保持仅仅靠服务器生成的sessionId，客户端的请求中带上sessionId, 如果服务器的redis中存在这个id，就认为请求来自相应的登录客户端。 但是
只要sessionId被截获， 请求就可以为伪造，存在安全隐患；

    引入token后，服务器将token和其它的一些变量（用户数据，例如uuid），利用一些算法（散列算法、对称加密或者非对称加密）得到签名后，将签名和登录的数据一并发送给客户端，
；客户端收到token之后，每次
发送请求，headers都携带了token，服务器收到token之后，再次利用相同的散列加密算法对数据在进行计算（服务端对token并不进行保存），生成新的token，如果生成的token与
携带的token一致, 就认为请求来自登录的客户端。如果不一致，则说明没有登陆过，或者用户的数据被人篡改了。

1.3 退出（用户退出系统的原理 ----- 有以下两种状况）

服务端将对应的sessionId从redis队列中删除；
Token具有时效性，或者用户手动将其删除；

二、对称加密、非对称加密、散列（哈希）算法

对称加密
- AES
- DES
非对称加密（加密密钥与解密密钥不相同，并且不可能从加密密钥推导出解密密钥，也叫公钥加密算法）
- RSA
散列算法（签名算法）
- MD5

三、遇到的问题

暂无

巴特西

简述前后端项目RSA+AES加解密

最新文章

热门文章