Accessing Office Graph apis with Sharepoint Online login? - angularjs

We've been running an Angular app in a custom masterpage during the last year, using the Sharepoint REST api to retrieve user properties, data from lists etc., which has been working fine. As the application is hosted on Sharepoint Online, accessing the page requires a login thus making the request digest available so further authentication is not necessary.
Now however, we want to start using some of the functionality in the Microsoft Graph API. From what I can gather this requires OAuth2 authentication against the Azure Active Directory, involving among other things a redirect to the AAD login page.
Does this mean I have to:
1) Login via the organizations (standard Microsoft) login page to access the Sharepoint Online site.
2) Redirect to the Azure AD login page and back again?
Or can I leverage the login that the user already did when logging into Sharepoint Online?
Sorry if the question is a bit vague, we are all still very new to this.

When registering your application on Azure AD you will give the app access to Files/Sharepoint REST api and Microsoft Graph API. See this picture the app has access to several apis (Exchange, Graph and AD) you must add sharepoint APIs in your case.
Regarding the authentication, I am afraid that the Sharepoint model does not provide a token that will enable you to request the Graph API see this. You will have two authentications, one to access the Sharepoint site, as you said, and the other "within" the sharepoint iframed add-in to log into your AAD's registered app. This will be an OAUTH process through login.microsoft.com. Have a look at my Outlook add-in Keluro Mail Team on the Office store, I think it is similar to what you want to achieve.

You can use the same token from graph.microsoft.com. I have a sample using Asp.Net Core 1.0 and the.Net ADAL but the same authentication flow is used when using ASP.NET 4.6. Just make your auth request against ms graph on startup then acquire access token to auth against SharePoint.
https://github.com/edrohler/com.ericrohler
Hope this helps.

Related

How does client credential flow work in Workload identity federation?

For my current ASP.NET Core MVC application I authenticate directly with a web app registered in Azure AD Portal. This provides me with an access token so on the backend of my web application I can use MS Graph with my users specific account (ie add files to their onedrive , email, etc). However, my organization also has Okta which a lot of applications authenticate against. So I was trying to determine to authenticate through Okta (which has a much cleaner sign in process IMO) as well as authenticate against Azure AD and get an access token. Through my research I found something in my web application registration in Azure AD called Workload Identity Federation. This led me to this useful video
https://www.youtube.com/watch?v=wZ0gCJYMUKI
and also microsofts info site:
https://learn.microsoft.com/en-us/azure/active-directory/develop/workload-identity-federation
This seems to answer what I want which is to use Okta but allow me to still use MS Graph for my users since it will authenticate against Azure AD (correct me if I am wrong and this is for something else). My issue is none of these resources really go into depth regarding how the access token is passed to my application so I can use MS Graph. My research this is called client credential flow since my application only has delegated permissions so it requires the users to log in and it basically allows my web app to act on their behalf when using MS Graph. So I am trying to understand and fill this void of information regarding how client credential flow fits into Workload Identity Federation and is this the solution to my problem.

Office-Addin Single Sign On and API Scopes

The Office Addin for Excel provides the method:
OfficeRuntime.auth.getAccessToken(OfficeRuneTime.authOptions)
to call the Azure Active Directory, log in the user and gain access to the users profile. The method brings up a dialog box asking the users consent for the Office App to access their profile. The consent box also includes the grants to my Web App (Angular web site that runs in the Excel Taskpane) and includes the words "If you accept, will also have access to your user profile information"
All good. But my Web App communicates with my API, which requires an additional granting of consent for my API to access the users profile.
Is there any way to cause the dialog box invoked by 'getAcccessToken' to also grant permission to my API?
When I login using MSAL as a fallback method (not getAccessToken(), but using an excel dialog box with MSAL configured as per the various Microsoft Walkthoughts), the consent box DOES include both my WebApp and my WebAPI. And authentication works correctly.
I note that the Manifest file has a tag. I had hoped that adding the Scope to my API in here would cause the Office-Addin to request consent to it, but no banana, it does nothing.
Any Ideas?
I do note that getAccessToken() deliberately does not return an access token to MS Graph, with the Microsoft Documentation citing 'security concerns', and such access to Graph must be via Server Side Code using the On-Behalf-Of flow, perhaps similar reasoning does not permit me to gain consent to any API using getAccessToken(), but what then are these section in the manifest file for? I have really struggled to get SSO working with Office Addins, there are so many nuances and unexpected behaviours.
The getAccessToken method calls the Azure Active Directory V 2.0 endpoint to get an access token to your add-in's web application. That enables add-ins to identify users. Server-side code can use this token to access Microsoft Graph for the add-in's web application by using the "on behalf of" OAuth flow. This API requires a single sign-on configuration that bridges the add-in to an Azure application. Office users sign-in with Organizational Accounts and Microsoft Accounts. Microsoft Azure returns tokens intended for both user account types to access resources in the Microsoft Graph. Read more about that in the Microsoft identity platform and OAuth 2.0 On-Behalf-Of flow article.
In answer to my own question,
It is NOT possible to cause the dialog box invoked by 'getAcccessToken' to also grant permission to my API
I have written a lengthy response to this in my answer to this question
Office-Addin MSAL Single Sign In SSO: How to Refresh the Access Token?

