浅谈web登录
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了浅谈web登录相关的知识，希望对你有一定的参考价值。
参考技术A web登录是网站上经常会遇到的功能，虽然看似简单。但要做好易用性和引导性，还需要在设计和交互上达到平衡。这里将要探讨登录流程中的页面跳转模式、登录类型、以及登录流程中的各种细节优化。
一、登录页面的两种跳转模式：
1、独立页面登录
这种登录方式的优点是比较正式与美观，可以将网站更多的信息展示给当前用户，包括大图所展示的品牌形象，并可以提供更多的链接选择（如：导航链接、多语言切换等等），当用户在登录过程中临时起意需要放弃当前操作时，可以方便跳转，（虽然并不是常见操作，且不推荐，却仍为用户提供便利性）。
但这种方式也有一定的缺点，对于浏览实时性比较强的网站，页面的跳转会破坏其操作的连贯性。并且众多强迫症患者还会有一种，登录完成后是否还能回到现有页面的疑虑。事实上这种情况也确实存在。
2、当前页面弹出窗口登录(模态窗口)
这种方式的好处在于避免页面跳转对操作连贯性的破坏，把登录对用户造成的影响降至最低。
PS:所谓的模态窗口，是指在用户想要对对话框以外的应用程序进行操作时，必须首先对该对话框进行响应。如单击“确定”“取消”按钮等将该对话框关闭。
关于两种登录模式的选择，主要看用户在使用登录模块时的情境。例如，未登录状态，若直接点击“登录”按钮或“个人中心”，没有涉及到其他功能的使用，便跳转至独立页面。而当需要进行某项操作，必须登录后才可进行时，建议使用弹出窗口，以保持操作的连贯性。
淘宝、豆瓣均为此模式。点击“登录”按钮时，跳转至独立页面；而点击“立即购买”或“收藏”“评论”等功能性按钮时，显示弹出层登录窗口。
二、登录的两种类型：
关于登录的类型，一般有两种，一种是邮件/用户名/手机号登录，另一种是第三方登录。
1、邮件/用户名/手机号登录
这是一种比较常用和传统的登录方式，输入用户名/邮箱/手机号和密码便可直接登录。值得一提的是，之前的大部分网站仅支持用户名登录，而不支持使用邮箱或手机号登录。但这种方式存在的问题就是注册时，有可能会因为用户名已被其他用户注册的限制而进行强制更改，导致注册的网站越多，越容易忘记用户名。
但邮件地址和手机号由于受到真实资料及数量上的限制，基本不会出现这种情况。所以，现在越来越多的网站都开始支持多种帐号形式登录的方式。
2、第三方登录
这种登录方式是指通过其他的社交帐号来进行授权登录的一种方式，目前这种方式在很多网站上都有采用。其优点是简单快速，降低用户注册门槛及用户流失数量。尤其是对于中小型的非常用网站，或仅想尝试当前功能的用户来说，减小了其登录成本。但这种方式也有一些致命的缺点。例如，当第三方的帐号被封号或被盗时，其他使用该帐号进行登录的网站基本都不可用了。
这里要说到，目前有某些网站，支持第三方登录，但是登录成功后，还需要单独填写非重复的用户名以及密码。这种重复填写资料的行为更容易让用户产生抵触心理。
以上两种方式各有利弊，目前而言，对于需要搜集用户详细资料的网站，例如电商网站，更适合于单独用户注册模式。如果使用第三方登录，进而还需要再填写其他资料的行为反而更加麻烦。而对于一般性的网站，简单的用户资料授权就已经足够了，使用第三方登录更为方便，也利于帐号的记忆与管理。
三、登录过程中的优化：
1、未登录时进行的操作，在登录后，此操作自动生效。
例如，淘宝在未登录时进行“收藏”或“购买”，登录后会自动收藏或加入购物车，无需再重复登录前操作。这是一种比较人性化的交互行为，因为在登录前有此操作，并且为此功能进行了登录，说明这已经是一个明确的用户行为，基本不存在误操作的可能性。所以在进行登录后，自动完成此操作会更为便捷。当然，在自动完成登录前操作时，有一个直观可视化的交互动效，便能让用户更加清晰的理解当前操作已自动完成。浏览几个其他网站，如、豆瓣、behance、均无此功能。
2、适时提供登录需求
当用户浏览页面时，遇到必须登录才能够继续进行的操作时， 无疑是一个扫兴的行为。提高体验的途径，就是将登录或注册行为放置至最后一步才进行。
例如，在知乎的顶部以未登录身份点击“话题”栏目，则会弹出登录提示框。虽然这个是用于已登录用户查看自己感兴趣的“话题”，但却会对未登录用户产生一定的阻碍。对于未登录用户来说，点击“话题”按钮后，直接跳转至“话题广场”不是一种更好的选择么？当用户找到自己感兴趣的话题，需要关注此话题时，再弹出“登录”或者“注册”的提示。这样，也给用户一个更为充分的理由。
另外，纵观目前大部分电商网站，基本上都支持未登录就可将商品放入购物车的操作行为。这个相比以前的体验，也基本做到了尽量在最后一步才让用户选择登录的原则。但仔细想想，这其实是可以再进一步去完善的。目前的电商网站数量繁多，在某个网站只有一次购物经历的机会将大大增加。当用户没有做好去注册成为会员的准备时，为何不在加入购物车后，支持用户登录/注册的同时，也支持未登录直接付款并填写购买人手机与收货地址信息的功能呢。这个对于临时购买的用户来说，无异于会是比较顺畅的操作体验。也许当第一次购买流程顺利完成后，用户的注册行为会更有诚意，而不是被迫进行。
登录注册虽然是一个很常见的功能，但却是影响着整个网站体验的重要一环。当新用户的登录注册体验受阻时，再精彩的内容也难以让用户回头了。
架构之路 | 浅谈单点登录（SSO）技术实现机制
1
何为单点登录?
单点登录（Single Sign On），简称为 SSO，是目前比较流行的企业业务整合的解决方案之一。SSO的定义是在多个应用系统中，用户只需要登录一次就可以访问所有相互信任的应用系统。
２
用来解决什么问题?
解决了用户只需要登录一次就可以访问所有相互信任的应用系统，而不用重复登录。
3
常见的实现方式
单点登录有不同的实现方式，本文就罗列我开发中所遇见过的实现方式。
以Cookie作为凭证媒介：
最简单的单点登录实现方式，是使用cookie作为媒介，存放用户凭证。
用户登录父应用之后，应用返回一个加密的cookie，当用户访问子应用的时候，携带上这个cookie，授权应用解密cookie并进行校验，校验通过则登录当前用户。
以上方式把信任存储在客户端的Cookie中，这种方式很容易令人质疑：
Cookie不安全
不能跨域实现免登
对于第一个问题，通过加密Cookie可以保证安全性，当然这是在源代码不泄露的前提下。如果Cookie的加密算法泄露，攻击者通过伪造Cookie则可以伪造特定用户身份，这是很危险的。
对于第二个问题，更是硬伤。
通过JSONP实现：
对于跨域问题，可以使用JSONP实现。
用户在父应用中登录后，跟Session匹配的Cookie会存到客户端中，当用户需要登录子应用的时候，授权应用访问父应用提供的JSONP接口，并在请求中带上父应用域名下的Cookie，父应用接收到请求，验证用户的登录状态，返回加密的信息，子应用通过解析返回来的加密信息来验证用户，如果通过验证则登录用户。
这种方式虽然能解决跨域问题，但是安全性其实跟把信任存储到Cookie是差不多的。如果一旦加密算法泄露了，攻击者可以在本地建立一个实现了登录接口的假冒父应用，通过绑定Host来把子应用发起的请求指向本地的假冒父应用，并作出回应。
因为攻击者完全可以按照加密算法来伪造响应请求，子应用接收到这个响应之后一样可以通过验证，并且登录特定用户。
通过页面重定向的方式：
最后一种介绍的方式，是通过父应用和子应用来回重定向中进行通信，实现信息的安全传递。
父应用提供一个GET方式的登录接口，用户通过子应用重定向连接的方式访问这个接口，如果用户还没有登录，则返回一个的登录页面，用户输入账号密码进行登录。如果用户已经登录了，则生成加密的Token，并且重定向到子应用提供的验证Token的接口，通过解密和校验之后，子应用登录当前用户
这种方式较前面两种方式，接解决了上面两种方法暴露出来的安全性问题和跨域的问题，但是并没有前面两种方式方便。
安全与方便，本来就是一对矛盾。
使用独立登录系统：
一般说来，大型应用会把授权的逻辑与用户信息的相关逻辑独立成一个应用，称为用户中心。
用户中心不处理业务逻辑，只是处理用户信息的管理以及授权给第三方应用。第三方应用需要登录的时候，则把用户的登录请求转发给用户中心进行处理，用户处理完毕返回凭证，第三方应用验证凭证，通过后就登录用户。
以下讲解下以使用独立登录系统的实现机制：
4
单点登录的技术实现机制
先看下图：
当用户第一次访问应用系统1的时候，因为还没有登录，会被引导到认证系统中进行登录；根据用户提供的登录信息，认证系统进行身份效验，如果通过效验，应该返回给用户一个认证的凭据－ticket；用户再访问别的应用的时候，就会将这个ticket带上，作为自己认证的凭据，应用系统接受到请求之后会把ticket送到认证系统进行效验，检查ticket的合法性（4,6）。如果通过效验，用户就可以在不用再次登录的情况下访问应用系统2和应用系统3了。
从上图可以看出sso的实现技术点：
1）所有应用系统共享一个身份认证系统
统一的认证系统是SSO的前提之一。认证系统的主要功能是将用户的登录信息和用户信息库相比较，对用户进行登录认证；认证成功后，认证系统应该生成统一的认证标志（ticket），返还给用户。另外，认证系统还应该对ticket进行效验，判断其有效性。
2）所有应用系统能够识别和提取ticket信息
要实现SSO的功能，让用户只登录一次，就必须让应用系统能够识别已经登录过的用户。应用系统应该能对ticket进行识别和提取，通过与认证系统的通讯，能自动判断当前用户是否登录过，从而完成单点登录的功能。
关于统一身份认证机制：如下图
①用户请求访问业务系统。
③在统一身份认证平台提供的页面中，用户输入身份凭证信息，平台验证此身份凭证信息，若有效，则生成一个有效的令牌给用户，进入第④步；若无效，则继续进行认证，直到认证成功或退出为止。
④用户携带第③步获取的令牌，再次访问业务系统。
⑤业务系统获取用户携带的令牌，提交到认证平台进行有效性检查和身份信息获取。
⑥若令牌通过有效性检查，则认证平台会把令牌对应的用户身份信息返回给业务系统，业务系统把身份信息和有效令牌写入会话状态中，允许用户以此身份信息进行业务系统的各种操作；若令牌未通过有效性检查，则会再次重定向到认证平台，返回第③步。
通过统一身份认证平台获取的有效令牌，可以在各个业务系统之间实现应用漫游。
5
单点登录的优、缺点
优点：
1）提高用户的效率。
用户不再被多次登录困扰，也不需要记住多个 ID 和密码。另外，用户忘记密码并求助于支持人员的情况也会减少。
2）提高开发人员的效率。
SSO 为开发人员提供了一个通用的身份验证框架。实际上，如果 SSO 机制是独立的，那么开发人员就完全不需要为身份验证操心。他们可以假设，只要对应用程序的请求附带一个用户名，身份验证就已经完成了。
3）简化管理。
如果应用程序加入了单点登录协议，管理用户帐号的负担就会减轻。简化的程度取决于应用程序，因为 SSO 只处理身份验证。所以，应用程序可能仍然需要设置用户的属性（比如访问特权）。
缺点：
1）不利于重构
因为涉及到的系统很多，要重构必须要兼容所有的系统，可能很耗时
2） 无人看守桌面
因为只需要登录一次，所有的授权的应用系统都可以访问，可能导致一些很重要的信息泄露。
帅的人都已经点赞、转发了 ！！！！蟹蟹
▼
以上是关于浅谈web登录的主要内容，如果未能解决你的问题，请参考以下文章