首页 > 解决方案 > 在 Angular 和 Identity Server 4 中使用 PKCE 进行 OIDC 连接和验证代码流

问题描述

我正在为我的 Angular 应用程序使用angular-auth-oidc-client包。我已经在 Identity Server 3 中使用了很长时间,并且在使用隐式流时它运行良好。但是当尝试在 Identity Server 4 上使用 PKCE 的身份验证代码流时,我无法让它工作。

我的身份验证服务器客户端配置如下:

new Client
{
    ClientId = "My.Angular.App",

    // no interactive user, use the clientid/secret for authentication
    AllowedGrantTypes = GrantTypes.Code,

    // secret for authentication
    ClientSecrets = new List<Secret> { ... },

    RedirectUris = new List<string> { ... },

    AllowedScopes = new List<string> { ... },
}

angular-auth-oidc-client 的配置如下:

{
    "stsServer": "https://auth2.test.hsahealthplan.com",
    "redirect_url": "...",
    "client_id": "My.Angular.app",
    "response_type": "code",
    "scope": "...",
    "post_logout_redirect_uri": "...",
    "start_checksession": false,
    "silent_renew": true,
    "silent_renew_url": "...",
    "post_login_route": "...",
    "forbidden_route": "...",
    "unauthorized_route": "...",
    "log_console_warning_active": true,
    "log_console_debug_active": false,
    "max_id_token_iat_offset_allowed_in_seconds": 300
}

当我在本地运行 Identity Server 4 并stsServer设置为https://localhost:5000

https本地认证服务器错误

当我在本地运行 Identity Server 4 并stsServer设置为http://localhost:5000

http本地认证服务器错误

当我尝试使用真正的身份验证服务器进行身份验证时,我们有其他应用程序正在使用该服务器进行身份验证:

验证服务器错误响应

我不确定为什么我从身份验证服务器收到错误代码 405,或者为什么它也不能在本地工作。如果有人有任何建议,将不胜感激。

标签: angularopenid-connect

解决方案


另一个 ID4 服务器不接受您的请求是合乎逻辑的,因为它没有在其中注册您的应用程序。该 ID4 服务器不知道客户端信息,因此它将拒绝来自您的应用程序的请求。

调用https://localhost:5000失败是因为您在某处错误配置了 SSL,从提供的信息中我不清楚在哪里以及如何进行。呼叫http://localhost:5000可能会失败,因为您忘记关闭 SSL。CORS 也可能配置错误,您从应用程序主域以外的域请求的每个资源都需要将您的域作为“access-control-allow-origin”标头中的值。因此,如果您在 app.com 上托管的应用向 ID4.com 请求某些内容,则所请求的资源需要在“access-control-allow-origin”标头中包含 app.com。


推荐阅读