We need to create application based on Angular, Django and with integrations with Azure B2C AD.
Now, we have done part with Angular, we make request to Azure B2C, when user will be sign in, it return to angular app with ?id_token.
And there is our problem, because frontend need to communicate with our backend written in Django. We need to secure this connections and get know who is making request.
We want to create something like that:
angular->Azure B2C
Azure B2C->(with id_token)->angular
angular->Django(with id_token)->create session->angular(send session_key)
angular->Django(with session_key->angular(with requested data)
And there is problem, we don't know how to verify that user is successfully signed in in Azure. (Part which I make italic).
You should get an Authorization Code from AAD B2C and not a token, as the OAuth 2.0 authorization flow describes it.
So you should do:
Angular -> Azure B2C
Azure B2C -> (with auth code) -> Angular
Angular -> Django(with auth code) -> retrieve access_token and refresh_token
Angular -> Django Secured API (with access_token)
We just released our own implementation of Angular + AAD B2C (running on ASP.NET Core but the logic should be the same, you will only need to find the Django equivalent), if you want to see how to do it: https://github.com/3DSemantix/angular-asp.net-core-aad-b2c
Related
I'm having a Frontend application built in Reactjs connecting to Azure AD using msal for authentication. After authentication, the user needs to click a button which calls a Django rest API which is also authenticated using Azure AD.
React FE and Django connects to two separate App registrations in Azure AD. Even thought 1) FE is added to Django's App registration as known client 2) Django is exposing the API and the scope is given consent.
When the authenticated FE sends requests to the Django Rest service with Bearer token,
it fails to authenticate the request saying 'invalid token'.
I'm able to authenticate FE and Django rest service separately but authenticated FE is not able to connect to the Django Rest service. Please share your thoughts on what else needs to be checked or any solutions.
Please check if any of these configurations can be worked around
Check if you have given your react app’s URL in the redirect URL in portal and code , so that once the Azure AD validates the user and it’ll return back to your react app with ID Token.Also, enable Access Token and ID Token.
Check if you have created a scope for your web api (in Azure Portal > Your API > Expose an API). Then configure it on your client app on the API Permissions menu tab. Then add it on your scopes collection in code settings.Also, add grant admin consent for that API permission.
Check the manifest of your azure ad app: Below value is probably null or one, should be two: If you are using v2.0 endpoint,
"accessTokenAcceptedVersion": 2,
If you are using v2.0 endpoint, the scope should be api://{server_client_id}/.default.
In the code setting.py for your application, you'll need to provide the authority to which your web app delegates sign-in. (ex: authority: 'https://login.microsoftonline.com/(your tenant id>',)
auth: {
clientId: '232a1406-b27b-4667-b8c2-3a865c42b79c',
authority: 'https://login.microsoftonline.com/e4c9ab4e-bd27-40d5-8459-230ba2a757fb',
//
}
When we perform a token validation, Check your jwt token in http://jwt.io
Audience: The token is targeted for the web API.
"aud" value that is being generated for JWT token by azure is also controlled by "accessTokenAcceptedVersion" property in AD application manifest.(see if issuer or iss has v2 to confirm as v2 endpoint )
If you have set the access token accepted version to 2, then the client id and audience needs to be same (i.e. no need to write api:// in audience)
Note that Implicit flow is the only flow supported for SPA. Authorization code flow is intended for webapps, mobile and desktop apps but not for SPA.Please refer this document
References:
See how to configure Azure AD and how to determine the settings for
django-auth-adfs.
You can check this and find your use case scenario.
Check v2-supported-account-types for authentication-flows
Check OAuth2.0 On-Behalf-Of flow
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.
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 am currently following this user guide for adding a custom policy to my B2C sign up process
I have created the API and configured the various XML files. I can generate a token to access the API via the implict flow.
The API is secured under the app service with Azure Active Directory authentication.
The page linked to describes how to add basic authentication and a client ID / secret, which is a Client Credentials flow, so I was trying to test this in postman
However, having failed to get it to work I went looking and found a variety of posts stating implict credentials are not supported by Azure B2C?
If that is the case I'm puzzled how it is I'm supposed to ensure the claims of the API I am calling to carry out the business logic can be accessed by the custom policy?
My API is hosted on Azure in the same subscription. I can generate tokens for this API fine to use within my native / client app.
Please could someone advise how I should go about testing access to this API from a B2C context via Postman?
The page linked to describes how to add basic authentication and a client ID / secret, which is a Client Credentials flow, so I was trying to test this in postman
To be exact, it should not be called Client Credentials, because it isn't it.
It's just HTTP Basic authentication.
You are adding an alternative authentication method to your API in that case.
The fact that B2C does not support client credentials auth does not matter here.
What matters is that you have enabled AAD authentication on App Service.
This will block the calls that try to use Basic auth against your API.
Here are a couple options that you can do:
Disable authentication on the App Service and implement the two alternative authentication methods in your API code
Allow anonymous calls through from App Service auth and implement Basic auth for unauthenticated requests in your API code
As for testing from Postman, it should then be the same as testing any API supporting Basic authentication.
You don't authenticate against B2C, so there is nothing special about it.
I'm trying to authenticate my SPA (angular.js and adal.js (similar to the
https://github.com/Azure-Samples/active-directory-angularjs-singlepageapp-dotnet-webapi example)
My AD is a azure b2c preview tenant.
I can successfully log in to my webapi from my Website, but not from the JS SPA via angular.
My Setup:
Webapi and Website share the same clientid (does only seem to work this way)
The SPA has its own clientid, because otherwise i get "api version not supported" errors when trying to log in.
I have enabled oauth2AllowImplicitFlow for all applications, granted application permissions from the spa to the webapi.
Cors is enabled on the Webapi and the SPA.
I even seem to be able to get a token after completing the login, but when i try to call my api, i get an access denied for this request.
Is this supposed to work this way? I could not find an example of how to use b2c together with a spa and the api running on different servers.
Thanks in advance
Peter
Officially it's not supported by Microsoft, but with some modifications of experimental branch on github azure-activedirectory-library-for-js you can get it working.
Fix logout url to v2.0 endpoint of oauth2 protocol with the policy parameter in the logOut method of adal.js at line 546:
var urlNavigate = this.instance + tenant + '/oauth2/v2.0/logout?' + logout + (this.config.extraQueryParameter ? '&' + this.config.extraQueryParameter : '');
The username property is never set in method _createUser of adal.js. The username is used in renew token process, fix it by adding this three lines:
if (parsedJson.hasOwnProperty('emails')) {
user.userName = parsedJson.emails[0];
}
Finally, in adal-angular.js at line 146, acquireTokenSilent is called with wrong type parameter. This method accept only array type as scopes parameter, fix it by placing clientId in array:
_adal.acquireTokenSilent([_adal.config.clientId], null, function (error, tokenOut) {
I already pulled a request on github about this, you can use it as reference.
When you initialize adal provider on angular put your b2c sign in policy in extraQueryParameter like this:
adalProvider.init({
tenant: 'tenant.onmicrosoft.com',
clientId: 'clientid',
extraQueryParameter: "p=B2C_1_SignIn"
}, $httpProvider);
Looks like an AzureAD B2C scenario sample code for SPA was just released on github. See it here.
"The sample shows how to build a web application using Hello.js that performs identity management with Azure AD B2C. The app is a simple web application that performs sign-in, sign-up, and sign-out functions with sign-in and signIn-signUp policies and also edit profile using EditProfile Policy."
NOTE: At the time of this answer the functionality is still in "preview"
This is not currently supported.
Single Page Applications (Javascript)
Many modern applications have a Single Page Application (SPA)
front-end written primarily in Javascript and often using a SPA
frameworks such as AngularJS, Ember.js, Durandal, etc. This flow is
not yet available in Azure AD B2C preview.