我最近花了两个多月的时间，给 UNTAG 网站的用户系统做了个大规模的重构。
昨天在跟 Hum 测试的时候做了一遍新功能的演示，他觉得完全可以写一篇文章跟读者一起分享下。
明早十点在官网也会发一篇 Release Note 形式的文章出来：UNTAG 功能 2024 年 9 月更新，现已支持验证码注册和登录
几乎每个互联网服务都有用户系统，由于过于普遍和基础，往往会忽略其背后的开发难度。当我实际上手去做，还是体会到了其中的复杂性。
本文不仅仅是一篇介绍 UNTAG 新功能的 Release Note，也想分享一下做这些功能的时候，我的一些设计想法，以及如何影响这些功能设计和最终呈现的。
改动的初衷
一般情况下，我不会轻易去动“注册”和“登录”功能。
因为这两个功能是用户访问网站的第一入口，它们做任何变动都会直接影响到所有用户，受影响的是整个用户模块。如果贸然改动，很可能造成一些预料之外的错误。
用户模块在任何系统中都是一个非常底层的模块，大到商城下单，小到评论区头像，所有与用户有关的功能，都围绕着它展开。
而此次改动的初衷很简单——用户体验跟不上了。
首先是国内用户更习惯手机验证方式。现在国内几乎所有的大厂 App 都默认以手机号 + 验证码形式注册，甚至是唯一注册方式。
其次是现有方案确实有一些不便。我身边有一位非科技爱好者的朋友想注册网站账号的时候，发现只能用邮箱注册，他告诉我已经很久没有打开过他的邮箱了，然后在手机邮箱 App 上点开垃圾邮箱才找到激活邮件，手机点开链接时又和桌面端的流程脱节了，总之是困难重重。
好吧，体验确实有点差了。
更糟糕的是，我们无法从访问数据上得知，究竟有多少用户因为上述困难而放弃注册的。
如果不去讨论隐私相关的议题。对于一个在国内拥有手机号的用户来说，手机验证码确实更简单、直观、方便。对于一个主要面向国内用户的网站而言，实现手机验证码能实现花小钱办大事的效果。
我想，在做其他功能之前，还是先好好完善一下网站现有的注册和登录功能，让它追上时代吧。
提供更多登录方式
以前，UNTAG 网站只开放了通过“填写用户名 + 邮件发送激活链接注册”和“邮箱/用户名登录”的功能。这是因为网站初期还不确定能否持续运营下来，本着一切从简的原则，用最简单的方式实现核心功能。
那么，来看看这段时间的成果吧。
而在这次的更新中，UNTAG 新增支持了 2 种注册方式、3 种登录方式。
- 现在可以通过“手机 + 验证码”“邮箱 + 验证码”进行注册和登录。
- 现在可以通过“手机/邮箱/用户名 + 固定密码”进行登录。
验证码的登录和注册入口是同一个，将根据手机号自动判断是登录还是注册。发送对应的验证码。以往的注册方式被弃用了1。
考虑到本站有不少用户习惯使用密码管理工具、浏览器自动填充功能的——自动填充登录起来真的很快。
所以我们没有把“手机验证码”设置为默认登录方式。 而是根据最后一次停留的登录页面，保留你的登录方式，不像某些服务必须先展示扫码登录界面。
所以，如果你喜欢自动填充，还是像以前一样，只需要点一步“登录”就可以完成登录操作。
另一个问题是，为什么保留邮箱注册。
一直以来我们都提倡注意自己的隐私安全，而手机号的隐私问题则一直都是重中之重。由于邮箱与用户本人的关联性不那么强，很多人更愿意用邮箱甚至一次性邮箱来注册服务。
我们不想做一个“没有手机号就不让你注册”的网站，所以保留了邮箱注册和登录功能。
用 6 位验证码替代链接
甚至为了保证与手机登录体验一致，我们还对邮箱登录的体验做了优化。
以往通过邮箱链接点击验证，通常是海外网站的做法，因为海外邮箱普及度比较高。
而文章开头我也提到了，链接验证的方法似乎在国内不太能吃得开，用户可能会在不同设备上打开邮箱，导致链接跳转出现各种各样的问题，从而放弃注册。
所以现在统一采用了 6 位验证码，你可以在手机上查看邮箱和短信里的验证码，在电脑上完成验证——也可以反过来完成。
整个过程不涉及页面跳转，体验会更好。
另外我们还重新设计了注册邮件的样式，让它更简单更直观，一眼就能知道它是验证码邮件。
我们不想让你识别红绿灯
既然做了短信验证码，就要考虑防机器人了。
有很多短信轰炸机 App 的原理，就是在各种网站上发起短信验证，让网站承担短信成本。我想在尽可能保证用户体验的同时，避免在这方面吃大亏。
但我们远没有国内大厂那么大的日常流量，没有必要让每个用户发送验证码之前，都做一遍识别红绿灯、滑动拼图、识别汉字、旋转小狗之类的题目。
而海外常用的 reCAPTCHA、hCaptcha 等，都存在一些网络方面的问题，国内使用体验不佳。
一定有什么更好的办法。
所以我最终选用了 Proof of Work (PoW) 方案，也就是“工作量证明”2 。用户只需要点一下按钮，手上的设备就会自动计算一道解密谜题，从而完成这个验证过程。这对真人用户来说，只是多花了一两秒的时间（起码比识别红绿灯快的多）。
防御的对象往往是服务器，虽然服务器很容易就能发起大量请求，但单台服务器性能总是有限的。而当网站遭到机器人滥用时，这个验证手段相当于一身“反甲”——想薅羊毛，就得对应的消耗计算性能来解题。
此外我们还结合了一些短信服务的防御、限制、告警措施等。检测到异常滥用时，我们可以人工调高 PoW 的难度，减缓滥用的速度，渡过高峰期。而这对真人用户而言只是在体感上验证慢了一些。
还做了哪些工作
除了上面几个重点功能，其实还有不少细节优化。
- 新增悬浮窗：现在默认登录入口改为了“悬浮窗”，你不必跳转页面就可以完成登录操作。
- 新增邮箱换绑功能：论坛有人提到邮箱需要换绑的问题，现在已经支持解绑邮箱了。但需要手机和邮箱之间至少存在一个，否则会导致无验证手段可用、进而导致无法登录的情况出现。
- 新增头像裁切功能：以往一直没有一个裁切头像的功能，现在引入了一个裁剪工具，可以在上传时进行裁切了。
- 手机端适配效果：上述所有的功能在手机端均可以正常使用，花了不少精力完成了适配工作，特别是新版本的登录界面原本在小屏幕手机上的体验不佳，特意在布局上做了一些调整。
- 用户名随机生成：目前不再需要填写用户名，但由于系统设计原因必须要有一个用户名字段，现在用户名将随机生成且对用户不可见。这里说的“用户名”与“昵称”不同。大家仍然可以在编辑资料页面随意修改自己的“昵称”。
为了不涉及太多技术细节，本文讲的大多是看得见摸得着的前端页面上的功能。
其实这次重构在后端也做了非常多的重构工作，例如短信服务的接口需要做的更完善、原先的短信机制需要重构、用户校验机制需要重构、Captcha 的相关设计、用户名昵称的随机生成逻辑等等，都需要有相应的后端做支持。整个开发过程对于我而言也是一种学习的过程。
前端还有待测试
原先我虽然深知测试在软件开发方面的重要性，但我本人是不怎么擅长编写测试用例的，所以以前写的测试用例覆盖范围不够，校验也比较简单。
由于 ChatGPT 的出现，现在编写测试用例变得非常容易，所以现在为后端引入了许多自动化测试，这样在自动化部署的环节就能预先发现一些难以察觉的错误。让单人开发也可以确保有个牢靠的后端服务作为基础。
不过前端方面我还没有找到一个很好的方案来实现自动化测试，主要靠人工点击来进行测试，所以在一些覆盖不到的地方，仍然可能会有各种各样的小问题。持续开发也会带来一些新老版本交替导致的问题，很多细节之处还需打磨。
所以大家如果在使用中遇到什么奇奇怪怪的 Bug，欢迎在 Slack 的 #beta 频道、论坛的反馈频道进行反馈。或者你是一位专业的前端开发者，也可以与我交流有什么前端测试的好方案。
希望大家喜欢这次更新！
