正在加载中，请稍后
author 首页 关于 笔记

按回车搜索更多
纯前端通过第三方API实现用注册、登陆、个人信息增删改查等功能
2018-07-15 阅读 {{counts.readCount}} 评论 {{counts.commentCount}}

借助了掌淘科技免费提供的 用户系统 API 和 K-V 数据存储API,实现用注册、登陆、个人信息增删改查等功能



说一下需求。我的壁纸网站需要升级一个云同步功能，同步用户收藏的图片信息。但是我的服务器后台由于配置等原因实在无力去实现这套功能。

那么无意中看到一个第三方API居然可以免费实现用户系统的功能。。。那么就稍微花了一丢丢时间，实现了一个围绕这个api的纯前端的demo。

另外还用到了2个纯前端的 md5 加密 和 base64 加密解密的js，代码一起贴在后面了。

 

使用了多个第三方接口，包括

掌淘科技提供的 用户系统 API 和 K-V 数据存储API

http://api.mob.com/product/api/detail/12

http://api.mob.com/product/api/detail/32

使用前需要去他们官网注册一个mod key 网址 http://reg.mob.com 

在此需要感谢一下 掌淘科技 http://www.mob.com 提供的非常强大的免费API


用户系统 API  官方说明如下

 

但是他的用户资料和用户数据都需要token,而实际测试发现每次登陆后token只能用一次就过期了，或者说第二次开始很大几率返回error

所以信息的增删改查使用另一个api实现  K-V 数据存储API 官方说明如下

 

首先说明一下，mob提供的接口，大部分都是针对安卓或者IOS上的APP或者小程序去设计的SDK。

但是！实际当中MOB API里的API都是通过HTTP GET方式请求的

所以前后端其实都可以实现，只是前端实现坑稍微多了一点

比如

直接用ajax调用会报错：No 'Access-Control-Allow-Origin' header 因为跨域了

那么如果不信邪非要用怎么办呢？

我的解决方案是用ajax jsonp来跨域

还是报错 Uncaught SyntaxError: Unexpected token : 因为用 jsoup不支持 返回 json 数据

那么如果不信邪非要用怎么办呢？

用yahoo提供的jsoup转json api可以实现 https://developer.yahoo.com/yql/?guccounter=1

(需要注意的是！这种实现方法显然是极不安全的！)


基本上就是这些，后面直接贴demo代码。

注意text.html里面的var key = ''; 需要填入你申请的mob的apikey，如果没有可以去免费申请一个 reg.mob.com

 

OK、那么直接上代码

