feat: implement the oauth strategy

npm/ng-packs/apps/dev-app/src/app/home/home.component.ts

@@ -1,4 +1,5 @@
-import { Component } from '@angular/core';
+import { OAUTH_STRATEGY } from '@abp/ng.core';
+import { Component, Injector } from '@angular/core';
 import { OAuthService } from 'angular-oauth2-oidc';
 
 @Component({
@@ -10,9 +11,9 @@ export class HomeComponent {
     return this.oAuthService.hasValidAccessToken();
   }
 
-  constructor(private oAuthService: OAuthService) {}
+  constructor(private oAuthService: OAuthService, private injector: Injector) {}
 
   login() {
-    this.oAuthService.initCodeFlow();
+    OAUTH_STRATEGY.NavigateToLogin(this.injector);
   }
 }

npm/ng-packs/packages/account/src/lib/account-routing.module.ts

@@ -17,11 +17,11 @@ const routes: Routes = [
   {
     path: '',
     component: DynamicLayoutComponent,
-    canActivate: [AuthenticationFlowGuard],
     children: [
       {
         path: 'login',
         component: ReplaceableRouteContainerComponent,
+        canActivate: [AuthenticationFlowGuard],
         data: {
           replaceableComponent: {
             key: eAccountComponents.Login,
@@ -32,6 +32,7 @@ const routes: Routes = [
       {
         path: 'register',
         component: ReplaceableRouteContainerComponent,
+        canActivate: [AuthenticationFlowGuard],
         data: {
           replaceableComponent: {
             key: eAccountComponents.Register,

npm/ng-packs/packages/account/src/lib/guards/authentication-flow.guard.ts

@@ -1,17 +1,12 @@
-import { Injectable } from '@angular/core';
+import { Injectable, Injector } from '@angular/core';
 import { CanActivate } from '@angular/router';
-import { OAuthService } from 'angular-oauth2-oidc';
+import { OAUTH_STRATEGY } from '@abp/ng.core';
 
 @Injectable()
 export class AuthenticationFlowGuard implements CanActivate {
-  constructor(private oauthService: OAuthService) {}
+  constructor(private injector: Injector) {}
 
   canActivate() {
-    if (this.oauthService.responseType === 'code') {
-      this.oauthService.initCodeFlow();
-      return false;
-    }
-
-    return true;
+    return OAUTH_STRATEGY.CanActivate(this.injector);
   }
 }

npm/ng-packs/packages/core/src/lib/handlers/oauth-configuration.handler.ts

@@ -16,11 +16,6 @@ export class OAuthConfigurationHandler {
     private oAuthService: OAuthService,
     @Inject(CORE_OPTIONS) private options: ABP.Root,
   ) {
-    this.oAuthService.configure(this.options.environment.oAuthConfig);
-    if (this.oAuthService.responseType === 'code') {
-      this.oAuthService.setupAutomaticSilentRefresh();
-    }
-
     this.listenToSetEnvironment();
   }
 

npm/ng-packs/packages/core/src/lib/services/auth.service.ts

@@ -1,14 +1,15 @@
 import { HttpHeaders } from '@angular/common/http';
-import { Inject, Injectable, Optional } from '@angular/core';
+import { Inject, Injectable, Injector, Optional } from '@angular/core';
 import { Navigate } from '@ngxs/router-plugin';
 import { Store } from '@ngxs/store';
 import { OAuthService } from 'angular-oauth2-oidc';
-import { from, Observable, of } from 'rxjs';
+import { from, Observable } from 'rxjs';
 import { switchMap, take, tap } from 'rxjs/operators';
 import snq from 'snq';
 import { GetAppConfiguration } from '../actions/config.actions';
 import { ConfigState } from '../states/config.state';
 import { SessionState } from '../states/session.state';
+import { OAUTH_STRATEGY } from '../strategies/oauth.strategy';
 import { RestService } from './rest.service';
 
 @Injectable({
@@ -16,6 +17,7 @@ import { RestService } from './rest.service';
 })
 export class AuthService {
   constructor(
+    private injector: Injector,
     private rest: RestService,
     private oAuthService: OAuthService,
     private store: Store,
@@ -45,28 +47,16 @@ export class AuthService {
     );
   }
 
-  logout(): Observable<void> {
-    const issuer = this.store.selectSnapshot(ConfigState.getDeep('environment.oAuthConfig.issuer'));
-
-    if (this.oAuthService.responseType === 'code') {
-      this.oAuthService.logOut();
-      return of(null);
+  /**
+   * @deprecated use LogOut prop of OAUTH_STRATEGY instead, will be deleted in v3.3
+   */
+  logout(): Observable<any> {
+    if (!this.store.selectSnapshot(ConfigState.getDeep('environment.production'))) {
+      console.warn(
+        'The logout method of AuthService is depracated. Use LogOut prop of OAUTH_STRATEGY instead.',
+      );
     }
 
-    return this.rest
-      .request(
-        {
-          method: 'GET',
-          url: '/api/account/logout',
-        },
-        null,
-        issuer,
-      )
-      .pipe(
-        switchMap(() => {
-          this.oAuthService.logOut();
-          return this.store.dispatch(new GetAppConfiguration());
-        }),
-      );
+    return OAUTH_STRATEGY.LogOut(this.injector);
   }
 }

npm/ng-packs/packages/core/src/lib/utils/initial-utils.ts

@@ -9,19 +9,16 @@ import { ConfigState } from '../states/config.state';
 import { CORE_OPTIONS } from '../tokens/options.token';
 import { getRemoteEnv } from './environment-utils';
 import { parseTenantFromUrl } from './multi-tenancy-utils';
+import { OAUTH_STRATEGY } from '../strategies/oauth.strategy';
 
 export function getInitialData(injector: Injector) {
   const fn = async () => {
     const store: Store = injector.get(Store);
     const options = injector.get(CORE_OPTIONS) as ABP.Root;
-    const oAuthService = injector.get(OAuthService);
-
-    if (oAuthService.responseType === 'code') {
-      await oAuthService.loadDiscoveryDocumentAndTryLogin();
-    }
 
     await getRemoteEnv(injector, options.environment);
     await parseTenantFromUrl(injector);
+    await OAUTH_STRATEGY.Init(injector);
 
     if (options.skipGetAppConfiguration) return;
 

npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/current-user.component.ts

@@ -1,5 +1,5 @@
-import { ApplicationConfiguration, AuthService, ConfigState } from '@abp/ng.core';
-import { Component, OnInit } from '@angular/core';
+import { ApplicationConfiguration, OAUTH_STRATEGY, ConfigState } from '@abp/ng.core';
+import { Component, OnInit, Injector } from '@angular/core';
 import { Router } from '@angular/router';
 import { Select } from '@ngxs/store';
 import { Observable } from 'rxjs';
@@ -55,12 +55,12 @@ export class CurrentUserComponent implements OnInit {
     return window.innerWidth < 992;
   }
 
-  constructor(private authService: AuthService, private router: Router) {}
+  constructor(private injector: Injector, private router: Router) {}
 
   ngOnInit() {}
 
   logout() {
-    this.authService.logout().subscribe(() => {
+    OAUTH_STRATEGY.LogOut(this.injector).subscribe(() => {
       this.router.navigate(['/'], { state: { redirectUrl: this.router.url } });
     });
   }

templates/app/angular/src/app/home/home.component.ts

@@ -1,4 +1,5 @@
-import { Component } from '@angular/core';
+import { OAUTH_STRATEGY } from '@abp/ng.core';
+import { Component, Injector } from '@angular/core';
 import { OAuthService } from 'angular-oauth2-oidc';
 
 @Component({
@@ -10,9 +11,9 @@ export class HomeComponent {
     return this.oAuthService.hasValidAccessToken();
   }
 
-  constructor(private oAuthService: OAuthService) {}
+  constructor(private oAuthService: OAuthService, private injector: Injector) {}
 
   login() {
-    this.oAuthService.initCodeFlow();
+    OAUTH_STRATEGY.NavigateToLogin(this.injector);
   }
 }