Azure B2C Authentication with Angular 13 - azure

We have angular 13 project in which we have Azure AD Authentication set up. Using various resources over internet, we implemented successfully authentication using MSAL library. Following are the details of npm packages we are using
"#azure/msal-angular": "^2.2.0",
"#azure/msal-browser": "^2.23.0"
Now there is a new requirement where we have to use "Azure B2C". We made changes to the configuration/code (Azur AD Authentication as mentioned above) but the code does not works. "SignIn" flow has been configured already on Azure B2C Portal.
We are not getting the login page.
Few months ago, we downloaded a code sample posted by Microsoft for using MSAL with Azure AD. We used the same to understand how to use MSAL.
For Azure B2C, we used the same code again and changed the configuration and we could see login page from Azure B2C. Following are the details of npm packages
#azure/msal-angular": "^2.0.2",
#azure/msal-browser": "^2.16.0"
Trying to understand where is the gap. Seems some compatibility issue.
Any inputs would be helpful.

Related

I have authenticated via Azure ADAL without issues. what next?

Newbie alert
I have successfully configured ADAL authentication using python code.
I have used the following code:
https://github.com/AzureAD/azure-activedirectory-library-for-python/blob/dev/sample/website_sample.py
So I am now able to log in to the app configured in my azure account and retrieve the access token, refresh token Etc.
Next
I have an application that has user role based permitted actions.
Upon successful login in Azure, the App must check the user role and open the pages based on the user's role.
I used React JS and Python to build my app.
Now i am clueless as to how to integrate my user roles with the app.
Can anyone of you suggest any reading materials or solutions to this?
Thank you.
I have read about ADAL authentication but did not find process to post authentication.
https://github.com/AzureAD/azure-activedirectory-library-for-python/blob/dev/sample/website_sample.py
I want any architecture plan or sample code in python/ JS where the token from ADAL authentication is retrieved and used to login to the application..
You can implement RBAC using Azure AD's Application Roles & Role Claims feature or using Azure AD Groups and Group Claims. You can add roles using the manifest in Azure AD and also in the app itself.
This is by far the best sample and guide for adding RBAC and using ADAL. I was able to get a working sample going quickly from this.
https://github.com/Azure-Samples/active-directory-dotnet-webapp-roleclaims

Azure Portal Mobile App Permissions

We just moved to Azure Portal and i created a Xamarin Cross-Platform app that gets authenticated via MSAL.
When i was building the app. it was registered on https://apps.dev.microsoft.com/, and the user was getting authenticated without any problems.
After testing, i registered it on our Azure Portal under app registration, gave it the required permissions as before, and updated the app ID in the code.
Now, i cant even go past my email page. I keep getting the message:"It looks like you're trying to open this resource with an app that hasn't been approved by your IT dept", even though the admin granted the permissions to the app. Not sure where to go from here. Any help appreciated.
Thanks in advance
When i was building the app. it was registered on https://apps.dev.microsoft.com/, and the user was getting authenticated without any problems.
apps.dev.microsoft.com is used to register the application for Azure AD v2.0, and you could leverage MSAL for authenticating users by using AD account or personal Microsoft account.
For the application registered on Azure portal, you need to use the ADAL library. Detailed tutorial about integrating Azure AD (v1.0) with your xamarin apps, you could follow here.
UPDATE:
Based on your scenario, for using MS graph via ADAL, you could create an app under your tenant and add the required delegated permissions to the Microsoft Graph API. The AcquireTokenAsync method would look as follows:
var authResult = await authContext.AcquireTokenAsync("https://graph.microsoft.com/", clientId, returnUri, parent);
Moreover, for differences between app-only and delegated scopes permissions, you could follow here. Also, you could check differences between Microsoft Graph or Azure AD Graph.

SPA + WebAPI authenticate using Azure AD B2C and Azure AD

