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