MVC在View中调用外部API并添加认证头

时间:2015-07-24 00:23:23

标签: asp.net-mvc azure asp.net-web-api

我正在开发一个MVC应用程序,该应用程序托管在Azure云服务中的Web角色上。我想要做的是在用户按下按钮后发送API发布请求。我在我的视图中有这个多部分表单,而不是调用控制器,我只想将此数据发布到action属性中特定的外部API。代码如下所示。

@using (Html.BeginForm(null, null, FormMethod.Post, new { enctype = "multipart/form-data", @action = "http://localhost:55637/api/dataingestion/upload" }))
{
    <div>
        <input type="file" name="FileUpload" />
        <input type="text" name="filePath" />
    </div>

    <div>
        <button>Upload</button>
    </div>
}

外部API就像这样

由于该API受Azure Active Directory保护,因此我需要将身份验证令牌放在请求的标头中。令牌在一个控制器方法中获取并存储在TempData字典中,如下所示。

我的问题是如何将此令牌传递给View,当View尝试发布多部分表单数据时,如何将令牌添加到请求的标头中?

public ActionResult Authenticate()
    {

        Uri redirectURI = new Uri(redirectURL);

        try
        {
            AuthenticationContext ac = new AuthenticationContext(authority);
            AuthenticationResult ar = ac.AcquireToken(resourceID, clientID, redirectURI);
            string type = ar.AccessTokenType;
            string token = ar.AccessToken;
            TempData["token"] = token;
        }

        catch (Exception e)
        {
            //If user cancel the login then stay at home page
            return RedirectToAction("Index");
        }

        return RedirectToAction("UploadViwe");

    }

任何帮助将不胜感激!

1 个答案:

答案 0 :(得分:0)

您可以使用ViewBag / ModelBinding将令牌发送到View,并将其绑定到页面内的HiddenFields - 如果您需要更多帮助,请告诉我。

一旦令牌在页面上可用,你需要通过在文件上传之前添加事件监听器来拦截调用,这可以使用jquery文件post https://blueimp.github.io/jQuery-File-Upload/来完成,jquery文件上传给出了一堆回调这里提到的选项https://github.com/blueimp/jQuery-File-Upload/wiki/Options#callback-options

一旦您加入了侦听器,就可以添加自定义标头,如下例所示。

&#13;
&#13;
$('#fileupload').addClass('fileupload-processing');
  $.ajax({
    url: $('#fileupload').fileupload('option', 'url'),
    dataType: 'json',
  type: 'GET',
  beforeSend: function(xhr) {
    xhr.setRequestHeader('Authorization', "[token here]");
  }
&#13;
&#13;
&#13;

或者这个例子

&#13;
&#13;
$('#upload_btn').fileupload({
    singleFileUploads: true,
    beforeSend: function(xhr, data) {
        var file = data.files[0];
        xhr.setRequestHeader('[Header name]', '[Header Value]');
    },
});
&#13;
&#13;
&#13;