当前位置: 首页 > 科技观察

前端登录,这篇文章就够了

时间:2023-03-14 13:55:11 科技观察

登录是每个网站都会经常用到的功能。在页面中,我们输入账号密码并按回车键进行登录,但是其背后的登录原理你清楚了吗?今天我们就来介绍几种常用的登录方式。Cookie+Session登录Token登录SSO单点登录OAuth第三方登录Cookie+Session登录HTTP是一种无状态协议。客户端每次发送请求,首先需要与服务器建立连接,请求完成后,再连接服务器。断开此连接。这种方式可以节省传输时占用的连接资源,但也存在一个问题:每个请求都是独立的,服务器无法判断本次请求和上一次请求是否来自同一个用户,从而无法判断用户。的登录状态。为了解决HTTP的无状态问题,LouMontulli在1994年引入了Cookie。Cookie是服务器发送给客户端的一段特殊信息。此信息以文本形式存储在客户端上。客户端每次向服务器发送请求时,都会带上这个特殊的信息。有了Cookie,服务器就可以获得客户端传递过来的信息。如果需要验证信息,则需要通过Session。当客户端请求服务器时,服务器会为这次请求开辟一块内存空间,这就是Session对象。有了Cookie和Session,我们就可以进行登录认证了。Cookie+Session实现过程Cookie+Session登录方式是最经典的登录方式,至今仍被大量企业使用。用户首次登录时:用户访问a.com/pageA,输入密码登录,服务器验证密码正确后,创建一个SessionId并保存。服务器响应这个HTTP请求,通过Set-Cookie头信息将SessionId写入到Cookie中。服务器端的SessionId可能存放在很多地方,比如:内存、文件、数据库等,第一次登录完成后,后续访问可以直接使用cookies进行认证:当用户访问a.com/pageB页面,会自动带上第一次登录时写入的cookie。服务器端比较cookie中的SessionId与服务器端保存的SessionId是否一致。如果匹配,则认证成功。Cookie+Session的问题虽然我们使用Cookie+Session来完成登录验证,但是仍然存在一些问题:由于服务端需要连接大量的客户端,因此也需要存储大量的SessionId,这会导致服务器压力过大。如果服务器是集群,为了同步登录状态,需要将SessionId同步到每台机器上,无形中增加了服务器的维护成本。由于SessionId保存在Cookie中,无法避免CSRF攻击。Token登录为了解决Session+Cookie机制暴露出的诸多问题,我们可以使用token登录方式。Token是服务器生成的一串串字符串,作为客户端请求的token。首次登录后,服务端会生成一个Token返回给客户端。以后客户端访问时,只需要带上这个Token就可以完成身份认证。Token机制实现过程用户首次登录时:用户输入账号密码,点击登录,服务器验证账号密码是否正确,创建Token。服务器将Token返回给客户端,客户端自由保存token。后续页面访问:当用户访问a.com/pageB时,带上了第一次登录时获得的Token。服务器端验证Token,如果有效则认证成功。Token机制的特点根据上面的案例,我们可以分析一下Token的优缺点:服务器不需要存储Token,所以不会对服务器造成压力,即使是服务器集群,也不会无需增加维护成本。Token可以存放在前端任意位置,不需要存放在cookie中,提高了页面的安全性。Token发行后,只要在有效期内,就一直有效。服务器要收回Token的权限并不容易。最常见的生成Token的方式是使用JWT(JsonWebToken),这是一种简洁、自包含的方法,用于在通信双方之间以JSON对象的形式安全地传递信息。上面我们提到,使用token后,服务端并没有保存token,那么如何判断客户端发送的token是否合法有效呢?答案其实就在Token字符串中。其实Token并不是一串乱七八糟的字符串,而是多种算法组成的字符串。让我们详细分析一下。JWT算法主要分为3部分:header(头部信息)、payload(消息体)、signature(签名)。header部分指定JWT使用的签名算法:header='{"alg":"HS256","typ":"JWT"}'//`HS256`表示使用HMAC-SHA256生成签名。payload部分表示JWT的意图:payload='{"loggedInAs":"admin","iat":1422779638}'//iat表示生成token的时间。signature部分是JWT的签名,主要是防止JWT被任意篡改和签名的方法分为两步:输入base64url-encodedheader部分,.,base64url-encodedpayload部分,输出unsignedToken。输入服务端私钥unsignedToken,输出签名signature。constbase64Header=encodeBase64(header)constbase64Payload=encodeBase64(payload)constunsignedToken=`${base64Header}.${base64Payload}`constkey='serverprivatekey'signature=HMAC(key,unsignedToken)最后Token计算如下:constbase64Header=encodeBase64(header)constbase64Payload=encodeBase64(payload)constbase64Signature=encodeBase64(signature)token=`${base64Header}.${base64Payload}.${base64Signature}`服务端判断Token时:const[base64Header,base64Payload,base64Signature]=token.split('.')constsignature1=decodeBase64(base64Signature)constunsignedToken=`${base64Header}.${base64Payload}`constsignature2=HMAC('服务器私钥',unsignedToken)if(signature1===signature2){return'signature验证成功,token没有被篡改'}constpayload=decodeBase64(base64Payload)if(newDate()-payload.iat<'tokenvalidityperiod'){return'tokenisvalid'}有了Token,登录方法就有了变得非常高效,接下来我们介绍另外两种登录方式.SSO单点登录单点登录是指在公司内部建立一个公共认证中心。公司旗下所有产品的登录都可以在认证中心完成。登录认证中心后,一个产品可以访问另一个产品。无需再次登录即可获取登录状态。SSO机制实现流程当用户第一次访问时,需要在认证中心登录:用户访问网站a.com下的pageA页面。由于没有登录,会重定向到回调地址www.sso.com?return_uri=a.com/pageA的认证中心,这样登录后就可以直接进入对应的页面了。用户在认证中心输入账号密码,提交登录。认证中心验证账号密码有效,然后用授权码ticket重定向a.com?ticket=123,并将认证中心sso.com的登录状态写入cookie。在a.com服务器中,拿票到认证中心确认授权码票是真实有效的。验证成功后,服务器将登录信息写入cookie(此时客户端有2个cookie,分别存储a.com和sso.com的登录状态)。认证中心登录完成后,继续访问a.com下的其他页面:此时由于a.com有登录的cookie信息,服务器端直接认证成功。如果认证中心登录完成,访问b.com下的页面:此时,由于认证中心有之前登录过的cookie,不需要再次输入账号密码,直接返回步骤4、出票到b.com。能。SSO单点登录退出目前我们已经完成了单点登录。在同一个认证中心的管理下,多个产品可以共享登录状态。现在我们需要考虑注销,即:在一个产品注销后,如何让其他产品也注销?原理其实并不难。可以回头看第5步,每个产品在向认证中心验证ticket的时候,其实是可以把自己的logoutapi发给认证中心的。当产品c.com注销时:清除c.com中的登录状态cookie。在证书颁发机构sso.com中请求出口api。认证中心遍历所有出票的产品,调用对应的出境api完成出境。OAuth第三方登录上面我们使用单点登录完成了多个产品的登录状态共享,但是它们都是建立在一个统一的认证中心下。对于一些小企业来说,太麻烦了。是否有可以开箱即用的登录名?事实上,有。很多大厂商都会提供自己的第三方登录服务。让我们一起来分析一下。OAuth机制实现流程这里我们以微信开放平台的接入流程为例:首先,a.com运营商需要在微信开放平台注册一个账号,向微信申请使用微信登录功能。申请成功后,获取到应用的appid和appsecret。用户在a.com上选择使用微信登录。此时会跳转到微信的OAuth授权登录,并带上a.com的回调地址。用户输入微信账号和密码,登录成功后,需要选择具体的授权范围,如:授权用户的头像、昵称等。授权后微信会根据code拉出a.com?code=123,这时候会带上一个临时的ticketcode。a.com拿到code后,将code、appid、appsecret拿到微信服务器去申请一个token。验证成功后,微信会发放一个token。有了token,a.com就可以使用token获取对应的微信用户头像、用户昵称等信息。a.com提示用户登录成功,并将登录状态写入Cooke,作为后续访问的凭据。小结本文介绍了4种常见的登录方式。每个人都应该清楚这些原则。总结一下这4种方案的使用场景:Cookie+Session历史悠久,适用于简单的后端架构。开发人员需要自己处理安全问题。Token方案对后端压力较小,适用于大规模分布式后端架构,但如果要收回已经分发的token的权限,不是很方便。SSO单点登录,适用于希望统一内部所有产品登录方式的中大型企业。OAuth第三方登录简单易用,对用户和开发者友好,但是第三方平台众多,需要选择适合自己的第三方登录平台。