使用MSAL验证Angular SPA和WebAPI [英] Authenticating Angular SPA and WebAPI using MSAL

问题描述

我在 myangularapp.azurewebsites.net 上安装了一个Angular SPA，在Azure中托管了
myangularappapi.azurewebsites.net 的Web API两个应用程序服务。

• 客户注册访问 myangularapp.azurewebsites.net 
• 客户在获得应用程序管理员手动批准后会收到一封电子邮件
• 使用特定于应用程序的登录表单的客户登录
• 应用程序向myangularappapi.azurewebsites.net发出请求以获取数据

我打算使用Active Directory B2C和
MSAL 2.0 实现此目标。

我的问题是：

1. 怎么能使用自定义应用程序登录和注册表单而不是AD特定UI？我可以将它作为Angular应用程序的一部分吗？
2. 我可以使用AD B2C通过同一个AD对应用程序和API进行身份验证吗？ API返回敏感数据，互联网上的某人不应拨打电话获取数据。
3. 如何获取属于某个组的用户列表？我可以使用MSAL获取用户列表吗？

解决方案

1。您可以自定义B2C HTML和CSS。以下是执行此操作的指南：  https：// docs。 microsoft.com/en-us/azure/active-directory-b2c/customize-ui-overview

2。 API从调用应用程序传递一个承载令牌，该应用程序已使用Azure AD B2C对用户进行了身份验证。您可以使用网络应用代表用户访问API。  https://docs.microsoft.com/en-us/aspnet/core/security/authentication/azure-ad-b2c-webapi?view=aspnetcore-2.2

3。目前，没有简单的方法让令牌包含用户的群组声明。您可以在我们的Azure AD B2C UserVoice论坛中为此投票：

获取用户会员资格

获取列表属于您需要使用客户端凭据流单独查询图表的组的用户。当前，获取用户列表然后调用memberOf api是实现您的要求的一种方法。

< pre class ="prettyprint"> GET https://graph.microsoft.com/v1.0/users/user-id-here/memberOf

< span style ="font-size：12px">您可以为用户调用getMemberGroups操作来获取他们的组：

 POST https://graph.microsoft.com/v1.0/users/user-id-here/getMemberGroups 
内容类型：application / json 
内容长度：33 
 
 {
" securityEnabledOnly"：true 
} 

https://developer.microsoft.com/en-us/graph/docs/api- reference / v1.0 / api / user_getmembergroups

I have an Angular SPA hosted at myangularapp.azurewebsites.net and a Web API hosted at myangularappapi.azurewebsites.net in Azure as two app services.

• Customer sign-up to access myangularapp.azurewebsites.net 
• Customer gets an email after he is approved manually by the application admin
• Customer sign-in using the application specific sign-in form
• App makes request to the myangularappapi.azurewebsites.net to get data

I'm planning to use Active Directory B2C and MSAL 2.0 to achieve this.

My questions are:

1. How can use custom application sign-in and sign-up forms instead of the AD specific UI? Can I have that as part of the Angular app that I have?
2. Can I use AD B2C to authenticate both the application and the API through the same AD? The API returns sensitive data and someone from the internet should not make a call to get the data.
3. How can I get a list of users belong to a group? Can I use MSAL to get the list of the users?

解决方案

1. You can customize the B2C HTML and CSS. Here is the guide for doing this: https://docs.microsoft.com/en-us/azure/active-directory-b2c/customize-ui-overview

2. The API is passed a bearer token from the calling app, which has already authenticated the user with Azure AD B2C. You can use a web app to access the API on behalf of the user. https://docs.microsoft.com/en-us/aspnet/core/security/authentication/azure-ad-b2c-webapi?view=aspnetcore-2.2

3. Currently there is no simple way to have the token include the users' group claims. You can vote for that in our Azure AD B2C UserVoice forum: Get user membership groups in the claims with AD B2C

To get the list of users belonging to a group you need to query the Graph separately using the client credentials flow. Currently, getting the user list and then calling the memberOf api is one way to achieve your requirement.

GET https://graph.microsoft.com/v1.0/users/user-id-here/memberOf

You can call the getMemberGroups action for a user to get their groups:

POST https://graph.microsoft.com/v1.0/users/user-id-here/getMemberGroups
Content-type: application/json
Content-length: 33

{
  "securityEnabledOnly": true
}

https://developer.microsoft.com/en-us/graph/docs/api-reference/v1.0/api/user_getmembergroups

这篇关于使用MSAL验证Angular SPA和WebAPI的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！