0

I have some trouble trying to load data from an Azure authenticated webservice. I have configured Adal / Adal-Angular to work with the authentication. I can log in, log out as a user, access pages when authorized etc.

The problem I am facing is loading an ng-src in an IMG tag. I retrieve the actual URL from a REST service. When I load it up in my ng-src tag, the image does not show. When I load the URL in my browser address bar, I can see the URL beging redirected to the authentication portal, then redirected back to the actual image. After the redirect is complete, I am able to load up the image perfectly well in my view.

The image URL seems to need that redirect in order to figure out wether the user is authorized to view that URL. My workaround would be injecting an iframe onto the page, in which I let the browser resolve authentication, then reload the ng-src tag. I would guess there has to be a better, more compliant way of resolving the authentication for image URLs (of other embedded content, for that matter). If anyone has a better suggestion, I would love to hear it!

Joran
  • 31
  • 3
  • Is the actual URL of image from the REST service in the Web Apps authenticated by AAD? – Gary Liu Jul 08 '16 at 11:58
  • Yeah, did some soulsearching. The problem I was facing was that the content gets loaded through the $http interceptor, the image URL via ng-src was not. Turns out, that it indeed does not use $http interceptor. My problem was solved with accepted answer from this related question: http://stackoverflow.com/questions/20997406/force-http-interceptor-in-dynamic-ngsrc-request – Joran Jul 08 '16 at 18:46

1 Answers1

0

So, turned out the problem was that ng-src does not use the $http interceptor when loading a source. This got me searching in that direction and the accepted answer from this related question does work, as far as I can tell at the moment.

Force HTTP interceptor in dynamic ngSrc request

Community
  • 1
  • 1
Joran
  • 31
  • 3