加載圖像與承載令牌

我加載在JS這樣的圖像：加載圖像與承載令牌

var img = new Image(); 
img.onload = function() { 
.. 
}; 
img.src = src;

這是可行的，但我意識到，我必須使用OAuth 2服務器端保護我的圖像（如與其他應用程序），這會影響我只是收到401未授權。

這是一個角度應用程序，我有一個攔截器添加授權頭因此，對於所有角度的服務請求到服務器，但在這種情況下，當然 - 不使用攔截器，因爲調用不言在角度上下文中。

任何想法，我可以如何將授權頭添加到獲取請求？

來源

2016-01-29 Marcus

如何提供應用程序？ Node.js的？ IIS？ – mindparse

由.NET WebApi 2.該圖像是作爲REST GET控制器方法實現的方法返回的，並且這將部署在Azure中，所以是的。 – Marcus

可能是http://stackoverflow.com/questions/20997406/force-http-interceptor-in-dynamic-ngsrc-request會讓你在正確的道路上。 – Prashant

只是承載令牌添加到URL：

var img = new Image(); 
img.onload = function() { 
.. 
}; 
img.src = src + '?access_token=mF_9.B5f-4.1JqM';

這至少是OAuth的2規格如何讀取： https://tools.ietf.org/html/rfc6750#section-2.3

雖然這種方法有許多缺點，作者與這種性質的東西一起解決問題，這就是它存在的原因。

來源

2016-01-29 12:55:55

足夠好的解決方案，但需要在服務器上工作。我有非常有限的權限來改變服務器端的東西。 – Marcus

在服務器側如果你具有有限possibilies也能夠調用GETXMLHttpRequest請求與適當access_token和設置圖像src與從響應一個data URI scheme構建與base64編碼如下：

var request = new XMLHttpRequest(); 
request.open('GET','https://dl.content.com/contentfile.jpg', true); 
request.setRequestHeader('Authorization', 'Bearer ' + oauthToken.access_token); 
request.responseType = 'arraybuffer'; 
request.onload = function(e) { 
    var data = new Uint8Array(this.response); 
    var raw = String.fromCharCode.apply(null, data); 
    var base64 = btoa(raw); 
    var src = "data:image;base64," + base64; 

    document.getElementById("image").src = src; 
}; 

request.send();

來源

2016-11-14 21:08:03 manuc66

加載圖像與承載令牌

回答

相關問題