How can I enable authentication with a multitenant AngularJS single page application calling a multitenant service Web API using Azure AD?
This is the high level flow I am trying to enable:
Multi-tenant AngularJS application [ClientApp] -> Multi-tenant ASP.NET Web API [ServicesApp]
I have a multi-tenant AngularJS application which requires Azure AD login using ADAL for JS (OpenID Connect). That web application is registered as a multi-tenant application ClientApp in a developer Azure AD, which I'll call DevAAD. I consented to use this ClientApp application in another Azure AD, which I'll call Tenant1. Once a user from the Tenant1 directory logs into the web application with their credentials into the login.microsoftonline.com portal, they are able to access the web UI. However, the UI is unable to call Web APIs on behalf of the user using the OAuth 2.0 Implicit Flow. This is the error message I am seeing in the Javascript code:
AADSTS65001: The user or administrator has not consented to use the
application with ID '<ClientApp_ClientID>'. Send an interactive
authorization request for this user and resource.
There is another Azure AD multi-tenant app representing backend Web API services called ServicesApp that is registered in the same DevAAD directory as the ClientApp UI application. The client ID and app ID URI of ServicesApp are the valid audiences for those services. This ServicesApp application has been consented to in the same Tenant1 directory. When invoked from a native client application with permissions to ServicesApp, the services are authorizing users from the Tenant1 directory using the OWIN middleware provided in System.IdentityModel.Tokens.Jwt 4.0.0 and the [System.Web.Http.Authorize] attribute in the controller.
Configuration details:
ClientApp
Azure AD application manifest has availableToOtherTenants set to true and oauth2AllowImplicitFlow set to true. ClientApp has permissions to access ServiceApp Azure AD application.
The AngularJS application has the following configuration:
adalAuthenticationServiceProvider.init(
{
tenant: 'common',
clientId: <ClientApp_ClientID>,
endpoints: { <ServiceEndpoint> : <ServiceApp_ClientID> }
}, $httpProvider);
ServiceApp
ValidateIssuer is set to false in TokenValidationParameters object in WindowsAzureActiveDirectoryBearerAuthenticationOptions configuration object passed to IAppBuilder.UseWindowsAzureActiveDirectoryBearerAuthentication()
"
knownClientApplications" property in "ServiceApp" Azure AD manifest is
set to ["<ClientApp_ClientID>"]
I have not been able to locate any examples of a multi-tenant web application calling multi-tenant Web APIs, specifically a single page application built with AngularJS. How can this be implemented with Azure AD?
You should try generating a Authorization Code URL using the template described here.
You can also copy this and replace the values with your own:
https://login.microsoftonline.com/common/oauth2/authorize?client_id=<appid>&response_type=code&redirect_uri=<replyurl>&resource=<resource>&prompt=admin_consent
Note at the end of the url I added the query string: "prompt=admin_consent".
This is something that only a company administrator can do, and it will consent to your app for the entire tenant, so that no one else needs to consent in the future. Note that you can change this to "prompt=consent" if you want to only consent at an individual user level, or remove it all together if you do not want to force a consent prompt.
Let me know if this helps!
Related
The azure app service provided an URL in such format https://your-app-name.azurewebsites.net
When Expose an API in azure app registration the Application ID URI is needed. But when I use the url provided by the azure app service I got the following error:
Values of identifierUris property must use a verified domain of
the organisation or its subdomain: https://your-app-name.azurewebsites.net
the URL provided by the app service is not a verified domain? and how can I make it verified?
Application ID URI is an identifier that can be used instead of the client ID when specifying a scope defined in that app.
It has nothing to do with authentication redirect URIs, where it would need to match your app hosting.
Agree with juunas and this is just additional description. Screenshot below contained the error you met and one of the supported App ID URI pattern.
I'm afraid that the reason for exposing API is that you want to protect your web API with Azure AD. The App ID URI here is used for the authorization. Your web app also requires to configure the audience, then after you integrate Azure AD authorization into your application, the scope, the audience and other claims containing in the incoming access token will all be verified. I have a sample which is based on a web api. You can see the configuration for Azure AD authorization.
And https://your-app-name.azurewebsites.net is for authentication which used for redirect from microsoft identity platform back to your own web app. The scenario can be opening your own web page which requiring user to sign in --> redirect to microsoft sign in page --> sign in then redirect back to your web page. So we need to identify the redirect URL in Azure AD.
I have an application stack with a React SPA frontend and an Asp.net core web-api backend. Both resources had been successfully registered in AzureAD each with its own app and the authentication and authorization processes are working fine. However, would it be possible to use the same registration for both the front and backend in AD?
When using the AD Application ID from the backend in React:
auth: {
clientId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
authority: "https://login.microsoftonline.com/<tenantId>",
redirectUri: "http://localhost:3000"
}
I get the following error:
ServerError: invalid_request: AADSTS90009: Application 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'(api://xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx) is requesting a token for itself. This scenario is supported only if resource is specified using the GUID based App Identifier.
I am using the MSAL library for the frontend.
Both the applications (front end and back end) need to be registered for sure in Azure AD.
As you are using client id of backend which is api to be secured , the Error is occurring.
Update client-id, tenant-id, redirect URI of front end application not backend api in configuration file based on application registration in Azure AD.
Then make sure to expose an API and grant admin consent to the API with required permissions.
Yes, this is possible. Your provider configuration looks correct, so check to make you app registration is setup properly. You will need the following things:
An SPA platform configuration with a redirect URI of http://localhost:3000
Add a scope (under 'Expose an API') and make sure your Application ID URI is created
Use the new scope in your MSAL authentication template
I have a website hosted as Azure App Service with Azure Active Directory authentication enabled. Users can sign in from their browser using the interactive workflow.
The website must run as a dashboard on a big screen 24/7. There it is not possible to use the interactive workflow for authentication there, since there is no user to enter credentials.
How can I achieve this?
Is it possible to use a service principle with a client certificate? If so: How?
You can use the client credential flow to obtain a token to call the Web API hosted in your App Service on your behalf (not on behalf of the user). This solution is useful for non-interactive daemon applications that perform tasks without logged in users.
Since you have enabled Azure AD authentication in the app service, you only need to register the daemon app in the Azure portal. When you use the client credential flow to request the application hosted by the APP service, Just replace resource with the application ID URL hosted by APP service.
please see:here.
I'm working on a web application deployed on an azure webapp authenticated with Azure AD.
It is mostly based on the angular template for ASP.Net Core. The backend hosts the frontend in a ClientApp directory.
For the authentication, the frontend works with the msal-angular plugin which on access redirects to the Azure AD authentication page. After login, the login page redirects back to the frontend, which catch the token, and makes all the calls to the backend with the token in the authorization bearer header.
The .Net Core backend is configured with :
services.AddAuthentication(AzureADDefaults.BearerAuthenticationScheme)
.AddAzureADBearer(options => Configuration.Bind("AzureActiveDirectory", options));
Finally, to make all these works, I have in the Azure AD app registration one entry for the backend and another for the frontend.
This works well, but we want to move away from that to use the Authentication directly on the webapp.
This way we could secure even more the application which would not even be downloaded if the user is not authenticated.
How do I manage to do that ?
Do I need to remove all authentication code from the backend and frontend ?
Do I still need 2 entries in the app registration on azure AD or one is now enough ?
How will I know which user is connected ? Actually I use the IHttpContextAccessor to get the UPN Claim.
Thanks for the help
I have a problem with consenting to my API. I have 2 apps in my tenant (Client, API). Client app is SPA and implicit flow is enabled and it calls API, so I added Client application's id into knownClientApplications in API application. For both applications multi-tenant is enabled.
But when I try to login in my SPA from different tenant I'm only asked for Client application consent and get an error that I don't have service principal for my API application.
What should be configured in order for this to consent implicitly to API application too?
I use MSAL.js library and Azure AD 2.0. Scope: https://mytenantname.onmicrosoft.com/myservicename/user_impersonation
For the SPA application to prompt consent combined with your API consents, your scope should be https://mytenantname.onmicrosoft.com/myservicename/.default.
You can read about ./default scope here.
If you need a sample to clarify this concept, I would suggest this one