Azure AD Authentication of Angular app with MVC Core on Azure AppService

I'm investigating options for adding AzureAD authentication to Angular SPA application with .NET core backend. I'm using VS 2019 MVC project with Angular (same as dotnet new Angular is producing). It's using .NET Core 3.1 and Angular 8.
From what I learned so far I have 3 options:
Built in Azure App Service Authentication
Adal.js - looks like the older brother of,
MSAL.js - which after making it work locally with Azure AD I learned on this page that "At this time, AAD V2 (including MSAL) is not supported for Azure App Services and Azure Functions. Please check back for updates." I couldn't make it work on Azure today so maybe this Note is for a good reason.
EDIT: Interestingly now point 3 works for me on Azure App Service so I'm not sure what this note means.
My requirements so far are that no screen is accessible to users unless they log in and that I will be able to read information about them from Azure AD - Roles, groups.
I never worked with Angular and I don't have any experience with Azure AD and I need someone that implemented it already to at least tell me which option I should choose and I can go from there.
My requirements so far are that no screen is accessible to users unless they log in and that I will be able to read information about them from Azure AD - Roles, groups.
I think the option 1 could meet your requirement, the configuration of Azure AD in Authentication / Authorization is higher than your code, the user could not access the app unless they log in.
To read the information about the roles, groups, you could check this good blog.
Here you have an angular E2E auth scenario using App Service built in authentication:
https://learn.microsoft.com/en-us/azure/app-service/app-service-web-tutorial-auth-aad
I believe the part you are interested in is this one:
Enable authentication and authorization for front-end app
This way app service is the one redirecting you to AAD and getting a valid token that you can just pass in to your APIs afterwards. If the APIs are hosted in App Service as well, then APP service will be the one validating the token for you, so your backend code does not need to worry about authentication (you still need to handle authorization)

Office Add-In SSO with an AAD v1 app registration

I am developing a office add-in.
This office Add-In is supposed to retrieve the term store from SharePoint.
By following this tutorial:
https://learn.microsoft.com/en-us/office/dev/add-ins/develop/create-sso-office-add-ins-aspnet
I managed to get an access token to be used for Graph api. However the Graph does not expose any way of getting the term store. Is there a way we can generate an access token to be used with SharePoint and maintain the SSO?
It might be possible by registering an Azure AD v1 app but I could not find any documentation describing that.
I have a similar requirement, but in my research I wasn't able to find a good solution for this scenario.
I think it is probably possible to use a provider hosted SharePoint add-in. And then use the Authorization Code flow for obtaining an access token. Since the SharePoint add-in is trusted it will not require user login.
Of course this does mean the add-in needs to be deployed in SharePoint. If your Office add-in is distributed through the store this isn't really a great solution.
Hopefully there are other ways of achieving the same.
You could call SharePoint Online APIs (via REST or CSOM) with Azure Active Directory Apps. To call APIs secured by Azure AD, your app must acquire an access token from Azure Active Directory.
Please first refer to this document for integrating applications with Azure Active Directory. Then use Azure Active Directory Authentication Library (ADAL) to easily authenticate users to cloud or on-premises Active Directory (AD), and obtain access tokens for securing API calls.

Call Azure AD secured web api from SharePoint online page using AngularJS

I have a Web API secured with Azure AD
SharePoint online tenant is also authenticated against same Azure AD
I want to call the Web API from a page in SPO using Angular
By the time the page is loaded the user is already authenticated against the Azure AD. So I want to enable SSO for this web api call.
Appreciate if someone can share a sample code or any direction on how to achieve this. I have seen some samples using ADAL, but I don't think this scenario is addressed in those samples.

Resources