带有SPA和API的OAuth2

问题描述

我想在使用ASP.NET Core API的Angular 5 SPA中实现单点登录.我有该公司提供的OAuth2服务器.我要实现的是仅允许必须通过SSO流程的授权用户访问该应用程序.我只想向授权用户显示SPA的内容，并只允许他们(具有正确的 access_tokens 的用户)访问API资源.

I want to implement Single Sign On in Angular 5 SPA which uses ASP.NET Core API. I have OAuth2 server provided by the company. What I want to achieve is to allow access to the application only to authorized users, who have to pass through SSO process. I want to display content of the SPA only to authorized users and allow to access API resources only by them (users with correct access_tokens), too.

我不知道该要求的正确方法是什么.我在考虑:

I do not know what should be the correct approach for this requirement. I was considering:

1. 隐式授权流-从我的SPA myspa.com:4200 中，我正在调用 mycompanyauthserver.com/Authorize 以获得授权码.借助Angular应用程序中的那个和client_id，我正在调用 mycompanyauthserver.com/Token 以获得访问令牌.我将其保存在本地存储中.现在，我可以将带有请求的此访问令牌发送到我的API (myapi.com:5000)，但是如何检查API是否正确?我在OAuth服务器上没有端点可以执行此操作.另外，如何检查SPA是否访问密码正确并且未被用户操纵?

1. Implicit grant flow - from my SPA myspa.com:4200 I am invoking mycompanyauthserver.com/Authorize to obtain authorization code.With that and client_id in Angular app I am invoking mycompanyauthserver.com/Token to obtain access token. I save it in localstorage. Now, I can send this access token with request to my API (myapi.com:5000), but how to check in API if this token is correct? I do not have endpoint on OAuth server to do it. Also, how to check on SPA if access code is correct and not manipulated by user?

我看到的另一种方法是从SPA调用我API中的某个端点，该端点将先调用 mycompanyauthserver.com/Authorize ，然后先调用 mycompanyauthserver.com/Token 和那么API将具有access_token并将其返回给SPA.然后，我可以轻松地在从SPA向API发送请求的过程中检查 access_code 是否相同.是正确的方法还是我缺少什么?

Another approach I see is to invoke from SPA some endpoint in my API which will invoke mycompanyauthserver.com/Authorize and then mycompanyauthserver.com/Token and then API will have access_token and return it to SPA. Then, I can easily check while sending request from SPA to API if the access_code is the same. Is the right approach or am I missing something?

推荐答案

您的SPA是否真的在 localhost:4200上运行?使用PKCE授予诸如Auth代码之类的类型.还是 localhost:4200 只是SPA的本地/开发版本?

Does your SPA really run on localhost:4200? This would make it a native application, where you could possibly make use of other grant types like Auth code with PKCE. Or is localhost:4200 just a local/dev version of your SPA?

如果您的应用程序是SPA，并且将通过外部Web资源提供html和javascript，则可以，对于这种情况，隐式授权已得到优化.

If your app is a SPA, and will be served html and javascript from an external web resource, then yes the implicit grant is optimised for this scenario.

但是，即使这样，如果您的外部Web资源(为SPA提供服务)也可以提供并注册可以与 mycompanyauthserver.com/Token 端点进行交互的重定向端点，那么您可以使用授权码授予，并将access_token从服务器端重定向端点返回到浏览器-与您在选项2中建议的类似.

But even so, if your external web resource (which serves up the SPA) can also provide and register a redirect endpoint which can interact with mycompanyauthserver.com/Token endpoint, then you can use the authorisation code grant and return the access_token from your server-side redirection endpoint back to your browser - similar to what you suggest in your option 2.

我不确定是否有正确的方法.

I'm not sure there's a correct approach.

我已经看到SPA使用两种方法.选项2涉及更多服务器端代码来管理令牌.选项1简化了获得令牌的过程，但不会给您提供长期/刷新的令牌.选择:)

I've seen SPAs use both approaches. Option 2 involves more server-side code to manage tokens. Option 1 simplifies getting a token but won't give you a long-lived/refresh token. Take your pick :)

这篇关于带有SPA和API的OAuth2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！