总结分享10种常用前后端鉴权方法,让你不再迷惘头条

一顿连问下来,我是焦头又烂额,欲言而又止.......

其实鉴权的方法有很多,下面我总结了常用的10种鉴权方法,那么哪一种是最适合你的系统呢?哪一种又最安全呢?

那就让我们从下文慢慢探索寻找答案吧~

白话文的意思就是:你需要用身份证证明你自己是你自己。

比如我们常见的认证技术:

在现实生活领域:门禁卡需要通过门禁卡识别器,银行卡需要通过银行卡识别器;

在互联网领域:校验session/cookie/token的合法性和有效性

权限控制(Access/PermissionControl)将可执行的操作定义为权限列表,然后判断操作是否允许/禁止

对于权限控制,可以分为两部分进行理解:一个是权限,另一个是控制。权限是抽象的逻辑概念,而控制是具体的实现方式。

在现实生活领域中:以门禁卡的权限实现为例,一个门禁卡,拥有开公司所有的门的权限;一个门禁卡,拥有管理员角色的权限,因而可以开公司所有的门。

在互联网领域:通过web后端服务,来控制接口访问,允许或拒绝访问请求。

需要说明的是,这四个环节在有些时候会同时发生。例如在下面的几个场景:

既然我们已经了解了他们之间的关系,那么我们应该好好讲讲关于前端鉴权有哪些?以及他们之间存在的差异点又在哪里呢?

在HTTP中,基本认证方案(BasicAccessAuthentication)是允许客户端(通常指的就是网页浏览器)在请求时,通过用户提供用户名和密码的方式,实现对用户身份的验证。

因为几乎所有的线上网站都不会走该认证方案,所以该方案大家了解即可

1.1认证流程图

1.2认证步骤解析

1.3优点

简单,基本所有流行的浏览器都支持

1.4缺点

1.5使用场景

内部网络,或者对安全要求不是很高的网络。

Session-Cookie认证是利用服务端的Session(会话)和浏览器(客户端)的Cookie来实现的前后端通信认证模式。

在理解这句话之前我们先简单了解下什么是Cookie以及什么是Session?

2.1什么是Cookie

众所周知,HTTP是无状态的协议(对于事务处理没有记忆能力,每次客户端和服务端会话完成时,服务端不会保存任何会话信息);

所以为了让服务器区分不同的客户端,就必须主动的去维护一个状态,这个状态用于告知服务端前后两个请求是否来自同一浏览器。而这个状态可以通过Cookie去实现。

特点:

2.2什么是Session

Session的抽象概念是会话,是无状态协议通信过程中,为了实现中断/继续操作,将用户和服务器之间的交互进行的一种抽象;

具体来说,是服务器生成的一种Session结构,可以通过多种方式保存,如内存、数据库、文件等,大型网站一般有专门的Session服务器集群来保存用户会话;

原理流程:

与Cookie的差异:

看到这里可能就有同学想到了,Session-Cookie是不是就是把Session存储在了客户端的Cookie中呢?

Bingo,的确是这样的,我们接着往下看

2.3Session-Cookie的认证流程图

2.4Session-Cookie认证步骤解析

2.5Session-Cookie的优点

2.6Session-Cookie的缺点

2.7使用场景

2.8前端常用的Session库推荐

现在我们已经得知,Session-Cookie的一些缺点,以及Session的维护给服务端造成很大困扰,我们必须找地方存放它,又要考虑分布式的问题,甚至要单独为了它启用一套Redis集群。那有没有更好的办法?

那Token就应运而生了

3.1什么是Token(令牌)

Token是一个令牌,客户端访问服务器时,验证通过后服务端会为其签发一张令牌,之后,客户端就可以携带令牌访问服务器,服务端只需要验证令牌的有效性即可。

一句话概括;访问资源接口(API)时所需要的资源凭证

一般Token的组成:

Token的认证流程图:

Token认证步骤解析:

Token的优点:

Token的缺点:

3.2什么是RefreshToken(刷新Token)

业务接口用来鉴权的Token,我们称之为AccessToken。

为了安全,我们的AccessToken有效期一般设置较短,以避免被盗用。但过短的有效期会造成AccessToken经常过期,过期后怎么办呢?

另外一种办法是:再来一个Token,一个专门生成AccessToken的Token,我们称为RefreshToken;

RefreshToken的认证流程图:

RefreshToken认证步骤解析:

3.3Token和Session-Cookie的区别

Session-Cookie和Token有很多类似的地方,但是Token更像是Session-Cookie的升级改良版。

