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加密，

代码：

[html] view plain copy
  1. <script type="text/javascript" src="@/js/lib/encode/core-min.js"></script>  
  2. <script type="text/javascript" src="@/js/lib/encode/cipher-core-min.js"></script>  
  3. <script type="text/javascript" src="@/js/lib/encode/enc-base64-min.js"></script>  
  4. <script type="text/javascript" src="@/js/lib/encode/hmac-min.js"></script>  
  5. <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安全编码，

加密的在这里：

[js] view plain copy
  1. var hash = CryptoJS.HmacSHA1(encoded, qiao.qiniu.sk);  
  2. var encoded_signed = hash.toString(CryptoJS.enc.Base64);  

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

 

其他加密

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

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

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

当然，前提是翻墙了。

 

更多教程：

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

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