登录网页代码

凌晨两点，登录代码我盯着屏幕上那行报错——401 Unauthorized。网页这已经是登录代码今晚第七次了。登录框就摆在那儿，网页输入框、登录代码密码框、网页一个蓝色的登录代码按钮，三样东西，网页却卡了我三个小时。登录代码

问题出在session上。网页后端返回的登录代码token明明写进了cookie，可刷新页面就丢。网页我打开开发者工具，登录代码Network面板里那个请求红得刺眼。网页原来cookie的登录代码SameSite属性没设，浏览器默认当成Lax，跨域请求直接不带。改动一行代码，问题消失。就这么简单，也这么折磨人。

登录页面的代码，看起来是前端最不起眼的活儿。一个form，两个input，一个button，加起来不到五十行HTML。可真正做起来，你会发现这五十行背后藏着整个Web安全体系的缩影。密码不能明文传，得用HTTPS加密；不能明文存，得加盐哈希；登录状态不能只靠前端判断，得靠后端签发令牌。

我见过最粗糙的登录代码，是某外包公司给客户做的内部系统。密码直接POST到后端，后端拿明文和数据库比对。没有验证码，没有频率限制，连密码错误提示都分“用户不存在”和“密码错误”——这等于告诉黑客，你只管撞密码就行，用户名我都帮你验证好了。那代码跑在公网上，居然用了两年没人管。后来被扫了，数据库拖库，几万条员工信息流出去，客户才慌慌张张找人来修。

换我写的时候，会先把防暴力破解的逻辑放进去。登录接口加个计数器，同一IP五分钟内失败超过五次，锁一小时。再扔个验证码，不是那种歪歪扭扭的图片，而是滑动拼图——虽然烦人，但能挡掉九成脚本攻击。密码字段得设autocomplete="off"，防止浏览器自动填充泄露。提交按钮要防重复点击，不然用户手一抖，后端收到十个并发请求，数据库压力瞬间拉满。

还有那些细节，很多人压根注意不到。比如密码框的type="password"会把输入变成圆点，但用户输错时想看看自己打了什么，得有个“显示密码”的小眼睛图标。比如回车键要能触发登录，而不是光标跳去别的地方。比如登录成功后跳转回原来想访问的页面，而不是永远丢回首页——这个用redirect_url参数存一下就行，可多数新手压根想不到。

最坑的是第三方登录。微信、GitHub、Google，每个平台的OAuth流程都略有差异。回调地址要提前配好，state参数得自己生成并校验，防止CSRF。有一次我调微信登录，回调地址里多个斜杠，微信那边直接报redirect_uri参数错误。查了半天文档，最后发现是URL编码问题——%2F和/在服务端解析时被处理成了两回事。

代码写多了，你会摸出个规律：登录页面的复杂度不在于功能，而在于边界情况。用户密码带空格怎么办？剪贴板粘贴时混进换行符怎么办？浏览器自动填充的黄色背景盖住了自定义样式怎么办？移动端软键盘弹起来把登录按钮顶出屏幕怎么办？每个“怎么办”背后，都是一段别人踩过的坑。

回头再看那行401，其实是个善意的提醒——它在告诉你，身份验证这件事，永远不能想当然。你以为写完了登录，其实只是刚开始。真正的登录代码，从来不是那个漂亮的界面，而是藏在网络请求里的一次次握手、校验、加密和过期处理。它们不显眼，但少了任何一环，用户就进不了门。

现在我把SameSite设成Lax，token存进HttpOnly的cookie里，再给登录接口加上限流和审计日志。功能还是那个功能——输入用户名密码，点登录。但背后的代码，已经从五十行膨胀到三百行。值不值？等你看到凌晨四点的日志里，有人用脚本尝试一万次密码，全被挡在门外的时候，你就知道了。