MSAL.js 自定义域名配置问题解析与解决方案

问题背景

在使用微软身份验证库(MSAL.js)与Azure B2C集成时，开发者启用自定义域名后可能会遇到端点解析错误。具体表现为当应用程序尝试从自定义域名获取OpenID配置时，出现CORS策略阻止和端点解析失败的情况。

错误现象

主要错误信息显示为"endpoints_resolution_error"，表明MSAL.js无法从配置的权威端点获取必要的OpenID连接配置。控制台会显示类似以下的错误：

ClientAuthError: endpoints_resolution_error: Error: could not resolve endpoints. Please check network and try again.

根本原因

这个问题主要由两个因素导致：

1. CORS策略限制：浏览器安全策略阻止了从应用源到自定义域名OpenID配置端点的跨域请求。

2. 元数据获取失败：MSAL.js默认会尝试从权威端点获取元数据，当此请求被阻止时，整个认证流程就会中断。

解决方案

方案一：配置CORS头

最直接的解决方案是在自定义域名的OpenID配置端点添加适当的CORS头，允许来自应用域的跨域请求。这需要在Azure B2C的服务器端配置中添加：

Access-Control-Allow-Origin: [你的应用域名]
Access-Control-Allow-Methods: GET
Access-Control-Allow-Headers: Content-Type

方案二：手动提供元数据

如果无法修改服务器端配置，可以采用MSAL.js提供的高级配置选项，直接提供权威元数据，避免运行时获取：

const msalConfig = {
    auth: {
        // ...其他配置
        authorityMetadata: JSON.stringify({
            "issuer": "https://auth.example.com/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx/b2c_1_si/v2.0",
            "authorization_endpoint": "https://auth.example.com/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx/b2c_1_si/oauth2/v2.0/authorize",
            "token_endpoint": "https://auth.example.com/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx/b2c_1_si/oauth2/v2.0/token",
            // 其他必要端点
        })
    }
};

方案三：使用中间服务器

对于开发环境，可以设置本地中间服务器转发OpenID配置请求，避免浏览器直接跨域请求。

最佳实践建议

1. 生产环境：优先采用方案一，配置正确的CORS头，这是最标准和安全的方式。

2. 开发环境：可以使用方案三的中间服务器方式，或者方案二的手动元数据配置。

3. 测试验证：无论采用哪种方案，都应验证所有认证流程端点(授权、令牌、注销等)都能正确工作。

4. 安全考虑：确保自定义域名配置了有效的SSL证书，所有通信都通过HTTPS进行。

总结

MSAL.js与Azure B2C自定义域名集成时的端点解析问题，核心在于跨域请求限制。通过合理配置CORS头或手动提供元数据，开发者可以顺利解决这一问题，实现无缝的身份验证体验。选择解决方案时，应综合考虑环境要求、安全策略和维护成本等因素。