How to implement single signout using abp? #4229

0

maliming created 2 years ago

Support Team Fullstack Developer

hi

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

0

kirotech created 2 years ago

UI type: Angular

DB provider: EF Core

Tiered (MVC) or Identity Server Separated (Angular): no

We use openiddict version to login magento application using abp oauth openiddict application. And login works.

What we can't make to work is single logout.

Could you please provide some guidance?

Thank you!

0

maliming created 2 years ago

Support Team Fullstack Developer

hi

Angular uses code mode by default, and when you log out, it will automatically single logout.

 oAuthConfig: {
    issuer: 'https://localhost:44305/',
    redirectUri: baseUrl,
    clientId: 'MyProjectName_App',
    responseType: 'code',
    scope: 'offline_access MyProjectName',
    requireHttps: true,
}

0

kirotech created 2 years ago

Hello, thank you for your response, but this doesn't help because this solution is not full yet.

We have a external relying party which is using abp openiddict application to implement single signon function and it works.

We do not know how to make abp logout our external relying party system together with angular app logout.

We would like to logout our Relying Party (RP) external ecommerce system together with abp angular logout.

Question is. How to configure abp application to make angular logout external oauth relying party too.

We call url https://localhost:44374/connect/logout?post_logout_redirect_uri=https://support.abp.io/&client_id=Angular_App&id_token_hint=access_token

Everything works and we get proper redirect, but angular application is still logged in.

Also looks like angular logout doesn't respect logout redirect uris? Because logout uri redirect is set in the app, but after angular logout we do not get redirect.

Do you understand?

0

kirotech created 2 years ago

?

0

maliming created 2 years ago

Support Team Fullstack Developer

hi kirotech

Does the angular application you want to logout use the angular-oauth2-oidc library? How does it get access_token?

https://github.com/manfredsteyer/angular-oauth2-oidc https://github.com/manfredsteyer/angular-oauth2-oidc#logging-out

0

kirotech created 2 years ago

Hello,

We didn't modify anything in your commercial abp angular application. We expect it to work as abp designed it.

After that said we expect you to explain why your commercial abp product doesn't respect logout redirect urls.

If you have any documentation explaining how to use your open iddict applications functionality to make your commercial abp angular app respect logout redirects uri config please provide it.

Do you understand?

0

muhammedaltug created 2 years ago

Hello,

If you want, you can implement revocation and logout with the revocation endpoint.

If you want to log out with redirection, please follow the steps below.

Create a component named LogoutComponent and add to declarations array of app.module.ts

import { Component } from '@angular/core';
import { OAuthService } from 'angular-oauth2-oidc';
@Component({
  selector: '',
  template: '',
})
class LogoutComponent {
  constructor(authService: OAuthService) {
    authService.revokeTokenAndLogout();
  }
}

Add 'logout' route to app.routing.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LogoutComponent } from './logout.component'
const routes: Routes = [
    //other routes
  {
    path: 'logout',
    component: LogoutComponent,
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { relativeLinkResolution: 'legacy' })],
  exports: [RouterModule],
})
export class AppRoutingModule {}

Change post_logout_redirect_uri http://localhost:4200 to http://localhost:4200/logout

0

kirotech created 2 years ago

Thank you for your help muhammedaltug,

Change post_logout_redirect_uri http://localhost:4200 to http://localhost:4200/logout

Where we supposed to do this exactly?

When we logout abp commercial angular we need to logout RP (Relying party) too.

When we logout RP (Relying party) we need to logout abp commercial angular. As i understand your sample covers this case? After RP logout we redirect to this new angular endpoint? But what about post logout redirect when we logout abp commercial angular?

0

muhammedaltug created 2 years ago

Hello,

Where we supposed to do this exactly?

We call url https://localhost:44374/connect/logout?post_logout_redirect_uri=https://support.abp.io/&client_id=Angular_App&id_token_hint=access_token

Before making the request to the logout endpoint. You need to change the post_logout_redirect_uri param(Don't forget to encode url).

When we logout abp commercial angular we need to logout RP (Relying party) too.

You need to make a request to the RP logout endpoint.

But what about post logout redirect when we logout abp commercial angular?

You can pass the RP url as redirect uri to angular logout url(http://localhost:4200/logout?post_redirect_url=encoded_rp_url)

You can do it by following the steps below.

I added the following URLs to Administration>OpenId>Applications>MyApllication->Edit>Post Logout Redirect Uris http://localhost:4200/logout http://localhost:4200/logout?post_logout_redirect_uri=https%3A%2F%2Flocalhost%3A44365 https://localhost:44365

Listening logout event for calling the other client's logout URL.

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');
      }
    });
  }
}

Pass redirect uri to auth server for redirect RP again

@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 });
    });
  }
}

10 Answer(s)