javascript - ClientAuthError:令牌调用在隐藏的 iframe 中被阻止
问题描述
我正在使用 MSAL.js 作为 Azure Active Directory 的客户端构建一个 javascript SPA。
当为我的 API 请求访问令牌时
var requestObj = {
scopes: ["api://MyApi/Access"]
};
msalUserAgent.acquireTokenSilent(requestObj )
Msal 在内部为自己创建一个 iframe 来处理请求,然后给出以下关于在不支持的 iframe 内操作的错误:
ClientAuthError: Token calls are blocked in hidden iframes
at ClientAuthError.AuthError [as constructor] (webpack-internal:///./node_modules/msal/lib-es6/error/AuthError.js:26:28)
at new ClientAuthError (webpack-internal:///./node_modules/msal/lib-es6/error/ClientAuthError.js:111:28)
at Function.ClientAuthError.createBlockTokenRequestsInHiddenIframeError (webpack-internal:///./node_modules/msal/lib-es6/error/ClientAuthError.js:192:16)
at Function.WindowUtils.blockReloadInHiddenIframes (webpack-internal:///./node_modules/msal/lib-es6/utils/WindowUtils.js:206:90)
at eval (webpack-internal:///./node_modules/msal/lib-es6/UserAgentApplication.js:474:77)
at new Promise (<anonymous>)
at UserAgentApplication.acquireTokenSilent (webpack-internal:///./node_modules/msal/lib-es6/UserAgentApplication.js:472:16)
at Object.ensureUserLoggedIn (webpack-internal:///./src/services/ActiveDirectoryService.js:93:19)
at eval (webpack-internal:///./src/main.js:36:89)
at Module../src/main.js (http://localhost:8080/js/app.js:1178:1)
我的网页似乎仍然按预期工作,但我真的不喜欢携带未解决的错误,所以我试图找出问题的原因。
在尝试解决这个问题时,我在 github 上发现了这个问题, 它看起来很像我的问题。它确认acquireTokenSilent 确实创建了一个iFrame,该iFrame 重定向回主spa 应用程序(然后尝试登录并请求令牌......所以基本上是无休止的递归)。这就是它被阻止的原因。
建议之一是将redirectUri指定为没有我尝试过的MSAL的页面,但没有成功
request = {
scopes: ["api://MyApi/Access"],
redirectUri: "http://localhost:8080/token-landing.html"
};
// }
return msalUserAgent.acquireTokenSilent(request);
这并没有解决问题,而且很难看出是否使用了重定向。其他建议是在我尝试的任何地方检查 url 中的 '#' 并获取一个不是很好的令牌,因为 '#' 在 SPA 网站中很常见。
解决方案
来源:https ://github.com/lukezirngibl/msal-react-v2
enum Scopes {
OPEN_ID = 'openid',
CUSTOM_SCOPE = 'api://XXXX-XXXX-XXXXXX-XXXXX/all',
USER_READ = 'User.Read',
}
const config = {
auth: {
clientId: 'XXXXXX-XXXXXX-XXXXXX-XXXXX-XXXXX', // clientId or appId
redirectUri: 'http://localhost:3000', // redirectUri
authority: undefined, // Optional
},
cache: {
cacheLocation: 'localStorage',
storeAuthStateInCookie: true,
},
}
const {
AuthProvider, // Use once!
getAccessToken, // Can use to inject access tokens elsewhere in your app
msalClient, // Use elsewhere for msalClient.logout() and other client functions
graphClient, // Use for graph client api calls
useAccount, // React Hook to give access to account info in child components
} = configureMsal({
config, // Required
msalScopes: [Scopes.OPEN_ID, Scopes.CUSTOM_SCOPE], // Optional (But Recommended)
graphClientScopes: [ // Optional (But Recommended
Scopes.USER_READ,
],
})
const App = () => (
<AuthProvider
render={({ state, account }) =>
state === AuthProviderState.Success ? (
<div>Logged in as {account.username} </div>
) : (
<div>Loading..</div>
)
}
/>
);
推荐阅读
- swift - Cocoa:如何在 Swift 中获取广播 IP 地址?
- c# - 如何在 ASP 网络核心 Web API 上正确地将列表转换为 IQueryable
- python - 索引错误,似乎无法弄清楚这一点
- kubernetes - 查询以查找集群中 CPU 和内存的不同组合
- php - PHP:从序列化数组中删除整个数组的字符串计数
- django - Django ORM:使用数据透视表/中间表
- python - 如何使用此正则表达式模式提取子字符串?它给出了一个 ValueError: too many values to unpack (expected 1)
- python - 多处理实例之间的 Numpy 数组共享
- flutter - 我可以将 flutter_form_builder_package 与无状态小部件和提供程序一起使用吗?
- python - 如何删除不需要的空白