des加密 react-native_react-native-des - CSDN
  • 尊重版权,未经授权不得转载 本文来自brix 文章来自江清清... ... ...(一)....之前很多朋友问有没有非常OK的,MD5,AES,DES相关库,需要在React Native上面进行使用。之前我也封装过一下MD5和AES相关的库,但是那个是在原生

    尊重版权,未经授权不得转载

    本文来自brix  文章来自江清清的技术专栏(http://www.lcode.org)

    项目库地址:https://github.com/brix/crypto-js

    (一).前言

    之前很多朋友问有没有非常OK的,MD5,AES,DES相关库,需要在React Native上面进行使用。之前我也封装过一下MD5和AES相关的库,但是那个是在原生模块基础上面进行封装的,使用起来非常不便捷。其实做加密操作,加密标准都是统一的,直接有相关JavaScript库可以用来使用,今天给大家推荐一款前端加密库,直接安装就即可在react Native上面进行使用。常用的MD5,AES,SHA等等一系列的加密方法都已经封装好了。

    (二).安装

    必须依赖环境

    1. Node.js
    2. npm (Node.js package manager)
    ?
    1
    npm install crypto-js
    (三).引入方法

    模块引入方法

    ?
    1
    2
    3
    4
    varAES = require("crypto-js/aes");
    varSHA256 = require("crypto-js/sha256");
    ...
    console.log(SHA256("Message"));

    或者引导所有的库,进行方法调用

    ?
    1
    2
    varCryptoJS = require("crypto-js");
    console.log(CryptoJS.HmacSHA1("Message","Key"));
    (四).使用方法

    这边简单介绍一下其中AES加密的使用方法。具体该库还有其他很多的标准加密的API请查看:https://code.google.com/archive/p/crypto-js/  注意该地址请自带梯子访问。

    AES加解密演示

    4.1.普通文本AES加解密实例

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    varCryptoJS = require("crypto-js");
     
    // Encrypt
    varciphertext = CryptoJS.AES.encrypt('my message','secret key 123');
     
    // Decrypt
    varbytes  = CryptoJS.AES.decrypt(ciphertext.toString(), 'secret key 123');
    varplaintext = bytes.toString(CryptoJS.enc.Utf8);
     
    console.log(plaintext);

    4.2.简单对象加解密实例

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    varCryptoJS = require("crypto-js");
     
    vardata = [{id: 1}, {id: 2}]
     
    // Encrypt
    varciphertext = CryptoJS.AES.encrypt(JSON.stringify(data), 'secret key 123');
     
    // Decrypt
    varbytes  = CryptoJS.AES.decrypt(ciphertext.toString(), 'secret key 123');
    vardecryptedData = JSON.parse(bytes.toString(CryptoJS.enc.Utf8));
     
    console.log(decryptedData);
    展开全文
  • React-Native】RN 面试记录

    千次阅读 2019-05-08 13:46:31
    汇总记录一下面试中遇到的问题,希望对大家有帮助 废话不多说,直接就开写吧。 时间:2019-03-13 职位:大型企业RN岗位电话面试 Android原生相关: 四大组件有哪些?... Service有几种绑定启动方...

    汇总记录一下面试中遇到的问题,希望对大家有帮助

    废话不多说,直接就开写吧。


    时间:2019-03-13

    职位:大型企业RN岗位电话面试


    Android原生相关:

    • 四大组件有哪些?
      1. activity
      2. service
      3. content provider
      4. broadcast receiver
    • Activity的生命周期:
      看图吧
    • Service有几种绑定启动方式?

    1、startService 启动的服务:主要用于启动一个服务执行后台任务,不进行通信。停止服务使用 stopService

    2、bindService 启动的服务:该方法启动的服务可以进行通信。停止服务使用 unbindService


    RN相关:

    • RN生命周期:

      看图:

    • 网络请求放在哪一个阶段?

    网络请求放在 componentDidMount()中, componentDidMount 方法中的代码,是在组件已经完全挂载到网页上才会调用被执行,所以可以保证数据的加载。此外,在这方法中调用 setState 方法,会触发重渲染。所以,官方设计这个方法就是用来加载外部数据用的,或处理其他的副作用代码。详细请参考:https://segmentfault.com/q/1010000008133309

    • app登录的时候,用户名密码的加密方式?

    其实,不仅仅是用户名和密码,重要数据都应该加密,由于我们项目里面使用的是 DES 对称加密,故我就给他说了 DES 对称加密。app 端和后端共同持有一个公共的密钥,加密数据和解密数据都使用这个密钥。可以理解为,明文 + 密钥 = 加密后的数据,即 1 + miyao = lkjlkj , lkjlkj - miyao = 1。
               更多:
                       a.DES 对称加密
                       b.基于 DES 动态 Token 验证的设计方案

    • 缓存用的什么?

    前端:
    1. AsyncStorage,详细:https://reactnative.cn/docs/asyncstorage/
    2.状态管理器 Redux,详细:https://segmentfault.com/a/1190000015367584?utm_source=tag-newest

    后端:
    Redis,详细:http://www.runoob.com/redis/redis-tutorial.html

    • 对图片做过的处理有哪些?

    前端:
    1.使用过组件对图片进行选择,多选以及裁剪等。
              推荐组件:react-native-syan-image-picker
              个人实践地址:https://github.com/supervons/commonProject/
    2.对过大的图片进行压缩。

    后端:
    1.判断图片的格式是否合规。
    2.判断大小是否在规定之内。


    对本次电话面试总结:

    1. 在缓存那里,我就说了 Redis ,明明知道 AsyncStorageRedux
    2. 在图片处理那里,我就说了后端进行格式判断,大小判断,估计是想问我前端对图片的处理,知道,但是我没说,理解可能错了。 
    3. android 原生基础有待提高
    4. 下次不清楚问题,就先问清楚问题,由于之前是后端转的 RN ,没有过 RN 面试经验,结果待定,总之,吃一堑长一智。

     

    目前就这么多,不定期更新。 


    感兴趣的朋友可以关注一下,分享讨论交流技术~,不定期发放福利?。

    展开全文
  • 前提:由于现有框架已经形成,但是需要增加在每次调用api的时候,进行token认证,认证通过才能允许访问接口。以防止越权访问。所以,准备在代价最小的情况下,进行修改。 总体思路: 1,在app登录成功后,服务端...

    前提:由于现有框架已经形成,但是需要增加在每次调用api的时候,进行token认证,认证通过才能允许访问接口。以防止越权访问。所以,准备在代价最小的情况下,进行修改。


    总体思路:

    1,在app登录成功后,服务端生成一个长达200的字符序列(不重复,当然也可以是5001000)存入数据库,同时返回给app

    2,app拿到序列后,每次访问接口,在header里用该序列中的一个加上用户id(密码+用户id)进行des加密后生成token。

    3,服务端拦截器获取该token,进行校验,如果通过,则允许访问接口,并且在数据库中删除该序列中的该密码(防止重复使用)。


    详细设计:

    一,新建数据库表

    数据库新增一张USER_AUTHORITY表,用于存储用户id和对于的密码序列,不必担心数据量大,在用户退出删除该记录,在用户登录之前,会重置一次该序列。

    表结构很简单,如下:


    二,密码序列的生成

    对于密码序列的生成,这里是截取UUID的前八位,然后需要的长度是在调用的时候输入(当然,你可以把这个长度设置放到数据库或者配置文件里,如果以后不够,可以轻松的增长。)。如下:

    	private static Set<String> productAuthoritys(int num){
    		Set<String> setString = new TreeSet<String>();
    		for(int i = setString.size() ;i<num;i++) {
    			setString.add(UUID.randomUUID().toString().replace("-", "").substring(0, 8));
    		}
    		return setString;
    	}

    这里直接明文返回给app端即可,因为app端会对此密码进行再加密后使用。 


    三,APP存储密码序列

    登录成功后,app对获取到的密码序列进行存储,这里使用的是AsyncStorage存储到本地。

    由于AsyncStorage存储的是字符串,故这里做了一点转换。

     AsyncStorage.setItem("AuthorityPools", JSON.stringify(responseData.AuthorityPools).replace(/"/g,"").replace("[","").replace("]",""), function (error) {
                    if (error) {
                        alert('存储失败');
                    } else {
                        console.log('chenggong');
                    }});

    四,请求header中加入token 

    在每次访问时,header里面加入token

    每次需要获取新的authorityCode加入token中,(此处DES为加密方法,这里每个人的DES均不同,就不贴了,如有需要,可以留言或联系我)。

    //通用请求中header
    const _getHeader = () => {
        const authorityCode = getServerTime();
        //未加密前的数据
        let proCode = DES.encryptForToken(AppStore.getUserID());
        let token = DES.encryptForToken(this.authorityCode + '@' + proCode);
        return {
            'Accept': 'application/json',
            'Content-Type': 'application/x-www-form-urlencoded;application/json;',
            'Token': token,
        };
    };

    成功之后,会把该AuthorityPools(密码序列)中的一个authorityCode拿出来进行使用,然后删除该authorityCode后重新存储。

    //授权码
    this.authorityCode = "";
    function getServerTime() {
        //调用接口增加 token ,从本地存储获取,避免越权。
        let AuthorityPools = AsyncStorage.getItem('AuthorityPools', function (error, result) {
            result = result == null ? "" :result;
            this.authorityCode = result.split(",")[0];
            AsyncStorage.setItem("AuthorityPools", result.replace(this.authorityCode + ",", ""), function (error) {
                if (error) {
                    Alert.alert(
                        '错误',
                        '获取token数据失败',
                        [
                            {
                                text: '重新登录',
                                onPress: () => AppDispatcher.dispatch({actionType: AppConstants.FORCE_LOGOUT}),
                                type: 'plain-text'
                            },
                            {text: '取消', onPress: () => console.log('取消'), style: 'cancel'}
                        ]
                    );
                } else {
                    console.log('get authorityCode success!');
                }
            });
        })
        return AuthorityPools;
    }

    五,服务端Filter进行拦截校验。

    这里,可以对get进行进行放行,只拦截除了get以外的请求。如下,获取headertoken

    String token = DES.quickDecrypt(req.getHeader("Token") == null ? "" : req.getHeader("Token"))
    					.toLowerCase().trim();

    此后,就取出数据库中该用户的密码序列进行比较,比较成功后,放行,不成功则拒绝访问。

    注:用户id取决于token中携带的用户id而不是session中的id。


    六,可能会遇到的问题

    1,由于AsyncStorage是异步存储,可以会出现上一次访问的密码序列,在本次才会进行调用。我这里的解决方案是在登录成功后,任意调用一个get接口一次即可解决异步。当然,还有async/await 的方式,但我试了没有用,可能我版本太低。


    总结,这个方案搞了三天,之前走了很多弯路子。如每次访问之前请求一次时间戳(太卡,而且请求是回调请求,获取的时间戳不同步。)

    此方案可以说很好的解决了我的问题,此外还有其他的加密方式,如JWT,但是JWT不能实时的变化,如果该访问被拦截后,使用该Token可以继续进行访问。

    Bingo~

    展开全文
  • RN 中使用 crypto库加密

    2019-04-05 18:17:30
    文章目录正常步骤实例demo ...npm i --save react-native-crypto npm i --save react-native-randombytes react-native link react-native-randombytes npm i --save-dev tradle/rn-nodeify ./no...


    本以为按照安装步骤走,就可以大功告成,谁知…

    正常步骤

    npm i --save react-native-crypto
    
    npm i --save react-native-randombytes
    
    react-native link react-native-randombytes
    
    npm i --save-dev tradle/rn-nodeify
    
    ./node_modules/.bin/rn-nodeify --hack --install
    
    • 安装过程比较慢,如果没有梯子请,用淘宝镜像
    • 如果碰到,安装完后项目启
      bundling failed: Error: Unable to resolve module stream from ./node_modules/react-dom/cjs/react-dom-server.node.production.min.js`: Mo
      首先请按提示步骤去解决…

    解决方案:

    最终还是没不能解决,请将所有安装的都卸载掉, 然后按如下步骤

    • 安装 npm i --save-dev tradle/rn-nodeify
    • ./node_modules/.bin/rn-nodeify --hack --install
      然后在安装其它几个
      …主要原因还是对node库 hack问题。希望你们都能顺利去解析…

    实例demo

    import './shim.js'
    import crypto from 'crypto'
    
    const ALGORITHM = 'aes-128-cbc';
    const BASE64 = 'base64';
    const UTF8 = 'utf8';
    
    export const encrypt = (plainText: string, sharedSecret: string) => {
      const initializationVector = crypto.randomBytes(16);  // IV is always 16-bytes
      const cipher = crypto.createCipheriv(ALGORITHM, Buffer.from(sharedSecret, BASE64), initializationVector);
      let encrypted = cipher.update(plainText, UTF8, BASE64);
      encrypted += cipher.final(BASE64);
      return {
        iv: initializationVector.toString(BASE64),
        cipherText: encrypted
      };
    }
    export const decrypt = (encrypted: string, iv: string, sharedSecret: string) => {
      const decipher = crypto.createDecipheriv(ALGORITHM, Buffer.from(sharedSecret, BASE64), Buffer.from(iv, BASE64));
      let decrypted = decipher.update(encrypted, BASE64, UTF8);
      decrypted += decipher.final(UTF8);
      return decrypted;
    }
    

    使用

    const SHARED_SECRET='shared_secert'
    var data = {
        username: 'zhang',
        pwd: '123'
    }
    //加密
    let enPwdObj=encrypt(data.pwd,SHARED_SECRET);
    //解密
    let dePwd=decrypt(enPwdObj.cipherText,enPwdObj.iv,SHARED_SECRET);
    
    
    展开全文
  • React Native加密

    千次阅读 2017-03-23 09:30:57
     很多朋友在群里、论坛里问有没有非常好的MD5,AES,DES相关库,需要在React Native上面使用。其实做加密操作,加密标准都是统一的,直接有相关JavaScript库可以用来使用,今天给大家推荐一款前端加密库,直接安装就...
  • 本周报来自江清清的技术...说在前面的话:React Native开发技术周报,主要会涉及React Native最新资讯,React Native教程,技术开发文章,开源项目,工具,视频等等。今天是我们的第二十二期,同时各位朋友有优秀的有关R
  • 2019独角兽企业重金招聘Python工程师标准>>> ...
  • 为什么80%的码农都做不了架构师?>>> ...
  • AES 加密解密解析概述AES 即 高级加密标准(英语:Advanced Encryption Standard,缩写:AES),在密码学中又称Rijndael加密法,是美国联邦政府采用的一种区块加密标准。这个标准用来替代原先的DES,已经被多方分析...
  • react native常见的错误

    万次阅读 2016-06-01 10:28:18
    更多组件:https://react.parts/native,调用系统的,注意查看:支持iOS or 安卓 组件和相关使用 样式用这种方式定义,可以单独提...就可引入相对自己目录下的Styles.js,注:React Native 没有所谓的CSS。var styles
  • 第一大类OC面试题 一.设计模式是什么? 你知道哪些设计模式,并简要叙述? 设计模式是一种编码经验,就是用比较成熟的逻辑去处理某一种类型的事情。 1). MVC模式:Model View Control,把模型 视图 控制器...2)....3)....
  • HTTP直接请求webService

    2019-07-23 21:22:58
    在实际开发中,会遇到各种各样的webService接口,并且对方提供的接口并不规范,一些客户端反而就不好使了,如cxf(客户端与动态调用)等,直接用java提供的api比较繁琐,这时直接用http request请求更便捷。...
  • 为什么80%的码农都做不了架构师?>>> ...
  • 使用DES和RSA做数据加密

    千次阅读 2015-11-11 17:03:56
    在这个数据为王的时代,数据的安全性是所有人都要考虑的问题,数据加密无疑是保护数据的最好方式!  加密,是以某种特殊的算法改变原有的信息数据,使得未授权的用户即使获得了已加密的信息,但因不知解密的方法,...
  • 1.本地数据加密 对NSUserDefaults,sqlite存储文件数据加密,保护帐号和关键信息 将文件进行加密 // 获取需要加密文件的二进制数据 NSData *data = [NSData dataWithContentsOfFile:@"/Users/wangpengfei/Desktop/...
  • react常见坑

    2017-08-01 13:32:37
    更多组件:https://react.parts/native,调用系统的,注意查看:支持iOS or 安卓 组件和相关使用 样式用这种方式定义,可以单独提出来...就可引入相对自己目录下的Styles.js,注:React Native 没有所谓的CSS。
  • From: https://www.cnblogs.com/CyLee/p/7216988.html 传送门: # crypto-js github https://github.com/brix/crypto-js ...// 加载核心加密库 var CryptoJS = require("crypto-js"); // 加载des算法 va...
1 2 3 4 5 6
收藏数 112
精华内容 44
关键字:

des加密 react-native