带有 HTTP 基本身份验证的 PhoneGap FileTransfer答案

【问题标题】：PhoneGap FileTransfer with HTTP basic authentication带有 HTTP 基本身份验证的 PhoneGap FileTransfer
【发布时间】：2017-05-03 23:13:15
【问题描述】：

我正在尝试使用FileTransfer method 将文件从PhoneGap 上传到服务器。我需要为此上传启用 HTTP 基本身份验证。

以下是相关代码：

    var options = new FileUploadOptions({
        fileKey: "file",
        params: {
            id: my_id,
            headers: { 'Authorization': _make_authstr() }
        }
    });
    var ft = new FileTransfer();
    ft.upload(image, 'http://locahost:8000/api/upload', success, error, options);

Looking over the PhoneGap source code 似乎我可以通过在“params”列表中包含“headers”来指定授权标头，就像我在上面所做的那样：

      JSONObject headers = params.getJSONObject("headers");
      for (Iterator iter = headers.keys(); iter.hasNext();)
      {
        String headerKey = iter.next().toString();
        conn.setRequestProperty(headerKey, headers.getString(headerKey));
      }

但是，这似乎并没有真正添加标题。

那么：有没有办法使用 PhoneGap 的 FileTransfer 对 iPhone 和 Android 进行 HTTP 基本身份验证？

【问题讨论】：

对于任何想知道的人，上面列出的这种方法对我有用。只需要添加这个：params.headers = {Authorization: 'Basic ' + creds}; options.params = params;
headers 需要去 options.headers 没有添加到 options.params.____

标签： authentication cordova

【解决方案1】：

您可以通过将自定义标题添加到 options 而不是 params 来添加自定义标题，如下所示：

authHeaderValue = function(username, password) {
    var tok = username + ':' + password;
    var hash = btoa(tok);
    return "Basic " + hash;
};

options.headers = {'Authorization': authHeaderValue('Bob', '1234') };

【讨论】：

仅供参考，我在 iOS 中遇到了这个问题（截至 13 年 1 月 14 日）。在 Android 和 BB 中运行良好...
您使用的是哪个版本的phonegap？我在 2.3.0 的 iOS 上取得了成功
2.2.0...这很有趣，也许我应该尝试升级？您之前在使用 2.2.0 时遇到过问题吗？
是的，但我也（错误地）将标题放在参数中，就像 OP 一样。
哦，我也在这样做：params.headers = {Authorization: 'Basic ' + loginCreds} ; 不对？

【解决方案2】：

headers 数组的正确位置是选项的直接子级。选项->标题。不是选项-> 参数-> 标题。这是一个例子：

//**************************************************************
//Variables used below:
//1 - image_name: contains the actual name of the image file.
//2 - token: contains authorization token. In my case, JWT.
//3 - UPLOAD_URL: URL to which the file will be uploaded.
//4 - image_full_path - Full path for the picture to be uploaded.
//***************************************************************
var options = {
  fileKey: "file",
  fileName: 'picture',
  chunkedMode: false,
  mimeType: "multipart/form-data",
  params : {'fileName': image_name}
};

var headers = {'Authorization':token};

//Here is the magic!
options.headers = headers;
//NOTE: I creaed a separate object for headers to better exemplify what
// is going on here. Obviously you can simply add the header entry
// directly to options object above.

$cordovaFileTransfer.upload(UPLOAD_URL, image_full_path, options).then(
   function(result) {
      //do whatever with the result here.
 });

这里是官方文档：https://github.com/apache/cordova-plugin-file-transfer

【讨论】：

【解决方案3】：

您可以自己创建授权标头。但您也可以像这样在 url 中输入凭据：

var username = "test", password = "pass";     
var uri = encodeURI("http://"+username + ':' + password +"@localhost:8000/api/upload");

参见 FileTransfer.js 的实现（第 45 行）：

function getBasicAuthHeader(urlString) {
var header =  null;


// This is changed due to MS Windows doesn't support credentials in http uris
// so we detect them by regexp and strip off from result url
// Proof: http://social.msdn.microsoft.com/Forums/windowsapps/en-US/a327cf3c-f033-4a54-8b7f-03c56ba3203f/windows-foundation-uri-security-problem

if (window.btoa) {
    var credentials = getUrlCredentials(urlString);
    if (credentials) {
        var authHeader = "Authorization";
        var authHeaderValue = "Basic " + window.btoa(credentials);

        header = {
            name : authHeader,
            value : authHeaderValue
        };
    }
}

return header;
}

【讨论】：