D365内嵌画布应用PCF组件MSAL登录弹窗未跳转原页仅在弹窗内加载redirectUri

根因说明 #

1. MSAL 代码配置中不支持使用通配符作为redirectUri，通配符仅可用于 Azure AAD 应用注册的重定向 URI 配置项，代码侧必须传入当前运行环境的精确重定向地址，否则MSAL无法正确识别回调来源、完成弹窗通信逻辑。
2. 缺少回调处理逻辑：MSAL实例初始化后未执行回调校验方法，导致弹窗加载重定向地址后，无法识别当前是回调场景，不会主动将授权结果回传给父窗口、关闭弹窗。

修复步骤 #

1. 修改MSAL配置 #

将写死的通配符redirectUri改为动态获取当前运行环境的精确地址，同时增加缓存配置适配多iframe嵌套场景（PCF→画布应用→D365 多层iframe嵌套容易出现授权状态丢失问题），初始化后主动调用handleRedirectPromise()处理回调逻辑。

2. 调整后的完整代码 #

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

const msalConfig = {
  auth: {
    clientId: '替换为你的实际client_id',
    authority: 'https://login.microsoftonline.com/替换为你的实际tenant_id',
    // 动态获取当前环境的精确重定向地址，符合AAD注册的通配符规则即可
    redirectUri: `${window.location.origin}/main.aspx`,
  },
  // 新增缓存配置适配多层iframe场景
  cache: {
    cacheLocation: "localStorage",
    storeAuthStateInCookie: true
  }
};

const msalInstance = new PublicClientApplication(msalConfig);

// 新增：优先处理重定向/弹窗回调逻辑
msalInstance.handleRedirectPromise()
  .then(response => {
    if (response) {
      // 回调返回授权结果，可在此处处理token逻辑
      console.log("授权成功", response);
    }
  })
  .catch(err => {
    console.log("回调处理错误", err);
  });

var loginRequest = {
  responseMode:"query",
  scopes: ["openid", "offline_access", "https://storage.azure.com/user_impersonation"],
};

// 登录触发逻辑保持不变
msalInstance.loginPopup(loginRequest)
  .then(response => {
    console.log(response)
  })
  .catch(err => {
    console.log(err)
  });

3. 可选校验 #

如果修改后仍存在问题，可确认D365环境的内容安全策略（CSP）未拦截MSAL的跨窗口通信，通常默认D365配置不会拦截该逻辑。你之前在AAD中配置的通配符重定向URI规则无需修改。

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