基于企业OAuth2服务器的Angular 5 SPA与ASP.NET Core API单点登录实现咨询

Hey there, let's walk through exactly how to implement this SSO flow using the Implicit Grant type for your Angular 5 SPA and ASP.NET Core API. I’ve built similar setups before, so here’s a practical, step-by-step approach that aligns with your requirements:

Implicit Grant is a solid choice for your SPA because SPAs can’t securely store a client secret (they run entirely in the browser). The core flow will be:

1. User visits your Angular SPA → if unauthenticated, they’re redirected to your company’s OAuth2 server
2. User logs in/authorizes access → OAuth2 server redirects back to your SPA with an access_token (and optionally an id_token)
3. Your SPA stores the token and attaches it to all API requests
4. Your ASP.NET Core API validates the token before serving protected resources

1. Install a Reliable OAuth2 Library #

For Angular 5, the angular-oauth2-oidc package is the go-to tool—it’s purpose-built for Implicit Flow and supports older Angular versions. Install a compatible version (v4.x works for Angular 5):

npm install angular-oauth2-oidc@4.x --save

2. Configure OAuth2 Settings #

Set up the library with your company’s OAuth2 server details. Create an auth module or add this to your app.module.ts:

import { NgModule } from '@angular/core';
import { OAuthModule, OAuthService } from 'angular-oauth2-oidc';

@NgModule({
  imports: [OAuthModule.forRoot()]
})
export class AuthModule {
  constructor(private oauthService: OAuthService) {
    this.configureOAuth();
  }

  private configureOAuth(): void {
    this.oauthService.configure({
      clientId: 'your-spa-client-id', // Registered in your company's OAuth2 server
      issuer: 'https://your-company-oauth2-server.com',
      redirectUri: window.location.origin + '/callback', // Must be registered in the OAuth2 server
      scope: 'openid profile api_access', // Request only necessary permissions
      responseType: 'id_token token', // Required for Implicit Grant
      showDebugInformation: false // Disable in production
    });

    // Load discovery document and auto-login if token exists
    this.oauthService.loadDiscoveryDocumentAndLogin();
  }
}

3. Add Route Guards to Protect SPA Routes #

Create a guard to ensure only authenticated users can access protected pages:

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { OAuthService } from 'angular-oauth2-oidc';

@Injectable()
export class AuthGuard implements CanActivate {
  constructor(private oauthService: OAuthService, private router: Router) {}

  canActivate(): boolean {
    if (this.oauthService.hasValidAccessToken()) {
      return true;
    }

    // Trigger the login flow if no valid token exists
    this.oauthService.initImplicitFlow();
    return false;
  }
}

Then attach it to your protected routes in app-routing.module.ts:

const routes: Routes = [
  { path: 'protected', component: ProtectedComponent, canActivate: [AuthGuard] },
  // Other routes...
];

4. Auto-Attach Token to API Requests #

Use an HTTP interceptor to inject the access_token into every API request header:

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';
import { OAuthService } from 'angular-oauth2-oidc';

@Injectable()
export class TokenInterceptor implements HttpInterceptor {
  constructor(private oauthService: OAuthService) {}

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const accessToken = this.oauthService.getAccessToken();
    if (accessToken) {
      const authReq = req.clone({
        headers: req.headers.set('Authorization', `Bearer ${accessToken}`)
      });
      return next.handle(authReq);
    }
    return next.handle(req);
  }
}

Register the interceptor in app.module.ts:

providers: [
  { provide: HTTP_INTERCEPTORS, useClass: TokenInterceptor, multi: true }
]

5. Handle Token Expiration #

Listen for token expiration events to trigger re-authentication:

// In your app.component.ts
ngOnInit(): void {
  this.oauthService.events.subscribe(event => {
    if (event.type === 'token_expires') {
      this.oauthService.initImplicitFlow(); // Redirect to login
    }
  });
}

1. Configure JWT Authentication #

In Startup.cs, add JWT bearer authentication to validate tokens from your company’s OAuth2 server:

using Microsoft.AspNetCore.Authentication.JwtBearer;
using Microsoft.IdentityModel.Tokens;

public void ConfigureServices(IServiceCollection services)
{
    services.AddControllers();

    services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
        .AddJwtBearer(options =>
        {
            options.Authority = "https://your-company-oauth2-server.com"; // Match your OAuth2 server URL
            options.Audience = "your-api-resource-name"; // Must match the resource registered in the OAuth2 server
            options.TokenValidationParameters = new TokenValidationParameters
            {
                ValidateIssuer = true,
                ValidateAudience = true,
                ValidateLifetime = true,
                ClockSkew = TimeSpan.Zero // Tighten expiration validation
            };
        });

    services.AddAuthorization();
}

2. Enable Authentication & Authorization #

In the Configure method, ensure authentication runs before authorization:

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }

    app.UseHttpsRedirection();
    app.UseRouting();

    // Critical order: Authentication first, then Authorization
    app.UseAuthentication();
    app.UseAuthorization();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllers();
    });
}

3. Protect API Endpoints #

Add the [Authorize] attribute to controllers or actions that require a valid token:

[ApiController]
[Route("api/[controller]")]
[Authorize]
public class ProtectedController : ControllerBase
{
    // Your API actions here
}

• Enforce HTTPS Everywhere: All communication (SPA ↔ OAuth2 server, SPA ↔ API) must use HTTPS to prevent token theft via man-in-the-middle attacks.
• Avoid XSS Vulnerabilities: Angular’s built-in sanitization helps, but avoid unsafe practices like innerHTML or untrusted script execution—XSS can steal stored tokens.
• Token Storage: Use sessionStorage instead of localStorage (clears when the tab closes) to reduce token exposure. Avoid storing tokens in plain text.
• Minimize Scope: Only request the scopes your app actually needs (e.g., api_access instead of full admin permissions).
• Implement Single Logout: Add a logout button that calls your OAuth2 server’s logout endpoint and clears the SPA’s stored tokens.

内容的提问来源于stack exchange，提问作者Pawel