你以为BAT的登录天衣无缝?

发表于

以下皆为个人原创见解，不当之处烦请指正。

首先，我有些话想说在前面。现在网上的各种开放的资源，很多都是有访客模式，即不用登录也能浏览或者操作，但是现今时代没有登录功能或者登录页面的网站，几乎绝迹了。
说实话，登录页面除了验证信息作用外，其他的都不是主要的，因此可能很多人觉得没有必要花很多时间在这上面。
我也同意上述观点！
但是呢，既然做了，当然希望做的更好点啦，废话不说，下面进入主题。

吐槽

各大公司的网站，做的已经非常棒了，至少我是很佩服。
但是有时候会遇到一点小瑕疵，比如说下面几个例子，我平时也会拿出来吐槽下，用以慰藉下像我这种技术渣幼小的心灵。

  • JD
  1. JD的登录页面，如果没输入用户名和密码，或者只输入密码，点击登录按钮，会请求服务器拿两个log.gif文件，我并不知道这个文件是干嘛用的，为什么要这么做。然后当输入了用户名再删去，也会发出请求。不是应该只有都输了，才发出请求的吗???
  2. 第二点，就是点击右下角扫码登录后，按钮居然跑下面来了，居然不是在同一个地方，每次点完都要移动鼠标才能点回去，这体验太差了吧。
  3. 第三点，从普通登录切换扫码登录，拿一个code图片，我能理解，但是为什么切回来的时候，还要拿一次吖？？？
  4. 第四点，登录页面没有做自适应处理，缩放后出现滚动条。
  • BD
    BD的登录弹框，每次修改完密码再失焦，会请求一次publicKey。然后从扫码登录页面切换回来，也还会再请求一次gif文件。但至少切换的按钮，位置没变，不需要再移动鼠标。也没有做自适应处理，缩放屏幕出现滚动条。
  • ALI
  1. TB的登录页面做了自适应，有一个767的分界。屏宽小于767px，会让登录窗口居中显示，去掉背景。
    但是关于TB登录页面的自适应做的，也有问题。当屏宽超过767px时，由于其左边的背景看着像是广告图片，图片的宽度设置为屏宽100%，而整个页面内容区域宽度也是固定的，目前是1200px，当屏宽在767与1200之间时，还是出现了横向滚动条。
    关键的来了，由于TB登录框的position是relative，此时被固定在右侧了，你要看到首先得拖动滚动条，一拖滚动条，背景就跟不过来了，就会很容易出现我看到登录框整个背景是白色的！
    或者部分背景是白色的！没有背景！或者说脱离背景图片了！这个看着视觉效果太差了感觉。
  2. 第二点，当我输入用户名和密码后，不管我有没有拖动验证条，都会去执行登录请求服务器。而且我很奇怪的是，登录失败也要整个页面重新刷新一次！！！
    我的天呐，我不知道为什么需要重新刷新一次，而且我感觉好像是有意为之，因为登录失败再加载页面很慢，还有专门的加载进度圈圈。。。

界面

吐槽完了，说下我自己写的渣渣页面吧。由于h5很多元素用的不多，语义性可能有点乱，但是大致思想在那。
首先界面，主要是三块，header、section及footer，大致如下：

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
<!--login header-->
<header class = "login-header">
	  <!--login logo-->
	  <div class = "login-logo">
		...
	  </div>
</header>
<!--login content-->
<section class = "login-content">
  <!--login background-->
  <div class = "login-bg">
  	...
  </div>
  <!--login layout-->
  <div class = "login-layout">
	<div class = "login-box-wrap">
		...
	</div>
  </div>
</section>
<!--login footer-->
<footer class = "login-footer">
	...
</footer>

