前端框架世界中的身份验证 [英] Authentication in the World of Front-End Frameworks

问题描述

我的问题是关于当今前端世界的登录:

使用服务器端呈现的旧方法-我将在后端对用户登录进行身份验证，并呈现适合登录用户的整个html页面.

但是现在有了前端框架-我在用户首次进入网站时就为其提供所有可能的页面，然后在其浏览器中为他呈现正确的页面.

就我现在所了解的-要在前端框架中登录用户，我需要在localStorage中保存一个变量，该变量指示该用户已通过身份验证(甚至在管理员的情况下，甚至是他的角色)，并且当我正在构建页面，我只需要询问此变量是否在localStorage中，即可知道用户是否已登录，以及他的角色是否是admin，并且在两种情况都成立的情况下，我可以向他显示所有管理功能

但是，这意味着如果我是一名黑客-我要做的就是手动将此变量添加到我的localStorage中，然后我将看到全部管理功能.

这使我想到了我的问题-在当今的前端世界中，有没有更好的方法来执行登录身份验证?还是我一定要让黑客看到所有管理功能，并且只能保护它们免遭未经授权的用户仅在后端使用?

解决方案

尽管您可以将特定于经过身份验证的用户的页面作为单个页面应用程序的一部分提供，但您不会提供数据.因此，用户可能会黑客入侵该站点，以查看仅管理员页面并获得布局，但内容将丢失.

将向服务器单独请求受保护的数据，并且仅当用户具有所需的权限时才返回安全内容.然后例如使用Ajax将其插入页面.

服务器可以通过多种方式检查客户端是否已通过身份验证.最简单的方法是在每次请求时都传递用户名和密码.您提到的本地存储中的变量可以存储用户名和密码，以便可以在每个HTTP请求中引用它.实际上，您不会这样做，因为它不是很安全.您更有可能发送登录时服务器返回的，经过哈希处理和/或加密的某种令牌.如果用户要对其进行修改，则服务器将知道并使其无效，并拒绝发送所请求的内容.

请查看护照中列出的一些身份验证策略.有许多图书馆都提供相同的服务，但是护照有很多选择供您参考.

如果您真的想阻止未经授权的用户，甚至看到admin选项，则不应将其的HTML呈现为主要应用程序的一部分.必要时，应发出单独的请求以返回该HTML.点击管理员"按钮将请求进入管理员页面.仅当用户具有所需的权限时(与传统的多页面应用程序一样)，服务器才会返回相关视图.不同之处在于客户端应用程序如何处理该问题.现在，我们将其插入当前页面，而不是刷新整个页面.

my question is regarding login in today’s front end world:

in the old ways of server side rendering - i would authenticate a user login in the backend and render an entire html page that suits the user that logged in.

but now with front end frameworks - i give the user all the possible pages the first time he enters the website, and then renders the right page for him in his browser.

as far as i understand this now - to login a user in a frontend framework, i need to save a variable indicating he is authenticated (and perhaps even his role in case of an admin) in the localStorage, and this way when i’m building pages i just need to ask if this variable is in localStorage to know if the user is logged in, and if his role is admin, and in case both are true i show him all the admin functionalities

however, this means that if i was a hacker - all i needed to do is manually add this variable to my localStorage and then i’ll see the entire admin functionalities.

which brings me to my question - is there a better way to perform login authentication in today’s frontend world? or am i bound to let the hacker see all the admin functionalities, and can only protect them from being used by unauthorized user only in the backend?

解决方案

Although you may serve pages specific to authenticated users as part of a single page application, you wouldn't provide the data. So a user could potentially hack the site to view an admin only page and get the layout but the content would be missing.

A separate request would be made to the server for the protected data and the secure content would only be returned if the user has the required permissions. This is then slotted into the page for example using Ajax.

There are lots of ways for the server to check if the client is authenticated. The simplest would be to pass the username and password with every request. The variable in local storage that you mention could store the username and password so it can be referenced with each HTTP request. In reality you wouldn't do that because it's not very secure. More likely you will be sending some sort of token that was returned by the server on log in and has been hashed and/or encrypted. If the user was to modify it, the server would know and would render it invalid, and refuse to send the requested content.

Have a look at some of the authentication strategies listed in Passport. There are numerous libraries that do the same but passport has a good selection for your reference.

If you really want to stop an unauthorised user even seeing the admin options you should not render the html for that as part of the main application. A separate request should be made to return that HTML when required. Clicking the "admin" button would make a request for the admin page. The server would only return the relevant view if the user has the required permissions (exactly like in traditional multi page applications). The difference would be how the client application handles that. Now we would insert it into the current page rather than refreshing the whole thing.

这篇关于前端框架世界中的身份验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！