双应用注册场景下调用API时重复请求用户授权的问题求助

核心原因 #

你遇到的重复授权弹窗问题，本质是因为客户端应用（CLIENT_APP）和服务器应用（SERVER_APP）是Azure AD中两个独立的服务主体。用户最初给CLIENT_APP授权的View profile（对应profile范围）和Maintain access（对应offline_access范围）权限，仅对CLIENT_APP生效；当CLIENT_APP请求SERVER_APP的API范围时，Azure AD会默认重新发起包含这些基础身份权限的授权请求，导致二次弹窗。

具体实现步骤 #

1. 合并首次登录的权限范围 #

在msal-angular的登录请求配置中，将CLIENT_APP自身需要的权限（Directory.Read.All、profile、offline_access）和SERVER_APP的API范围合并到同一个scopes数组中。这样用户首次登录时，Azure AD会一次性展示所有需要授权的权限，用户同意后所有权限都会绑定到该用户的会话中。

示例配置代码：

// msal-config.ts
export const msalConfig = {
  auth: {
    clientId: '你的CLIENT_APP_ID',
    authority: 'https://login.microsoftonline.com/你的租户ID',
    redirectUri: 'http://localhost:4200', // 你的客户端重定向地址
  },
  cache: {
    cacheLocation: 'localStorage',
    storeAuthStateInCookie: false,
  }
};

// 合并所有需要的权限范围
export const loginRequest = {
  scopes: [
    'Directory.Read.All',
    'profile',
    'offline_access',
    'api://你的SERVER_APP_ID/你的服务器API范围' // 替换为SERVER_APP定义的API范围
  ]
};

2. 确认服务器应用的信任配置 #

确保SERVER_APP的Expose an API设置中，已经将CLIENT_APP添加为受信任的客户端应用（你已完成此步骤，只需确认配置未被修改即可）。这一步保证Azure AD允许CLIENT_APP代表用户请求SERVER_APP的API范围，不会额外拦截。

3. 静默获取服务器API令牌 #

调用SERVER_APP的设置API时，使用acquireTokenSilent方法获取包含服务器范围的访问令牌。由于用户已在首次登录时授权所有必要权限，该方法会直接从缓存中获取令牌，无需触发交互式授权弹窗。

示例调用代码：

import { MsalService } from '@azure/msal-angular';
import { HttpClient } from '@angular/common/http';

constructor(
  private msalService: MsalService,
  private http: HttpClient
) {}

async getServerSettings() {
  const tokenRequest = {
    scopes: ['api://你的SERVER_APP_ID/你的服务器API范围']
  };

  try {
    // 静默获取令牌
    const tokenResponse = await this.msalService.acquireTokenSilent(tokenRequest);
    // 携带令牌调用服务器API
    const settings = await this.http.get('https://你的服务器地址/api/settings', {
      headers: { Authorization: `Bearer ${tokenResponse.accessToken}` }
    }).toPromise();
    return settings;
  } catch (error) {
    // 仅当静默获取失败（如令牌过期且无刷新令牌）时，才触发弹窗（此时用户已授权过，通常不会重复请求权限）
    await this.msalService.acquireTokenPopup(tokenRequest);
    return this.getServerSettings();
  }
}

效果验证 #

完成上述配置后，用户首次登录时会看到包含所有权限的授权窗口，确认后后续调用SERVER_APP的API时不会再弹出授权提示，实现一步授权的流畅体验。

内容的提问来源于stack exchange，提问作者devmiles.com