在AngularJS SPA推荐认证UX与自己和外部（谷歌，FB ...）型材 [英] Recommended authentication UX in AngularJS SPA with own and external (Google, FB...) profiles

问题描述

我开发一个Asp.net MVC +网络API + AngularJS SPA。我想有几种类型的注册/验证：

• 自己的空间提供商


• 外部提供商，即谷歌，FB等。

可能出现的情况

1. 由于我有一个SPA这将是最好的，如果我能保持我的用户我的网页上，而外部（或内部对这个问题）会发生。我会显示与加载的特定内容的模态层（甚至内部的 IFRAME ）。 可以这样做？在线的例子吗？




2. 有像往常一样Asp.net MVC重新加载整个页面控制器/视图实现登录/注册功能，然后重定向回我的SPA时是成功的。同时重定向到用户是否要进行身份验证/使用外部提供商注册的外部人员。




3. 任何其他可能性？

问题

1. 你是如何在你的SPA做类似的场景，或者你会如何建议办呢？


2. 我应该使用对这个特殊的身份验证模式 - 例如提供我内部验证/类似于外部的登记，以便将SAP以同样的方式
总是表现

3. 我也会有用户后，在SPA athenticated自己随后验证我的Web API调用。对此有何指导？

解决方案

我只能对我自己的经验发表评论，也许是有帮助的。我们使用相同的堆栈如你，Asp.net MVC +网络API + AngularJS。我们使用服务器端的MVC认证（Microsoft.AspNet.Identity），因为我们没有暴露在现阶段公共API和API的唯一消费将是我们这个SPA完美的作品与精力最少。

这也使我们能够设置登录后，可以通过你的整个角度的应用程序共享服务器上的UserContext角度的服务，谷歌的DoubleClick经理人有NG-CONF <一期间进入一些这种方法的好处HREF =htt​​p://www.youtube.com/watch?v=62RvRQuMVyg&t=2m29s> presentation 。由于网络API支持Asp.Net身份，身份验证和授权MVC和Web API之间无缝工作。

要总结主要优缺点：

优点：

1. 很容易和快速实施。


2. 作品跨越MVC和Web API。


3. 客户方code不需要身份验证code有关。


4. 在服务器端设置的UserContext角服一次登录时，很容易在整个采用了棱角分明DI SPA共享。请参见 presentation 如上所述。


5. 与外部供应商一样容易，你会与任何正常的MVC应用程序集成。

缺点：

1. 由于浏览器不将该网址发送给服务器的哈希值＃部分，在登录返回URL永远是您的SPA的根。例如。假设你的SPA根/应用程序，您试图访问/应用程序＃/客户端在不进行身份验证，您将被重定向到登录页面，但返回的URL会/应用程序，而不是/应​​用程序＃/客户机服务器没有办法知道URL的哈希部分作为浏览器永远不会发送这一点。


2. 没有真正支持的设计，如果你打算从而使您的SPA之外的您的Web API。想象一下，一个控制台应用程序试图连接到您的API？

因此​​，在短期，我们用它来引导我们的SPA的MVC视图保护，[授权]，以及我们的Web API方法。 MVC的视图中，我们也用剃刀注入任何用户属性，我们要公开初始化我们的UserContext角度的服务。一旦SPA是通过单一的Razor视图加载，其他一切都通过角处理。

I'm developing an Asp.net MVC + Web API + AngularJS SPA. I would like to have several types of registration/authentication:

• own profile provider
• external providers ie Google, FB etc.

Possible scenarios

1. As I'm having an SPA it would be best if I could keep my user on my page while external (or internal for that matter) would be taking place. I'd display a modal layer with particular content loaded (maybe even inside an iframe). Can this be done? Online examples?

2. Have login/registration capability implemented as usual Asp.net MVC full page reload controller/views and then redirect back to my SPA when that is successful. Also redirect to external provider if users wanted to authenticate/register using external provider.

3. Any other possibility?

Questions

1. How did you do this similar scenario in your SPA or how would you recommend to do it?
2. Should I be using particular authentication patterns regarding this - for instance provide my internal authentication/registration similar to external one so SAP would always behave in the same way
3. I will also have to authenticate my Web API calls subsequently after user athenticated themselves in the SPA. Any guidance on that?

解决方案

I can only comment on my own experience, maybe it is helpful. We use the same stack as you, Asp.net MVC + Web API + AngularJS. We use server-side MVC for authentication (Microsoft.AspNet.Identity), since we are not exposing a public API at this stage and the only consumer of the API will be our SPA this works perfectly with the least amount of effort.

This also enables us to set a UserContext Angular service on the server once logged in that can be shared through your entire Angular app, the Google Doubleclick Manager guys goes into some of the benefits of this approach during there ng-conf presentation. Since Web Api supports Asp.Net Identity, authentication and authorization works seamlessly between MVC and Web Api.

To sum up the major pros and cons:

Pros:

1. Very easy and quick to implement.
2. Works across MVC and Web Api.
3. Clientside code does not need to be concerned with authentication code.
4. Set UserContext Angular service on server side once during login, easily shared throughout SPA using Angular DI. See presentation as mentioned above.
5. Integrates with external providers as easily as you would with any normal MVC app.

Cons:

1. Since the browser does not send the hash # part of the URL to the server, return URL on login will always be the root of your SPA. E.g. suppose your SPA root is /app, and you try to access /app#/client when you aren't authenticated, you will be redirected to the login page, but the return URL will be /app and not /app#/client as the server has no way to know the hash part of the URL as the browser never sends this.
2. Not really supported design if you plan to make your your Web Api available outside your SPA. Imagine a console app trying to connect to your API?

So in short, the MVC view that we use to bootstrap our SPA is protected with [Authorize] as well as our Web Api methods. Inside the MVC view we also initialize our UserContext Angular service using Razor to inject whatever user properties we want to expose. Once the SPA is loaded via the single Razor view, everything else is handled via Angular.

这篇关于在AngularJS SPA推荐认证UX与自己和外部（谷歌，FB ...）型材的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！