angular - 用 Angular 组件替换 IdentityServer4 登录页面

Question

我想将 IdentityServer4(代码 + PKCE 流程)与 .Net Core 和 Angular 一起使用。

我不想使用 Quickstart UI，而是希望在 Angular 端进行登录。在官方教程中，用户转到 Angular 应用程序，重定向到 IdentityServer4 UI，在那里登录，然后有另一个重定向 - 回到 Angular 应用程序。我还想提一下，我没有使用 .net 身份和 Entity Framework ，因为数据库流依赖于存储过程。

在我的设置中，Identiy Server 在端口 5555 上运行，Angular App 在端口 4200 上运行。为了与服务器通信，我使用 oidc-client-js。

我创建了一个从 Angular 调用的示例端点(登录)。不幸的是，IdSr 没有将我重定向到 AuthCallbackComponent。我只是得到一个空的响应(如预期的那样)，但没有更多的事情发生。据我了解，在模拟记录用户后，我只需要引发 UserLoginSuccessEvent。之后 IdSr 应该生成 token 并进行重定向。我错过了什么吗？我的方法有问题吗？

export class AuthService {
  private userManager: UserManager;
  private user: User;

  constructor(private client: HttpClient) {
    this.userManager = new UserManager(AuthSettings.settings);
    this.userManager.getUser().then(user => (this.user = user));
  }

  login() {
    let api = "http://localhost:5555/api/User";
    let headers = new HttpHeaders();
    headers.set("Content-Type", "application/json");
    let content = {
      UserName: "test@test.com",
      Id: "123456",
      Name: "Test User"
    };
    let data = `"${content}"`;
    console.log("logging");
    this.client
      .post(api, content, {
        headers: headers,
        withCredentials: false
      })
      .subscribe(response => console.log(response), err => console.log(err));
  }

  async completeAuthentication() {
    this.user = await this.userManager.signinRedirectCallback();
  }
}



import { UserManagerSettings } from "oidc-client";

export class AuthSettings {
  public static settings: UserManagerSettings = {
    authority: "http://localhost:5555/",
    client_id: "ng",
    redirect_uri: "http://localhost:4200/callback",
    post_logout_redirect_uri: "http://localhost:4200/",
    response_type: "code",
    scope: "openid profile email API"
  };
}


export class AuthCallbackComponent implements OnInit {
  constructor(private authService: AuthService) {}

  ngOnInit() {
    this.authService
      .completeAuthentication()
      .then(e => console.log("auth completed"));
  }
}


public static IEnumerable < Client > GetClients() {
    return new List < Client > {
        new Client {
            ClientId = "ng",
            ClientName = "Angular",
            AllowedScopes = {
                "openid",
                "profile",
                "email",
                "API"
            },
            RedirectUris = new List < string > {
                "http://localhost:4200/callback"
            },
            PostLogoutRedirectUris = new List < string > {
                "http://localhost:4200/"
            },
            AllowedCorsOrigins = new List < string > {
                "http://localhost:4200"
            },
            AllowedGrantTypes = GrantTypes.Code,
            RequirePkce = true,
            RequireClientSecret = false,
            AllowAccessTokensViaBrowser = true,
            RequireConsent = false
        }
    };
}


[AllowAnonymous][HttpPost]
public async Task < ActionResult > Login(LoginInputModel model) {
    var user = new User("test@test.com", "123456", "Test User");
    await _eventService.RaiseAsync(new UserLoginSuccessEvent(user.UserName, user.Id, user.Name));
    return Ok();
}

Answer 1

以最好的方式，是的，您的方法有问题；)

如果遵循 JS 客户端应用程序的当前最佳实践，那么您应该将 authorization_code 授权类型用于公共(public)客户端(即无 secret )。用户身份验证将涉及重定向到 identityserver4 实现中的 authorize 端点(如果不存在 session ，它可能会依次显示登录 UI)。

如果您想在客户端处理登录 UI，那么这通常会涉及使用 ResourceOwnerPassword 授权类型，强烈建议不要这样做。看这里:

https://www.scottbrady91.com/OAuth/Why-the-Resource-Owner-Password-Credentials-Grant-Type-is-not-Authentication-nor-Suitable-for-Modern-Applications

但是，如果您愿意，没有什么可以阻止您为您的 identityserver4 服务编写一个漂亮而神奇的 Angular UI。只是要小心引入 CSRF 问题。

无论哪种方式，都无需创建任何自定义 API 端点来促进登录过程 - authorize、token 和 userinfo OIDC端点已涵盖。