通过身份验证时从web api控制器操作返回图像

本文关键字：控制器 操作 返回 图像 api web 身份验证 | 更新日期: 2023-09-27 18:00:46

我有一个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;
}

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

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

这很好，但当然，当我在上面的操作中取消对authorize属性的注释时，图像文件不会显示，并且我会收到一条401（Unauthorized）消息，用于调用GetFile操作的get消息。这是因为GET请求上没有访问令牌。

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

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

通过身份验证时从web api控制器操作返回图像

我认为"使用jQuery通过ajax获取"会起作用。我们可以在请求头中设置令牌。您可以尝试下面的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;" />
相关文章：