Vue SPA集成PowerBI遇AADSTS900971错误：无回复地址提供

开发Vue单页应用（SPA）集成MS PowerBI，需通过Microsoft完成身份验证。已在Azure门户注册SPA类型应用，并设置http://localhost为重定向URI，但执行以下代码后，登录页面始终返回错误：AADSTS900971: No reply address provided。

代码：

const formUrl = `https://login.microsoftonline.com/${values.tenantId}/oauth2/v2.0/authorize`
const params= {
  client_id: values.clientId,
  redirect_uri: "http://localhost:3000",
  response_type:"code",
  response_mode:"query",
  scope:"https://analysis.windows.net/powerbi/api/.default",
  state:"mystate",
  prompt: "consent"
}
const url = new URL(formUrl)
Object.keys(params).forEach(k => url.searchParams.set(k, params[k]))
window.location=url.href ;

• 对齐重定向URI：代码中使用的是http://localhost:3000，但Azure门户配置的是http://localhost，端口不一致导致AAD无法匹配回复地址。需在Azure门户的SPA应用配置中，添加http://localhost:3000作为重定向URI，保证和代码中的地址完全一致（包括协议、端口）。
• 使用SPA适配的授权流程：SPA无法安全存储客户端密钥，必须使用**授权码流（PKCE）**而非普通授权码流，需要补充PKCE相关参数：
  1. 生成随机的code_verifier字符串
  2. 通过SHA-256哈希并Base64URL编码生成code_challenge
  3. 在请求参数中添加code_challenge和code_challenge_method: "S256"
• 确认应用注册类型：确保Azure门户中注册的是**单页应用（SPA）**类型，Web应用/API类型的重定向URI配置逻辑不适用于SPA。
• 校验核心参数：检查values.tenantId和values.clientId是否与Azure门户中应用注册的信息完全匹配，参数错误也会导致地址匹配失败。

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