OIDC 客户端中的 iframe 会话问题答案

【问题标题】：iframe session issue in OIDC clientOIDC 客户端中的 iframe 会话问题
【发布时间】：2022-07-28 00:03:24
【问题描述】：

我在我的 Angular 应用程序中使用 OIDC 客户端和 WSO2 API Manager 3.2.0 进行身份验证。在我退出之前一切正常。

首先，我从一个选项卡登录应用程序，然后在成功登录后复制该选项卡。 之后，当我从一个选项卡注销时，其他选项卡也应该注销，但不会发生。我创建了一个 iframe 并不断检查会话，如下所示。

.ts 文件：

  baseUrl = new URL(window.location.href);
  callbackURI = this.baseUrl.origin + '/slate/dashboard';

  checkSessionURL = this.sanitizer.bypassSecurityTrustResourceUrl('https://localhost:9443/oidc/checksession' + '?client_id='
            + localStorage.getItem('client_id') + '&redirect_uri=' + this.callbackURI);

  constructor(private sanitizer: DomSanitizer, private authService: AuthService) {
  }

  ngOnInit(): void {
  }

  ngAfterViewInit(): void {
    if (this.authService.isLoggedUser()) {
      this.checkSession();
    }
  }

  isIFrame = (input: HTMLElement | null): input is HTMLIFrameElement =>
    input !== null && input.tagName === 'IFRAME'

  /**
   * Invoke check session OIDC endpoint.
   */
  checkSession(): void {
    setInterval(() => {
      const msg = localStorage.getItem('client_id') + ' ' + localStorage.getItem('sessionState');
      const frame = document.getElementById('iframeOP');
      if (this.isIFrame(frame) && frame.contentWindow) {
        frame.contentWindow.postMessage(msg, 'https://localhost:9443/oidc/checksession');
      }
    }, 3000);
  }

.HTML 文件：

<iframe
  title='iframeOP'
  id='iframeOP'
  [src]="checkSessionURL"
></iframe>

刷新重复标签后，我得到了这个。

https://localhost:9443/authenticationendpoint/oauth2_error.do?oauthErrorCode=access_denied&oauthErrorMsg=Error+occurred+while+extracting+data+from+id+token。

但是，重复选项卡中的注销应该会自动发生。如果有人可以提供帮助，我将不胜感激。

【问题讨论】：

标签： angular wso2 openid-connect identityserver3 wso2-identity-server

【解决方案1】：

您需要在标签之间共享logout 事件（并调用注销功能）。建议的实现：您的 SPA（每个选项卡）需要使用浏览器 Storage API (reference) 在本地存储中查看 external-logout 布尔设置。更现代的实现可能使用Broadcast Channel API 在选项卡之间广播注销事件。

【讨论】：

【解决方案2】：

从您共享的代码来看，您的单次注销逻辑似乎不完整。您已经实现了仅将消息发布到 iframe 的逻辑。但是，最好您也听取 iframe 以了解它对您的消息的响应。

您可能会收到“已更改”、“未更改”或“错误”作为响应。如果您收到“错误”，则需要将用户注销。

如果你得到“改变”，那么你需要在另一个 iframe 中发送一个授权调用，并带有一个额外的查询参数prompt=none。

如果您在响应中获得授权码，则表示用户已登录。因此，您需要将已存储的会话状态参数更新为响应中的参数。

如果您没有获得授权码，则表示用户已注销，因此您必须将用户注销。

如果消息显示“未更改”，那么您无需执行任何操作。

为了简化事情，您可以使用我们的Angular SDK，它会立即为您处理这些事情。

【讨论】：