Azure AD B2C配置静态Web应用自定义角色失效问题排查

我基于Azure AD B2C流程构建静态Web应用，需求是根据用户公司名分配自定义角色，但目前页面仅返回"anonymous"和"authenticated"角色，自定义角色未生效。参考官方教程修改了角色分配函数并配置了staticwebapp.config.json，但功能仍未正常工作。

自定义角色分配函数代码 #

const fetch = require('node-fetch').default;
const roleGroupMap = {
    'CXL': 'company'
};
module.exports = async function (context, req) {
    const user = req.body || {};
    const roles = [];
    const company = await getUserCompany(user.accessToken);        
    for (const [role, companyMap] of Object.entries(roleGroupMap)) {
        if (company === companyMap) {
            roles.push(role);
        }
    }
    context.res.json({
        roles
    });
}
async function getUserCompany(bearerToken) {
    const url = new URL('https://graph.microsoft.com/v1.0/me');
    url.searchParams.append('$select', 'companyName');
    const response = await fetch(url, {
        method: 'GET',
        headers: {
            'Authorization': `Bearer ${bearerToken}`
        },
    });
    if (response.status !== 200) {
        return null;
    }
    const graphResponse = await response.json();
    return graphResponse.companyName;
}

staticwebapp.config.json配置 #

{
    "routes": [
        {
            "route": "/admin/*",
            "allowedRoles": [ "company" ]
        },
        {
            "route": "/authenticated/*",
            "allowedRoles": [ "authenticated" ]
        }
    ],
    "auth": {
     "rolesSource": "/api/GetRoles",
    "identityProviders": {
      "customOpenIdConnectProviders": {
        "aadb2c": {
          "registration": {
            "clientIdSettingName": "AADB2C_PROVIDER_CLIENT_ID",
            "clientCredential": {
              "clientSecretSettingName": "AADB2C_PROVIDER_CLIENT_SECRET"
            },
            "openIdConnectConfiguration": {
              "wellKnownOpenIdConfiguration": "https://xxx.b2clogin.com/xxx.onmicrosoft.com/B2C_1_dev_signin/v2.0/.well-known/openid-configuration"
            }
          },
          "login": {
        "nameClaimType": "emails",
        "loginParameters": [
          "resource=https://graph.microsoft.com"
        ]
          }
        }
      }
    }
  },
    "globalHeaders": {
        "Cache-Control": "no-cache"
    }
}

排查思路 #

• 确认API函数触发状态：在GetRoles函数中添加日志（如context.log(company)、context.log(user.accessToken)），查看Static Web Apps的函数日志，验证API是否被调用、返回的角色数组是否正确。
• 校验Access Token权限：用jwt.ms解析用户登录后获取的accessToken，检查是否包含User.Read权限，确保token能正常访问Microsoft Graph的/me接口。
• 核对用户companyName值：确认AD B2C中用户的companyName属性与代码中roleGroupMap的'CXL'完全匹配（注意大小写、空格等细节）。
• 检查API路由匹配：确保rolesSource指定的/api/GetRoles与函数的实际路由一致，查看函数的function.json配置是否正确。
• 验证认证参数传递：确认staticwebapp.config.json中loginParameters的resource=https://graph.microsoft.com已正确配置，保证AD B2C返回的token是针对Graph API的。
• 检查函数返回格式：确认函数返回的JSON结构为{"roles": ["company"]}格式，无语法错误。
• 清除缓存重新测试：使用浏览器隐身模式或清除缓存后重新登录，排除缓存导致的配置不生效问题。

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