Bild von Web-API-Controller-Aktion zurückgeben, während authentifiziert

Question

Ich habe eine Web-API, die Owin-Authentifizierung mit Bearer Token verwendet. Ich werde sowohl Web- als auch Wpf (Vb) -Clients haben, die Bilddateien von der API anfordern müssen, während sie authentifiziert sind. Die Bilder sollten nicht auf nicht authentifizierten Anfragen zurückgegeben werden.

Bisher habe ich eine funktionierende Lösung, die ein Bild auf Rückkehr, während nicht authentifiziert:

Mein Controller-Aktion in 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; 
} 

Und das ist, wie ich es auf dem Web-Client angezeigt werden:

Dies funktioniert gut, aber natürlich, wenn ich das Autorisierung Attribut in der obigen Aktion auskommentieren, wird die Bilddatei nicht angezeigt und ich bekomme eine 401 (Unauthorized) Nachricht für die GET-Nachricht, die die GetFile-Aktion aufruft. Dies liegt daran, dass für die GET-Anforderung kein Zugriffstoken vorhanden ist.

Ich könnte jQuery verwenden, um über AJAX zu erhalten, aber ich weiß nicht, wie Sie das Ergebnis in ein Element img festlegen.

Wie kann ich entweder das Zugriffstoken für die http GET-Anforderung festlegen, die eine Aktion in einem img src aufruft, oder den Bildinhalt in das img-Element in jQuery setzen? Oder gibt es einen besseren Weg, dies alles zu tun?

Answer 1

Ich denke, "jQuery zu GET über Ajax verwenden" wird funktionieren. Wir können das Token in den Anfrage-Header setzen. Sie können unter Code für api Controller versuchen:

 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; 

Und unten ist einige 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;" />