Return 来自网络的图像 api 控制器在认证时的动作

Question

我有一个 Web api，它使用带有不记名令牌的 owin 身份验证。我将有 web 和 wpf (vb) 客户端，需要在验证时从 api 请求图像文件。未经身份验证的请求不应返回图像。

到目前为止，我有一个在未经过身份验证的情况下返回图像的有效解决方案：

我在 C# 中的控制器操作：

//[Authorize]
public HttpResponseMessage GetFile()
{
    string localFilePath = "C:/Path/ImageOnServerDisk.png";

    HttpResponseMessage response = new HttpResponseMessage(HttpStatusCode.OK);
    response.Content = new StreamContent(new FileStream(localFilePath, FileMode.Open, FileAccess.Read));
    response.Content.Headers.ContentDisposition = new System.Net.Http.Headers.ContentDispositionHeaderValue("attachment");
    response.Content.Headers.ContentDisposition.FileName = "myImage.png";
    response.Content.Headers.ContentType = new System.Net.Http.Headers.MediaTypeHeaderValue("image/png");

    return response;
}

这就是我在 Web 客户端上显示它的方式：

<img src="/api/Secure/GetFile" id="img" />

这工作正常，但当然当我取消注释上述操作中的授权属性时，图像文件没有显示，并且我收到一条 401（未授权）消息，用于调用 GetFile 操作的 GET 消息。这是因为 GET 请求上没有访问令牌。

我可以使用 jQuery 通过 ajax 获取 GET，但我不知道如何将结果设置到 img 元素中。

如何为调用 img src 中的操作的 http GET 请求设置访问令牌，或将图像内容设置到 jQuery 中的 img 元素中？还是有更好的方法来完全做到这一点？

Answer 1

我认为 "use jQuery to GET via ajax" 可以。我们可以将令牌设置到请求中 header。您可以为 api 控制器尝试以下代码：

        var root = AppDomain.CurrentDomain.SetupInformation.ApplicationBase;
        var path = Path.Combine(root, "App_Data/Koala.jpg");

        var bytes = File.ReadAllBytes(path);
        var base64 = Convert.ToBase64String(bytes);

        return "data:image/jpeg;base64," + base64;

下面是一些javascript片段

    $.ajax({
        url: '//localhost:882/api/image',
        type: "GET",
        success: function (data) {
            $('#testimg').attr('src', data);
            $('#testimg').attr('style', 'display: block;');
        }
    });

Html

<img id="testimg" src="#" alt="Get from webapi" style="display: none;" />

Return 来自网络的图像 api 控制器在认证时的动作

Return image from web api controller action while authenticated

c#

jquery

asp.net-web-api

owin

asp.net-web-api2