Macji Pro » 2009

快速创建基于淘宝开放API(TOP)的Firefox扩展

June 1, 2009 - by Macji - HTML/CSS/JS/PHP - javascript, 扩展, firefox

淘宝开放平台项目（TOP： taobao open platform）是淘宝（中国）软件公司面向3rd app开发者，提供API接口和相关开发环境的平台。

嗯, 这里介绍如何通过基于firefox的javascript去获取淘宝API提供的数据, 其实很简单. 获取数据需要签名和相关API方法, 具体请看API文档.

签名方式为 md5(appsecret + key + value .... key + value)然后转大写字母,其中key,value对是除签名和图片外的所有请求参数按key做的升序排列, value无需编码。

通过服务器端比如php, ruby, python等很容易实现签名方式, 但基于浏览器的javascript貌似望而却步, 但是mozilla提供了javascript的本地扩展, 让你用javascript也能实现更复杂的功能, 比如基于firefox的多线程下载工具. 下面给出简单的签名方式.


//去alisoft申请个app，会给他一个ID和CERT_CODE, 签名的时候需要
API_URL = 'http://sip.alisoft.com/sip/rest/',
APP_NAME = 'baotao', 
APP_ID = '22183',
CERT_CODE = 'cebc9bf0031411de8baffe67f4df8a7b';

首先是md5的实现, 其实javascript也实现md5, 网上有现成的算法, 没仔细研究, 拿来直接用, 发现md5中文后, 有问题, 估计是编码问题, 后来找到mozilla开发者中心的一段javascript实现md5的代码, 对其进行简单封装, 用convertFromUnicode对字符进行转码,再md5.


/**
 * md5
 * @return String
 */
var md5 = function(str){
	   var getHexStringFromBinary = function(str){
	  	    var hexchars = '0123456789abcdef';
	   	   var hexrep = new Array(str.length * 2);
	   	   var i;
	   	   for (i = 0; i < str.length; ++i)
	  	    {
			    hexrep[i * 2] = hexchars.charAt((str.charCodeAt(i) >> 4) & 15);
			    hexrep[i * 2 + 1] = hexchars.charAt(str.charCodeAt(i) & 15);
	  	    }
	   	   return hexrep.join('');
	   }
	  var hashMd5Hex = function(str){
	   	   var hash_engine = Components.classes["@mozilla.org/security/hash;1"].createInstance().QueryInterface(Components.interfaces.nsICryptoHash);
	   	   hash_engine.init(hash_engine.MD5);
	   	   var charcodes = new Array();
	   	   for (var i = 0; i < str.length; i++)
	   	   {
	   		 charcodes.push(str.charCodeAt(i));
	   	   }
	   	   hash_engine.update(charcodes, str.length);
	   	   return getHexStringFromBinary(hash_engine.finish(false));
	   }
	   return hashMd5Hex(convertFromUnicode('UTF-8', str));
}

升序排序，其实就是把key拿出来排序，再放回去，php.js (via)


/**
 * ksort
 * @return Array
 */
var ksort = function (array){
	var tmp_arr = {}, keys = [], key_num = 0, key = '', i = 0;

	for (key in array) {
		keys[key_num++] = key;
	}
	keys = keys.sort();
	for (i = 0; i < key_num; i++) {
		key = keys[i];
		tmp_arr[key] = array[key];
	}
	
	return tmp_arr;
};

urlencode，做转码用，也是来自php.js


/**
 * urlencode
 * @return String
 */
var urlencode = function(s){
	var SAFECHARS = "0123456789" +					// Numeric
					"ABCDEFGHIJKLMNOPQRSTUVWXYZ" +	// Alphabetic
					"abcdefghijklmnopqrstuvwxyz" +
					"-_.!~*'()";					// RFC2396 Mark characters
	var HEX = "0123456789ABCDEF";

	var encoded = "";
	for (var i = 0; i < s.length; i++ ) {
		var ch = s.charAt(i);
		if (ch == " ") {
			encoded += "+";				// x-www-urlencoded, rather than %20
		} else if (SAFECHARS.indexOf(ch) != -1) {
			encoded += ch;
		} else {
			var charCode = ch.charCodeAt(0);
			if (charCode > 255) {
				alert( "Unicode Character '" 
						+ ch 
						+ "' cannot be encoded using standard URL encoding.\n" +
						  "(URL encoding only supports 8-bit characters.)\n" +
						  "A space (+) will be substituted." );
				encoded += "+";
			} else {
				encoded += "%";
				encoded += HEX.charAt((charCode >> 4) & 0xF);
				encoded += HEX.charAt(charCode & 0xF);
			}
		}
	} // for
	return encoded;
};

此方法返回url就是签名后的url，在chrome级别里可直接用XMLHttpRequest请求


/**
 * getParameterStr
 * @return String
 */
var getParameterStr = function(arr){
	var s = '', c = 'cebc9bf0031411de8baffe67f4df8a7b';
	arr = ksort(arr);
	
	for(var i in arr){
		if('' != arr[i]){
			if(i == 'sip_timestamp'){
				s += i + '=' + urlencode(arr[i]) + '&';
			}else{
				s += i + '=' + encodeURIComponent(arr[i]) + '&';
				
			}
			c += i + arr[i];
		}
	}

	s += 'sip_sign=' +  md5(c).toUpperCase();
	return s;
}

最后去初始化相关参数，fields字段请参考api说明


return {
	init: function(q, pageNo){
		var arr = parameters;
		arr['sip_timestamp'] = GetDate.init();	
		arr['sip_apiname'] = 'taobao.items.get';
		arr['cid'] = '';
		arr['q'] = q || 'mac';
		
		arr['fields'] = "iid,title,nick,type,cid,pic_path,delist_time,price,post_fee";
		arr['page_no'] = pageNo || 1;
		arr['page_size'] = 50;

		return API_URL + '?' + getParameterStr(arr);				
	}
}

TOP签名还是挺麻烦的，源代码请下载宝淘扩展查看吧。https://addons.mozilla.org/zh-CN/firefox/addon/11309

1 条评论»