部署Outlook Add-in SSO至Azure后无法获取Access Token

常见问题排查 #

1. 检查Azure AD应用注册的重定向URI #

登录Azure门户找到你的应用注册，进入「身份验证」页面：

• 删除原有localhost相关的重定向URI
• 添加生产环境的URI：https://<你的Web App名称>.azurewebsites.net/auth/sso/callback（按项目实际auth路径调整），类型选「Web」
• 确认「支持的账户类型」设置符合需求（通常选「任何组织目录中的账户和个人Microsoft账户」）

2. 核对manifest.xml配置 #

替换所有localhost:3000为你的Web App URL后，重点检查：

• <WebApplicationInfo>节点里的<Id>是Azure AD应用的客户端ID，<Resource>为https://outlook.office.com
• <Scopes>里包含你需要的Graph API权限（比如Mail.Read）
• <SourceLocation>指向Web App的taskpane.html完整URL

3. 修复Web App路由问题 #

如果是React/Vue这类SPA项目，路由重写会导致API请求被导向index.html，返回HTML而非JSON：

• Windows环境：在项目根目录创建web.config，添加以下规则：

  <?xml version="1.0" encoding="UTF-8"?>
  <configuration>
    <system.webServer>
      <rewrite>
        <rules>
          <rule name="排除Auth路径" stopProcessing="true">
            <match url="(.*)" />
            <conditions logicalGrouping="MatchAll">
              <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
              <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
              <add input="{REQUEST_URI}" pattern="^/auth/" negate="true" />
            </conditions>
            <action type="Rewrite" url="/" />
          </rule>
        </rules>
      </rewrite>
    </system.webServer>
  </configuration>
  

• Linux环境：调整nginx配置，确保/auth开头的请求不被重定向到首页

4. 配置Web App的CORS #

在Azure门户进入Web App的「API」→「CORS」页面：

• 添加允许的来源：https://outlook.office.com、https://outlook.office365.com、https://outlook.live.com
• 开启「允许凭据」选项

5. 确认生产环境变量 #

不要把敏感信息硬编码到代码里：

• 要么在项目根目录创建.env.production，添加：

  REACT_APP_CLIENT_ID=<你的Azure AD客户端ID>
  REACT_APP_TENANT_ID=common
  REACT_APP_REDIRECT_URI=https://<你的Web App名称>.azurewebsites.net/auth/sso/callback
  

• 要么在Azure Web App的「配置」→「应用程序设置」里直接添加这些变量

1. 前置配置 #

• 确保本地项目已通过npm run configure-sso完成Azure AD应用注册，且本地运行正常
• 更新Azure AD应用的重定向URI（参考上文排查步骤1）
• 配置生产环境变量（参考上文排查步骤5）

2. 构建项目 #

执行npm run build生成生产构建文件，默认输出到dist或build目录（依框架而定）

3. 部署到Azure Web App #

方式一：Azure CLI #

• 登录CLI：az login
• 创建Web App（若未创建）：az webapp create --resource-group <你的资源组名> --plan <你的服务计划名> --name <Web App名称> --runtime "NODE|18-lts"
• 部署构建文件：az webapp up --resource-group <你的资源组名> --name <Web App名称> --sku B1

方式二：Azure门户 #

进入Web App的「部署中心」，选择「本地Git」或「GitHub」，上传dist/build目录的所有文件

4. 配置路由与CORS #

• 按上文排查步骤3配置路由重写
• 按上文排查步骤4配置CORS规则

5. 更新并发布加载项Manifest #

• 修改manifest.xml，替换所有localhost:3000为Web App URL，核对<WebApplicationInfo>配置
• 通过Microsoft 365管理中心上传manifest.xml，或用office-toolbox工具发布加载项

6. 生产环境测试 #

在Outlook客户端或网页版打开加载项，触发SSO流程：

• 用浏览器开发者工具查看网络请求，确认/auth/sso相关接口返回JSON而非HTML
• 检查控制台是否有CORS、重定向或环境变量加载错误

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