Obtain Azure B2C user permissions (authorize user) using Auth Flow With PKCE, MSAL v2, Vue.js, & Azure Functions

0
votes

Using Vue.js, Azure B2C Tenant and Azure Functions (C#), we are able to authenticate users into our application. We’re using the Auth Flow with PKCE & leveraging the MSAL v2 library on the front-end to do so. Specifically we're using the npm package @azure/msal-browser for MSAL.

The friction point: we need to get a user’s authorization (User/Manager/OrgAdmin/GlobalAdmin) for use in restricting access to components of our application. There seem to be copious solutions involving implicit flow and ADAL but not many involving MSAL & Auth flow.

Ultimately all I’m looking for is a high level description of how to obtain the equivalent of roles/groups/permissions for a user.

I can make use of Microsoft Graph API within Vue.js when using implicit flows but not when using MSAL v2 & Auth flow w/PKCE.

Presently I’m looking into Authorizing an internal API (served via Azure Functions) registered to our B2C tenant to obtain roles/groups/permissions using the Microsoft Graph API.

I feel like there’s a simpler way to obtain something as fundamental as user roles and permissions. I’d welcome some insight.

Thank you!

Edit (Elaboration)

This isn't the exact use case but it does get to the root of the issue I'm struggling with.

User authenticates into our SPA using Azure B2C flow by signing in with their personal Google account.

I now need to obtain authorization for the user to determine what they're allowed to do within the application:

-Some users can view data.

-Some users can edit data.

Roughly, how does one accomplish this? I can pull group information using Microsoft Graph API when using MSAL w/Implicit flow, but not B2C using auth flow with PKCE.

Thanks again!

1
vue.jsazure-functionsazure-ad-b2cmsalpkce
Before we provide suggestions, may I know why you need to use user’s authorization (User/Manager/OrgAdmin/GlobalAdmin) to control the access to components of your application? In your case the application's content should be your own data right? Why not use app role-based or group-based authorization? User/Manager/OrgAdmin/GlobalAdmin are AAD role and should not be used in such a scene. AAD role itself has the function of controlling access to AAD data. – Allen Wu
I haven't come across any intuitive methods by which I can obtain role or group details for a user when using B2C w/PKCE. I've come across a few topics that suggest using custom user flows, or editing the app manifest, but it seems like what I want to do is a pretty common scenario and customization shouldn't be required for configuring it. I'll elaborate what I'm trying to do in my question. Thanks for the feedback. – IdusOrtus
You are correct. B2C auth flow doesn't work for Microsoft Graph. So you still need to use AAD auth flow to call Microsoft Graph to get the group information. But it should be implemented by custom policy rather than user flow. If you don't want to use custom policy, custom attribute is another good option. See this answer. – Allen Wu
Interesting. I was just looking into the 'shoe size' aka custom attributes and discovered b2c-extensions-app was never created for my b2c tenant. I checked graph api for deleted items, nothing there. I submitted a support request, perhaps they can find where it went :) Thanks again for the input, and the suggestion re: custom policy, I really appreciate it. – IdusOrtus
Great. Do you mind I post an answer so that this issue can be archived? Or do you expect some other suggestions? – Allen Wu

1 Answers

1
votes

I'm afraid that there is no Out-of-the-box AAD B2C solution that gets the Group / Directory role information.

You can get Group claims in B2C using custom code through custom (IEF) policies.

If you are using user flow, you can consider custom attribute. For example, create a custom attribute named AADRole. Assign the real AAD role as the value to different user and then get the claim from id token after B2C users sign in.

Refer to this answer for more details.