OpsKitPro logo
OpsKitPro_
返回博客
工具2026-04-225 min

密码生成器怎么做:passgen 的设计、实现、用途和用法

从随机源、模式切换、强度提示到复制与历史记录,收口成一个很快的密码工具。

这篇文章按设计、实现和用法完整展开,可以直接往下读。
打开工具
密码生成器怎么做:passgen 的设计、实现、用途和用法
关于正文

这篇文章按完整正文来整理,从背景、实现到用法都可以连起来读。

正文

为什么需要一个更快的密码生成器

01

passgen 的目标很直接:让你在需要密码、UUID 或 PIN 的时候,不用去别的站点来回切换。很多时候,真正麻烦的不是生成本身,而是你还要决定格式、长度、是否能复制、是否要保留历史。

所以我把它做成一个很快的单页工具,打开就能生成,生成完就能复制,也能顺手保存最近几次结果。

参考文件src/app/tools/passgen/pass-client.tsxsrc/app/tools/passgen/page.tsx

为什么我把设置压到最少

02

密码工具最常见的问题,是把设置做得太多。字符集、长度、特殊模式、强度条都可以堆上去,但用户在现场要的往往不是功能,而是一个马上可用的结果。

所以我把模式分成两类:普通密码和特殊模式。UUID、PIN 与字符集模式互斥,避免用户选完以后又不知道自己生成了什么。

参考文件src/app/tools/passgen/pass-client.tsxsrc/dictionaries/zh.jsonsrc/dictionaries/ja.json

实现和用法

03

实现上我用的是浏览器原生的 `crypto.randomUUID()` 和 `window.crypto.getRandomValues()`。这样做的好处是随机源可靠,而且不需要把敏感逻辑放到服务端。

用法也很简单:先选长度或特殊模式,再点“生成”,然后复制结果。如果你希望把临时密码展示给别人,也可以切出 QR 码。

参考文件src/app/tools/passgen/pass-client.tsxsrc/app/tools/passgen/__tests__/passgen.test.ts