• 热门专题

Hbuilder开发app实战识岁05Crypto.js实现各种js加密算法

作者:  发布日期:2015-08-24 22:37:13
Tag标签:算法  实战  
  • 2.png

    前言

    js加密,应该说做js开发的很少接触到这一块,因为很多时候都是做加密,很少有前端做加密的,

    很荣幸我接触过两次,找到了crypto.js,很好的东西,可以实现各种js加密。

    吐槽

    吐槽下前端做加密,一般来说前端做加密这需求是很少的,极少的,

    我却碰到了两次,一次是前后端分离,涉及到安全,所以数据传输需要加密,也就是ssl+3des+md5做加密,

    一次就是识岁app,需要上传到七牛云,需要生成uptoken做加密,详见上一节。

    crypto.js

    如果你不精通各种加密算法,不精通js,那想要做出js加密是很难很难的,

    幸好有crypto.js,这个js库是专做加密的,各种加密算法,

    很高兴的告诉你官网是:https://code.google.com/p/crypto-js/,

    但是,被墙了,不翻墙是看不到的。

    同样很高兴告诉你,我翻墙了,下载下来了,

    下载下来后你会发现,有两个文件夹:components,rollups,

    前者是基础组件,后者是加密算法,也就是对基础组件的合并压缩。

    rollups

    这个文件夹下就是crypto.js所支持的各种加密算法,

    如果你只需要进行一种加密,那挺好,只需要在这里找找,见顶部图片,

    然后将这个js引入就可以了。

    components

    如果不幸的,你需要做好几种加密,那就不能这样做了,或者说不建议这样做,

    因为rollups中的每个js都会封装一些基础js,如果你这样做,意味着重复引入基础js,我是不能忍。

    那怎么办?来看看components文件夹吧,有这些:

    3.png

    js很多,但是你不需要害怕,你需要知道得很少。

    core-min.js

    这个是核心js,这个不管你用哪一个加密算法都需要引入。

    cipher-core-min.js

    密码js,这个如果你需要加密那就需要引入,如果只是做一些编码之类的就不需要引入了。

    回到正题,

    如果要把crypto.js讲清楚,我估计以我的水平得研究个一个月多,

    幸好识岁app需要的只是base64编码和sha1加密,

    代码:

        <script type="text/javascript" src="@/js/lib/encode/core-min.js"></script>
        <script type="text/javascript" src="@/js/lib/encode/cipher-core-min.js"></script>
        <script type="text/javascript" src="@/js/lib/encode/enc-base64-min.js"></script>
        <script type="text/javascript" src="@/js/lib/encode/hmac-min.js"></script>
        <script type="text/javascript" src="@/js/lib/encode/sha1-min.js"></script>

    通过实验你会发现,你只需要这些js,就可以实现base64编码和hmac-sha1加密。

    实现代码

    由于代码比较多,我就不引入了,地址:https://github.com/uikoo9/shisui/blob/master/%40/js/lib/qiao.js#L272,

    这一长段代码都是为了实现七牛云生成uptoken的base64url安全编码,

    加密的在这里:

    var hash = CryptoJS.HmacSHA1(encoded, qiao.qiniu.sk);
    var encoded_signed = hash.toString(CryptoJS.enc.Base64);

    这里才是正真使用到cryptjs的地方。

    其他加密

    其他的加密过程也是类似的,

    首先引入你需要的js,分开引入,或者引入压缩后的js,

    其次就是看文档和使用了,通常只需要一个方法搞定,

    当然,前提是翻墙了。

    更多教程:

    Hbuilder开发App实战1-识岁:http://uikoo9.com/book/detail/5

    更多学习笔记:http://uikoo9.com/book

    版权声明:本文为博主原创文章,未经博主允许不得转载。

About IT165 - 广告服务 - 隐私声明 - 版权申明 - 免责条款 - 网站地图 - 网友投稿 - 联系方式
本站内容来自于互联网,仅供用于网络技术学习,学习中请遵循相关法律法规