MSAL授权码流中带片段URL时code未作为查询参数返回的问题

问题描述 #

应用采用哈希路由（URL含#片段），需要Azure AD认证成功后重定向至https://localhost:8080/#/teams，且授权码code以https://localhost:8080/#/teams?code={CODE}的形式作为哈希内的查询参数返回。但实际重定向后，code被错误附加为https://localhost:8080/#/code=xxx，导致前端路由匹配失败。即使将redirectUri设置为https://dev/teams，结果仍为https://dev/teams/#code=xxx。由于后端需要直接获取code而非令牌，必须使用loginRedirect方式完成授权码流。

核心原因 #

1. 当前redirectUri未包含目标哈希路由路径，Azure AD默认将授权码参数附加到URL的哈希部分，覆盖了预期的路由路径。
2. loginRedirect的回调逻辑无效：该方法是页面跳转行为，不会触发后续的then回调，需在应用初始化阶段处理重定向响应。
3. 未正确配置response_mode以适配哈希路由的参数传递需求。

解决方案 #

1. 配置Azure AD允许的重定向URI #

在Azure AD应用注册的重定向URI列表中添加包含哈希路径的完整URL（如https://localhost:8080/#/teams），确保Azure AD允许该地址作为重定向目标。

2. 修改MSAL配置与登录请求 #

• 在loginRedirect请求中明确指定带哈希路径的redirectUri，同时设置response_mode为fragment，让授权码附加到哈希的查询参数部分。
• 移除无效的loginRedirect回调逻辑，改用handleRedirectPromise在应用初始化时捕获授权码。

3. 初始化阶段处理重定向响应 #

在应用启动时调用handleRedirectPromise获取授权码，再传递给后端处理。

代码修改示例 #

修改MSAL实例配置（可选，也可在loginRedirect中指定） #

function fetchAzureMSALInstance() {
    let azureMsalConfig = {
        auth: {
            clientId: 'e154806f-ba69-417f-a60c-b1c89b2ffa01',
            authority: 'https://login.microsoftonline.com/common',
            redirectUri: `${window.location.origin}/#/teams` // 直接设置带哈希路径的重定向地址
        },
        cache: {
            cacheLocation: 'sessionStorage', 
            storeAuthStateInCookie: false 
        }
    }
    return new msal.PublicClientApplication(azureMsalConfig)
}

修改Teams.vue按钮点击逻辑 #

reviewPermissions() {
    const accessTokenRequest = { scopes: ["https://graph.microsoft.com/.default"], account: self.msalAccount }
    self.azureMsalInstance
        .acquireTokenSilent(accessTokenRequest)
        .then(response => {
            console.log('Login successful', response)
        })
        .catch(error => {
            if (error instanceof AuthError) {
                self.azureMsalInstance.loginRedirect({
                    scopes: ["https://graph.microsoft.com/.default"],
                    prompt: 'consent',
                    response_type: 'code',
                    response_mode: 'fragment', // 适配哈希路由的参数传递模式
                    redirectUri: `${window.location.origin}/#/teams` // 显式指定重定向地址
                })
            }
        })
},

应用初始化时处理重定向响应 #

在应用入口文件（如main.js）中添加：

const msalInstance = fetchAzureMSALInstance()

// 处理重定向回来的授权码
msalInstance.handleRedirectPromise()
    .then(response => {
        if (response) {
            // 获取授权码并传递给后端
            const code = response.code;
            console.log('授权码:', code);
            // 更新用户状态
            self.userAccount = response.account;
        }
    })
    .catch(error => {
        console.error('重定向处理失败:', error);
    });

验证效果 #

配置完成后，认证成功后的重定向URL应为https://localhost:8080/#/teams?code={CODE}，前端可通过解析window.location.hash提取code参数，再传递给后端使用。

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