text.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>test</title>
  6. </head>
  7. <body>
  8. 	<input type="text" name="username" id='username'><input type="password" name="password" id="password">
  9. 	<button id="login">登陆</button><button id="reg">注册</button>
  10. 	<input type="text" name="text" id="item"><input type="text" name="text" id="value">
  11. 	<button id='put' disabled="true">put</button>
  12. 	<button id='query' disabled="true">query</button>
  13. 	<button id='clear'>clear</button>
  14. 	<span id="msg">未登录</span>
  15. 	<br>
  16. 	<span id="span"></span>
  17.  
  18. <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  19. <script type="text/javascript" src="md5.js"></script>
  20. <script type="text/javascript" src="base64.js"></script>
  21. <script type="text/javascript">
  22. 	var key = '';//mod key 需要你自己去免费注册一个appkey 网址reg.mob.com
  23. 	var yql = 'http://query.yahooapis.com/v1/public/yql';//yahoo jsonp2json
  24. 	var times = 10;
  25. 	var uid = '';
  26. 	var token = '';
  27. 	var base = new Base64();
  28. 	$(function(){
  29. 		var username = localStorage.getItem("username");
  30. 		var password = localStorage.getItem("password");
  31. 		if(username && password){
  32. 			login(username,password);
  33. 			initToken();
  34. 		}
  35. 		$('#reg').on('click',function(){
  36. 			//这里的邮箱只是mob为了防止重复注册用的，没有任何功能，但一个邮箱只能注册一次
  37. 			rigister($('#username').val(),$('#password').val(),'666@123.cn');
  38. 		});
  39. 		$('#login').on('click',function(){
  40. 			login($('#username').val(),$('#password').val());
  41. 			initToken();
  42. 		});
  43. 		$('#put').on('click',function(){
  44. 			var item = $('#item').val();
  45. 			var value = $('#value').val();
  46. 			// put(uid,token,item,value);
  47. 			kvPut(uid,item,value);
  48. 		});
  49. 		$('#query').on('click',function(){
  50. 			var item = $('#item').val();
  51. 			// query(uid,item);
  52. 			kvGet(uid,item);
  53. 		});
  54. 		$('#clear').on('click',function(){
  55. 			$('#span').text('');
  56. 		});
  57. 		//rigister('tczmh2', '123456','123@123.cn');
  58. 		// login('tczmh2','123456');
  59. 	});
  60.  
  61. 	function kvPut(uid,k,v){
  62. 		k = base.encode(k);
  63. 		v = base.encode(v);
  64. 		var url  = "http://apicloud.mob.com/ucache/put";
  65. 		var query = 'select * from json where url="' + url + '?'
  66. 	          		+ 'key=' + key + '&'
  67. 		            + 'table=' + uid + '&'
  68. 		            + 'k=' + k + '&'
  69. 		            + 'v=' + v
  70. 		            +'"';
  71. 		show(query);
  72. 		$.ajax({
  73. 			url:yql,
  74. 			type:'get',
  75. 		       dataType: 'jsonp',
  76. 		       cache: false,
  77. 		       data: {
  78. 		           q: query,
  79. 		           format: 'json'
  80. 		       },
  81. 			success:function(data){
  82. 				var json = data.query.results.json;
  83. 				show(json.retCode);
  84. 				show(json.msg);
  85. 			}
  86. 		});
  87. 	}
  88. 	function kvGet(uid,k){
  89. 		k = base.encode(k);
  90. 		var url  = "http://apicloud.mob.com/ucache/get";
  91. 		var query = 'select * from json where url="' + url + '?'
  92. 	          		+ 'key=' + key + '&'
  93. 		            + 'table=' + uid + '&'
  94. 		            + 'k=' + k
  95. 		            +'"';
  96. 		show(query);
  97. 		$.ajax({
  98. 			url:yql,
  99. 			type:'get',
  100. 		       dataType: 'jsonp',
  101. 		       cache: false,
  102. 		       data: {
  103. 		           q: query,
  104. 		           format: 'json'
  105. 		       },
  106. 			success:function(data){
  107. 				var json = data.query.results.json;
  108. 				show(json.retCode);
  109. 				show(json.msg);
  110. 				show(json.result.k);
  111. 				show(json.result.v);
  112. 			}
  113. 		});
  114. 	}
  115. 	/** 跟在登陆以后执行，因为登陆是异步操作，这里每秒1次共10次获取sessionStorage中的uid和token */
  116. 	function initToken(){
  117. 		uid = sessionStorage.getItem("uid");
  118. 		token = sessionStorage.getItem("token");
  119. 		if(times > 0){
  120. 			if(!uid || !token){
  121. 				times --;
  122. 				setTimeout('initToken()', 1000);
  123. 				show('initToken 不成功 '+times);
  124. 			}else{
  125. 				show('initToken 成功 '+times);
  126. 				show(uid);
  127. 				show(token);
  128. 				$('#put').attr('disabled',false);
  129. 				$('#query').attr('disabled',false);
  130. 			}
  131. 		}else{
  132. 			show('initToken超时');
  133. 		}
  134. 	}
  135. 	/** 登陆 */
  136. 	function login(username, password){
  137. 		var hash = hex_md5(password);
  138. 		var url  = "http://apicloud.mob.com/user/login";
  139. 		var query = 'select * from json where url="' + url + '?'
  140. 	            + 'key=' + key + '&'
  141. 	            + 'username=' + username + '&'
  142. 	            + 'password=' + hash
  143. 	            +'"';
  144. 	    show(query);
  145. 		$.ajax({
  146. 			url:yql,
  147. 			type:'get',
  148. 	        dataType: 'jsonp',
  149. 	        cache: false,
  150. 	        data: {
  151. 	            q: query,
  152. 	            format: 'json'
  153. 	        },
  154. 			success:function(data){
  155. 				var json = data.query.results.json;
  156. 				show(json.retCode);
  157. 				show(json.msg);
  158. 				// 异步存入 sessionStorage
  159. 				sessionStorage.setItem("uid", json.result.uid);
  160. 				sessionStorage.setItem("token", json.result.token);
  161. 				// 长期保存用户名密码，可以用来自动登陆
  162. 				localStorage.setItem("username",username);
  163. 				localStorage.setItem("password",password);
  164. 				$('#msg').text('已登录');
  165. 			}
  166. 		});
  167. 	}
  168. 	/** 注册 */
  169. 	function rigister(username, password, email){
  170. 		var hash = hex_md5(password);
  171. 		var url  = "http://apicloud.mob.com/user/rigister";
  172. 		var query = 'select * from json where url="' + url + '?'
  173. 	            + 'key=' + key + '&'
  174. 	            + 'username=' + username + '&'
  175. 	            + 'password=' + hash + '&'
  176. 	            + 'email=' + email
  177. 	            +'"';
  178. 	    show(query);
  179. 		$.ajax({
  180. 			url:yql,
  181. 			type:'get',
  182. 	        dataType: 'jsonp',
  183. 	        cache: false,
  184. 	        data: {
  185. 	            q: query,
  186. 	            format: 'json'
  187. 	        },
  188. 			success:function(data){
  189. 				var json = data.query.results.json;
  190. 				show(json.retCode);//状态码 200为正常 其余有错
  191. 				show(json.msg);//success为正常 其余为错误信息
  192. 				show(json.result);//uid
  193. 			}
  194. 		});
  195. 	}
  196. 	function show(msg){
  197. 		$('#span').append(msg+'<br>--------------------------<br>');
  198. 	}
  199. </script>
  200. </body>
  201. </html>

