Aurora PassGen：我做了一个纯前端密码生成器

最近我写了一个小工具：Aurora PassGen · 极光密码生成器。它可以按指定规则生成随机密码，也支持由单词组成的密码短语，以及固定格式的密码模板。

整个项目使用原生 HTML、CSS 和 JavaScript 编写，没有后端、数据库和构建步骤。打开页面后，密码直接在浏览器里生成，不需要注册，也不用把生成任务交给服务器。

在线体验：打开 Aurora PassGen

项目源码：Bingwithyou/Aurora-Passgen

从“生成一串字符”到适配实际规则

密码生成器的核心操作很简单：选择长度，点击生成，再复制使用。真正麻烦的地方，往往是各个网站对密码的要求不同：有的要求同时包含大小写字母、数字和符号，有的只接受少数特殊符号，还有的要求第一位必须是字母。

Aurora PassGen 把这些规则做成了可以调整的选项。在 Aurora 主界面中，密码长度可以设为 4–64 位，大小写字母、数字和符号可以分别开关，还能进一步设置：

• 每种已选字符类型至少出现一次；
• 排除 0、O、l、1 等容易混淆的字符；
• 自定义排除字符，以及允许使用的符号集合；
• 字符不重复；
• 首位必须为字母。

例如，某个网站只接受 !@# 三种符号，就可以把允许的符号集设为 !@#，让结果直接适配它的规则。经常使用的配置也能保存为命名模板，下次直接套用。

这些选项主要用于满足格式要求，不是勾选得越多就一定越强。如果规则本身无法满足，例如只启用小写字母，却要求生成 40 位不重复密码，页面会显示错误提示，方便继续调整。

三种生成模式

随机字符：按长度与字符集生成

这是最直接的模式。选择需要的字符类型与长度，页面就会生成一串新密码。项目也提供了默认、高强度、网站兼容、易读、数字 PIN 等预设，减少反复调整选项的操作。

首页内嵌了一个快速生成器；需要排除字符、保存规则或批量处理时，可以进入功能更完整的 Aurora 界面。

密码短语：用随机单词组合

有时需要手动输入或朗读密码，一长串混合字符不太方便。密码短语模式会从内置词库中随机选择单词，按指定分隔符拼接，也可以开启首字母大写、追加数字和符号。

下面只是格式示例，请不要直接拿来作为真实密码：

Harbor-Velvet-Cricket-Maple-73

这里的单词来自随机抽取。短语的强度取决于词库规模、单词数量和附加随机部分，不能仅凭字符串看起来很长来判断；分隔符和固定的大小写转换也不会凭空增加随机性。

自定义格式：让每个位置遵循模板

如果目标系统有明确的格式要求，可以使用模板模式。例如：

Aaaa-####-$$$$

这个模板表示一个大写字母、三个小写字母、四个数字和四个符号，中间用连字符分隔。主要占位符如下：

占位符	含义
a	小写字母
A	大写字母
#	数字
$	特殊符号
?	任意大小写字母
%	字母或数字
*	当前启用的全部字符

普通连字符等内容会原样保留；如果想输出占位符本身，可以用反斜杠转义。固定文字只决定格式，不增加随机性。

随机数从哪里来

密码生成不能只看输出是否“像乱码”。Aurora PassGen 的随机源是浏览器提供的 crypto.getRandomValues()，生成密码的逻辑不使用 Math.random()。如果浏览器没有提供所需的 Web Crypto 能力，引擎会报错并停止生成。

从随机整数中选择字符时，项目还使用了拒绝采样，避免直接取模带来的概率偏差。

可以用一个小例子理解：假设随机源等概率产生 0–9，而我们需要从三个字符中选一个。直接计算余数 n % 3，余数 0 会出现四次，余数 1 和 2 各出现三次，三个字符的概率就不相等。先丢弃 9，只接受 0–8，再取模，三种结果就各占三次。

引擎对 32 位随机整数采用同样的思路：只接受能均分到目标范围的那一部分，再计算字符下标。这解决的是随机下标的取模偏差；加入复杂格式约束后，完整密码的分布仍需要单独考虑。

密码会被保存或上传吗

生成逻辑在本地运行，页面没有接入第三方字体、CDN 或统计脚本，也没有上传密码的接口。通过在线地址访问时，浏览器仍然需要下载 HTML、CSS 和 JavaScript；资源加载完成后，生成过程不需要额外的网络请求。

项目对不同数据的处理方式是：

数据	处理方式
当前生成结果、批量结果	保留在页面内存中，不主动写入本地存储
复制记录	仅在页面内存中保留，刷新后清空
生成选项、命名模板、语言与主题偏好	保存在当前浏览器的 localStorage 中
主动复制或导出的密码	进入系统剪贴板，或保存为用户下载的明文文件

