OIDC客户端中的iframe会话问题

Question

我在我的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＆amp; oautherRormsg = error+error+发生++从+id+doken中提取+data+data+data+data+dogken。

但是，重复的选项卡中的登录应自动发生。如果有人能提供帮助，我很感激。

Answer 1

您需要在选项卡之间共享 logout event（并调用注销功能）。建议的实现：您的水疗中心（每个选项卡）需要使用浏览器外部logout 布尔值设置/docs/web/api/web_storage_api“ rel =“ nofollow noreferrer”>存储api （参考）。更现代的实现可以使用

Answer 2

从您共享的代码中，您的单个注销逻辑似乎不完整。您已经实现了逻辑，仅向iframe发布消息。但是，如果您还听过iframe对您的消息的响应，最好是最好的。

您可能会收到“更改”，“不变”或“错误”作为响应。如果收到“错误”，则需要将用户签名。

如果您获得“更改”，则需要在另一个带有附加查询参数 stript = none 的IFRAME内发送授权调用。

如果您在响应中获取授权代码，则意味着用户已登录。因此，您需要更新响应中存储的会话状态参数。

如果您没有获得授权代码，则意味着用户已登录，因此您必须将用户登录。

如果消息显示“不变”，那么您无需做任何事情。

为了简化事情，您可以使用我们的 angular sdk 开箱即用的东西。