How to configure a WebApp & WebApi with different AAD App IDs? - azure-active-directory

I currently have two app services
Web App (Asp.net core 2 w/ front end in react)
Web Api (Asp.net core 2)
Note: Both are configured with different Azure active directory app id.
user signs into Web App and retrieves a token for it's own appId/ClientId/ClientSecret stored in tokencache.
from the WebApp, the user wants to talk to a WebAPI but needs to get a token since it's protected with AAD as well but it's a different app id/client id/client secret.
Problem:
When I try to do a AcquireTokenSilentAsync() for the web api, I get an error throwing that I the token is not in the cache?
It also seems that with depending if your using AAD v2.0 or v1.0 will determine if the web app and web api can have different app ids. So it seems like i would have to use AAD v1.0. With Asp.net core 2, it's not clear to me what OpenIdConnect is using or configured to use under the covers.
Question:
It's not clear to me why the acquire token silent async didn't work and failed. Does that only look for the token in the cache; otherwise it fails?
Is it possible to configure the token from web app to have permission to access web api resources. I notice that in the azure portal, you can selected resources like microsoft graph, but I don't know how you would associate a custom API. In my case, I want to get it running on my local machine before I move it all to azure.
If the web app token does not have permission to access the web api, do i need to do another login authentication with the user even thou both are within the same tenant?
Any Advice appreciated,
Derek

Yes, AcquireTokenSilentAsync will look into the cache, and see if it can find tokens. If it does, it will check to see if the access token is still valid and return that back. If the token is expired, it will use the refresh token to fetch a new access token and return that back. When this call fails, it's an indicator you need to perform an AcquireTokenAsync (which will likely show UI in the case silent already failed).
Yes, you can associate a web app to get tokens for your own custom web API. I'd recommend using Azure AD v1.0 (register the app in the Azure portal, ADAL library). You'll need to register the two apps (web app and the api), both will be type web app/api. In the API, you can register an App ID URI which will act as the resource identifier for this API. In your web app, you'll want to go into the Required Permissions, and add the Web API you have registered as a permission. Then in your web app, you'll need to use the ADAL library (alongside an OpenID OWIN middleware) to acquire a token for the resource as specified by the App ID URI field. Here's a code sample that implements the exact scenario you're describing (Web App/API in ASP.NET Core).

Related

How to use Azure AD to secure an API that needs to be accessed by a 3rd party application?

We are running an API that is configured for and secured by Azure AD. This is working for us with an Angular app where users login interactively.
Now we have a need for a partner firm to use the API in a system to system way (no user login).
What needs to be configured for their application to get an OAuth token for our API from Azure AD?
I've examined the service to service call flow, but I'm wondering if it's best practice to create an application registration in our tenant for an application we don't own/manage. However this seems to be the fastest way to give them a client ID/Secret in order for them to interact with Azure AD.
Thanks in advance!
-Doug
Azure active directory supports the OAuth 2.0 to authorize the
third-party apps too. It doesn’t actually matter where the web APIs
are hosted.You can even see Azure Active Directory
recommendation on third party apps. It actually adds up security
and different type of apps can be integrated .
But you will need to have your web app authenticate to Azure AD, and
provide the token to the web api.so it requires app registration .
Scenario for external web app to call a web api, you can refer to
this:web-app-call-api
Your application can acquire a token to call a web API on behalf of
itself (not on behalf of a user) i.e; you can achieve scenario where
non-interactive app calls a web api
But if you meant app calling a partner api using another api .
The Azure AD V2.0 doesn't support the Partner API(See Restrictions on services and APIs) when you integrated the web API with third-party application using MSAL(Azure AD V2.0 endpoint) .
One way is using the on-behalf-flow. Here third-party application initially acquires the access token to call the web API. This web API acquire the token for Partner Center API and calls it using on-behalf-flow with that token. This solution uses the Azure AD endpoint instead of v2.0( register the app on Azure portal).
Other References:
asp.net web api - Azure Active Directory Verify Access Token in Web
Api outside of Azure - Stack Overflow
Authentication vs. authorization

Adding new Claims after authentication

