如何在Azure DevOps扩展中正确配置MSAL的静态重定向URI？

问题分析 #

你当前使用window.location.href作为重定向URI，每次扩展版本更新后，路径中的版本号和时间戳会变化，导致需要重复添加新URI到应用注册列表；而直接使用https://dev.azure.com/[organization]/这类静态URI时，由于Azure DevOps的安全限制（如X-Frame-Options），MSAL弹出窗口无法完成回调，出现空白无响应的情况。

可行解决方案 #

方案1：切换为MSAL弹出式授权流（Popup Flow） #

使用弹出窗口完成登录，重定向URI只需配置扩展内的固定静态页面，避免动态路径的问题：

1. 添加静态重定向页面
   在扩展项目的dist目录下创建redirect.html，仅用于处理MSAL回调：

<!DOCTYPE html>
<html>
<body>
  <script type="text/javascript" src="https://alcdn.msauth.net/browser/2.38.0/js/msal-browser.min.js"></script>
  <script type="text/javascript">
    const msalInstance = new msal.PublicClientApplication({
      auth: {
        clientId: "[你的Microsoft应用ID]",
        authority: "https://login.microsoftonline.com/[你的租户ID]"
      }
    });
    msalInstance.handleRedirectPromise().then(() => window.close()).catch(err => {
      console.error(err);
      window.close();
    });
  </script>
</body>
</html>

2. 修改MSAL初始化代码
   使用弹出式登录模式，重定向URI指向上述静态页面：

import { PublicClientApplication } from "@azure/msal-browser";

const pca = new PublicClientApplication({
  auth: {
    clientId: Constants.Microsoft_AppID,
    authority: `https://login.microsoftonline.com/${Constants.TenantID}`,
    redirectUri: `${window.location.origin}/dist/redirect.html`
  }
});

// 弹出式登录示例
async function login() {
  const loginRequest = {
    scopes: ["api://[你的Function App客户端ID]/access_as_user"] // 替换为你的Function权限范围
  };
  try {
    const loginResponse = await pca.loginPopup(loginRequest);
    // 静默获取令牌
    const tokenResponse = await pca.acquireTokenSilent({
      ...loginRequest,
      account: loginResponse.account
    });
    // 使用tokenResponse.accessToken调用Azure Function
  } catch (err) {
    console.error(err);
  }
}

3. 更新应用注册的重定向URI
   每次部署新版本后，将新版本对应的redirect.html完整URI（如https://[organization].gallerycdn.vsassets.io/extensions/[organization]/[extension-name]/[新版本号]/[timestamp]/dist/redirect.html）添加到应用注册的允许列表中。相比原来的动态页面，这个操作更轻量化，且页面无需修改。

方案2：使用Azure DevOps内置OAuth机制替代MSAL #

利用Azure DevOps原生的授权能力获取令牌，完全规避重定向URI问题：

1. 配置扩展权限
   在vss-extension.json中添加所需的权限（根据你的Function需求调整）：

"scopes": [
  {
    "id": "vso.work",
    "name": "Work Item (read/write)"
  },
  {
    "id": "https://management.azure.com/user_impersonation",
    "name": "Azure Management API"
  }
]

2. 获取令牌并调用Function
   使用Azure DevOps提供的API直接获取令牌：

async function callAzureFunction() {
  const token = await VSS.getAccessToken();
  const response = await fetch("[你的Function App完整URL]", {
    method: "GET", // 或对应请求方法
    headers: {
      "Authorization": `Bearer ${token}`
    }
  });
  const result = await response.json();
  // 处理Function返回结果
}

注意：需确保你的Azure Function App已配置为接受Azure DevOps颁发的令牌，或已将Azure DevOps租户添加到Function的身份验证列表中。

静态URI空白问题原因 #

使用https://dev.azure.com/[organization]/这类外部静态URI时，Azure DevOps的安全策略（如X-Frame-Options、CSP）会阻止弹出窗口完成MSAL回调，导致窗口无法加载必要的处理逻辑，最终呈现空白无响应状态。

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