浏览器端使用javascript调用腾讯翻译api

最近在学习的小玩意，发现腾讯的文档十分坑爹，里面有很多错误的指示。

不过腾讯的机器翻译还是很牛的，我觉得翻译水准比谷歌好很多。

腾讯的机器翻译貌似在试用阶段，不收费，用QQ或微信登录即可申请使用。

首先获得SecretId和SecretKey，最好是创建一个子用户，因为这两个“秘密”都要明文写在js里。创建一个工程，这样就有了ProjectId。

准备好如下的参数：

var reqParams = [
         [ "Action", "TextTranslate" ],
         [ "Nonce", Nonce ],  // 随机整数
         [ "ProjectId", ProjectId],
         ["Region", "ap-beijing"],
         ["SecretId", SecretId],
         ["Source","auto"],  // 自动检测要翻译的文本的语种
         ["SourceText", sourceText],  // 要翻译的文本。生成签名时，必须使用原文本，即没有做uri编码的
         ["Target","zh"],  // 翻译成哪个语种，这里是翻译成中文
         ["Timestamp",timestamp ],  // 时间戳，以秒为单位，而js里用Date对象获取的时间戳是毫秒的，注意。腾讯文档说时间戳是0时区的，但其实就是东八区（北京时区）
 ["Version","2018-03-21"]
];

上面是一个嵌套的数组，或者说二维数组，这是为了方便排序（上面的顺序已经是排好了的）。必须先按参数的字母顺序排序后，拼成字符串，再做签名。

参数对转字符串函数：

// 参数对转成字符串
function paramsToStr(params)
{
    // 按参数名的字典序排序

    params.sort(function(a,b){
        if(a[0] < b[0]) return -1;
        else if(a[0] > b[0]) return 1;
        return 0;
    });

    // 连成字符串

    var parPairStrArr = [];
    for (var i in params)
    {
        var par = params[i];
        var parStr = par.join("=");
        parPairStrArr.push(parStr);
    }
    var str = parPairStrArr.join("&");
    return str;
}

有了参数字符串，再构造签名用的字符串，它需要包含请求方法、请求路径、请求参数。

// 签名原文字符串
    var signStr = reqMethod + makeBaseUrl(host, hostPath) + "?" + paramsStr;  // reqMethod 就是 GET 或 POST
// makeBaseUrl 只是简单的返回了腾讯翻译的域名（不包括https://），在这里是tmt.tencentcloudapi.com

    // 签名
    var hs = CryptoJS.HmacSHA1(signStr, SecretKey);
    var rawSig = CryptoJS.enc.Base64.stringify(hs);
    console.log("rawSig=" + rawSig);
    var sig = encodeURIComponent(rawSig);  // 必须使用 encodeURIComponent，对base64字符串中的特殊字符也做uri编码
    return sig;

获取到 sig 后，下面要生成真正用于http请求的url，在这里使用 GET 方法，所以参数都直接附在Url中。这时，sourceText，也就是待翻译文本，需要先把空格替换成+号、在做uri编码。

var iSourceText = reqParams.findIndex((p)=>(p[0]=="SourceText"));
    reqParams[iSourceText][1] = encodeURI(sourceText.replace(/\ /g,"+"));
    var paramsStr = paramsToStr(reqParams);

    var url = "https://" + makeBaseUrl(host, hostPath) + "?" + paramsStr + "&Signature=" + sig;
    console.log("url=" + url);

接下来就是使用 XMLHttpRequest 做http请求了。但是腾讯翻译服务器那边没有允许跨域。可以装个插件解决此问题。

允许浏览器跨域请求http的插件：https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi

完整代码：

 // 参数对转成字符串
 function paramsToStr(params)
 {
     // 按参数名的字典序排序

     params.sort(function(a,b){
         if(a[0] < b[0]) return -1;
         else if(a[0] > b[0]) return 1;
         return 0;
     });

     // 连成字符串

     var parPairStrArr = [];
     for (var i in params)
     {
         var par = params[i];
         var parStr = par.join("=");
         parPairStrArr.push(parStr);
     }
     var str = parPairStrArr.join("&");
     return str;
 }

 function makeBaseUrl(host, hostPath)
 {
     return host + hostPath;
 }

 // 声称签名
 function makeSignature(reqMethod, host, hostPath, reqParams)
 {
     var paramsStr = paramsToStr(reqParams);

     // 签名原文字符串
     var signStr = reqMethod + makeBaseUrl(host, hostPath) + "?" + paramsStr;

     // 签名
     var hs = CryptoJS.HmacSHA1(signStr, SecretKey);
     var rawSig = CryptoJS.enc.Base64.stringify(hs);
     console.log("rawSig=" + rawSig);
     var sig = encodeURIComponent(rawSig);
     return sig;
 }

 // 发送翻译请求
 function sendTrans(sourceText, cb)
 {
     if(sourceText == null || sourceText == "")
     {
         cb("");
         return;
     }

     var SecretId = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX";
     var SecretKey = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXX";

     var reqMethod = "GET";
     var host = "tmt.tencentcloudapi.com";
     var hostPath = "/";

     var Nonce = Math.floor(Math.random() * 1000000000);
     var date = new Date();
     var timestamp = Math.floor(date.getTime() / 1000);

     var reqParams = [
         [ "Action", "TextTranslate" ],
         [ "Nonce", Nonce ],
         [ "ProjectId", xxxxxxxx],
         ["Region", "ap-beijing"],
         ["SecretId", SecretId],
         ["Source","auto"],
         ["SourceText", sourceText],  // 生成签名时，使用原文本
         ["Target","zh"],
         ["Timestamp",timestamp ],
         ["Version","2018-03-21"]
     ];

     // 生成签名
     var sig = makeSignature(reqMethod, host, hostPath, reqParams);

     // 原文本中所有的空格替换成+号，然后uri编码
     var iSourceText = reqParams.findIndex((p)=>(p[0]=="SourceText"));
     reqParams[iSourceText][1] = encodeURI(sourceText.replace(/\ /g,"+"));
     var paramsStr = paramsToStr(reqParams);

     var url = "https://" + makeBaseUrl(host, hostPath) + "?" + paramsStr + "&Signature=" + sig;
     console.log("url=" + url);

     var xhr = new XMLHttpRequest();
     xhr.timeout = 3000;
     xhr.ontimeout = function()
     {
         cb("超时，翻译失败");
     };
     xhr.onerror = function()
     {
         cb("错误，翻译失败");
     };

     xhr.open(reqMethod, url, true);
     xhr.responseType = "json";
     var sendRet = xhr.send();
     xhr.onreadystatechange = function()
     {
         if(xhr.readyState == 4)
         {
             if(xhr.status == 200 || xhr.status == 304)
             {
                 var ret = xhr.response;
                 cb(ret.Response.TargetText);
             }
             else
             {
                 cb(xhr.responseText);
             }
         }
     };
 }