Open Closed

How to implement single signout using abp? #4229


User avatar
0
kirotech created

Hello, we have other web app login using abp 6.0.1 oauth, login works fine, but we struggle to implement single logout.

Can you help with samples or flows?

We try various abp auth application settings and nothing works for us.


10 Answer(s)
  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    hi

    • UI type: Angular / MVC / Blazor
    • DB provider: EF Core / MongoDB
    • Tiered (MVC) or Identity Server Separated (Angular): yes / no
  • User Avatar
    0
    kirotech created

    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!

  • User Avatar
    0
    maliming created
    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,
    }
    
  • User Avatar
    0
    kirotech created

    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?

  • User Avatar
    0
    kirotech created

    ?

  • User Avatar
    0
    maliming created
    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

  • User Avatar
    0
    kirotech created

    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?

  • User Avatar
    0
    muhammedaltug created

    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

  • User Avatar
    0
    kirotech created

    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?

  • User Avatar
    0
    muhammedaltug created

    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: `
        <abp-loader-bar></abp-loader-bar>
        <abp-dynamic-layout></abp-dynamic-layout>
        <abp-gdpr-cookie-consent></abp-gdpr-cookie-consent>
      `,
    })
    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 });
        });
      }
    }
    
Made with ❤️ on ABP v9.1.0-preview. Updated on December 05, 2024, 12:19