django - ReactJS 和 Django 之间的安全身份验证

Question

阅读和观看了相当多的内容，并提出了很多有关 ReactJS 和 Django 的问题。

这特别帮助我理解了从 Django REST Framework 到 ReactJS 以及从 ReactJS 到 Django REST Framework 的数据流。

Django Forms and Authentication with Front-end Framework (AngularJS/ReactJS)

但是，我想要了解的一件事是对 Django REST Framework 的身份验证。我从文档中了解到它内置了身份验证。由于这是敏感数据，我显然希望它能够保护人们通过访问 http://www.my_site.com/info/api 来检索它。

我需要将 ReactJS 设置为唯一可以从 API 请求数据的东西，无论是通过 key 还是用户名/密码凭据。我只是好奇这是如何处理的？显然我不希望在 ReactJS 中进行硬编码，因为它将与 ReactJS 的其余部分一起编译。

Answer 1

这是我的处理方法:我会使用 JSON Web Token (JWT)用于身份验证和授权。

您可以使用后端来保护来自无效 JWT 的所有 API 请求，除了用户无法访问的路由 token (即注册/登录页面)。

应用程序的流程如下:

1. 新用户使用电子邮件和密码等标准凭据注册到您的应用。
2. 您的后端将创建一个新用户，签署一个新的 JWT token (通常使用用户的 ID)。您可能会使用第三方库来签名/验证 token (我没有 Django 社区的经验，但我确信快速的 Google 搜索会给您答案)。您的后端将发回此 token 。这是后端唯一一次收到电子邮件、密码或任何其他注册敏感信息。
3. 从此时起，React 将仅使用此 token 进行授权。 React 会将该 token 保存在某处(即 localStorage)，并将该 token 与请求的其他部分一起发送到您使用后端创建的 API 路由。您将在请求的authorization header 中发送此 token 。
4. 您的后端将使用第三方库验证此 token 。如果无效，请求将停止并返回未经授权的错误。如果有效，请求将继续。

这实现了以下目标:

1. 您的 API 路由受到保护，不会受到未经身份验证的用户的攻击
2. 对您的 API 的每个请求都会针对授权用户进行验证，以防止任何人请求您的 API 的任何部分。
3. 您可以通过仅允许用户修改自己的数据的请求来进一步巩固这一点。例如，仅允许 Suzy 的 token 及其 ID 修改她的帐户/数据，以保护 Suzy 的个人资料不被她以外的人修改。

重要提示 - 您的后端永远不会将这些 token 保存在存储中。它将验证每个请求的 token 。了解更多关于 JSON Web Tokens (JWT)以及它是如何工作的。