Angular.js 中基于 OpenID 的身份验证(使用 Flask 后端)

2024-02-16

一、如何实现 Angular.js 中基于 OpenID 的身份验证(使用 Flask 后端 Web 应用程序)?

看起来 Angular.js 代码需要合并逻辑 就像这个例子在这里找到的。 http://espeo.pl/authentication-in-angularjs-application/

不过Flask端也应该有OpenID验证机制。
是否有“推荐”的方式来编写后端和前端的逻辑?
是否有 github 示例或其他一些适合初学者的相关资源?


不幸的是,我没有可以分享的示例应用程序,但这里是我希望有用的高级描述。

让我们暂时忘记您有一个 AngularJS 应用程序,并回顾一下 OpenID 身份验证交换的工作原理:

  1. 用户在登录表单中输入 OpenID URL 并提交到服务器
  2. 服务器获取 OpenID URL 并通过重定向到 OpenID 提供商进行响应。重定向包含一些参数,其中包括回调 URL。
  3. OpenID 提供商提示用户输入登录凭据,然后允许与服务器应用程序共享他/她的身份。
  4. OpenID 提供程序通过重定向回应用程序(在步骤 2 中作为回调给出的 URL)进行响应,并提供有关用户的信息,例如 ID、电子邮件、用户名等。
  5. 服务器现在拥有用户信息,并且可以通过唯一 ID、电子邮件地址或其他一些标识在自己的用户数据库中定位用户。此时,如果应用程序不知道该用户,则可以创建一个新帐户。
  6. 现在用户已知,服务器可以编写一个 cookie 来记录他/她是谁,但请注意,这是与第 5 步中的身份不同的身份。OpenID 提供商返回的身份信息对于定位用户很有用在您自己的数据库中,因此现在您可以在应用程序的上下文中记录用户的身份。这可以是数据库用户 ID、电子邮件地址或用户名(如果它们是唯一的)或令牌,令牌可以是您拥有的有关用户的一些信息的哈希值。
  7. 写入 cookie 后,发送到服务器的每个新请求都会附带标识经过身份验证的用户的数据。

那么让我们看看当您添加 AngularJS 时会发生什么。请注意,有很多方法可以做到这一点,我下面描述的是一种可能性。

如果 Angular 应用程序向服务器发出需要身份验证的请求,服务器应返回错误代码 401。例如,Angular 应用程序在收到 401 错误时可以弹出登录表单。

但是 OpenID 身份验证舞蹈无法在丰富的 JS 应用程序上下文中完成,因为它需要浏览器重定向。您的服务器端应用程序必须支持至少三种路由:

  • 为 Angular 应用程序提供服务的根 URL
  • 发起 OpenID 身份验证的 URL
  • 作为回调发送给 OpenID 提供商的 URL

因此,用户连接到您的根 URL 并获取 AngularJS 应用程序,该应用程序以未经身份验证的状态启动。在某些时候,Angular 应用程序将提示用户使用具有 OpenID 文本字段和提交按钮的表单进行登录。这些表单字段应该是发布到服务器的常规 HTML 表单的一部分,而不是附加到控制器的客户端 Angular 元素。表单的“action”属性应指向服务器的 OpenID 登录路由。

当用户点击登录按钮时,服务器被唤醒并接收开始OpenID身份验证的请求。此时,上面的步骤 1-5 无需更改即可运行。

在第 5 步结束时,服务器已在应用程序的数据库中找到了用户。服务器现在可以做的就是重定向回根 URL 进行响应,以重新启动 Angular 应用程序。如果应用程序需要在非初始状态下重新启动,则可以在开始 OpenID 身份验证过程之前将要恢复的状态保存在客户端存储(例如 cookie)中。

但这还不够,服务器还需要向 Angular 传递有关登录用户的一些信息。实现此目的的一种方法是将用户的唯一 ID 或令牌附加到重定向 URL 的查询字符串中,Angular 应用程序可以使用权。这将与上面第 6 步中进入 cookie 的 ID 相同。

现在,Angular 应用程序已重新启动,可以在必要时恢复其状态,并且具有标识登录用户的 ID 或令牌。当应用程序需要向服务器发出 Ajax 请求时,它会随请求一起发送此 ID 或令牌。服务器可以对其进行验证,如果发现它无效或者如果它有过期日期并发现已过期,则返回 401。

如果随请求发送的标识得到验证,则可以执行该请求,并将响应发送回 Angular 应用程序。

只需删除用户 ID/令牌,即可在客户端实现注销功能,以便以后无需身份验证即可再次发送到服务器的请求。

很重要:Angular 应用程序和 Flask 服务器之间的所有交换(包括用户信息)都必须通过安全 HTTP 完成。否则,您的 ID 或令牌将以纯文本形式传输。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Angular.js 中基于 OpenID 的身份验证(使用 Flask 后端) 的相关文章