md5.js

  1. /*
  2.  * A JavaScript implementation of the RSA Data Security, Inc. MD5 Message
  3.  * Digest Algorithm, as defined in RFC 1321.
  4.  * Version 2.1 Copyright (C) Paul Johnston 1999 - 2002.
  5.  * Other contributors: Greg Holt, Andrew Kepert, Ydnar, Lostinet
  6.  * Distributed under the BSD License
  7.  * See http://pajhome.org.uk/crypt/md5 for more info.
  8.  */
  9.  
  10. /*
  11.  * Configurable variables. You may need to tweak these to be compatible with
  12.  * the server-side, but the defaults work in most cases.
  13.  */
  14. var hexcase = 0;  /* hex output format. 0 - lowercase; 1 - uppercase        */
  15. var b64pad  = ""; /* base-64 pad character. "=" for strict RFC compliance   */
  16. var chrsz   = 8;  /* bits per input character. 8 - ASCII; 16 - Unicode      */
  17.  
  18. /*
  19.  * These are the functions you'll usually want to call
  20.  * They take string arguments and return either hex or base-64 encoded strings
  21.  */
  22. function hex_md5(s){ return binl2hex(core_md5(str2binl(s), s.length * chrsz));}
  23. function b64_md5(s){ return binl2b64(core_md5(str2binl(s), s.length * chrsz));}
  24. function str_md5(s){ return binl2str(core_md5(str2binl(s), s.length * chrsz));}
  25. function hex_hmac_md5(key, data) { return binl2hex(core_hmac_md5(key, data)); }
  26. function b64_hmac_md5(key, data) { return binl2b64(core_hmac_md5(key, data)); }
  27. function str_hmac_md5(key, data) { return binl2str(core_hmac_md5(key, data)); }
  28.  
  29. /*
  30.  * Perform a simple self-test to see if the VM is working
  31.  */
  32. function md5_vm_test()
  33. {
  34.   return hex_md5("abc") == "900150983cd24fb0d6963f7d28e17f72";
  35. }
  36.  
  37. /*
  38.  * Calculate the MD5 of an array of little-endian words, and a bit length
  39.  */
  40. function core_md5(x, len)
  41. {
  42.   /* append padding */
  43.   x[len >> 5] |= 0x80 << ((len) % 32);
  44.   x[(((len + 64) >>> 9) << 4) + 14] = len;
  45.  
  46.   var a =  1732584193;
  47.   var b = -271733879;
  48.   var c = -1732584194;
  49.   var d =  271733878;
  50.  
  51.   for(var i = 0; i < x.length; i += 16)
  52.   {
  53.     var olda = a;
  54.     var oldb = b;
  55.     var oldc = c;
  56.     var oldd = d;
  57.  
  58.     a = md5_ff(a, b, c, d, x[i+ 0], 7 , -680876936);
  59.     d = md5_ff(d, a, b, c, x[i+ 1], 12, -389564586);
  60.     c = md5_ff(c, d, a, b, x[i+ 2], 17,  606105819);
  61.     b = md5_ff(b, c, d, a, x[i+ 3], 22, -1044525330);
  62.     a = md5_ff(a, b, c, d, x[i+ 4], 7 , -176418897);
  63.     d = md5_ff(d, a, b, c, x[i+ 5], 12,  1200080426);
  64.     c = md5_ff(c, d, a, b, x[i+ 6], 17, -1473231341);
  65.     b = md5_ff(b, c, d, a, x[i+ 7], 22, -45705983);
  66.     a = md5_ff(a, b, c, d, x[i+ 8], 7 ,  1770035416);
  67.     d = md5_ff(d, a, b, c, x[i+ 9], 12, -1958414417);
  68.     c = md5_ff(c, d, a, b, x[i+10], 17, -42063);
  69.     b = md5_ff(b, c, d, a, x[i+11], 22, -1990404162);
  70.     a = md5_ff(a, b, c, d, x[i+12], 7 ,  1804603682);
  71.     d = md5_ff(d, a, b, c, x[i+13], 12, -40341101);
  72.     c = md5_ff(c, d, a, b, x[i+14], 17, -1502002290);
  73.     b = md5_ff(b, c, d, a, x[i+15], 22,  1236535329);
  74.  
  75.     a = md5_gg(a, b, c, d, x[i+ 1], 5 , -165796510);
  76.     d = md5_gg(d, a, b, c, x[i+ 6], 9 , -1069501632);
  77.     c = md5_gg(c, d, a, b, x[i+11], 14,  643717713);
  78.     b = md5_gg(b, c, d, a, x[i+ 0], 20, -373897302);
  79.     a = md5_gg(a, b, c, d, x[i+ 5], 5 , -701558691);
  80.     d = md5_gg(d, a, b, c, x[i+10], 9 ,  38016083);
  81.     c = md5_gg(c, d, a, b, x[i+15], 14, -660478335);
  82.     b = md5_gg(b, c, d, a, x[i+ 4], 20, -405537848);
  83.     a = md5_gg(a, b, c, d, x[i+ 9], 5 ,  568446438);
  84.     d = md5_gg(d, a, b, c, x[i+14], 9 , -1019803690);
  85.     c = md5_gg(c, d, a, b, x[i+ 3], 14, -187363961);
  86.     b = md5_gg(b, c, d, a, x[i+ 8], 20,  1163531501);
  87.     a = md5_gg(a, b, c, d, x[i+13], 5 , -1444681467);
  88.     d = md5_gg(d, a, b, c, x[i+ 2], 9 , -51403784);
  89.     c = md5_gg(c, d, a, b, x[i+ 7], 14,  1735328473);
  90.     b = md5_gg(b, c, d, a, x[i+12], 20, -1926607734);
  91.  
  92.     a = md5_hh(a, b, c, d, x[i+ 5], 4 , -378558);
  93.     d = md5_hh(d, a, b, c, x[i+ 8], 11, -2022574463);
  94.     c = md5_hh(c, d, a, b, x[i+11], 16,  1839030562);
  95.     b = md5_hh(b, c, d, a, x[i+14], 23, -35309556);
  96.     a = md5_hh(a, b, c, d, x[i+ 1], 4 , -1530992060);
  97.     d = md5_hh(d, a, b, c, x[i+ 4], 11,  1272893353);
  98.     c = md5_hh(c, d, a, b, x[i+ 7], 16, -155497632);
  99.     b = md5_hh(b, c, d, a, x[i+10], 23, -1094730640);
  100.     a = md5_hh(a, b, c, d, x[i+13], 4 ,  681279174);
  101.     d = md5_hh(d, a, b, c, x[i+ 0], 11, -358537222);
  102.     c = md5_hh(c, d, a, b, x[i+ 3], 16, -722521979);
  103.     b = md5_hh(b, c, d, a, x[i+ 6], 23,  76029189);
  104.     a = md5_hh(a, b, c, d, x[i+ 9], 4 , -640364487);
  105.     d = md5_hh(d, a, b, c, x[i+12], 11, -421815835);
  106.     c = md5_hh(c, d, a, b, x[i+15], 16,  530742520);
  107.     b = md5_hh(b, c, d, a, x[i+ 2], 23, -995338651);
  108.  
  109.     a = md5_ii(a, b, c, d, x[i+ 0], 6 , -198630844);
  110.     d = md5_ii(d, a, b, c, x[i+ 7], 10,  1126891415);
  111.     c = md5_ii(c, d, a, b, x[i+14], 15, -1416354905);
  112.     b = md5_ii(b, c, d, a, x[i+ 5], 21, -57434055);
  113.     a = md5_ii(a, b, c, d, x[i+12], 6 ,  1700485571);
  114.     d = md5_ii(d, a, b, c, x[i+ 3], 10, -1894986606);
  115.     c = md5_ii(c, d, a, b, x[i+10], 15, -1051523);
  116.     b = md5_ii(b, c, d, a, x[i+ 1], 21, -2054922799);
  117.     a = md5_ii(a, b, c, d, x[i+ 8], 6 ,  1873313359);
  118.     d = md5_ii(d, a, b, c, x[i+15], 10, -30611744);
  119.     c = md5_ii(c, d, a, b, x[i+ 6], 15, -1560198380);
  120.     b = md5_ii(b, c, d, a, x[i+13], 21,  1309151649);
  121.     a = md5_ii(a, b, c, d, x[i+ 4], 6 , -145523070);
  122.     d = md5_ii(d, a, b, c, x[i+11], 10, -1120210379);
  123.     c = md5_ii(c, d, a, b, x[i+ 2], 15,  718787259);
  124.     b = md5_ii(b, c, d, a, x[i+ 9], 21, -343485551);
  125.  
  126.     a = safe_add(a, olda);
  127.     b = safe_add(b, oldb);
  128.     c = safe_add(c, oldc);
  129.     d = safe_add(d, oldd);
  130.   }
  131.   return Array(a, b, c, d);
  132.  
  133. }
  134.  
  135. /*
  136.  * These functions implement the four basic operations the algorithm uses.
  137.  */
  138. function md5_cmn(q, a, b, x, s, t)
  139. {
  140.   return safe_add(bit_rol(safe_add(safe_add(a, q), safe_add(x, t)), s),b);
  141. }
  142. function md5_ff(a, b, c, d, x, s, t)
  143. {
  144.   return md5_cmn((b & c) | ((~b) & d), a, b, x, s, t);
  145. }
  146. function md5_gg(a, b, c, d, x, s, t)
  147. {
  148.   return md5_cmn((b & d) | (c & (~d)), a, b, x, s, t);
  149. }
  150. function md5_hh(a, b, c, d, x, s, t)
  151. {
  152.   return md5_cmn(b ^ c ^ d, a, b, x, s, t);
  153. }
  154. function md5_ii(a, b, c, d, x, s, t)
  155. {
  156.   return md5_cmn(c ^ (b | (~d)), a, b, x, s, t);
  157. }
  158.  
  159. /*
  160.  * Calculate the HMAC-MD5, of a key and some data
  161.  */
  162. function core_hmac_md5(key, data)
  163. {
  164.   var bkey = str2binl(key);
  165.   if(bkey.length > 16) bkey = core_md5(bkey, key.length * chrsz);
  166.  
  167.   var ipad = Array(16), opad = Array(16);
  168.   for(var i = 0; i < 16; i++)
  169.   {
  170.     ipad[i] = bkey[i] ^ 0x36363636;
  171.     opad[i] = bkey[i] ^ 0x5C5C5C5C;
  172.   }
  173.  
  174.   var hash = core_md5(ipad.concat(str2binl(data)), 512 + data.length * chrsz);
  175.   return core_md5(opad.concat(hash), 512 + 128);
  176. }
  177.  
  178. /*
  179.  * Add integers, wrapping at 2^32. This uses 16-bit operations internally
  180.  * to work around bugs in some JS interpreters.
  181.  */
  182. function safe_add(x, y)
  183. {
  184.   var lsw = (x & 0xFFFF) + (y & 0xFFFF);
  185.   var msw = (x >> 16) + (y >> 16) + (lsw >> 16);
  186.   return (msw << 16) | (lsw & 0xFFFF);
  187. }
  188.  
  189. /*
  190.  * Bitwise rotate a 32-bit number to the left.
  191.  */
  192. function bit_rol(num, cnt)
  193. {
  194.   return (num << cnt) | (num >>> (32 - cnt));
  195. }
  196.  
  197. /*
  198.  * Convert a string to an array of little-endian words
  199.  * If chrsz is ASCII, characters >255 have their hi-byte silently ignored.
  200.  */
  201. function str2binl(str)
  202. {
  203.   var bin = Array();
  204.   var mask = (1 << chrsz) - 1;
  205.   for(var i = 0; i < str.length * chrsz; i += chrsz)
  206.     bin[i>>5] |= (str.charCodeAt(i / chrsz) & mask) << (i%32);
  207.   return bin;
  208. }
  209.  
  210. /*
  211.  * Convert an array of little-endian words to a string
  212.  */
  213. function binl2str(bin)
  214. {
  215.   var str = "";
  216.   var mask = (1 << chrsz) - 1;
  217.   for(var i = 0; i < bin.length * 32; i += chrsz)
  218.     str += String.fromCharCode((bin[i>>5] >>> (i % 32)) & mask);
  219.   return str;
  220. }
  221.  
  222. /*
  223.  * Convert an array of little-endian words to a hex string.
  224.  */
  225. function binl2hex(binarray)
  226. {
  227.   var hex_tab = hexcase ? "0123456789ABCDEF" : "0123456789abcdef";
  228.   var str = "";
  229.   for(var i = 0; i < binarray.length * 4; i++)
  230.   {
  231.     str += hex_tab.charAt((binarray[i>>] >> ((i%4)*8+4)) & 0xF) +
  232.            hex_tab.charAt((binarray[i>>2] >> ((i%4)*8  )) & 0xF);
  233.   }
  234.   return str;
  235. }
  236.  
  237. /*
  238.  * Convert an array of little-endian words to a base-64 string
  239.  */
  240. function binl2b64(binarray)
  241. {
  242.   var tab = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
  243.   var str = "";
  244.   for(var i = 0; i < binarray.length * 4; i += 3)
  245.   {
  246.     var triplet = (((binarray[i   >> 2] >> 8 * ( i   %4)) & 0xFF) << 16)
  247.                 | (((binarray[i+1 >> 2] >> 8 * ((i+1)%4)) & 0xFF) << 8 )
  248.                 |  ((binarray[i+2 >> 2] >> 8 * ((i+2)%4)) & 0xFF);
  249.     for(var j = 0; j < 4; j++)
  250.     {
  251.       if(i * 8 + j * 6 > binarray.length * 32) str += b64pad;
  252.       else str += tab.charAt((triplet >> 6*(3-j)) & 0x3F);
  253.     }
  254.   }
  255.   return str;
  256. }