因此，“不自动保存密码”与“可以导出密码”并不矛盾：前者是页面默认的数据处理方式，后者是用户主动执行的操作。模板保存的是规则；如果自己在模板内容中填入固定文字，这些文字也会随配置一起保存。

Aurora 界面还提供可选的 30 秒剪贴板自动清理。它依赖页面继续运行及浏览器允许写入剪贴板，不能保证清除系统剪贴板历史。这个工具负责生成密码，长期保管仍应交给专门的密码管理工具。

一套引擎，四种界面

除了生成功能，我也给这个项目做了四套视觉风格。首页可以选择界面，各个主题也能返回首页切换。

界面	视觉特点
Aurora · 极简卡片	卡片布局，密码字符按类型着色，支持深浅色切换
Terminal · 终端极客	荧光绿、扫描线，以及随设置变化的命令行风格展示
Glass · 毛玻璃渐变	渐变背景、半透明面板与单栏布局
Brutalist · 新粗野主义	粗描边、硬阴影与高饱和撞色

四套界面共用生成引擎和交互控制层，具体展示的控件可以不同。Terminal 中的命令行是对当前配置的可视化表达，项目本身没有提供需要安装的 passgen 命令。

页面支持中英文切换。重新生成时，字符会原位翻滚，再从左到右定格；如果系统启用了减少动态效果，生成动画会跳过。在启用快捷键的界面中，还可以按 R 重新生成、按 C 复制，编辑输入框时不会触发这些快捷键。

强度数值应该怎么看

页面会根据生成配置显示熵值、五档强度和暴力猜测耗时估算。对于允许重复、每一位独立均匀选择字符的简单模型，计算方式是：

熵值（bits）= 密码长度 × log2(字符池大小)

不重复模式会考虑每次选择后剩余字符数的变化；密码短语根据词库大小与单词数计算；格式模板则累计各个随机位置的贡献。

不过，当前估算没有完整建模“每类至少一个”“首位为字母”等约束及其生成分布，因此不应把显示值理解为所有配置下的精确熵值。破解耗时也建立在每秒尝试 10¹⁰ 次的固定假设上，并不是针对某个网站测得的实际时间。

这些数值适合帮助比较配置变化，例如增加长度后候选空间如何扩大，而不是承诺密码能在现实中安全多少年。

原生前端也可以把逻辑分清楚

项目没有引入前端框架，主要逻辑分在三个文件中：

assets/js/core.js        随机数、密码生成、规则处理与强度估算
assets/js/i18n.js        中英文词典与语言切换
assets/js/controller.js  控件绑定、复制、批量导出与配置保存

其中，core.js 不依赖 DOM，可以单独调用。界面通过 data-pg 属性标记输出区域、按钮和输入控件，再由 PassGen.mount(...) 绑定交互。新增一种界面时，可以继续复用这套逻辑。

引入生成引擎后，调用方式也很直接：

// 生成 20 位、不含符号的随机密码
PassGen.generate({ length: 20, symbol: false });

// 生成由 5 个随机单词组成的密码短语
PassGen.generate({ mode: 'passphrase', words: 5 });

// 按固定格式生成
PassGen.generate({ mode: 'pattern', pattern: 'Aaaa-####-$$$$' });

// 批量生成 10 个密码
PassGen.generateMany({ length: 16 }, 10);

Aurora 界面还可以把批量结果一次性复制，或导出为 .txt 文件。保存常用规则、应用模板和查看本次页面会话中的复制记录，也都由共享控制层处理。

本地运行与测试

项目没有构建步骤。克隆仓库后可以直接打开 index.html，也可以用静态文件服务器预览：

git clone https://github.com/Bingwithyou/Aurora-Passgen.git
cd Aurora-Passgen
npx serve .

直接打开文件时，生成功能可以运行；复制是否成功仍取决于浏览器的剪贴板限制，项目提供了复制回退逻辑。

仓库内有两组不依赖额外测试框架的 Node.js 测试：

node tests/run.js
node tests/site.js

前一组检查随机数区间、生成规则、模板展开、密码短语和熵值计算，后一组检查首页结构、主题导航、SEO 资源与本地链接。GitHub Actions 工作流会先运行这两组测试，通过后再部署静态页面。

Aurora PassGen 已经以 MIT 协议开源。如果你想试试不同风格的密码生成界面，或者看看不依赖框架的前端小工具如何组织代码，欢迎在线体验，也欢迎到 GitHub 仓库交流问题和改进建议。