前端登陆方式,这一篇就够了

目录

1、 基于会话(Session)的认证

1.1 实现流程

1.2 优缺点

1.3 应用场景

2、基于Token的认证(如JWT,JSON Web Tokens)

2.1 实现流程

2.2 优缺点

2.3 应用场景

3、OAuth/OpenID

3.1 实现流程

3.2 优缺点

3.3 应用场景

4、单点登录(SSO,Single Sign-On)

4.1 实现流程

4.2 优缺点

4.3 应用场景

5、多因素认证(MFA,Multi-Factor Authentication)

5.1 实现流程:

5.2 优缺点

5.3 应用场景


总结下前端几种常见的登录方式:

  • Session
  • Token
  • Oauth 第三方登录
  • SSO 单点登录
  • 多因素认证

1、 基于会话(Session)的认证

特点:服务端存储 SessionId

1.1 实现流程

  1. 用户提交登录表单,包含用户名和密码。
  2. 服务器验证凭证,如果凭证正确,则创建一个新的会话,并生成一个唯一的会话 SessionId。
  3. 服务器将 SessionId 作为HTTP响应的一部分(通常是设置在Cookie中)返回给浏览器。
  4. 浏览器将 SessionId 保存在Cookie中,后续的请求会自动带上这个Cookie。
  5. 服务器通过Cookie中的 SessionId 识别用户身份,处理请求。

1.2 优缺点

优点:

  • 相对简单易懂,易于实现。
  • 服务器控制会话,可以主动管理用户的登录状态,如主动让用户登出。

缺点:

  • 随着用户量的增加,服务器需要维护更多的会话状态,可能对服务器资源和性能造成压力。
  • 如果服务器端是一个集群,为了同步登录态,需要将 SessionId 同步到每一台机器上,增加了服务器端维护成本
  • 需要使用安全措施防范会话劫持和固定会话攻击

1.3 应用场景

适用于单一服务器、用户量不大的小型网站或内部系统

2、基于Token的认证(如JWT,JSON Web Tokens)

特点:浏览器存储 token

2.1 实现流程

  1. 用户提交登录表单,包含用户名和密码。
  2. 服务器验证用户凭证,如果凭证正确,生成包含用户信息的Token(如使用JWT格式)。
  3. 服务器将Token返回给前端。
  4. 前端存储Token(通常在LocalStorage、SessionStorage或内存中)。
  5. 后续请求携带Token(通常在HTTP请求头的Authorization字段)。
  6. 服务器校验Token,如果有效,处理请求并返回资源。

2.2 优缺点

优点:

  • 服务端不需要维护用户状态,所以不会对服务器造成压力
  • 无状态,适合分布式系统,方便横向扩展
  • Token能够包含过期时间和权限信息,更加灵活

缺点:

  • Token如果被盗用,则攻击者可以得到和用户相同的权限。
  • Token一旦签发,在有效期内一般无法在服务端使其失效

2.3 应用场景

  • 服务需扩展到多个服务器,或后端服务为微服务架构。
  • 适合需要单页面应用(SPA)的认证和前后端分离的项目

3、OAuth/OpenID

3.1 实现流程

  1. 用户选择使用第三方账户登录(如Google、Facebook)。
  2. 应用重定向到第三方服务提供商的认证页面。
  3. 用户在第三方服务提供商处完成认证。
  4. 第三方服务提供商重定向回应用,并带上一个授权码。
  5. 应用使用授权码与第三方服务接口交换得到访问令牌(Access Token)。
  6. 后续请求携带访问令牌访问第三方服务的受保护资源。

3.2 优缺点

优点:

  • 用户无需注册和记忆新的账号密码,可以使用第三方账号登录。
  • 应用无需管理用户密码,提升安全性。
  • 标准化流程和广泛的支持度,各大平台都支持OAuth。

缺点:

  • 对于开发者来说,实施起来相对复杂。
  • 依赖第三方服务的可用性和安全性。
  • 用户信息是由第三方服务管理,可能会受限于第三方服务提供的信息。

3.3 应用场景

  • 需要整合多个服务认证的门户网站或应用,让用户拥有一站式登录体验。

4、单点登录(SSO,Single Sign-On)

特点:用户在SSO系统登录一次后,可以访问所有集成了SSO的应用,无需重复登录

4.1 实现流程

  1. 用户首次尝试访问应用时被重定向到SSO服务器进行认证。
  2. 用户提供凭证并登录到SSO服务器。
  3. SSO服务器返回一个认证令牌(如SSO票据)给应用。
  4. 应用使用该票据向SSO服务器确认用户身份。
  5. 确认成功后,用户可在不同的应用间自由切换而无需重新认证。

4.2 优缺点

优点:

  • 用户在一个系统登录后,可以无缝访问其他所有系统,提升用户体验。
  • 统一认证,减少用户管理成本。
  • 一处退出,所有关联服务同步登出,增加安全性。

缺点:

  • 实现复杂,需要较高的技术实力。
  • 单点故障风险,认证中心出问题可能导致所有系统无法使用。

4.3 应用场景

  • 企业内部多个应用间实现用户信息共享和快速切换。

5、多因素认证(MFA,Multi-Factor Authentication)

5.1 实现流程:

  1. 用户首先使用用户名和密码进行登录。
  2. 登录成功后,系统要求用户提供第二个认证因素,如短信验证码、应用生成的一次性密码、指纹等。
  3. 用户输入第二认证因素后,系统确认无误,并完成登录。

5.2 优缺点

优点:

  • 安全性高,即使主密码被窃取,也难以登录系统。
  • 安全的同时也为用户账户多了一层保护。
    缺点:
  • 增加了登录流程的复杂性,可能影响用户体验

5.3 应用场景

对安全性要求很高的系统,如银行、金融、企业管理系统。

  • 14
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
学习webpack是为了掌握前端代码打包工具的使用。随着前端工程化的发展,webpack已经成为了前端开发中最常用的打包工具之一。学习webpack可以帮助我们对项目的模块化管理、代码压缩与优化、资源加载等方面进行更加灵活和高效的处理。 这篇文章主要介绍了webpack的基础知识和使用方法。首先,它解释了webpack的基本概念,如入口和出口文件、loader和plugin等。然后,它详细介绍了如何配置webpack的各个参数和插件,包括如何使用Babel处理ES6语法,如何使用Less或Sass处理CSS,如何使用图片压缩插件等。 接着,文章讲解了webpack的打包原理和优化技巧。它介绍了webpack的模块化加载机制,以及如何使用Code Splitting和Dynamic Import等功能来提高页面加载速度。同时,它还提到了如何使用webpack进行代码分割和缓存优化,以及如何使用Tree Shaking和代码压缩插件来减小项目的体积。 最后,文章介绍了webpack的常见问题和解决方法。它列举了一些常见的错误和警告信息,并提供了相应的解决方案。此外,它还提供了一些常用的webpack插件和工具的推荐,帮助我们更好地进行前端开发。 总的来说,这篇文章提供了一个很好的入门教程,可以帮助我们快速掌握webpack的基本概念和使用方法。但是,要想在实际项目中灵活应用webpack,还需要深入学习官方文档和相关资料,并结合实际项目进行实践。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值