随机推荐

  • 是否可以将别名模板标记为好友?

    想象一下我们有这样的代码 template
  • 在字符串文字中展开宏

    我想做的是 define一个宏 define a 2 然后在字符串文字中使用它 string a 我希望该字符串不被解释为字符串 而是获取值a 即2 我没有成功 有人可以帮忙吗 define STRINGIFY2 X X define ST
  • 参数作用域与局部变量作用域?

    我正在读我的 AP cs 书 它谈到了三种类型的变量 实例变量 局部变量 参数 实例变量在整个类中都是可见的等等 参数只能在方法内使用 局部变量也是如此 因此 我的问题是 如果参数和局部变量包含相同的范围 为什么他们会将参数和局部变量分类为
  • MySql 适合大型数据库吗? [关闭]

    Closed 这个问题需要细节或清晰度 help closed questions 目前不接受答案 我在一家公司工作 我们总是访问外部网站以获取信息 该网站是由一家过时的软件开发公司开发的 该公司甚至没有网站 他们在我所在的州几乎拥有垄断地
  • 如果 Blob URL 是不可变的,Media Source Extension API 如何使用它们来流式传输视频?

    让我们从一个例子开始 您访问 youtube com 该网站在某些设备上使用带有 HTML5 的媒体源扩展 MSE MSE 使用 blob URL 注入 标记 它看起来像这样 blob https www youtube com blahb
  • 了解 xargs 中的递归 grep

    以下两个命令之间有什么实际区别 命令A find type f print0 xargs 0 grep r masi 命令B find type f print0 xargs 0 grep masi 简而言之 命令 A 的实际好处是什么 N
  • 使用Python将文件加载到内存中

    我尝试使用以下命令将文件加载到内存中 import mmap with open path fileinput example txt rb as f fileinput mmap mmap f fileno 0 prot mmap PRO
  • Python Pandas 用户警告:由于非串联轴未对齐而进行排序

    我正在做一些代码练习并在执行此操作时应用数据帧合并 收到用户警告 usr lib64 python2 7 site packages pandas core frame py 6201 FutureWarning 由于非串联轴未对齐而进行排
  • python Flask如何将动态参数传递给装饰器

    我正在使用 python Flask 框架 我写了一个装饰器 它需要一个参数 并且这个参数将是动态的 我的装饰器如下所示 将获得一个密钥 并使用该密钥从 Redis 获取数据 def redis hash shop style key de
  • JOINed 表中的条件显示错误 CakePHP

    我有两张桌子employee personals存储员工的所有个人记录的地方telephone bills其中存储每月支付给特定员工的电话账单 现在在我的employeePersonalsController php我有一个函数叫做api
  • Excel、Vba 宏可将形状“移动”到不同的形状,无需复制和粘贴

    我想将形状移动到不同的工作表 而不在宏中使用复制和粘贴 还有其他方法可以做到这一点吗 如果形状是图表对象 您只需更改其位置即可 ActiveChart Location Where xlLocationAsObject Name Sheet
  • 我可以将编译的系统库(例如 libxml2)合并到可以部署到 Heroku 的 gem(例如 nokogiri)中吗?

    Nokogiri 在与 UTF 8 字符之间进行转换时遇到问题 结果发现该问题来自 libxml2 特别是版本 2 7 6 这是 Ubuntu 10 04 LTS 上支持的最高版本 该错误在 2 7 7 及更高版本中得到修复 但由于我们的应
  • 如何使用张量流和卷积神经网络检测和定位对象?

    我的问题陈述如下 使用 Tensorflow 和卷积神经网络进行对象检测和定位 我做了什么 我已经使用 tflearn 库完成了从图像中进行猫检测 我成功地使用 25000 张猫图像训练了一个模型 并且其工作良好且准确 Current Re
  • 日志记录挂钩的挂钩过程从未被调用

    我正在尝试创建一个简单的应用程序来记录和播放一系列键盘和鼠标命令 宏 阅读文档并得出结论 最合适的实现 如果不是唯一的实现 是设置 Windows 日志记录挂钩 WH JOURNALRECORD 并用日志回放一个 WH JOURNAL PL
  • C++ 将 float* 转换为 glm::vec3

    如何以表单形式投射浮点数数组float to glm vec3 我以为我以前做过 但我丢失了硬盘 我尝试了一些C风格static cast但我似乎无法让它工作 From float to vec3 float data 1 2 3 glm
  • 枚举*所有*哈密尔顿路径

    我知道以前有人问过这个问题 但我没有在任何帖子中找到答案 有人可以建议我一个枚举图中所有哈密顿路径的算法吗 一点背景知识 我正在研究一个问题 其中我必须枚举每个哈密顿路径 进行一些分析并返回结果 为此 我需要能够枚举所有可能的哈密尔顿路径
  • Bootstrap 4 - 如何在移动设备上更改顺序?

    我正在使用 Bootstrap 4 制作一个由两列组成的响应式布局 两列总共有 9 个 div 第一列有 4 个 第二列有 5 个 如果断点低于 LG 我想更改列内 div 的顺序 这是我想要实现的解释和正确的顺序 我目前拥有的 div c
  • 如何在弹性搜索聚合中使用分页(大小和来源)?

    如何在elasticsearch聚合中使用分页 大小和来自 我在聚合中使用了大小和来自 它引发了exmaple异常 我想查询像 GET index nameorder search size 0 query filtered query b
  • 将数学字符串转换为 int

    有没有一种简单的方法可以获取 5 4 等字符串并返回 20 最简单的方法是使用Rhino JavaScript 引擎 http java sun com developer technicalArticles J2SE Desktop sc
  • Angular.js 中基于 OpenID 的身份验证(使用 Flask 后端)

    一 如何实现 Angular js 中基于 OpenID 的身份验证 使用 Flask 后端 Web 应用程序 看起来 Angular js 代码需要合并逻辑 就像这个例子在这里找到的 http espeo pl authenticatio