Angular OAuth2.0 OIDC - angular-oauth2-oidc

Question

用户登录后，Angular 不会将我重定向到指定页面。

我正在使用 wso2 Identity Server 对用户进行身份验证。我想使用授权码流程。

在我的角度应用程序（我在其中使用依赖项 angular-oauth2-oidc）中，我有一个登录页面，其中仅包含一个重定向到 wso2 授权服务器的按钮。 登录后，我没有重定向到正确的页面。

我有一个服务：

const oAuthConfig : AuthConfig = {
   issuer: 'https://localhost:9443/oauth2/token',
   strictDiscoveryDocumentValidation: false,
   redirectUri: 'http://localhost:4200/dashboard',
   postLogoutRedirectUri: 'http://localhost:4200/login',
   tokenEndpoint: 'https://localhost:9443/oauth2/token',
   userinfoEndpoint: 'https://localhost:9443/oauth2/userinfo',
   clientId: '{{clientId}}',
   responseType: 'code',
   scope: 'openid',
   showDebugInformation: true
 }


 @Injectable({
   providedIn: 'root'
 })
 export class OauthWso2IdentityServerService {

    constructor(private readonly oauthService: OAuthService) {}

    loginWithWso2IdentityServer() {
        this.oauthService.configure(oAuthConfig);
        this.oauthService.loadDiscoveryDocument().then(() => {
          this.oauthService.tryLoginCodeFlow().then(() => {
             if(!this.oauthService.hasValidAccessToken()) {
               //initalize the login flow
               this.oauthService.initCodeFlow()
             } else {
               this. oauthService.loadUserProfile().then((userProfile) => {
               console.log(JSON.stringify(userProfile));
            })
           }
          })
        })
       }
      }

在我的 LoginComponent 中，我有：

  constructor(private wso2: OauthWso2IdentityServerService) {}

  login() {
      this.wso2.loginWithWso2IdentityServer();
  }

登录.html：

<button (click)="login()">login</button>

然后我实施了一个守卫：

export class AuthGuard implements CanActivate {

  constructor(private oauthService: OAuthService, private router: Router) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
     if (this.oauthService.hasValidIdToken()) {
         this.router.navigate(['/dashboard']);
         return true;
     }
   return false;
   }
  }

在 app-routing.module.ts 中：

  { path: 'dashboard', loadChildren: () => import('./features/dashboard/dashboard.module').then(m => m.DashboardModule), canActivate: [AuthGuard] },

我被重定向到：http://localhost:4200（这是一个空白页面）

Answer 1

根据 angular-oauth2-oidc SDK 的文档，您应该使用此方法启动登录流程：

this.oauthService.initLoginFlow();

另外，WSO2 Identity Server 有自己的 Angular SDK，可以更好地与 Identity Server 和 Asgardeo 集成。

您可以通过运行以下命令从 npm 下载它：

npm install --save @asgardeo/auth-angular

然后，您可以配置 SDK：

// app.module.ts

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { AppComponent } from "./app.component";

// Import Auth Module
import { AsgardeoAuthModule } from "@asgardeo/auth-angular";

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,

        // Provide the configs (See API Docs)
        AsgardeoAuthModule.forRoot({
            signInRedirectURL: "https://localhost:3000",
            clientID: "clientID",
            baseUrl: "https://localhost:9443"
        })
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

然后，您可以通过执行以下操作在您的组件中实现登录：

// app.component.ts

import { Component } from "@angular/core";
import { AsgardeoAuthService } from "@asgardeo/auth-angular";

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.css"]
})
export class AppComponent {
    constructor(private auth: AsgardeoAuthService) { }

    // Use this function in a login button to simply sign-in.    
    handleSignIn(): void {
        this.auth.signIn();
    }

    // Use this function in a logout button to simply sign-out.
    handleSignOut(): void {
        this.auth.signOut();
    }
}

您可以从以下链接找到更多相关信息。

1. https://github.com/asgardeo/asgardeo-auth-angular-sdk
2. https://www.thearmchaircritic.org/tech-journal/add-login-to-an-angular-app-using-asgardeo
3. https://wso2.com/asgardeo/docs/get-started/try-your-own-app/angular/
4. https://medium.com/@dasunin30/a-simple-guide-to-authenticate-an-angular-application-with-asgardeo-84b1b622e0c5