您的位置:奥门新浦京网址 > Wed前段 > 十年WEB技术发展历程,登录工程

十年WEB技术发展历程,登录工程

发布时间:2019-10-14 18:31编辑:Wed前段浏览(128)

    HTML5中与页面显示相关的API

    2015/05/15 · HTML5 · HTML5

    原文出处: 涂根华的博客   

    在HTML5中,增加了2个与页面显示相关的API,分别是Page Visibility API与Fullscreen API; 作用分别如下:

    Page Visibility API  是指当页面变为最小化状态或者用户将浏览器标签切换到其他标签时会触发。

    Fullscreen API 是将页面整体或页面中某个局部区域设为全屏。

    Page Visibility API的使用场合如下:

    1. 一个应用程序中具有多幅图片的幻灯片式的连续播放功能,当页面变为不可见状态(最小化状态或者将用户浏览器标签切换到其他标签时),图片停止播放,当页面变为可见状态时,图片继续播放。
    2. 在一个实时显示服务器端信息的应用程序中,当页面处于不可见状态(最小化状态或者将用户浏览器标签切换到其他标签时),停止定期向服务器端请求数据的处理,当页面变为可见状态,继续执行定期向服务器端请求数据的处理。
    3. 在一个具有播放视频功能的应用程序中,当页面处于不可见状态(最小化状态或者将用户浏览器标签切换到其他标签时),暂停播放视频,当页面变为可见状态时,继续播放视频。

    浏览器支持程度:Firefox10+,chrome14+,IE10+;

    实现Page Visibility API

    在使用Page Visibility API时,我们首先需要判断当前用户所使用的浏览器以及该浏览器是否支持。代码如下判断:

    JavaScript

    if(typeof document.hidden !== 'undefined') { hidden = 'hidden'; visibilityChange = 'visibilitychange'; }else if(typeof document.mozHidden !== 'undefined') { hidden = 'mozHidden'; visibilityChange = 'mozvisibilitychange'; }else if(typeof document.msHidden !== 'undefined') { hidden = 'msHidden'; visibilityChange = 'msvisibilitychange'; }else if(typeof document.webkitHidden !== 'undefined') { hidden = 'webkitHidden'; visibilityChange = 'webkitvisibilitychange'; }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    if(typeof document.hidden !== 'undefined') {
        hidden = 'hidden';
        visibilityChange = 'visibilitychange';
    }else if(typeof document.mozHidden !== 'undefined') {
        hidden = 'mozHidden';
        visibilityChange = 'mozvisibilitychange';
    }else if(typeof document.msHidden !== 'undefined') {
        hidden = 'msHidden';
        visibilityChange = 'msvisibilitychange';
    }else if(typeof document.webkitHidden !== 'undefined') {        
        hidden = 'webkitHidden';
        visibilityChange = 'webkitvisibilitychange';
    }

    如上,在Page Visibility  API中,可以通过document对象的hidden属性值来判断页面是否处于可见状态,当页面处于可见状态时属性值为false,当页面处于不可见状态时属性值为true。

    在Page Visibility中,可以通过document对象的visibilityState属性值来判断页面的可见状态。该属性值为一个字符串,其含义如下所示:

        visible: 页面内容部分可见,当前页面位于用户正在查看的浏览器标签窗口中,且浏览器窗口未被最小化。

        hidden: 页面内容对用户不可见。当前页面不在用户正在查看的浏览器标签窗口中,或浏览器窗口已被最小化。

        prerender: 页面内容已被预渲染,但是对用户不可见。

    现在我们来看一个demo,页面中有一个video元素与一个”播放”按钮,用户单击”播放”按钮时 按钮文字变为 ’暂停”,同时开始播放video元素的视频,当页面变为最小化状态或用户浏览器标签切换到其他标签时候,视频被暂停播放,当页面恢复正常状态或用户将浏览器标签切回页面所在标签时,视频继续播放。

    HTML代码如下:

    JavaScript

    <video id="videoElement" controls width=640 height=360 autoplay> <source src="Wildlife/Wildlife.ogv" type='video/ogg; codecs="theora, vorbis"'/> <source src="Wildlife/Wildlife.webm" type='video/webm' > <source src="Wildlife/Wildlife.mp4" type='video/mp4'> </video> <button id="btnPlay" onclick="PlayOrPause()">播放</button> <div style="height:1500px;"></div>

    1
    2
    3
    4
    5
    6
    7
    <video id="videoElement" controls width=640 height=360 autoplay>
        <source src="Wildlife/Wildlife.ogv" type='video/ogg; codecs="theora, vorbis"'/>
        <source src="Wildlife/Wildlife.webm" type='video/webm' >
        <source src="Wildlife/Wildlife.mp4" type='video/mp4'>
    </video>
    <button id="btnPlay" onclick="PlayOrPause()">播放</button>
    <div style="height:1500px;"></div>

    JS代码如下:

    JavaScript

    var hidden, visibilityChange, videoElement; if(typeof document.hidden !== 'undefined') { hidden = 'hidden'; visibilityChange = 'visibilitychange'; }else if(typeof document.mozHidden !== 'undefined') { hidden = 'mozHidden'; visibilityChange = 'mozvisibilitychange'; }else if(typeof document.msHidden !== 'undefined') { hidden = 'msHidden'; visibilityChange = 'msvisibilitychange'; }else if(typeof document.webkitHidden !== 'undefined') { hidden = 'webkitHidden'; visibilityChange = 'webkitvisibilitychange'; } document.addEventListener(visibilityChange,handle,false); videoElement = document.getElementById("videoElement"); videoElement.addEventListener('ended',videoEnded,false); videoElement.addEventListener('play',videoPlay,false); videoElement.addEventListener('pause',videoPause,false); // 如果页面变为不可见状态 则暂停视频播放 // 如果页面变为可见状态,则继续视频播放 function handle() { // 通过visibilityState属性值判断页面的可见状态 console.log(document.visibilityState); if(document[hidden]) { videoElement.pause(); }else { videoElement.play(); } } // 播放视频 function play() { videoElement.play(); } // 暂停播放 function pause() { videoElement.pause(); } function PlayOrPause() { if(videoElement.paused) { videoElement.play(); }else { videoElement.pause(); } } function videoEnded(e) { videoElement.currentTime = 0; this.pause(); } function videoPlay(e) { var btnPlay = document.getElementById("btnPlay"); btnPlay.innerHTML = "暂停"; } function videoPause(e) { var btnPlay = document.getElementById("btnPlay"); btnPlay.innerHTML = "播放"; }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    var hidden,
    visibilityChange,
    videoElement;
    if(typeof document.hidden !== 'undefined') {
        hidden = 'hidden';
        visibilityChange = 'visibilitychange';
    }else if(typeof document.mozHidden !== 'undefined') {
        hidden = 'mozHidden';
        visibilityChange = 'mozvisibilitychange';
    }else if(typeof document.msHidden !== 'undefined') {
        hidden = 'msHidden';
        visibilityChange = 'msvisibilitychange';
    }else if(typeof document.webkitHidden !== 'undefined') {
        hidden = 'webkitHidden';
        visibilityChange = 'webkitvisibilitychange';
    }
    document.addEventListener(visibilityChange,handle,false);
    videoElement = document.getElementById("videoElement");
    videoElement.addEventListener('ended',videoEnded,false);
    videoElement.addEventListener('play',videoPlay,false);
    videoElement.addEventListener('pause',videoPause,false);
    // 如果页面变为不可见状态 则暂停视频播放
    // 如果页面变为可见状态,则继续视频播放
    function handle() {
        // 通过visibilityState属性值判断页面的可见状态
        console.log(document.visibilityState);
        if(document[hidden]) {
            videoElement.pause();    
        }else {
            videoElement.play();
        }
    }
    // 播放视频
    function play() {
        videoElement.play();
    }
    // 暂停播放
    function pause() {
        videoElement.pause();
    }
    function PlayOrPause() {
        if(videoElement.paused) {
            videoElement.play();
        }else {
            videoElement.pause();
        }
    }
    function videoEnded(e) {
        videoElement.currentTime = 0;
        this.pause();
    }
    function videoPlay(e) {
        var btnPlay = document.getElementById("btnPlay");
        btnPlay.innerHTML = "暂停";
    }
    function videoPause(e) {
        var btnPlay = document.getElementById("btnPlay");
        btnPlay.innerHTML = "播放";
    }

    实现Fullscreen API

    在HTML5中,新增了一个Fullscreen API,其作用是将页面整体或页面中某个局部区域设为全屏显示状态。

    浏览器支持程度:Firefox10+,chrome16+,Safari5.1+

    在Fullscreen API中,可以通过DOM对象的根节点对象或某个元素的requestFullscreen属性值和执行相对应的方法来判断浏览器是否支持Fullscreen API。代码如下:

    JavaScript

    var docElm = document.documentElement; if(docElm.requestFullscreen) { docElm.requestFullscreen(); }else if(docElm.mozRequestFullScreen) { docElm.mozRequestFullScreen(); }else if(docElm.webkitRequestFullScreen) { docElm.webkitRequestFullScreen(); }

    1
    2
    3
    4
    5
    6
    7
    8
    var docElm = document.documentElement;
    if(docElm.requestFullscreen) {
            docElm.requestFullscreen();
    }else if(docElm.mozRequestFullScreen) {
            docElm.mozRequestFullScreen();
    }else if(docElm.webkitRequestFullScreen) {
            docElm.webkitRequestFullScreen();
    }

    在Fullscreen API中,也可以通过DOM对象或某个元素的exitFullscreen与CanvelFullScreen属性和方法将当前页面或某个元素设定为非全屏显示状态。

    如下代码:

    JavaScript

    if(document.exitFullscreen) { document.exitFullscreen(); }else if(document.mozCancelFullScreen) { document.mozCancelFullScreen(); }else if(document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); }

    1
    2
    3
    4
    5
    6
    7
    if(document.exitFullscreen) {
        document.exitFullscreen();
    }else if(document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    }else if(document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
    }

    在Fullscreen API中,可以通过监听DOM对象或某个元素的fullscreenchange事件(当页面或元素从非全屏显示状态变为全屏显示状态,或从全屏显示状态变为非全屏显示状态时触发)。代码如下:

    JavaScript

    document.addEventListener('fullscreenchange',function(){},false); document.addEventListener('mozfullscreenchange',function(){},false); document.addEventListener('webkitfullscreenchange',function(){},false);

    1
    2
    3
    document.addEventListener('fullscreenchange',function(){},false);
    document.addEventListener('mozfullscreenchange',function(){},false);
    document.addEventListener('webkitfullscreenchange',function(){},false);

    在css样式代码中,我们可以使用伪类选择器来单独指定处于全屏显示状态的页面或元素样式:

    JavaScript

    html:-moz-full-screen { background:red; } html:-webkit-full-screen { background:red; } html:fullscreen { background:red; }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    html:-moz-full-screen {
        background:red;
    }
    html:-webkit-full-screen {
        background:red;
    }
    html:fullscreen {
        background:red;
    }

    最后我们来看一个demo,在页面中有一个按钮,点击后,页面会变成全屏状态,再点击后,页面会退出全屏;

    HTML代码如下:

    JavaScript

    <input type="button" id="btnFullScreen" value="页面全屏显示" onclick="toggleFullScreen();"/> <div style="width:100%;" id="fullscreentState">非全屏显示</div>

    1
    2
    <input type="button" id="btnFullScreen" value="页面全屏显示" onclick="toggleFullScreen();"/>
    <div style="width:100%;" id="fullscreentState">非全屏显示</div>

    Javascript如下:

    JavaScript

    var docElm = document.documentElement; var fullscreentState = document.getElementById("fullscreentState"); var btnFullScreen = document.getElementById("btnFullScreen"); fullscreentState.style.height = docElm.clientHeight + 'px'; document.addEventListener('fullscreenchange',function(){ fullscreentState.innerHTML = (document.fullscreen) ? "全屏显示" : "非全屏显示"; },false); document.addEventListener('mozfullscreenchange',function(){ fullscreentState.innerHTML = (document.mozFullscreen) ? "全屏显示" : "非全屏显示"; },false); document.addEventListener('webkitfullscreenchange',function(){ fullscreentState.innerHTML = (document.webkitFullscreen) ? "全屏显示" : "非全屏显示"; },false); function toggleFullScreen() { if(btnFullScreen.value == '页面全屏显示') { btnFullScreen.value = '页面非全屏显示'; if(docElm.requestFullscreen) { docElm.requestFullscreen(); }else if(docElm.mozRequestFullScreen) { docElm.mozRequestFullScreen(); }else if(docElm.webkitRequestFullScreen) { docElm.webkitRequestFullScreen(); } }else { if(document.exitFullscreen) { document.exitFullscreen(); }else if(document.mozCancelFullScreen) { document.mozCancelFullScreen(); }else if(document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); } btnFullScreen.value = "页面全屏显示"; } }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    var docElm = document.documentElement;
    var fullscreentState = document.getElementById("fullscreentState");
    var btnFullScreen = document.getElementById("btnFullScreen");
    fullscreentState.style.height = docElm.clientHeight + 'px';
    document.addEventListener('fullscreenchange',function(){
        fullscreentState.innerHTML = (document.fullscreen) ? "全屏显示" : "非全屏显示";
    },false);
    document.addEventListener('mozfullscreenchange',function(){
        fullscreentState.innerHTML = (document.mozFullscreen) ? "全屏显示" : "非全屏显示";
    },false);
    document.addEventListener('webkitfullscreenchange',function(){
        fullscreentState.innerHTML = (document.webkitFullscreen) ? "全屏显示" : "非全屏显示";
    },false);
    function toggleFullScreen() {
        if(btnFullScreen.value == '页面全屏显示') {
            btnFullScreen.value = '页面非全屏显示';
            if(docElm.requestFullscreen) {
                docElm.requestFullscreen();
            }else if(docElm.mozRequestFullScreen) {
                docElm.mozRequestFullScreen();
            }else if(docElm.webkitRequestFullScreen) {
                docElm.webkitRequestFullScreen();
            }
        }else {
            if(document.exitFullscreen) {
                document.exitFullscreen();
            }else if(document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            }else if(document.webkitCancelFullScreen) {
                document.webkitCancelFullScreen();
            }
            btnFullScreen.value = "页面全屏显示";
        }
    }

    赞 收藏 评论

    图片 1

    考虑与用户系统集成,与业务系统分离

    在讨论安全时,分不开的两个部分就是鉴权(Authentication)与授权(Authorization)。

    鉴权的过程是向用户发起质询(Challenge),完成身份验证工作。这正是登录所解决的问题。通常在登录系统成功识别用户之后,就会将接下来的工作直接交给业务系统来完成。由于各个系统中的授权模型可能与业务形态有关系,因此登录与业务系统分离是很自然的设计。

    在对安全要求更严格的企业或企业应用中,可能需要专门的访问管理机制,不过,这样的做法在互联网应用中很少见。但在互联网Web应用中,授权的范畴也包含一个很小的公有部分,是各个业务系统所共有的:即用户状态。我们希望在各业务子系统之间共享用户状态:用户被锁定之后,他在所有业务系统都被锁定;用户被注销之后,所有业务系统中有关他的数据都被封存。

    图片 2

    (图片来自:

    另外在多个业务系统中,还可能会共用用户的基本资料和偏好设置等数据。比如,类似于邮件地址这样的资料,它可以作为登录凭据,也可以作为一个基本的联系方式。如果用户在一个子系统设置了偏好语言,其他子系统则直接使用该设置即可。这样,开发一个“用户”系统的想法也就应运而生了。由于与用户的状态等基础信息的关系很紧密,登录与用户系统之间的集成是很自然的,将登录子系统直接作为这个用户系统的一部分也不失为一种不错的实践。

    BIG DATA

    大数据大概是过去几年最火热的名词,我一大批同学听说数据挖掘年薪30万都嗷嗷嗷去做数据库了。
    大多数时候,我们在谈大数据其实都是在谈在海量数据下的数据挖掘、数据分析、智能推荐、实时分析等。不同公司的技术方案不同,我只列两个国内成功的案例:
    • 京东个性化电商,场景包括基于行为、偏好、地域、时间、好友关系等维度,向不同的用户推荐不同的产品,不同用户搜索产品排序也不同…
    • 百度地图东莞8小时迁徙图;百度搜索智能提醒
    • 360手机卫士,电话号码防骚扰功能是通过用户的地域、身份、骚扰趋势,将标记的2.56亿个电话号码选出1000个和用户关联度最高的,写入用户手机的10k的文本里,达到不联网不做任何网络交互的情况下,为用户防骚扰

    关于作者:ThoughtWorks

    图片 3

    ThoughtWorks是一家全球IT咨询公司,追求卓越软件质量,致力于科技驱动商业变革。擅长构建定制化软件产品,帮助客户快速将概念转化为价值。同时为客户提供用户体验设计、技术战略咨询、组织转型等咨询服务。 个人主页 · 我的文章 · 84 ·   

    图片 4

    CHROME

    天下武功出谷歌。在ie6,7,8的时代里面,尽管Firefox也缓慢的挑战ie的地位。但和2009年开始Google开始推广的chrome浏览器产生的颠覆性影响比起来,逊色很多。Chrome使用Apple的开源内核webkit,良好的设计标准和市场反应;促进浏览器快速迭代,让IE在windows10中彻底消失。

    chrome浏览器的推出,将简化前端的入门程度又推进了一步,其自带的调试工具好用又无脑,我们可以利用其轻松的查看网络状态,加载顺序,进行断点调试等,同时谷歌的插件功能,又给开发者提供了极大便利。

    目前chrome最新版开始采用blink内核,测试版本中,已经可以对css3动画进行追踪和调试。在我还没有想象到的时候,chrome已经实现了它。

    一句话,没有chrome,就没有新中国,就只能用firefox了。

    登录工程:现代 Web 应用的典型身份验证需求

    2017/02/18 · 基础技术 · WEB, 登录, 身份验证

    本文作者: 伯乐在线 - ThoughtWorks 。未经作者许可,禁止转载!
    欢迎加入伯乐在线 专栏作者。

    朋友就职于某大型互联网公司。前不久,在闲聊间我问他日常工作的内容,他说他所在部门只负责一件事,即用户与登录。

    图片 5

    而他的具体工作则是为各个业务子网站提供友好的登录部件(Widget),从而统一整个网站群的登录体验,同时也能令业务开发者不用花费额外的精力去关注用户鉴权。这很有趣。

    可以看出,在一个现代Web应用中,围绕“登录”这一需求,俨然已经衍生出了一个新的工程。不管是我们面临的需求,还是解决这些需求所运用的方法与工具,都已经超出了传统Web应用身份验证技术的范畴。

    在之前一篇文章中,我聊到传统Web应用中的身份验证技术,文章中列出的一些方法在之前很长一段时间内,为满足大量的Web应用中身份验证的需求提供了思路。在这篇文章里,我将简要介绍现代Web应用中几种典型的身份验证需求。

    Bootstrap

    2011年Twitter开源的网页端GUI框架。jquery兼容了不同浏览器的js部分,bootstrap则兼容了不同浏览器的css部分。甚至于说,作为一个后端开发,你无需了解css,无需前端,无需设计师,只要看一看bootstrap的文档,就可以搭起一个美观大方的后台管理系统。常见类似的GUI框架还有zurb的foundation,google的materialize,百度也曾出过一个名为GMU的移动端框架。

    就我个人来说,我并不喜欢这些gui框架,尽管他们简化了css,实现了一些很炫酷的效果,尽管我在项目中也用到过这些,尽管我不想承认我是绿茶。这些框架最大的缺点就是,千篇一律,所有的页面都是一个样子,一样的nav,一样的sidebar,一样的表单,连鼠标点上去放个光都一模一样。就像我如果长了三条腿(虽然确实长了三条腿)别人会说我很别致让他们眼前一亮,但如果所有人都长了三条腿,web也就失去其魅力了。另一个缺点是臃肿,一个css就走100多k的流量,其js插件又大都依赖jquery,忍心么。

    当然,其为了解决响应式提出的栅格化html的思想还是很值得借鉴的。

    与第三方集成:迎接更多用户

    “即得”是一个开放式文档共享应用,特点是“无需登录,即传即得”,它利用长时间有效的Cookie来标识用户,从而免除了人们使用应用之前必须注册登录的繁琐步骤。

    这种做法的风险是,如果用户有及时清理浏览器Cookie的习惯,那很可能导致用户再一次登录时不再被识别。不过从这样一个小例子中,却容易看出登录的真正作用,就是Web应用识别用户的过程,当下次同一个用户再次使用时,Web应用就能够知道“这就是上次来过的那个用户”。

    如果识别用户这一需求能够在不需要用户注册的前提下搞定,岂不两全齐美?基于第三方身份提供方的接口来识别已经在其他平台注册的用户,并将其转化为自己应用中的用户,这种方式完全可行,并且大量的开发人员已经有了丰富的实践。

    从 2010 年开始就有不少的大型互联网公司开始推出开放平台服务,让第三方应用通过Web接口与这些互联网服务交互,从而为他们提供更丰富多彩的功能。在这个过程中,一些应用不为这些平台提供扩展,却巧辟蹊径地利用了这些开放平台的身份识别接口来免除新用户注册的过程,从而为自己的产品快速导入用户。不少网站都提供“使用微博账号登录”功能,相信读者一定体验过。

    图片 6(图片来自:

    如果你的应用需要向第三方提供用户,那么我们的角色就由“从上下文中读取用户身份”变成了“向上下文中写入用户身份”了。如果你正好有过与各互联网公司开放平台的接口打交道的经历,这时候,你就可以体验一把提供开放、安全上下文的挑战了。如果……你的平台既希望让其他平台的用户能够平滑接入,又希望向其他平台公开自己的用户,那可能是另一番更有趣的挑战。这个过程,也可以作为生物验证之外的另一种间接消除密码的实践方式吧。

    登录,现在实实在在地成为了一个独立的工程。尤其在形态多样的基于Web的应用,以及这些Web应用本身所依赖的各色后端服务快速生长的过程中,各种鉴权需求随之而来。如何在保障各个环节中安全的同时,又为用户提供良好的体验,成为一个挑战。

    另外,个人信息泄露的事件频繁被曝光,它们导致的社会问题也开始被更多人关注和重视,作为IT系统支撑者的工程师们有责任了解事关安全的基础知识,并掌握必要的技能去保护用户数据和企业利益。

    我会在接下来的文章中介绍解决典型登录需求的具体技术方案,以及相关领域的安全实践常识。

    1 赞 收藏 评论

    nodejs

    我纠结了一会node属不属于前端范畴的问题。我认为是属于的。

    解决高并发一直是后台哥哥们乐于讨论的问题,比如咱们的好近实时监控系统,理论上每个连接都会生成一个新线程,每个新线程可能需要 2 MB 配套内存。在一个拥有 8 GB RAM 的系统上,理论上最大的并发连接数量是 4,000 个用户。随着用户的增长,咱们希望监控程序支持更多用户,这样,就必须添加更多服务器。当然,这会增加业务成本,尤其是服务器成本。除了成本上升外,还有一个技术问题:用户可能针对每个请求使用不同的服务器,因此,任何共享资源都必须在所有服务器之间共享,到这里,技术就到了瓶颈。node诞生的初衷,就是为了解决这个问题。node解决这个问题的方法是:更改连接到服务器的方式。每个连接发射一个在 Node 引擎的进程中运行的事件,而不是为每个连接生成一个新的 OS 线程,并为其分配一些配套内存。

    nodejs属于服务器端语言,在前后端分离这场圈地运动中是前端的一个有利武器,同时在前端自动化上也提供了大量的可编程工具(grunt,bower,gulp等),淘宝百度对nodejs的热度一直很高,自然而然我认为这是一个趋势。去年美团成立了美团酒店的团队,选择了node作为后台语言,圈走了后台大部分的工作。我在想,前端js加上node再加上对UI的技能需求,以后是不是前端工程师是不是该叫全端工程师了。

    P:我我对node只有粗浅的了解,也是以后希望学习的方向,不辩。

    双因子鉴权:增强型登录过程

    上一节中提到的“从属”关系不光可以帮助用户判断自己是否注册过一个网站,也可以帮助网站在忘记密码时进行临时认证,从而帮助用户完成新密码的设置。如果将这种从属关系用于正常登录过程中的进一步验证,就构成了双因子鉴权。

    双因子鉴权要求用户在登录过程中提供两种形式不同的凭据,只有两种验证都成功才能继续操作。现代化Web应用正在越来越多地使用这种增强型验证方式来保护关键操作的安全性。例如,查看和修改个人信息,以及修改登录密码等。

    相信不少人还记得QQ密码保护问题的机制,它使得盗号者即使盗取了QQ密码,在不知道密码保护问题的情况下,也无法修改现有密码,让账号拥有者得以及时挽回损失。

    双因子的原理在于:两种验证因子性质不一致,冒用身份者同时获得用户这两种信息的机率十分低,从而能有效地保护账号的安全。在QQ密码保护的例子里,密码是一种每次登录时都会使用的固定文本、相对容易被盗;而密码保护问题却是不怎么频繁设置和更改的、隐秘的、个人关联性极强的,不容易被盗。

    图片 7(图片来自:

    现代化Web应用形式多样,设备种类繁多,场景复杂多变,而为了更好地保护用户账号的安全,很多应用开始将双因子验证作为登录过程中的鉴权步骤。而为了兼具安全和便利的特点,一些应用还要求运用一些优化策略以提高用户体验。比如,仅在用户在新的设备上登录、一段时间未登录之后的再次登录、在不常用的地点登录、修改联系信息和密码、转移账户资产等关键操作时要求双因子鉴权。

    ajax

    03年的时候我上六年级,那时候网吧刚在小县城的角落萌生。传奇,大话西游第一代网游一时风靡。我抱着试一试的心态给了网吧老板两块钱想申请个号玩玩,然后接下来的一个小时我一直在,注,册,账,号。

    彼时网吧用的512k的带宽,注册的时候,填了一堆信息,提交,页面跳转,嘣,”您填写的信息有误,请重填”。然后跳转回注册页面,以此循环。我现在时常想,如果当时ajax能普及开来,我就可以省2块钱了。

    那么ajax是什么?

    首先ajax是一种技术。以往的网页交互方式,用户在点击一个按钮后,比如提交按钮,用户就要等待漫长的数据和服务器的交互,期间用户无法进行任何操作,只能点根烟。而ajax所做的,就是在向服务器发送请求的时候,我们不必等待结果,而是可以同时做其他的事情,等到有了结果我们可以再来处理这个事

    其实ajax技术早在1998年的时候就已经由微软实现了,然而直到2005年2月,Adaptive Path公司的Jesse James Garrett发表文章“Ajax: A New Approach to Web Applications”,人们读了后觉得哎哟不错哦这个屌,这之后ajax才大规模普及开来。

    ajax的出现,极大了提高了web的用户体验。时至今日,即使国内IT发展再怎么落后,所有网站的登录注册也已经实现了ajax交互。用户点填写完信息后,页面不用刷新就可以知道信息提交成功与否,哪错改哪。

    另外ajax作为一种前后端分离的解决方案,也已经被国内大多数不很low的公司所采用,也间接导致了php等网页脚本语言的衰落。(来辩)

     

    本文由奥门新浦京网址发布于Wed前段,转载请注明出处:十年WEB技术发展历程,登录工程

    关键词:

上一篇:录音的踩坑之旅,的一些经验分享

下一篇:没有了