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

2019/11/08 15:53
阅读数 181

一、登录机制

  在项目中,我们可以大致得出一个登录的过程,主要分为  登录验证登录保持退出三个部分。登录验证是指客户端提供用户名和密码,向服务器提出登录请求,服务器判断客户端是否可以登录并向客户端确认。 登录保持是指客户端登录后, 服务器能够分辨出已登录的客户端,并为其持续提供登录权限的服务器。退出是指客户端主动退出登录状态。而登录保持容易想到的方案是,客户端登录成功后, 服务器为其分配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="11"
                  placeholder="请输入手机号"
                ></el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input
                  id="verificationCode"
                  style="width: 55%;float:left;"
                  maxlength="6"
                  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: 100%;
          height: 100%;
          &-main {
          }
        }
        </style>
        View Code

                          

      • 所涉及到的数据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' }
            ],
        }
        View Code
      • 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 === 200) {
                    //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 === 200) {
                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('-----')[2]
                // 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: 1024 })
            // 导出公钥
            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 === 200) {
                // 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 === 205403) {
                const config = {
                    vue,
                    redirectUrl: promise.data.redirect
                }
            } else {
                vue.$message({
                    type: 'fail',
                    message: promise.data.msg,
                    duration: 1000,
                })
            }
            return promise.data.code
        }
        View 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)
        }
        View Code

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

三、遇到的问题

暂无

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部