How to access Graph API from Web API in SPA application

Question

I have an Angular application that talks to the WebAPI and the users are authenticated against Azure Active Directory

I followed the sample here https://github.com/Azure-Samples/active-directory-angularjs-singlepageapp-dotnet-webapi and was able to authenticate user against AD and pass that along to the Web API.

However I want to access the Graph API in the Web API and get the current user profile information. How can I set it up?

Updated to give more context on the setup:

I have a web site (site.domain1.com) that hosts html and javascript files which makes a SPA application. I have Web API hosted on api.domain2.com. The authentication is against Azure AD using OAuth implicit flow with ADAL.js and angular-adal. I want to authenticate in SPA to get the accessToken for the API. And I want in the API as the part of the request to query Graph API to get more information about current user logged in.

I'm able to get the accessToken for the API and it produces the Claims Principal currently. The problem is to query the Graph API with the current identity I have in the Web API.

Update:

I don't want to give Admin Privileges to the Web API but I rather want to forward the user consent for just the 'Read user profile" from browser to the web site and to the web api.

I used similar approach to On Behalf Of sample located here https://github.com/Azure-Samples/active-directory-dotnet-webapi-onbehalfof

The problem that it worked for my test AD and didn't work for production AD. Saying that user needs to concent the App before using the Graph Api.(For prodution AD I only had user could add user privileges but not the application privileges. My guess is for that scheme to work I needed Global Admin of the AD to concent first). Eventually I ended up merging Azure AD applications for Web Site and Web API together and it worked with the same On Behalf Of approach with Bootstrap Tokens. But I want to know how to make it work properly with 2 Applications.

Heathheathberry

Did you see the sample:github.com/Azure-Samples/… – Ptolemaeus

Yes I did. Thx for the link. The difference is that in this example they access the Graph API from JavaScript but I want to do that from the Web API. It works for me as well if I access the Graph API from the JavaScript but I want to do that from the Web API. – Heathheathberry

Ok, I see. I provide you some samples, hope they can help you. – Ptolemaeus

@VladimirMakaev, you'd like to access GraphAPI using the user credentials ? – Striking

Yes I want to access the Graph API on behalf of the user that signs in on the web site, which uses the web api, which eventually uses the graph api. So I don't want to give admin privileges to web api. See second update for more details – Heathheathberry

I want to achieve the same thing as Vladimir. Have you found a way to do this? – Skidproof

same here. The Azure AD folks really do need a sample for this scenario. – Hurryscurry

Answer 1

Please see the sample: https://github.com/Azure-Samples/active-directory-dotnet-graphapi-web. There are some code to access Graph API and get user profile in the sample:

ClientCredential credential = new ClientCredential(clientId, appKey);
AuthenticationResult result = authContext.AcquireTokenSilent(graphResourceId, credential, new UserIdentifier(userObjectID, UserIdentifierType.UniqueId));

// Call the Graph API manually and retrieve the user's profile.
string requestUrl = String.Format(CultureInfo.InvariantCulture, graphUserUrl, HttpUtility.UrlEncode(tenantId));
HttpClient client = new HttpClient();
HttpRequestMessage request = new HttpRequestMessage(HttpMethod.Get, requestUrl);
request.Headers.Authorization = new AuthenticationHeaderValue("Bearer", result.AccessToken);
HttpResponseMessage response = await client.SendAsync(request);

// Return the user's profile in the view.
if (response.IsSuccessStatusCode) {
    string responseString = await response.Content.ReadAsStringAsync();
    profile = JsonConvert.DeserializeObject<UserProfile>(responseString);
}

You could see more information from here: https://azure.microsoft.com/en-us/documentation/articles/active-directory-code-samples/#calling-azure-ad-graph-api

Ptolemaeus

Thanks. This sample is not really covering my setup here. The biggest difference is that I have JavaScript client and Web API which are supposed to be different hosts so the cookie auth wouldn't work. There is probably the way to make it in a way Angular client authenticates against the Web API using OpenId Connect which is authenticating against Azure AD but it needs to be Token Based from the Angular to the WebApi. I'll try to investigate more but it doesn't look to be strainghtforward to me – Heathheathberry

Why do you deploy in different hosts? I cant understand your intention completely. You could get more help if you provide more information here. Thanks. – Ptolemaeus

Well if I want for my components to have a separate deployment cycle I might wanna do that. Or the API can be generic and used by other SPA applications. – Heathheathberry

I have similar use case for Calling PowrBI APIs. I have a web API hosted on server1 which is supposed to give call to PowerBI API on the signed in user's behalf. User would perform sign in to an Angular Client App which is protected with Azure AD and get the access token for the APIs secured by Azure AD. This custom API would in turn call PowerBI API on behalf of this signed in user. Please suggest. – Sutlej

Answer 2

Permissions are configurable inside your App configuration page in Azure,You select what you wish to let the App access.

As for confirmation you as admin have a choice. Either the user accepts to share data with your app or admin confirm for all under a tenant.

That's the correct way. My frontend and backend work that way.

Viaduct

Answer 3

So I know this is an old one, but I just ran across it because I have the same issue / setup. It took some digging but I think this link might help any of those out there with the same issue.

https://azure.microsoft.com/en-us/resources/samples/active-directory-dotnet-webapi-onbehalfof/

This uses both a WPF client and a SPA with a separate API and calls to the Graph API from the web API not the spa or client.

Good luck all.

Matney

Link is not working – Attainder