如何在Azure AD B2C中添加自定义域名属性并在前端用户旅程传递

一、AD B2C侧配置自定义域名属性 #

• 登录Azure门户，进入你的AD B2C租户，导航到用户属性页面，点击「新建自定义属性」。
• 设置属性名称为domainName（可自定义，建议用英文标识），属性类型选择「字符串」，完成创建。
• 打开已有的登录/注册用户流（你团队用的内置流程），进入「用户属性」配置：
  • 在「收集的属性」中添加domainName，确保用户注册/登录时需要输入该字段；
  • 在「返回的声明」中也添加domainName，确保认证成功后AD B2C会把该字段返回给前端。
• 保存用户流后，可先测试用户流，确认登录/注册页面已显示域名输入框，且认证后能返回该字段。

二、前端（React+AEM）集成处理 #

1. 认证时获取域名字段 #

• 前端使用MSAL.js（React场景推荐@azure/msal-react）初始化认证客户端，发起登录/注册请求时，确保请求的scope包含openid和profile（默认配置一般已包含）。
• 认证成功后，通过MSAL的getAccount()方法获取用户账户信息，从账户的idTokenClaims中即可提取domainName字段。

2. 前端用户旅程中持续传递域名 #

• 全局状态管理：将解析得到的domainName存入React全局状态（比如Redux、React Context或Recoil），这样所有页面组件都能直接从状态中读取该值，无需在路由间手动传递。
• 存储辅助（可选）：如果需要页面刷新后仍保留该值，可将domainName存入sessionStorage（会话级）或localStorage（持久化），初始化全局状态时先从存储中读取。
• 路由参数传递（按需）：如果特定页面需要通过路由参数传递，可在跳转时将domainName作为路由参数携带，目标页面通过useParams()（React Router）获取，但全局状态更适合全旅程持续传递的场景。

注意事项 #

• 确认AD B2C用户流的「应用程序声明」中已勾选domainName，否则前端无法从token中获取该字段。
• 注册流程中用户输入的域名会自动保存到AD B2C用户属性中，后续登录时AD B2C会自动返回该用户的域名值。
• 若使用自定义策略而非内置用户流，需在策略文件中添加自定义属性的声明定义，确保收集和返回该字段。

内容的提问来源于stack exchange，提问作者AskMe