如果你的用户数据可能需要和第三方共享,或者允许第三方调用API接口,用Token。如果永远只是自己的网站,自己的App,用什么就无所谓了。

通过第三节,我们知道了Token的使用方式以及组成,我们不难发现,服务端验证客户端发送过来的Token时,还需要查询数据库获取用户基本信息,然后验证Token是否有效;

这样每次请求验证都要查询数据库,增加了查库带来的延迟等性能消耗;

那么这时候业界常用的JWT就应运而生了!!!

4.1什么是JWT

4.2JWT的组成

JWT由三部分组成:Header头部、Payload负载和Signature签名

它是一个很长的字符串,中间用点(.)分隔成三个部分。列如:

在Header中通常包含了两部分:

除了官方字段,你还可以在这个部分定义私有字段,下面就是一个例子。

Signature部分是对前两部分的签名,防止数据篡改。

首先,需要指定一个密钥(secret)。这个密钥只有服务器才知道,不能泄露给用户。然后,使用Header里面指定的签名算法(默认是HMACSHA256),按照下面的公式产生签名。

客户端收到服务器返回的JWT,可以储存在Cookie里面,也可以储存在localStorage。

此后,客户端每次与服务器通信,都要带上这个JWT。你可以把它放在Cookie里面自动发送,但是这样不能跨域,所以更好的做法是放在HTTP请求的头信息Authorization字段里面。

其实JWT的认证流程与Token的认证流程差不多,只是不需要再单独去查询数据库查找用户用户;简要概括如下:

4.5JWT的优点

4.6JWT的缺点

4.7前端常用的JWT库推荐

5.1同域下的SSO(主域名相同)

当百度网站存在两个相同主域名下的贴吧子系统tieba.baidu.com和网盘子系统pan.baidu.com时,以下为他们实现SSO的步骤:

5.2跨域下的SSO(主域名不同)

到这里客户端就可以跟系统A愉快的交往啦~

(PS:脚踏两只船,感觉有点渣呀~)

6.1什么是OAuth2.0?

令牌与密码的差异:

令牌(Token)与密码(Password)的作用是一样的,都可以进入系统,但是有三点差异。

6.3隐藏式模式(ImplicitGrant)

注意:

6.4用户名密码式模式(PasswordCredentialsGrant)

如果你高度信任某个应用,OAuth2.0也允许用户把用户名和密码,直接告诉该应用。该应用就使用你的密码,申请令牌,这种方式称为"密码式"(password)。

一句话概括:用户在客户端提交账号密码换token,客户端使用token访问资源。

6.5客户端模式(ClientCredentialsGrant)

主要适用于没有前端的命令行应用。

一句话概括:客户端使用自己的标识换token,客户端使用token访问资源。

注意:这种方式给出的令牌,是针对第三方应用的,而不是针对用户的,即有可能多个用户共享同一个令牌。

7.1什么是联合登陆

这样的概念其实与上面所讲的OAuth2.0的用户名密码式模式认证方式类似。

—身为优秀的程序员的我们当然是满足他啦!!

用户在客户端A操作:

用户在客户端B操作:

9.2什么是二维码

二维码又称二维条码,常见的二维码为QRCode,QR全称QuickResponse,是一个近几年来移动设备上超流行的一种编码方式,它比传统的BarCode条形码能存更多的信息,也能表示更多的数据类型。

待扫码阶段:

已扫码待确认阶段:

已确认阶段:

缺点:

直到手机卡的强制实名制才得以解决!

随着无线互联的发展以及手机卡实名制的推广,手机号俨然已成为特别的身份证明,与账号密码相比,手机号可以更好地验证用户的身份,防止恶意注册。

我们想一下,为什么我们需要验证码?验证码的作用就是确定这个手机号是你的,那除了使用短信,是否还有别的方式对手机号进行认证?

