基于ASP.NET Identity，Angular5端无跳转实现IdentityServer4登录注册可行吗？

Absolutely! You can absolutely implement login and registration without redirecting to server-side pages using ASP.NET Identity alongside IdentityServer4 for your Angular 5 app. Here's a step-by-step breakdown tailored to your scenario:

1. Configure IdentityServer4 for Your Angular App & API Segmentation #

First, set up IdentityServer4 to support authentication flows that avoid server-side page redirects, and define scopes to distinguish your public frontend API from protected backend APIs.

Client Configuration #

In your IdentityServer's Config.cs, define a client for your Angular app that supports the Resource Owner Password Credentials Grant (for direct, no-redirect login) plus Client Credentials Grant for API-to-API calls:

public static IEnumerable<Client> GetClients()
{
    return new List<Client>
    {
        new Client
        {
            ClientId = "angular_frontend",
            ClientName = "Angular 5 Public Frontend",
            AllowedGrantTypes = GrantTypes.ResourceOwnerPasswordAndClientCredentials,
            ClientSecrets = { new Secret("your_secure_client_secret".Sha256()) },
            AllowedScopes = {
                IdentityServerConstants.StandardScopes.OpenId,
                IdentityServerConstants.StandardScopes.Profile,
                "api_frontend", // Scope for public frontend API
                "api_protected"  // Scope for protected backend APIs
            },
            AllowOfflineAccess = true, // Enable refresh tokens for longer sessions
            AccessTokenLifetime = 3600, // 1-hour token validity
            RequireClientSecret = false // Skip if your Angular app can't safely store secrets (SPA limitation)
        }
    };
}

API Resource Configuration #

Define your two API segments to enforce scope-based access control:

public static IEnumerable<ApiResource> GetApiResources()
{
    return new List<ApiResource>
    {
        new ApiResource("api_frontend", "Public Frontend API")
        {
            Scopes = { "api_frontend" }
        },
        new ApiResource("api_protected", "Protected Backend APIs")
        {
            Scopes = { "api_protected" }
        }
    };
}

2. Integrate ASP.NET Identity with IdentityServer4 #

ASP.NET Identity handles user storage, password validation, and registration—integrate it with IdentityServer4 seamlessly:

1. Install the required NuGet package: IdentityServer4.AspNetIdentity
2. Configure services in Startup.cs:

