使用 Azure AD 的电容器本机应用程序中出现跨源令牌兑换错误

Question

我正在使用 Angular、Angular OIDC 客户端和 Capacitor 开发本机应用程序，但在使用 Microsoft Azure AD 进行身份验证期间遇到错误。我的 Xcode 日志中的错误消息是：

错误：

AADSTS9002326: Cross-origin token redemption is permitted only for the 'Single-Page Application' client-type. Request origin: 'http://localhost:4200'.

框架和工具： 角度：11.0.0 角度 OIDC 客户端：11.6.8 电容：3.0.0 Azure AD：用于身份验证

身份验证流程： 本机应用程序打开浏览器以使用 Azure AD 进行身份验证。 Azure AD 使用自定义 URI 方案重定向回应用程序。 配置： 身份验证配置（Angular OIDC 客户端）：

import { PassedInitialConfig } from 'angular-auth-oidc-client';

const isNative = true;

export const authConfig: PassedInitialConfig = {
  config: {
    authority: 'MyAuthority',
    redirectUrl: isNative ? 'msauth.laadpalen.monitor.native://auth' : 'http://localhost:4200',
    postLogoutRedirectUri: isNative ? 'msauth.laadpalen.monitor.native://auth' : 'http://localhost:4200',
    authWellknownEndpointUrl: 'MyEndpoint',
    clientId: 'MyClientID',
    scope: 'MyScope',
    responseType: 'code',
    silentRenew: true,
    useRefreshToken: true,
    maxIdTokenIatOffsetAllowedInSeconds: 600,
    issValidationOff: false,
    autoUserInfo: false,
    customParamsAuthRequest: {
      prompt: 'select_account',
    },
  }
}

iOS 配置（Info.plist）：

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleTypeRole</key>
    <string>Editor</string>
    <key>CFBundleURLName</key>
    <string>laadpalen.monitor.native</string>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>msauth.laadpalen.monitor.native</string>
    </array>
  </dict>
</array>

电容器配置（capacitor.config.json）：

{
  "appId": "stage.optis.cloud.laadpalen.monitor",
  "appName": "laadpalen-monitor-fe",
  "webDir": "dist/browser",
  "server": {
    "url": "http://localhost:4200"
  },
  "packageClassList": [
    "AppPlugin"
  ]
}

Azure AD 配置：

重定向 URI： http://localhost:4200（用于网络） msauth.laadpalen.monitor.native://auth（对于本机）

问题： 浏览器使用自定义 URI 方案 (msauth.laadpalen.monitor.native://auth) 重定向回应用程序后，我收到上述错误。

问题： 是什么原因导致此跨源令牌兑换错误，如何解决它以允许我的本机应用程序通过 Azure AD 正确进行身份验证？

如果需要更多配置，请向我询问！也不介意 isNative 布尔值，因为它只是用于测试。

请注意，我正在实习，另一个团队与另一个 Web 应用程序在同一个 Azure 应用程序注册中，他们配置了 WEB 重定向（其他端口和 URL），并且我配置了 SPA 和 IOS，这是否是导致错误？

采取的故障排除步骤： 确认 Azure AD 中的重定向 URI。 验证了 Azure AD 中的平台类型配置。 检查了 Angular 应用程序和电容器设置中的配置。

Answer 1

如果 Microsoft Entra ID 应用程序未注册为 SPA，通常会出现错误 “仅允许‘单页应用程序’客户端类型进行跨源令牌兑换”。

• 由于您使用SPA认证，重定向URL必须注册在SPA平台下。
• 还要确保传递正确的标头。

还要确保将

origin

作为标题传递：

• 在您的场景中，尝试在 Microsoft Entra ID 应用程序中将所有 URL 注册为 SPA 以解决问题。
• 尝试删除注册为WEB的其他重定向URL来解决冲突，并尝试重新运行代码来解决错误。

参考：

使用Reactjs登录Microsoft Active Directory时出错 - 代码日志