How to access Graph API from Web API in SPA application

10
votes

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.

4
azureazure-active-directoryadalazure-ad-graph-api
Did you see the sample:github.com/Azure-Samples/… – Lily_user4045
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. – Vladimir Makaev
Ok, I see. I provide you some samples, hope they can help you. – Lily_user4045
@VladimirMakaev, you'd like to access GraphAPI using the user credentials ? – Thomas
I want to achieve the same thing as Vladimir. Have you found a way to do this? – Elferone

4 Answers

0
votes

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.

0
votes

This should get you started

How to use Microsoft Graph and Office 365 API in a Service or in a Windows App/UWP without a graphical interface

https://blogs.msdn.microsoft.com/laurelle/2016/02/12/how-to-use-microsoft-graph-and-office-365-api-in-a-service-or-in-a-windows-appuwp-without-a-graphical-interface/

0
votes

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

0
votes

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.