使用 oauth 对 Angular 和 .Net 核心应用程序进行身份验证和授权答案

【问题标题】：Using oauth to authenticate and authorize angular and .Net core application使用 oauth 对 Angular 和 .Net 核心应用程序进行身份验证和授权
【发布时间】：2020-04-30 15:52:13
【问题描述】：

我有一个带有 .Net 核心后端的角度应用程序。我正在尝试使用 OpenIdConnect（Okta 作为 IDP）实现 SSO。

执行此操作的最佳方法是什么？使用 angular-oauth2-oidc 从 Angular 应用程序进行身份验证？还是我使用 Microsoft.AspNetCore.Authentication.OpenIdConnect 在后端进行？

我的出发点应该是哪里？我还想确保经过身份验证或授权的用户能够从浏览器或 Swagger 调用 Api 端点。

为了在具有 UI 和后端的应用程序中更通用，SSO 如何工作？后端代码应该处理登录过程吗？

谢谢

【问题讨论】：

答案取决于您是否计划将前端和后端应用程序托管在同一域和端口上。如果这样做，那么您可以在后端处理所有身份验证。如果你想将它们部署在不同的服务器上，那么你应该将你的后端设置为一个资源服务器来验证 JWT 并在你的前端配置登录。

标签： .net angular asp.net-core single-sign-on okta

【解决方案1】：

您应该在您的 Angular 应用程序中实现身份验证。由于 Oktais 您的身份验证/SSO 服务，一般过程是用户将被重定向到 Okta 的登录页面进行登录，在用户输入凭据并且 Okta 验证凭据后，用户将使用代码重定向回您的 Angular 应用程序（如果使用授权码flow +PKCE) ，您的应用程序将向 Okta 服务发送请求，其中包含获取 ID 令牌和访问令牌的代码，访问令牌可用于访问您受保护的 Web API。

对于 Angular 应用程序，您可以使用 Okta Angular SDK 或 Okta Auth JavaScript SDK（Auth SDK 是比 Okta Angular SDK 更低级别的 SDK）。您可以参考以下文章获取教程和代码示例：

https://developer.okta.com/quickstart/#/angular/nodejs/generic

这是另一篇文章，它提供了使用 asp.net core web api 作为后端的详细步骤：

https://developer.okta.com/blog/2018/04/26/build-crud-app-aspnetcore-angular

PKCE 流程概览：

https://developer.okta.com/docs/guides/implement-auth-code-pkce/overview/

【讨论】：

谢谢——也就是说我只需要在 OKTA 中创建一个 SPA 并使用前端生成的令牌通过后端服务进行身份验证？我不需要在 OKTA 中为后端创建 Web 应用程序？
您需要为后端应用程序创建应用程序，这是由 OKTA 保护的资源，您的前端应用程序应该授予访问 OKTA 后端应用程序的权限。
我有身份验证工作，但授权是问题所在。我的 Okta 应用程序可以很好地进行身份验证，并且 Web api 可以使用 Okta 身份验证令牌。但是，角色是个大问题。我应该能够从 Okta 获取组作为角色，然后用 [Authorize(Roels="admin")] 装饰我的 web api 方法。此外，在使用 Okta 进行 SSO 之后，我需要角色在 Angular 中显示/隐藏路由/链接。 Okta 似乎只能处理来自 MVC 的角色。