My customer wants to use AZURE AD B2C to authenticate external users, and Azure AD for employees of his company. I've been looking on github and googling about it, but there's a lack of examples over there.
Does anybody had the same requirement to give some hints?
Besides that, it seems that MSAL.js / hello.js has some bugs (X-Frame-Options issue when renewing the token).
Is there any other JS library that I'm not familiar?
My customer wants to use AZURE AD B2C to authenticate external users, and Azure AD for employees of his company.
Azure B2C supports this from custom policies. You can easily configure this by referring Azure Active Directory B2C: Get started with custom policies and Azure Active Directory B2C: Sign in by using Azure AD accounts
Besides that, it seems that MSAL.js / hello.js has some bugs (X-Frame-Options issue when renewing the token).
Microsoft was written a sample application using hello.js library. But as you said it has x-frame options issue but that is only for Social IDPs. So, you can still use SPA app written from Microsoft for your use-case.
Is there any other JS library that I'm not familiar?
Yes, there is another JS library out there similar to hello.js that is oidc-client.js. It is easy to configure and use in SPA application.

Manage user from Azure AD B2C using AD Graph API - secure access

We are building a Xamarin Native mobile apps and using Azure AD B2C for authenticating users using their social logins.
We decided use MSAL native library (Xamarin) for authenticating using B2C. And our mobile app required to manage(full access) the signed-in user profile. Since this feature isn't available in MSAL we have decided to go with ADAL for the time being. Followed the instruction provided in the link below and the sample works. But I started experimenting by deleting the API access provided in the application (created in b2c tenant) and the ran the application with "Get-user" parameter. And the application is still able to get the users from AD. Not sure how secure is this thing?
Then deleted the application key from the B2c tenant application and ran the console application sample. And received an error AADSTS70002: Error validating credentials. AADSTS50012: Invalid client secret is provided.
Trace ID: cef09957-06bf-462e-a0c3-4ed6bae11e00
Correlation ID: afab126d-8694-479a-8a21-c12eb7cb176c
https://learn.microsoft.com/en-us/azure/active-directory-b2c/active-directory-b2c-devquickstarts-graph-dotnet
Any Idea why this is happening. I would like to implement this on a xamarin.ios app and any guidance much appreciated.
The answer to this is very similar to the answer to your other question: Exception access Azure AD B2C using ADAL library for user management, which can be summarized as:
Azure AD B2C does not yet support delegated permissions to the Azure AD or Microsoft Graph. The correct way to work around this limitation at this time is to have your native client application call a web API (using MSAL) which would in turn call the Graph API (using ADAL). This web API is an API you build which has authorization logic to scope the user management operations.
Once user management in Azure AD B2C is supported via the Microsoft Graph, you won't need this API and will be able to use delegated permissions (vs application permissions using client credentials) to have your native client application talk directly to the Microsoft Graph. In the interim, you'll have to stand up your own Web API as per the guidance above.
UPDATE: the Azure AD v2.0 endpoint and Microsoft Graph API now support client credentials flow, so you can also use MSAL for your Microsoft Graph API calls. However if you need to call the Azure AD Graph, then you will still need to use ADAL.

Azure AD authentication fails with error message: "Error validating credentials. AADSTS50012: Authentication failed"

I've been working on a multi-tenant web application that uses Azure AD authentication, and authentication will intermittently fail with the error message: "AADSTS70002: Error validating credentials. AADSTS50012: Authentication failed." To be more clear, the steps I go through are:
Go to my web app, and click on link to go to Azure AD authentication
Enter valid user credentials for Azure
If this is the first time using my web app, Azure asks the user to grant permissions to their Azure AD information
After accepting the permissions, Azure redirects to the reply URL that I've set up in Azure AD for my application, but it replies with the aforementioned error in the URL string
The application itself is a Node.js web app that uses the Passport module for Azure AD authentication, although I don't think Passport is the source of the problem because the error I get is passed by Azure to the web application's reply URL.
I haven't had luck identifying the source, but I have seen posts from people with similar issues. I have a number of AD accounts that I use both personally and for work, and it seems that there is some remnant left in the browser's cache or local storage that causes this issue because I can switch to another browser or into incognito mode and the problem resolves itself.
I'd like to identify if this is a problem with Azure itself, the way my application handles authentication, or with my work/third party applications implement AD authentication.
I am trying to reproduce this issue using the code sample here in Chrome, however failed.
Based on the same issue link you mentioned, I noticed that the endpoint for he/she using was incorrect. To develop the multi-tenant app, we need to change the specific endpoint with common like below:
https://login.microsoftonline.com/common/
Were you using the specific endpoint? If not, would you mind sharing a code sample to help us to reproduce this issue?

Resources