THE END
1.客户端,web端,微信端设计差别三端差异性对比 本文中提到的客户端为 ipad 端 产品体验差异 硬件设施差异 数据流向差异 web 端 客户端 http 通讯的情况下 微信端 注:我们的服务器向主动和微信https://www.jianshu.com/p/e551f48d7e80
2.web页面PC端和移动端的区别移动端pc端web端之间的区别一、PC端与移动端区别 有人说手机端无非就是PC端的移植,功能设计照搬就行了,这是对于移动设计最大的误解,其实PC端与移动端是千差万别的。 操作方式 PC端的操作方式与移动端已经有了明显的差别,PC端使用鼠标操作,操作包含滑动、左击、右击、双击操作,操作相对来说单一,交互效果相对较少,而对于手机端来说,包含https://blog.csdn.net/weixin_43160039/article/details/83106262
3.PC端/web端/移动端开发的区别在于什么?但即使大家都知道移动互联网红利没了,我发现现在许多身边的互联网从业者都,如果做产品研发仍然是会首先考虑移动端,因为这里用户更近,可以更容易获得用户。用小程序或者APP,来作为产品主要的形态。要么就是用网页端的SaaS产品来替代,很少有产品经理会去负责客户端的产品设计工作。 https://www.niaogebiji.com/article-558675-1.html
4.PCweb前端和移动端的webapp的区别在哪里?等等很多。其实移动端web app,很接近移动端原生的app的外观和行为模式。比照移动原生app开发来理解web app就容易得多。 嘉兴雷鸟是一家集企业软件开发,WEB网站建设,移动APP制作等综合型的互联网公司,为嘉兴顾客提供一站式的企业软件开发,安卓app开发,ios开发服务,同时为嘉兴企业提供全面移动互联软件技术解决方案,是嘉兴http://www.lei-niao.com/news_5014.html
5.web端测试与移动端测试的区别对于测试来说,比较重要的一个步骤就是报bug,在web端我们发现问题之后,可以利用系统自动工具或者其他截图工具直接截图,然后将错误的地方或者比较 重要的点进行标记,但是在移动端,截图相对来说就没那么简单了,因为这地方需要分为两个步骤,一是截图,二是传到电脑端(因为我们利用mantis记录bug 情况,报bug是在电脑端的)https://www.douban.com/note/516752316
6.吃透移动端Html5响应式布局html5网页制作移动端 web 和 PC web 的区别 PC 端我们是怎么布局的呢? 一般采用两种方案,一种是 min-width 限制最小的宽度,浏览器宽度小于 min-width 就直接滚动。另外一种呢,就是留白。设置页面一个基础宽度,超出的部分留白。 但是这两种解决方案在移动端可行吗? 移动端手机的宽度,大多不一致,而且没办法进行窗口的缩放。https://www.jb51.net/html5/706445.html
7.App与Web的设计区别(上):使用嘲与设计方法(web端app端设计区别)Web网站:以鼠标或触摸板为操作媒介, 常用交互方式有左击、右击、hover鼠标滑过几个操作方式,对应这些操作的web端可以将隐藏的元素,(比如解释类文字,及子菜单等)可以在鼠标hover时或是点击后才展示出来。 移动App:因为实际面积更手指触控的关系,App常用的交互方式有,手指点击、滑动、捏合等各种复杂的手势。同时在App设http://www.yfsoft.com.cn/59457.html
8.移动前端开发和web前端开发的区别有哪些–PingCode移动前端开发和Web前端开发主要的区别在于目标平台、开发工具与语言、用户交互和设计、性能优化方法、以及调试过程。移动前端开发重点关注在移动设备上的应用性能和用户体验,需要专门的工具和框架来适应各种屏幕尺寸和操作系统。此外,一个移动应用通常需要更多地考虑到触控操作、设备方向变化,以及与设备功能(如摄像头、GPS等https://docs.pingcode.com/ask/155153.html
9.快速实施手册若移动端完成,就需要到电脑上操作 点击完成后即可,系统会自动生成相关盘亏盘盈单。盘亏建议按照盘亏出库,盘盈建议盘盈新增入库;请盘点时不要有出入库的操作。 然后可以excel导出来方便处理。 用户角色切换 这样操作就可以调整: web端如何修改了? 用户登录 https://fa.szsmile.com/help/yuque/kqsira.html
10.开发体验移动端轻松调试Whistle腾讯云开发者社区4、whistle 查看移动端 页面信息 本文很简单,前提看过前端调试必备-whistle 入门 手机配置代理 之前我们whistle 在 PC 端配置了 代理,让浏览器的请求 通过 工具 转发到 whistle,whistle 再转发到 真实服务器。 同样的,如果我们想要抓 手机的包,那么我们也要配置 手机的代理 ,让请求走到 whsitle https://cloud.tencent.com/developer/article/1861186
11.web端移动端视频播放器(原创)插件描述:一款支持web端、移动端、支持mp4 flv hls 视频格式的视频播放器 更新时间:2021-11-08 10:16:01 video-PluginVideo 指南 一款界面精美的视频播放插件 - 自定义主色调 - 支持 mp4、hls、flv 格式 - 兼容web端 - 兼容移动端 - 支持移动端手势操作 - 常用的事件监听 - 丰富的接口 https://www.jq22.com/jquery-info24068
12.FlutterForWeb实践我们可以通过使用条件引用来解决这个问题,比如下面的代码中,我们对移动端和web端的网络请求分别实现,是通过两个文件中httpReuqest-mobile.dart和httpReuqest-web.dart,如果当前的平台支持dart.library.html即web端,就会引入httpReuqest-web.dart文件中的网络请求的实现,而如果当前的平台支持dart.library.io即移动端平台,https://maimai.cn/article/detail?fid=1649349645&efid=2w3JI3L2-3Bmlv-WDCnXkQ
13.javascriptweb端与pc端的区别但是在PC端,现在大部分的都是做网页开发的,对于客户端的开发基本没有多大的印象,尤其对于前端开发的程序员来说,所谓的PC端仅仅是指用于在PC上的浏览器使用的Web页面,而提及Web端的时候,需要注意多屏适配,移动端适配,因为这页面不仅仅可以在PC的浏览器上打开了。 同时不要忘记了,PC端是有客户端开发的。有https://segmentfault.com/q/1010000011869696/a-1020000011870154
14.web前端跟h5有什么区别?Worktile社区H5技术是Web前端开发的一个重要组成部分,用于实现更高级的功能和效果,如音视频播放、地理定位、离线存储等。 应用领域: Web前端开发广泛应用于各种网站和Web应用程序的开发,包括企业门户、电子商务、社交媒体、新闻和娱乐等。 H5技术主要用于移动端应用开发,包括手机网页、应用内嵌网页和移动应用等。 https://worktile.com/kb/ask/799011.html
15.web前端开发岗位职责(20篇)5、有移动端开发经验优先 任职条件: 1、学历:大专及以上工作经验:2年及以上 2、精通HTML5、CSS3、JavaScript等Web前端开发技术; 3、精通MVVM、MVC,有过Vue等框架生产环境开发经验至少一年vue使用经验 4、熟悉主流浏览器,及Android与iOS等移动平台的'页面适配; https://www.oh100.com/peixun/Web_Services/477068.html
16.小程序和h5的区别和优势小程序和h5的区别和优势?小程序和H5都是移动端开发的常用方式,它们各有特点和优势。小程序和H5的区别和优势如下:https://web.tedu.cn/workplace/491522.html
17.Web前端开发与iOS终端开发有什么区别?Web前端开发工程师属于一个专业技术岗位,随着近几年人们对网站品质要求的提高,web前端开发的工作变得越来越重要,使得许多小伙伴选择参加Web前端开发工程师培训,想要从事web前端开发工程师工作,就必然要掌握web前端开发的一些基本方法和技能,今天八维职业学校和大家一起来看看Web前端开发与iOS终端开发有什么区别,希望对想要https://www.bwie.com/jsgh/298.html
18.H5缓存机制浅析移动端Web加载性能优化下面我们首先分析各种缓存机制的原理、用法及特点;然后针对Anroid移动端Web性能加载优化的需求,看如果利用适当缓存机制来提高Web的加载性能。 2 H5缓存机制原理分析 2.1 浏览器缓存机制 浏览器缓存机制是指通过HTTP协议头里的Cache-Control(或Expires)和Last-Modified(或Etag)等字段来控制文件缓存的机制。这应该是WEB中最https://www.thinkphp.cn/topic/66501.html
19.三明市第一医院生态新城院区智慧医院智能化项目院区楼宇智能化1) Web端:客户端:提供Javascript(Leaflet/MapboxGL/Openlayers/Cersium)二次开发SDK。 服务端:提供Java服务扩展支持,支持REST服务和SOAP服务两种服务形式扩展。提供服务内核级和WEB服务级的扩展支持。 2) 移动端:HTML5开发:可以提供统一HTML5 sdk的iOS、Android。 18 接口要求 1)支持与位置服务定位接口、GPS集成,http://zfcg.cz.sm.gov.cn/upload/document/20221024/df8e2d7d2af449fbbe8f17d25733ff6d.html
20.移动端web开发技巧4、移动端click屏幕产生200-300 ms的延迟响应 移动设备上的web网页是有300ms延迟的,玩玩会造成按钮点击延迟甚至是点击失效。 以下是历史原因: 2007年苹果发布首款iphone上IOS系统搭载的safari为了将适用于PC端上大屏幕的网页能比较好的展示在手机端上,使用了双击缩放(double tap to zoom)的方案,比如你在手机上用浏https://www.imooc.com/article/1115
21.响应式webPC端web与移动端web(H5)兼容适配选型方案背景 项目需要,公司已经有一套PC端web,需要做一套手机端浏览器可用的,但是又想兼容pc端,适配的web项目。 以下是查阅到响应布局现成的开源模版。根据自己技术栈,vue2,js来搜索相关的开源https://www.jindouyun.cn/document/industry/article/162875