I have the following environment
IdentityServer 4 (STS)
ASP.NET (Web API)
Angular (SPA)
My goal is that after authentication in IS4, the user will be returned to the SPA application and also there will be an additional request to the Web API, to provide additional Claims. The values of these Claims will depend on what is currently in the database to which the Web API is connected. I need these Claims in future to allow access to certain APIs
I know that this can be done through ProfileService. But in this case IS4 should be a part of Web API (which I can't do by requirement)
How should I do it right?
I had an idea to create in my Web API a new endopit, which will return a set of Claim. And these Claims I will store on the SPA side of the application in localstorage. But this doesn't seem very safe to me, because anyone can change these Claims

Azure AD with Single Page Application and ASP.Net core web api: how to access all relevant tokens?

Our application is an Angular SPA with ASP.Net Core Web API. The identity is provided by Microsoft Identity Platform (Azure AD) and authentication is provided by the same. The authorization is done in Web API basis "Application Roles". These "Application Roles" are held in the Azure AD directory (defined in the Application's manifest and assigned on the tenant domain to users).
The Angular SPA receives the tokens from Azure, as per these instructions. The relevant tokens that are issued are: an AccessToken for my Web API (following these instructions), an AccessToken for calling Graph API (following the same instructions) and an IdToken that includes the "Application Roles" as roles claim (this id token seems to be included automatically once roles have been assigned).
The problem I face is that I need to pass concurrent tokens to my Web API, but with the HTTP interceptor I can only include 1 token in the header request. For example, I need the first AccessToken to proof authentication to the Web API and I need to include the IdToken such that the Web API can perform authorization.
Q: How can I call my Web API with multiple tokens, when these tokens are all issued to the SPA and need to be included in the HTTP call to my Web API?
No matter whether you want to get Microsoft Graph data, the way you used to get Application role is incorrect.
An id token cannot be used to perform authorization for your Web API application. You have to use access token. See this answer to learn about the usage of id token and access token.
So you have to use an access token rather than id token.
In this case, you configure the app roles in the Azure AD app which represents Angular SPA (the front).
In fact, you should configure the app roles in the Azure AD app which represents ASP.Net Core Web API (the backend). Then you can get the "Application Roles" as roles claim in the AccessToken for your Web API.

MSAL authentication and authorization from React to Web API

I have some trouble understanding the MSAL authentication and authorization. I have a single page app developed in React. I have setup the MSAL Azure SSO authentication by registering the web app on the Azure AD. Now, I have a Web API (in .Net Core) which is running on a separate app service. How do I integrate the authentication from my React app to the Web API?
Few questions coming to mind:
Do I have to register the Web API app as well similar to my React app?
Do I have to pass the auth token from my React App to the Web API?
Do I have to setup the authentication only on the Web API side (using MSAL.Net) and the React App will connect to it?
Please share your thoughts. Let me know if I can explain any better.
If you are the author of both react app and web API, you can register just one app and use ClientId for both.
Yes. If your react app is standalone app (not a part of Asp.net app) you can use msal.js to login with AzureAD and then use openId token to login to your web API. Also you can use access token to access services secured by Azure (e.g. Microsoft Graph) directly from React.
If your React app is a part of Asp.net app, you can setup Auth on server. If it's standalone app you need to use approach from 2.
If your React app is standalone app and if you are going to access "downstream" API (like Microsoft Graph) from Web API, you need to implement On-Behalf-Of mechanism on your Web API. In two words:
- user login with React app and access Web API with openId token;
- Web API acquires new access token based on token sent from client
- Web API access Microsoft Graph with this new access token.
You can find Server side example here.
Client side example from another answer works in this case, but you need to send row openId to Web API instead on access token.
P.S. You can use access token instead of idToken to access your WebAPI as well, but in this case you need to define separate scope for your WebAPI in Azure as well. After that you can use this scope to access your WebAPI and separate set of scopes to access MS Graph.
Here is a complete video tutorial and source code on how to use MSAL with React to call Microsoft Graph.
The only different in your case will be that instead of calling Microsoft Graph, you will call your own API.
Bottomline is - there is no direct integration package yet for react. Which can also be read from the official statement on the msal-js repo:
After our current libraries are up to standards, we will begin
balancing new feature requests, with new platforms such as react and
node.js.
See Here. It allows you to call Graph API from client side.

How can multiple services re-use the authentication cookie?

I want to understand how a static site with no backend can use okta with other custom API services hosted on other platforms.
Scenerio:
Website is a angluar/reactjs that is hosted as a "static" website.
I'm assuming when you authenticate using okta in e.g. react/angular website I am able to store the okta session id in local storage or cookie.
How say I create a web service and host that on heroku, how can I figure out if the user has authenticated or not and re-use the session?
The scenario where you have:
A JavaScript frontend application, hosted statically
A backend web service (API), that the JavaScript app makes API requests to
is a classic single-page app (SPA) scenario. The recommended authentication flow is the OpenID Connect implicit flow.
In plain English, you are:
Setting up your JavaScript app to talk to Okta (or another OpenID Connect identity provider)
Getting an access token from the identity provider
Attaching the access token to an API request to authorize it
Your API service could be running on Heroku, or somewhere else. In your API service code, you have to validate the access token before you decide to accept the request. The API service can go back and talk to the identity provider to determine if the user's access token is still valid.
How the API service validates the token depends on what language you are using to build your API service. But, that's basic idea: the access token is what authorizes the user's requests.

Resources