2

我在我的应用程序中遇到了一个非常基本的要求。这是我的场景。我正在构建一个自定义电子商务门户，使用 angular 作为前端，rest API 作为后端。我有一个产品列表 API，它将由我的 Angular 客户端应用程序调用，而无需用户的凭据，因为产品列表是一个公共页面。但是，我不希望其他人使用我的产品列表 API。我知道我可以使用客户端 ID 和客户端密码来获取令牌并使用 Identityserver 4 使我的 API 安全，但是，如何避免在 Angular 应用程序中暴露我的客户端密码？任何人都可以很容易地窃取它。有什么方法可以将授权代码流与 PKCE 一起用于公开我的 API，例如不需要用户 ID 和密码的产品列表 API？

4

2 回答 2

1

对我来说，回答这个问题的最佳方法是回到授权代码流程的定义。授权代码授予是一个基于重定向的流程，用于获取访问令牌和刷新令牌，客户端通过引导资源所有者的流程来启动流程。

pkce只是对授权代码流程的扩展，以防止某些攻击。

那么答案是否定的，我们不能在没有用户登录的情况下使用带有 PKCE 的授权代码流来保护公共 API。还有一些其他方法可以保护公共 API 或至少使其更难/更难访问。CORS 是一个选项，请在此处阅读更多内容，因为它与这个问题无关，我不会更进一步。

对于登录场景，IdentityServer4 支持授权码流。这是我们需要做的来实现它：

  1. 在IdentityServer添加 js 客户端的配置条目时，例如：
new Client
{
   ClientId = "jsclient",
   ClientName = "JavaScript Client",
   AllowedGrantTypes = GrantTypes.Code,
   RequirePkce = true,
   RequireClientSecret = false,
   RedirectUris =  { "http://localhost:5003/callback.html" },
   PostLogoutRedirectUris = { "http://localhost:5003/index.html" },
   AllowedCorsOrigins =
   { 
       "http://localhost:5003" 
   },
   AllowedScopes = {"openid", "profile", "offline_access", "api1", "api2" },
}
  1. 在 SPA 应用程序上使用oidc-client库，并添加 OIDC 配置
var config = {
    authority: "http://localhost:5000",
    client_id: "js",
    redirect_uri: "http://localhost:5003/callback.html",
    response_type: "code",
    scope:"openid profile api1",
    post_logout_redirect_uri : "http://localhost:5003/index.html",
};
var mgr = new Oidc.UserManager(config);

在这里找到完整的示例代码。我强烈建议阅读快速入门文档以更好地了解实现细节。

于 2020-05-24T22:23:37.477 回答
0

您应该通过插入广泛使用的OIDC 客户端库在您的 Angular 应用程序中实现授权代码流 (PKCE) - 它的 UserManager 类将为您完成工作。

有关如何使用它的示例，请参阅我的以下资源：

于 2020-05-24T09:30:34.003 回答