Outlook Web加载项调用Azure Web API时MSAL弹窗无法自动关闭

核心原因 #

你当前把Web API首页设为认证回调地址，导致认证完成后跳转到API首页而非专门的回调处理页面，无法触发关闭逻辑。需通过专属回调页面处理认证结果、传递令牌并关闭弹窗。

具体解决步骤 #

1. 创建专属认证回调页面

在Outlook加载项项目中新增静态HTML页面（比如auth-callback.html），需和加载项面板同域（比如加载项的静态资源域名），不要放在Web API域名下。页面代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>Auth Callback</title>
    <script src="https://alcdn.msauth.net/lib/1.4.14/js/msal.min.js"></script>
</head>
<body>
    <script>
        // 初始化MSAL实例，和加载项配置保持一致
        const msalConfig = {
            auth: {
                clientId: "你的Azure AD应用ClientID",
                authority: "https://login.microsoftonline.com/你的租户ID"
            }
        };
        const msalInstance = new Msal.UserAgentApplication(msalConfig);

        // 处理认证回调结果
        msalInstance.handleRedirectPromise()
            .then(response => {
                if (response && response.accessToken) {
                    // 将令牌发送给父页面（加载项面板）
                    window.opener.postMessage({
                        type: "AUTH_SUCCESS",
                        accessToken: response.accessToken
                    }, window.opener.origin);
                } else {
                    window.opener.postMessage({ type: "AUTH_FAILED" }, window.opener.origin);
                }
                // 关闭弹窗
                window.close();
            })
            .catch(err => {
                window.opener.postMessage({ type: "AUTH_FAILED", error: err.message }, window.opener.origin);
                window.close();
            });
    </script>
</body>
</html>

2. 配置Azure AD应用的重定向URI

登录Azure门户，找到你的AD应用，在身份验证页面中，将auth-callback.html的完整URL添加到重定向URI列表（类型选择"单页应用(SPA)"）。

3. 修改加载项中的MSAL调用代码

在加载项面板的JS代码中，初始化MSAL时指定回调页面地址，并监听弹窗传递的令牌：

// 初始化MSAL实例
const msalConfig = {
    auth: {
        clientId: "你的Azure AD应用ClientID",
        authority: "https://login.microsoftonline.com/你的租户ID",
        redirectUri: "https://你的加载项域名/auth-callback.html" // 填回调页面完整URL
    }
};
const msalInstance = new Msal.UserAgentApplication(msalConfig);

// 监听来自弹窗的认证结果消息
window.addEventListener("message", (event) => {
    // 验证消息来源，避免安全风险
    if (event.origin !== "https://你的加载项域名") return;

    if (event.data.type === "AUTH_SUCCESS") {
        const accessToken = event.data.accessToken;
        // 携带令牌调用Web API
        fetch("https://你的Web API域名/api/xxx", {
            headers: {
                "Authorization": `Bearer ${accessToken}`
            }
        })
        .then(res => res.json())
        .then(data => {
            // 填充下拉框等控件
            populateDropdown(data);
        });
    } else {
        console.error("认证失败:", event.data.error);
    }
});

// 触发认证弹窗
function startAuth() {
    const request = {
        scopes: ["api://你的Web API应用ID/access_as_user"] // 替换为Web API的权限范围
    };
    msalInstance.acquireTokenPopup(request)
        .catch(err => console.error("认证弹窗错误:", err));
}

4. 配置加载项Manifest允许跨域通信

在Outlook加载项的Manifest.xml中，将回调页面域名添加到AppDomains列表：

<AppDomains>
    <AppDomain>https://你的加载项域名</AppDomain>
</AppDomains>

关键注意事项 #

• 回调页面必须和加载项面板同域，或在Manifest的AppDomains中配置，否则postMessage会被浏览器拦截。
• Azure AD中的重定向URI必须和代码里的redirectUri完全一致（包括协议、域名、路径）。
• 不要在Web API中处理认证回调，后端服务无法触发浏览器弹窗关闭逻辑。

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