Unable to call Azure AD protected API

[rishikeshjadhav]

Hi,

I am trying to call an Azure AD protected WEB API from angular 4 project.

Following is my configuration to initiaize ADAL service,

var config = { instance: "https://login.microsoftonline.com", tenant: "common, clientId: "my-client-id", endpoints: { "my-resource-url": "my-resource-id" } };

I am trying to access an WEB API with following route,

URL: my-resource-url/api/getusername data: "username"

I have used following code for the same in my .ts file,

private adal4HttpService: Adal4HTTPService;

this.adal4HttpService.post(URL, data) catchError(this.handleError('post')) );

Above method calls "Adal4HTTPService.prototype.post" from file adal4-http.service which in turn calls "sendRequest" method from file adal4-http.service which in turn calls "Adal4Service.prototype.acquireToken" from file adal4.service which in turn calls "AuthenticationContext.prototype.acquireToken" from adal.js which in turn calls "AuthenticationContext.prototype._renewToken" from adal.js

where a token is acquired using iFrame and below url

"https://login.microsoftonline.com/common/oauth2/authorize?response_type=token&client_id=my-client-id&resource=my-resource-id&redirect_uri=http%3A%2F%2Flocalhost%3A4200%2Fhome&state=d2301986-e41c-433e-af04-e2ef85929c62%7C2f9930c7-1ffc-4b40-87d8-8df0896ce904&client-request-id=e70586b1-8ca4-4d5a-a521-ad6489a7cbbe&x-client-SKU=Js&x-client-Ver=1.0.15&prompt=none&login_hint=username&domain_hint=domain"

Here i am getting access token for the resource WEB API (Azure AD protected WEB API)

But I am getting following error

data.service.ts:29 TypeError: _this.http.request(...).catch is not a function at MergeMapSubscriber.eval [as project] (adal4-http.service.js:157) at MergeMapSubscriber._tryNext (mergeMap.js:122) at MergeMapSubscriber._next (mergeMap.js:112) at MergeMapSubscriber.Subscriber.next (Subscriber.js:89) at AsyncSubject._subscribe (AsyncSubject.js:26) at AsyncSubject.Observable._trySubscribe (Observable.js:172) at AsyncSubject.Subject._trySubscribe (Subject.js:97) at AsyncSubject.Observable.subscribe (Observable.js:160) at BoundCallbackObservable._subscribe (BoundCallbackObservable.js:213) at BoundCallbackObservable.Observable._trySubscribe (Observable.js:172)

when below line is executed

_this.http.request(url, options1) .catch(_this.handleError);

Anything i am missing from configuration standpoint? Any help on this is appreciated.

[4F2E4A2E]

We also are very interested in the renew functionality while using angular and adal. It seams not to be possible to do it without adal-iframe, but also not possible with angular without breaking the app.

[rishikeshjadhav]

I wrote a custom angular HTTP service in place of Adal4HTTPService and got this working.

[4F2E4A2E]

Would you please - for the love of the web - share and describe it? Maybe a gist?

[kivancbakdi]

@rishikeshjadhav please share it...

[thetucko]

I managed to make it working using this link couple minutes ago. https://spikesapps.wordpress.com/2017/07/27/securing-an-angular-application-with-azure-ad/

note: in order to Adal4Service.get starts working i had to change manifest file on azure (calling website) and change "oauth2AllowImplicitFlow": true, (from false to true).

[rishikeshjadhav]

@4F2E4A2E @kivancbakdi

Extremely sorry for super delayed response here. Here is the link for the services that i created

https://github.com/rishikeshjadhav/angular-adal-4