Restituisce l'immagine dall'azione del controller web api mentre è autenticata

Question

Ho una API Web che utilizza l'autenticazione owin con token al portatore. Avrò sia i client web che wpf (vb), che hanno bisogno di chiedere file di immagine dall'api durante l'autenticazione. Le immagini non devono essere restituite su richieste non autenticate.

Finora ho una soluzione di lavoro al ritorno un'immagine mentre non autenticata:

La mia azione di controllo 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; 
} 

E questo è come io lo mostro sul client web:

Questo funziona correttamente, ma ovviamente quando annullo l'attributo autorizza nell'azione precedente, il file di immagine non viene mostrato e ottengo un messaggio 401 (Non autorizzato) per OTTIENE messaggio che chiama l'azione GetFile. Questo perché non esiste un token di accesso sulla richiesta GET.

Potrei usare jQuery per ottenere tramite ajax, ma non so come impostare il risultato in un elemento img.

Come posso impostare il token di accesso per la richiesta http GET chiamando un'azione in un img src o impostare il contenuto dell'immagine nell'elemento img in jQuery? O c'è un modo migliore per farlo del tutto?

Answer 1

Penso che "utilizzare jQuery per ottenere tramite Ajax" funzionerà. Possiamo impostare il token nell'intestazione della richiesta. Si può provare di seguito il codice per il regolatore di 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; 

E di seguito alcune javascript snippet

$.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;" />