I'm trying to set up Azure AD B2C for my web app.
I've already created a tenant. I then created an app. According to articles I'm following, I should then be able to click "API Access" and add scopes. In my case, there's nothing under API drop down:
I already see "Access the user's profile" with the following selected:
Under "Published Scopes", again, I see nothing:
What am I missing here?
UPDATE:
After adding the App ID URI, I was able to move forward a bit but still not sure about published scopes. This is what I currently have:
And under API Access, this is what I have:
Basically, the behavior I'm getting on my frontend app which is built on ReactJs is that I hit the Azure AD B2C login. After entering my credentials, I get redirected to my app. I see id_token in the URL but the MSAL library I'm using doesn't capture the token -- I have a break point in my React code to see if I'm capturing the token. I get sent back to the login screen on Azure, then back to my app. On the third one, I actually see the token being captured but I end up with the following errors:
I'm using this library which is a wrapper for the MSAL.js library: https://github.com/jamesrandall/react-azure-adb2c
I'm pretty certain there are config errors. Just not sure what they are.
API access is used to assign access from a web app to an API app.
Published scopes is used to register the access scopes for the API app.
Before the access scopes can be registered for the API app, an App ID URI must be set as the resource identifier for the API app, as described by the Azure Active Directory B2C: Register your application article.
Related
So I am writing a .NET 6 Core Web Api using Azure AD as authentication for the API.
Now when using Graph API as example, you need to setup Graph API scopes in the App Registration. Lets use a delegated "user.read" permission for this example.
I use Postman to receive the access token for the application by authenticating as an user against Azure AD for the API. I would expect to receive a consent-screen so I can consent to the usage of "user.read". This does not happen though.. I get logged in and receive a valid access token. In the Backend though, it will throw an error because the user / admin did not consent to the application.
How do I get around this? Why don't I get asked to consent the permissions set up in the app registration? Neither in Postman, nor in a Swagger oAuth Flow..
My current workaround for this is to use a React application and sign in over the frontend application. Using the frontend application, I get asked to consent to the permissions. After consenting, I can use postman without getting the "user didn't consent" - error.
Any ideas? What did I miss?
Let's focus on the user-consent page first. When we created an azure ad app then add api permission for it, then use this azure ad app to make your .net 6 app/react app integrate azure ad to use azure authentication, and we go to the microsoft sign in page and successfully sign in, we will see a dialog which indicating that this app require you to consent a list of permissions. The permissions are correspond to the api permissions you set for the aad app. After consent once, then it won't ask you to consent again when sign in next time.
This consent only happened when users are signed in. Let's go back to the flows used to generate access token in Azure AD. Since you used delegate permission, then you may used the recommend Auth code flow(Another flow called ROPC flow can also generate delegate access token but not recommended). When we used auth code flow, we need to sign in first, the login url should look like this:
https://login.microsoftonline.com/tenant.onmicrosoft.com/oauth2/v2.0/authorize?client_id=azure_ad_app_id
&response_type=code
&redirect_uri=http://localhost/myapp/
&response_mode=query
&scope=user.read
&state=12345
We need to use it to get the auth code, then we can use the code to generate access token, per my test, I created a new azure ad app and when I directly hit this url in the browser and sign in, it still required me to give the consent. So I'm afraid the reason why you didn't see the dialog when test in post man is that you've consent it when test in react app, or you don't use auth code flow.
I have had been struggling to make my Azure Active Directory Oauth 2.0 Client Credentials Flow work with API Management. but I get authenticated via postman too. But in return I do not get any access token just a bunch of HTML. How can I fix this? The settings of the applications are exactly as per the documents including the validation of JWT Policy.
Basically I want my client apps to connect with my azure API's using Oauth 2.o without any consent using provided client id/secret. I'm trying to set this up for now with ECHO API provided out of the box with API Management console.
thanks
Postman Access token Error Screen
To use application permissions with your own API (as opposed to Microsoft Graph), you must first expose the API by defining scopes in the API's app registration in the Azure portal. Then, configure access to the API by selecting those permissions in your client application's app registration. If you haven't exposed any scopes in your API's app registration, you won't be able to specify application permissions to that API in your client application's app registration in the Azure portal.
For an example, if I sent scope parameter with custom name like https://testwebapp.in/.default without configuring same as application ID URI in Azure AD then is an expected behavior and you will get error AADSTS500011.
scope parameter in the request should be the resource identifier (application ID URI) of the resource you want, affixed with the .default suffix. For the Microsoft Graph example, the value is https://graph.microsoft.com/.default. This value tells the Microsoft identity platform that of all the direct application permissions you have configured for your app, the endpoint should issue a token for the ones associated with the resource you want to use.
Reference: https://learn.microsoft.com/en-us/azure/active-directory/develop/v2-oauth2-client-creds-grant-flow#application-permissions
I have a Web API project I created using this tutorial that I'm trying to secure using Azure AD.
According to the tutorial, when I create the project, I can select "Change Authentication" and enter my AAD information and the authentication supposed to just "work" as long as I have <Authorize> on the controller I want to secure:
According to the tutorial, I need to add the API as an app in the Azure portal but its steps and screenshots are confusing because they're old and the Azure portal has been reorganized. It says:
Next step is to add the "WebAPIServerSingleTenant" as an app you can access in your native app. Navigate to the "WebAPIClientSingleTenant" app and add "WebAPIServerSingleTenant" to your approved list (tick the checkbox too)
But adding the tenant info from Visual Studio when I created the project creates an app registration in AAD automatically, so I'm not sure what it's asking me to do.
Furthermore, when I try to call the API from Postman, for example, I just get "Authorization has been denied for this request" despite generating and passing an access token in the header of the request that looks right to me.
What steps do I need to follow to secure my web API using Azure AD?
The 'Next step is to add the ..." instruction you quote above is about adding a reference to your API app to the AAD registration of your native app. To register the native app, go to the Azure portal and use App Registration. The instructions for how to do that linked in your article are obsolete - AAD UI is totally different now. Rather use one of the official samples, in particular the one for native client accessing an API.
I have an AspNetCore 2.0 MVC web API secured by an Azure Active Directory B2C tenant. I have been able to use Postman to test the API end points by following this SO posting: Request Access Token in Postman for Azure AD B2C (in particular, the Microsoft documented steps referenced in SpottedMahn's comments:
https://learn.microsoft.com/en-us/aspnet/core/security/authentication/azure-ad-b2c-webapi#use-postman-to-get-a-token-and-test-the-api )
Now, I am working on a serverless version of the above - the app is pretty much identical expect that the endpoints have been implemented by Azure functions in an Azure Functions App
The Functions App has Authentication on, Log in with Azure Active Directory and the following settings:
This is how i have set up the Application in the Azure B2C tenant:
If I access the functions endpoint via a browser, I get successfully routed to the Azure AD B2C login page and can log in, then see the results from the API endpoint. So I'm pretty confident all is good w.r.t. the Azure AD B2C <-> Function App configuration.
However, I can't use the Request Access Token technique linked above to get a token and inspect the endpoint in Postman
If I take the token obtained after authentication (for example by using fiddler and observing the id_token being returned), and in Postman I choose Bearer authentication and supply that id_token, then Postman successfully hits my endpoint. However, if I follow the steps in the linked document above, I do get the "login" popup and then do get a valid [looking] token, but when I click Use Token and run the request, I get
You do not have permission to view this directory or page.
I'd really like to be able to request an access token from postman just like I can with my aspnetcore 2.0 app (really just for the consistency so I don't have to remember lots of different techniques). Is that possible for Azure Function Apps and if so, any clues what I'm doing wrong in the above?
Ah I stumbled upon it. I fixed it by adding the Postman API client id (note: the postman API client id, not the postman App client id) [those references will make sense in the context of the Microsoft how-to linked above], under "ALLOWED TOKEN AUDIENCES" (visible in screenshot in question above).
I have an Angular 5 app and a web api app, both of which are hosted in Azure.
They have been secured with Azure AD at the website level e.g. no anonymous access is allowed.
When browsing the Angular site, it asks me to log in fine and I can access .auth/me which uses the local cookie to get token/claim information.
I now want to call the separate api but not sure how to go about it.
Both sites have an application in Azure AD, and I've set the client to have delegated permissions of 'Access to API'.
I've tried accessing the api using both the local cookie from the client (not sure if this would work) and the token returned .auth/me but neither work.
In my client manifest I have the following:
"resourceAppId": "3cddd33c-2624-4216-b686-7f8fa48f38cf", // api id
"resourceAccess": [
{
"id": "c2712c68-ea93-46d2-9874-61b807b19241",
"type": "Scope"
}
]
but haven't seen any additional scopes added to the claims, should it?
According to your description, you have both created the separate AAD application for your Angular app and your web api app, and configured the delegated permissions for your Angular AAD app to access the web api AAD app.
Based on my understanding, you are using the build-in App Service Authentication / Authorization for authentication, at this point you could do not need to change code on your app backend. You may have set Action to take when request is not authenticated to Log in with Azure Active Directory instead of allowing anonymous access, at this time your app service would directly redirect the user for authentication. After logged, your client could access https://{your-angular-app-name}.azurewebsites.net/.auth/me for retrieving the logged user info. For accessing your web api website, you could just send the request as follows in your angular client:
GET https://{your-webapi-app-name}.azurewebsites.net/api/values
Header Authorization:Bearer {id_token or access_token of AAD}
UPDATE:
That is exactly the route I'm trying to implement. One thing missing though, I had to add the client application id to the allowed token audience of the api app in Azure.
For retrieving the access_token, you need to set additional settings for the AAD provider in your Angular web app as follows:
"additionalLoginParams": [
"response_type=code id_token",
"resource=<AAD-app-id-for-your-webapi-webapp>"
]
Details you could follow this similar issue.
Use the EasyAuth server flow for logging, you would get the access_token, and you could leverage https://jwt.io/ to decode your token as follows:
Pass the access_token as the bearer token to your webapi web app, at this time you do not need to specific the ALLOWED TOKEN AUDIENCES.
At this time, you could invoke .auth/refresh against your Angular web app for refreshing the access_token, then you could use the new access_token to access your webapi web app.
I want roles included in the token so might have to stick with id?
If you want your Web API exposing access scopes to your Angular application which would be contained in the access_token as the scp property, you could follow the Configuring a resource application to expose web APIs section in this tutorial. Moreover, you could also follow Application roles.
UPDATE2:
You could follow Authorization in a web app using Azure AD application roles & role claims for detailed tutorial and code sample.
The usual approach would be to use ADAL.JS (or MSAL.JS with AAD v2 endpoint/B2C) to get an access token for the API.
ADAL.JS uses a hidden iframe to get an access token using the user's active session in Azure AD.
You can find an example Angular app here: GitHub.
An especially important part of the ADAL.JS configuration is here:
var endpoints = {
// Map the location of a request to an API to a the identifier of the associated resource
"https://myapi.azurewebsites.net/": "https://myaadtenant.onmicrosoft.com/MyApi"
};
The property name/key should be the URL for your API. ADAL-Angular detects calls to URLs starting with that, and attaches the correct access token to them.
The value should be the App ID URI of the API. You can find it from your API's App Registration from Azure Active Directory -> App registrations -> All Apps -> Your API -> Settings -> Properties.
You do need to enable implicit grant flow on the Angular app from the app registration for the SPA. You can find it from the Manifest.