base64.js

  1. function Base64() {  
  2.     // private property  
  3.     _keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";  
  4.     // public method for encoding  
  5.     this.encode = function (input) {  
  6.         var output = "";  
  7.         var chr1, chr2, chr3, enc1, enc2, enc3, enc4;  
  8.         var i = 0;  
  9.         input = _utf8_encode(input);  
  10.         while (i < input.length) {  
  11.             chr1 = input.charCodeAt(i++);  
  12.             chr2 = input.charCodeAt(i++);  
  13.             chr3 = input.charCodeAt(i++);  
  14.             enc1 = chr1 >> 2;  
  15.             enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);  
  16.             enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);  
  17.             enc4 = chr3 & 63;  
  18.             if (isNaN(chr2)) {  
  19.                 enc3 = enc4 = 64;  
  20.             } else if (isNaN(chr3)) {  
  21.                 enc4 = 64;  
  22.             }  
  23.             output = output +  
  24.             _keyStr.charAt(enc1) + _keyStr.charAt(enc2) +  
  25.             _keyStr.charAt(enc3) + _keyStr.charAt(enc4);  
  26.         }  
  27.         return output;  
  28.     }  
  29.     // public method for decoding  
  30.     this.decode = function (input) {  
  31.         var output = "";  
  32.         var chr1, chr2, chr3;  
  33.         var enc1, enc2, enc3, enc4;  
  34.         var i = 0;  
  35.         input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");  
  36.         while (i < input.length) {  
  37.             enc1 = _keyStr.indexOf(input.charAt(i++));  
  38.             enc2 = _keyStr.indexOf(input.charAt(i++));  
  39.             enc3 = _keyStr.indexOf(input.charAt(i++));  
  40.             enc4 = _keyStr.indexOf(input.charAt(i++));  
  41.             chr1 = (enc1 << 2) | (enc2 >> 4);  
  42.             chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);  
  43.             chr3 = ((enc3 & 3) << 6) | enc4;  
  44.             output = output + String.fromCharCode(chr1);  
  45.             if (enc3 != 64) {  
  46.                 output = output + String.fromCharCode(chr2);  
  47.             }  
  48.             if (enc4 != 64) {  
  49.                 output = output + String.fromCharCode(chr3);  
  50.             }  
  51.         }  
  52.         output = _utf8_decode(output);  
  53.         return output;  
  54.     }  
  55.     // private method for UTF-8 encoding  
  56.     _utf8_encode = function (string) {  
  57.         string = string.replace(/\r\n/g,"\n");  
  58.         var utftext = "";  
  59.         for (var n = 0; n < string.length; n++) {  
  60.             var c = string.charCodeAt(n);  
  61.             if (c < 128) {  
  62.                 utftext += String.fromCharCode(c);  
  63.             } else if((c > 127) && (c < 2048)) {  
  64.                 utftext += String.fromCharCode((c >> 6) | 192);  
  65.                 utftext += String.fromCharCode((c & 63) | 128);  
  66.             } else {  
  67.                 utftext += String.fromCharCode((c >> 12) | 224);  
  68.                 utftext += String.fromCharCode(((c >> 6) & 63) | 128);  
  69.                 utftext += String.fromCharCode((c & 63) | 128);  
  70.             }  
  71.  
  72.         }  
  73.         return utftext;  
  74.     } 
  75.     // private method for UTF-8 decoding  
  76.     _utf8_decode = function (utftext) {  
  77.         var string = "";  
  78.         var i = 0;  
  79.         var c = c1 = c2 = 0;  
  80.         while ( i < utftext.length ) {  
  81.             c = utftext.charCodeAt(i);  
  82.             if (c < 128) {  
  83.                 string += String.fromCharCode(c);  
  84.                 i++;  
  85.             } else if((c > 191) && (c < 224)) {  
  86.                 c2 = utftext.charCodeAt(i+1);  
  87.                 string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));  
  88.                 i += 2;  
  89.             } else {  
  90.                 c2 = utftext.charCodeAt(i+1);  
  91.                 c3 = utftext.charCodeAt(i+2);  
  92.                 string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));  
  93.                 i += 3;  
  94.             }  
  95.         }  
  96.         return string;  
  97.     }  
  98. }

 

 测试入口test.html 效果如下图

提交
评论区空空如也，赶紧添加一条评论吧 评论 {{counts.commentCount}}
{{comment.name}} {{comment.os}} {{comment.browser}}
{{dateFormatter(comment.createTime)}}

{{comment.message}}

{{comment.reply.name}} {{comment.reply.os}} {{comment.reply.browser}}
{{dateFormatter(comment.reply.createTime)}}

{{comment.reply.message}}

 zzzmh
关于我 留言板

网址导航
{{alert.message}}
留言板 * 站长不经常查看信箱 若有重要事宜联系邮箱 admin@zzzmh.cn 取消 发送
云朵 ChungZH 起航天空 yiranzai 前端大爆炸 Web前端之家 前端博客 shirmy 小宁博客 pdbn LOGI 鄢云峰
Copyright © 2024 上海藏原羚工作室 沪ICP备18011999号 沪公网安备31010602005070号
微信公众号