header部分现在是放一个logo区域。
footer部门现在是放一些友链啥的。
section是主要内容区域。内容区域放一个可以独立出来的弹出框，因为有些网站，像BD，可能不光有登录页面，还有登录弹框。
单独拿出来可以保证此页面可以复用，比如项目是用ng开发的时候，写成指令。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class = "login-box">
  <div class = "login-box-content">
    <!--login quick-->
    <div class = "login-quick">
    	...
    </div>
    <!--login static form-->
    <form class = "login-static" submit = "signIn();">
    	... (账户)
    	... (密码)
    	... (验证码)
      <!--login button-->
      <div class = "login-btn">
        <button type = "submit" class = "btn btn-success">登 录</button>
      </div>
    </form>
  </div>
</div>

自适应&视效(样式)

可能不算视效啦，只是不知道怎么描述。
首先，内容区域，即section部分，我设置position为relative，相对定位。宽度100%。背景图片宽度100%，绝对定位。
添加媒介查询，屏宽小于768px时，背景不要了。

1
2
3
4
5
6
7
8
9
.login-content {
       width: 100%;
       position: relative;
   }
@media (min-width: 768px)
   .login-bg{
       position: absolute;
       width: 100%;
   }

然后登录内容区域，宽度先固定1200px，相对定位。先保证在大屏幕情况下，正常显示，再去滚动条。

1
2
3
4
5
6
7
.login-layout{
	width: 1200px;
	margin: 0 auto;
	overflow: hidden;
	position: relative;
	transition: width .25s linear;
}

注意最后一行，我还加了点别的东西–transition，这个小过渡主要是变化窗体宽度的时候触发。
有人会说我width固定了，也触发不了呀，下面还有一点东西。

1
2
3
4
@media (max-width: 1200px) and (min-width: 768px)
   .login-layout {
       width: 100%!important;
  	}

上面这句样式的作用就是用来动态改变登录内容区域宽度的。这句样式个人感觉还是蛮重要的，可以保证屏宽在这两者之间时，内容区域宽度动态变化，这样做的好处就在于里面的子元素相对其定位时，感觉上子元素所处的位置没有发生变化。
接下来看下登录框的样式。

1
2
3
4
5
.login-box-wrap {
       position: absolute;
       top: 40px;
       right: 15%;
}

相对父元素(此处为登录内容区域)，加一个top和right，以保证在宽度变化的时候，视觉上看登录框所处位置不变。
以上样式生效后，可以保证屏宽在768px以下时，只居中显示登陆框，在1200px以上时，正常显示。在两者之间时，屏宽有变化则登录窗体也跟着一起变化，不出现滚动条，背景不丢失，且登录框所处位置相对固定。

登录(功能)

h5提供一些基础的表单校验功能，其中有一条–必填检验(required)。而且允许用户自定义一些校验提示，还支持正则匹配。此特性规定，在校验不合法的情况下，不允许用户提交表单。
因此我在form内利用这些新知识，可以避免在没有输入用户及密码的情况下，进行表单提交，请求后台服务器。我不知道其他网站为何要在未输入用户名密码的情况下请求后台服务器，我觉得在我看来没有这个必要。

1
2
3
4
5
6
<input type = "text"
	class = "form-control" required autofocus = "autofocus"
	autocomplete="on" placeholder = "手机号/会员名/邮箱"
    oninvalid = "setCustomValidity('请输入账号')"
    oninput = "setCustomValidity('')"
/>

‘autofocus’属性可以让当前元素在页面初始化的时候，自动获取焦点。
‘autocomplete’设置为on可以让浏览器记住输入内容。
‘oninvalid’属性可以自己设定输入非法时的提示语。
‘oninput’属性表示输入时要执行的操作。
‘placeholder’属性表示占位时显示的字符。

这些都是普通的h5新特性，可以添加你们适用的属性来满足需求，个人感觉还比较方便。

安全

目前登录机制是利用cookie。有时候可能需要跳转到当前系统，即利用单点登录验证身份，此时是请求服务器产生一个唯一的一次可用的authId，携带这个authId的即视为合法用户。登录安全这块内容东西太多，做的时候需要考虑仔细点，以上就是登录页面我个人的看法。

money☜☜☜ wechat 『『『 reward 点击扫码打赏 ~~~ ^_^ 』』』alipay ☞☞☞ money