// Add ASP.NET Identity with your user DB context
services.AddDbContext<ApplicationDbContext>(options =>
    options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection")));

services.AddIdentity<ApplicationUser, IdentityRole>()
    .AddEntityFrameworkStores<ApplicationDbContext>()
    .AddDefaultTokenProviders();

// Add IdentityServer with ASP.NET Identity integration
services.AddIdentityServer()
    .AddAspNetIdentity<ApplicationUser>()
    .AddInMemoryApiResources(Config.GetApiResources())
    .AddInMemoryClients(Config.GetClients())
    .AddInMemoryIdentityResources(Config.GetIdentityResources())
    .AddDeveloperSigningCredential(); // Replace with a production-grade certificate!

Custom Registration Endpoint #

Since you don't want server-side pages, build a custom API endpoint in your IdentityServer project to handle user registration:

[ApiController]
[Route("api/account")]
public class AccountController : ControllerBase
{
    private readonly UserManager<ApplicationUser> _userManager;

    public AccountController(UserManager<ApplicationUser> userManager)
    {
        _userManager = userManager;
    }

    [HttpPost("register")]
    public async Task<IActionResult> Register([FromBody] RegisterModel model)
    {
        var user = new ApplicationUser { UserName = model.Email, Email = model.Email };
        var result = await _userManager.CreateAsync(user, model.Password);

        if (result.Succeeded)
        {
            return Ok(new { Message = "User registered successfully" });
        }

        return BadRequest(result.Errors);
    }
}

// Registration model for request body
public class RegisterModel
{
    public string Email { get; set; }
    public string Password { get; set; }
}

3. Implement Login/Registration in Angular 5 #

Build your own Angular login/registration forms and interact directly with IdentityServer's token endpoint or your custom registration API.

Angular Auth Service Example #

Create an AuthService to handle token requests and storage:

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/do';

@Injectable()
export class AuthService {
    private identityServerUrl = 'http://localhost:5000';
    private tokenStorageKey = 'auth_token';

    constructor(private http: HttpClient) { }

    // Call custom registration endpoint
    register(email: string, password: string): Observable<any> {
        return this.http.post(`${this.identityServerUrl}/api/account/register`, {
            email: email,
            password: password
        });
    }

    // Login using password grant (no redirect)
    login(email: string, password: string): Observable<any> {
        const body = new URLSearchParams();
        body.set('grant_type', 'password');
        body.set('client_id', 'angular_frontend');
        body.set('username', email);
        body.set('password', password);
        body.set('scope', 'openid profile api_frontend offline_access');

        const headers = new HttpHeaders({ 'Content-Type': 'application/x-www-form-urlencoded' });

        return this.http.post(`${this.identityServerUrl}/connect/token`, body.toString(), { headers })
            .do(token => localStorage.setItem(this.tokenStorageKey, JSON.stringify(token)));
    }

    // Retrieve stored access token for API calls
    getAccessToken(): string | null {
        const token = localStorage.getItem(this.tokenStorageKey);
        return token ? JSON.parse(token).access_token : null;
    }

    // Clear stored token on logout
    logout(): void {
        localStorage.removeItem(this.tokenStorageKey);
    }
}

Use the Service in Your Components #

Bind your login/registration form to the auth service methods in an Angular component:

import { Component } from '@angular/core';
import { AuthService } from './auth.service';

@Component({
    template: `
        <div class="auth-form">
            <input type="email" [(ngModel)]="email" placeholder="Email" required>
            <input type="password" [(ngModel)]="password" placeholder="Password" required>
            <button (click)="handleLogin()">Login</button>
            <button (click)="handleRegister()">Register</button>
        </div>
    `
})
export class AuthComponent {
    email: string;
    password: string;

    constructor(private authService: AuthService) { }

    handleLogin(): void {
        this.authService.login(this.email, this.password).subscribe(
            () => console.log('Login successful! Redirecting...'),
            err => console.error('Login failed:', err)
        );
    }

    handleRegister(): void {
        this.authService.register(this.email, this.password).subscribe(
            () => console.log('Registration successful! Please login.'),
            err => console.error('Registration failed:', err)
        );
    }
}

4. Protect Your APIs #

Protected Backend APIs #

In your protected API projects, configure authentication to validate IdentityServer tokens:

// Startup.cs
services.AddAuthentication("Bearer")
    .AddJwtBearer("Bearer", options =>
    {
        options.Authority = "http://localhost:5000";
        options.RequireHttpsMetadata = false;
        options.Audience = "api_protected";
    });

services.AddAuthorization(options =>
{
    options.AddPolicy("ProtectedApi", policy =>
    {
        policy.RequireAuthenticatedUser();
        policy.RequireClaim("scope", "api_protected");
    });
});

// In Configure()
app.UseAuthentication();

Decorate protected controllers/actions with [Authorize(Policy = "ProtectedApi")].

Frontend API (Mixed Access) #

For your frontend API that supports both anonymous and authenticated users, use [AllowAnonymous] for public endpoints and [Authorize(Policy = "FrontendApi")] for user-specific endpoints:

services.AddAuthorization(options =>
{
    options.AddPolicy("FrontendApi", policy =>
    {
        policy.RequireAuthenticatedUser();
        policy.RequireClaim("scope", "api_frontend");
    });
});

// Example controller
[ApiController]
[Route("api/frontend")]
public class FrontendController : ControllerBase
{
    [AllowAnonymous]
    [HttpGet("public-content")]
    public IActionResult GetPublicContent() => Ok("Public content accessible to everyone");

    [Authorize(Policy = "FrontendApi")]
    [HttpGet("user-content")]
    public IActionResult GetUserContent() => Ok($"Hello, {User.Identity.Name}! This is your private content.");
}

Key Notes #

• Security Tip: The Password Grant is simple but less secure for SPAs since you handle credentials directly. For better security, consider using the Authorization Code Grant with PKCE—you can set your Angular login page as IdentityServer's custom login UI to avoid server-side redirects.
• HTTPS: Always use HTTPS in production to protect tokens and credentials.
• Token Storage: In Angular, use localStorage/sessionStorage for tokens, but be aware of XSS risks. For enhanced security, consider using HttpOnly cookies (requires backend adjustments).

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