带有 Flask 身份验证的 AngularJS

Posted 2023-03-08

【中文标题】带有 Flask 身份验证的 AngularJS

【英文标题】：AngularJS with Flask authentication

【发布时间】：2013-08-11 21:49:24

【问题描述】：

我正在使用 AngularJS 构建一个 Web 应用程序，并使用 Flask 框架构建一个 REST-API。

该应用由两部分组成：

用户无需登录的部分：可以注册、登录、查看功能...

用户必须登录的部分。

为了简单起见，我想将这两个部分分成两个 Angular 应用程序，让 Flask 根据你是否登录将你引导到正确的应用程序。

我想知道这是否是一个好方法？我认为这样我可以使身份验证变得非常简单。

【参考方案1】：

我不确定两个单独的应用是否是个好主意。

如果你这样做，你似乎会有相当多的重复，因为我认为这两个应用程序不会相互排斥。至少，我想当用户登录时公共选项也将可用，对吧？这意味着大部分公共应用程序、客户端和服务器端都必须是受保护应用程序的一部分。这听起来很难维护。

还要考虑用户体验。用户必须在登录和注销时下载一个全新的应用程序，至少是第一次下载，直到它进入浏览器的缓存。根据您的应用程序的大小，可能需要等待几秒钟。

标准方法是拥有一个 Angular 应用和一个 Flask 应用。 Angular 应用程序开始并显示所有可用选项，并根据用户的操作向 Flask 发送 Ajax 请求。

如果用户尝试做一些需要登录的事情，那么 Flask 将响应代码 401 错误。然后，Angular 可以显示一个登录对话框来获取登录凭据，然后再次提交 Ajax 请求，现在使用凭据，可能是基于安全 HTTP 的 HTTP 基本身份验证。从那时起，Angular 可以将登录凭据附加到所有请求，以便用户现在可以使用所有选项。

如果您不想在每个请求中都发送登录信息，那么您可以在您的 Flask 应用程序中使用get_auth_token 端点来获取凭据并将令牌发送回 Angular。然后 Angular 可以将令牌附加到所有后续请求。

Angular 中的注销选项然后只是删除凭据和/或令牌以再次变得未经授权。

我在this answer 中更详细地解释了其中一些想法。尽管该问题的上下文是 Node.js，但原则也适用于 Flask。

您还可以查看我关于该主题的教程。我在服务器上使用 Flask，在客户端使用 Knockout.js，但是如果您使用 Angular 而不是 Knockout，这些概念应该直接转换。这是他们三个：

Designing a RESTful API with Python and Flask Writing a javascript REST client Designing a RESTful API using Flask-RESTful

【讨论】：

我阅读了您的教程，它们真的很有帮助！但我还有一个问题： get_auth_token 是如何工作的？当用户登录 Flask 时，向需要将其存储在 cookie 中的 Angular 发送令牌？这安全吗？ （不太确定我应该如何在 Flask 中实现它）

如果我只需要一个登录页面，我可以在登录后提供 Angular 应用程序并仍然使用扩展程序中的 @login_required 来保护我的 API 对吗？

Angular 应用程序永远不会消失，因此您无需将令牌存储在 cookie 中，它可以留在内存中。请参阅我如何实现我的 Javascript 客户端以获得指导。

来自 Flask-HTTPAuth 的 @login_required 装饰器需要在每个请求中进行身份验证，它不能以服务器端应用程序处理涉及发送 cookie 的身份验证的传统方式工作。对于 API，对所有请求进行身份验证更有意义，并且还考虑到客户端可能不是浏览器，因此您可能会强制客户端实现他们不关心的东西。

【参考方案2】：

嘿，一起使用 Flask 和 Angular 是非常好的全栈。而且，如果您对代码很聪明，那么您将不会像这些其他答案所建议的那样得到任何重叠。实际上，您将获得具有现代前端/后端分离的极快堆栈。检查此代码：https://github.com/mattupstate/overholt

Overholt 应用程序是 Flask 优雅组合的一个很好的例子，它为后端提供了一个可以连接的前端。 Flask 处理 API、网络资产管道和用户身份验证。用户通过身份验证后，Backbone 或 Angularjs 会处理前端 Web 应用程序，即您的网站提供的产品。

【讨论】：

Overholt uses backbone.js，不是 angular.js。我希望是的。

你是对的。这是我发帖后想到的。我认为 overholt 应用程序仍然是前端/后端分离的一个很好的例子。我更新是准确的。

【参考方案3】：

免责声明：我用过很多 Flask，也很少用过 Angular（总是在后端使用 Flask）。

这是一个选项，但我认为您会复制大量代码（如果您的应用程序之间的功能相同，例如查看“演示”页面）。最好的办法是在单个应用程序中以 Angular 级别运行它。

我记得在Google Group 中读过一些有趣的想法，所以也许这可以帮助你。

当然，如果您喜欢在 Flask 中进行操作并希望尽快推出您的产品，那么控制器之间的代码共享可能是最好的方式。但是，这种情况也有缺点； Flask 必须将用户引导到正确的应用程序，但未登录的用户想要访问他们必须登录的部分，会导致应用程序/页面重新加载（因为他们现在必须使用第二个应用程序），我感觉违背了 Angular 设计的单页网络应用程序的目的。

【参考方案4】：

（披露：我是 UserApp 的开发者之一）

如果您不想推出自己的用户管理，可以尝试第三方服务UserApp，以及AngularJS module。

关注getting started guide，或关注course on Codecademy。以下是其工作原理的一些示例：

带有错误处理的登录表单：

<form ua-login ua-error="error-msg">
    <input name="login" placeholder="Username"><br>
    <input name="password" placeholder="Password" type="password"><br>
    <button type="submit">Log in</button>
    <p id="error-msg"></p>
</form>

带有错误处理的注册表单：

<form ua-signup ua-error="error-msg">
  <input name="first_name" placeholder="Your name"><br>
  <input name="login" ua-is-email placeholder="Email"><br>
  <input name="password" placeholder="Password" type="password"><br>
  <button type="submit">Create account</button>
  <p id="error-msg"></p>
</form>

ua-is-email表示用户名与邮箱相同。

如何指定哪些路由应该是公开的，哪些路由是登录表单：

$routeProvider.when('/login', templateUrl: 'partials/login.html', public: true, login: true);
$routeProvider.when('/signup', templateUrl: 'partials/signup.html', public: true);

.otherwise() 路由应该设置为您希望用户在登录后被重定向到的位置。示例：

$routeProvider.otherwise(redirectTo: '/home');

退出链接：

<a href="#" ua-logout>Log Out</a>

访问用户属性：

使用user服务访问用户信息，例如：user.current.email

或者在模板中：<span> user.email </span>

隐藏仅在登录时才可见的元素：

<div ng-show="user.authorized">Welcome user.first_name !</div>

根据权限显示元素：

<div ua-has-permission="admin">You are an admin</div>

要对您的后端服务进行身份验证，只需使用user.token() 获取会话令牌并将其与 AJAX 请求一起发送。在后端，使用UserApp API 检查令牌是否有效。我们还在开发 Python 库。

如果您需要任何帮助，请告诉我 :)

【参考方案5】：

如果将它分成两个 AngularJS 应用程序是个好主意，我没有一个好的答案。但我认为没有必要将它们一分为二，因为将它们作为一个 AngularJS 应用程序非常容易，并且更容易避免重复。我已经编写了一个关于使用 Flask 和 AngularJS 一起构建 Web 应用程序的教程系列。你可能想看看 - http://tutsbucket.com/tutorials/building-a-blog-using-flask-and-angularjs-part-1/