我正在构建一个 React 应用程序,我想在其中使用 OpenID Connect 对用户进行身份验证。在我的开发环境中,OIDC 授权是 Identity Server 4 的本地运行实例。
我找到了一个将oidc-client-js库与 Redux 集成的Github存储库,因此我下载了示例存储库并将其指向我的身份服务器。我所做的唯一其他更改是使用我的不记名令牌而不是示例使用的 YouTube 调用本地 API。
我有一个 Windows 环境。
在 Chrome 和 Edge 上,该示例完美运行。我能够使用不记名令牌进行身份验证并成功调用我的本地 API。然而,在 Firefox 上,虽然身份验证工作正常并且我的 API 被成功调用并显示结果,但几秒钟后,应用程序突然出现让用户退出。(我说“出现”是因为它的行为就像用户已注销,但如果我重新加载页面,则用户已经通过身份验证)。
注意:我在这里划掉了一个部分。这是一条红鲱鱼。请参阅下面的更新 1,其中描述了 Firefox 如何添加第二个 iframe。没有为我的客户端注册重定向 URL,导致重定向到导致这些 CSP 警告的 IS4 错误页面。
查看控制台日志,Chrome 和 Firefox 之间的主要区别是我在 Firefox 中看到的警告:
内容安全策略:由于“frame-ancestors”指令而忽略“x-frame-options”。
这会在验证用户身份后一两秒出现在控制台中。我怀疑这可能与 Javascript OIDC 客户端为检查会话而添加的 iframe 有关。此 iframe 指向身份授权上的 /connect/checksession。
如果我在 Firefox 中导航到此检查会话 URL,我会在控制台中收到 Javascript 错误:
内容安全策略:页面的设置阻止了自身资源的加载(“script-src”)。
我在 Chrome 中没有看到此错误。
这个Content-Security-Policy
页面是default-src 'none'; script-src 'sha256-VDXN0nOpFPQ102CIVz+eimHA5e+wTeoUUQj5ZYbtn8w='
我可以提供的唯一其他信息是在 Firefox 中编写的控制台日志似乎将用户注销:
Action type: redux-oidc/USER_SIGNED_OUT
Action payload: undefined
State before: Object { routing: {…}, oidc: {…}, subscriptions: {…} }
State after: Object { routing: {…}, oidc: {…}, subscriptions: {…} }
我希望有人能够使用这些信息为我指明正确的方向,因为我真的不确定这里的问题是什么。似乎问题出在身份服务器中,因为它在检查会话时报告 Firefox 中的 Javascript 错误,但我不确定我能做些什么。
更新 1
经过深入研究,我发现当第二个 iframe 被添加到页面调用身份机构的连接/授权端点时,会出现问题,其 URL 如下:http: //identity.domain.com/connect/authorize ?client_id=js&redirect_uri =http%3A%2F%2Flocalhost%3A8080%2Fsilent_renew.html&response_type=id_token&scope=openid&state=9d87c43c58c84fddbde5fd9aa0f97df7&nonce=826fb8d6dc114549810584ddd01a3271&prompt=none。这只发生在 Firefox 上。在 Chrome 和 Edge 中,第二个 iframe 永远不会被添加。查看身份服务器日志,我看到在响应此连接/授权调用期间记录了以下行(以及其他行) :
授权请求中没有用户
显示错误:提示=无已请求但用户未通过身份验证”。
但我仍然没有更接近理解为什么会发生这种情况。