أنشطة المستخدم - m.veckas

How to implement single signout using abp? #4595

العام السابق سؤال

Hello,

we are trying to implement single sign on and single logout functionality to our systems (abp self service system and Magento2 ecommerce). We have a problems with single logout. Last month we opened an issue (https://support.abp.io/QA/Questions/4229/How-to-implement-single-signout-using-abp) but it doesn't fits our requirements, because it opens an ecommerce website logout endpoint in the new browser tab (see the code snippet below).

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { OAuthService } from 'angular-oauth2-oidc';
import { filter } from 'rxjs';

@Component({
  selector: 'app-root',
  template: `
    &lt;abp-loader-bar&gt;&lt;/abp-loader-bar&gt;
    &lt;abp-dynamic-layout&gt;&lt;/abp-dynamic-layout&gt;
    &lt;abp-gdpr-cookie-consent&gt;&lt;/abp-gdpr-cookie-consent&gt;
  `,
})
export class AppComponent {
  constructor(oAuthService: OAuthService) {
     oAuthService.events.pipe(filter(e => e.type === 'logout')).subscribe(() => { 
      const currentUrl = router.url.split('?')[0];
      //check logout location
      if (currentUrl !== '/logout') {
        // logout from rp
        window.open('otherclientloguturl', '_blank');
      }
    });
  }
}

We have tried to change the window.open('otherclientloguturl', '_blank'); to window.open('otherclientloguturl', '_self'); but then the single logout stops working.

Also, we have created a new angular component responsible for redirecting to the ecommerce logout endpoint in the event:

@Component({
  selector: 'app-root',
  template: `
    &lt;abp-loader-bar&gt;&lt;/abp-loader-bar&gt;
    &lt;abp-dynamic-layout&gt;&lt;/abp-dynamic-layout&gt;
    &lt;abp-gdpr-cookie-consent&gt;&lt;/abp-gdpr-cookie-consent&gt;
  `,
})
export class AppComponent {
  constructor(oAuthService: OAuthService) {
     oAuthService.events.pipe(filter(e => e.type === 'logout')).subscribe(() => { 
      const currentUrl = router.url.split('?')[0];
      //check logout location
      if (currentUrl !== '/logout') {
        // navigate to redirect-to-ecommerce-logout component
        router.navigate(['/redirect-to-ecommerce-logout']);
      }
    });
  }
}

logout component:

@Component({
  selector: '',
  template: '',
})
class LogoutComponent {
  constructor(authService: OAuthService, route: ActivatedRoute) {
    route.queryParams.subscribe(params => {
      const { post_logout_redirect_uri } = params;
      authService.revokeTokenAndLogout({ post_logout_redirect_uri });
    });
  }
}

redirect-to-ecommerce-logout component:

@Component({ 
 selector: 'app-redirect-to-ecommerce-logout',  
templateUrl: './redirect-to-ecommerce-logout.component.html',  
styleUrls: ['./redirect-to-ecommerce-logout.component.scss']
})

export class RedirectToEcommerceLogoutComponent implements OnInit {
  constructor() {   
      window.open('otherclientlogouturl', '_self');  
  }
  ngOnInit(): void {  
  }
}

With this implementation it opens the ecommerce logout endpoint as expected but doesn't logout from abp, it seems that it doesn't waits until abp logouts itself and redirects to the ecommerce.

Maybe you could give us an example, how to implement Single Logout with redirects in the single browser tab?

UI type: Angular DB provider: EF Core Tiered (MVC) or Identity Server Separated (Angular): no

أنشطة "m.veckas"