部署集成Azure AD认证的Vue3应用至Azure存储静态站点需改配置吗？

部署到Azure存储静态Web应用会对已实现的AAD认证产生影响，核心原因是AAD应用注册中的关键配置与应用部署后的实际访问域名强相关，必须对应修改才能保证认证流程正常运行。以下是具体的配置修改要点及示例：

需要修改的核心配置 #

1. 更新Azure AD应用注册中的重定向/注销URI #

• 登录Azure门户，找到你之前注册的AAD应用，进入「认证」页面。
• 删除原本地开发环境的重定向URI（如http://localhost:8080），添加静态Web应用的实际访问地址，格式为https://<你的静态应用名称>.z22.web.core.windows.net（如果有自定义域名，替换为自定义域名）。
• 同步更新「注销URI」为部署后的应用根地址，确保注销后能正确跳转回应用。

2. 调整Vue项目中msal.js的配置 #

在项目的msal配置文件（通常是src/authConfig.js或类似文件）中，将redirectUri和postLogoutRedirectUri替换为部署后的静态Web应用地址，示例代码如下：

const msalConfig = {
  auth: {
    clientId: "你的AAD应用客户端ID",
    authority: "https://login.microsoftonline.com/你的租户ID",
    redirectUri: "https://<你的静态应用名称>.z22.web.core.windows.net",
    postLogoutRedirectUri: "https://<你的静态应用名称>.z22.web.core.windows.net"
  },
  cache: {
    cacheLocation: "sessionStorage",
    storeAuthStateInCookie: false
  }
};

export default msalConfig;

3. 可选：配置CORS（若涉及API调用） #

如果你的静态应用需要调用后端API，需确保：

• 后端API的CORS策略允许静态Web应用的域名访问；
• 若使用Azure存储的静态Web应用托管，无需额外配置存储的CORS（除非直接访问存储中的API类资源）。

验证流程 #

部署完成后，访问静态Web应用的域名，尝试触发登录流程：

1. 确认能正常跳转到AAD登录页面；
2. 登录成功后能自动跳转回应用并获取到用户信息；
3. 注销操作能正确跳转回应用首页。

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