自制密码生成器：分步指南🤖
由 Mux 赞助的 DEV 全球展示挑战赛：展示你的项目！
假设你想为每个网站都设置独一无二的密码，但又不想记住所有密码。没错，你应该使用密码管理器。不过，自己动手搭建一个密码管理器，学习它的基础知识，也总是很有趣的。
这时我的密码生成器就派上用场了。
以下是规格参数：
- 它接收网站的地址。
- 还有你留给我的几句秘密话语。
- 然后把这些东西混在一起，再通过一个可预测的加密算法进行加密。
- 最终生成的是一个由字符和数字组成的唯一组合，您将使用该组合作为密码。
- 每个地址的密码都是唯一的，但并非随机生成的。
每次为特定地址生成密码时，都会得到相同的密码。这样，即使忘记密码，也可以重新生成一个，而且仍然有效。
友情提示：此算法不具备加密安全性。如果有人知道您在第二步中输入的密词，他们就能重新生成您的密码。因此，在关键任务和敏感领域使用这些密码是不明智的。但即便如此，开发它仍然值得尝试。
MD5 哈希
我们算法的核心是MD5哈希引擎（您将在步骤3中看到它）。哈希算法可以将文本转换成一个32个字符的字符串，类似于数字指纹。
例如，如果你对 google.com 进行编码，你总是会得到哈希值1d5920f4b44b27a802bd77c4f0536f5a。
如果你的字符串是https://google.com，那么你的哈希值始终是99999ebcfdb78df077ad2727fd00969f.
以下是需要了解的重要信息
哈希值（或数字指纹）无法通过逆向工程还原出原始字符串（至少不容易直接还原）。
使用 MD5 编码同一个字符串，总是会生成相同的哈希值。
因此，如果您有一组可能的源文本和一个想要解密的目标哈希值，您可以先对源文本进行哈希运算，然后将结果与目标哈希值进行比较。这是破解泄露密码数据库的常用方法。
该算法广为人知，并已被深入研究。
没有绝对无法破解的加密技术。MD5 哈希算法也并非 100% 安全。事实上，生活中没有什么是绝对安全的。
提高 MD5 安全性的常用方法之一是添加盐值。盐值是添加到加密字符串中的某个秘密单词或字符，任何人都不知道它是什么。有了盐值，反向匹配预先哈希的密码就变得非常困难。
以下是一个例子
假设你想对字符串“mail.google.com”进行哈希运算。这个字符串总是会得到一个哈希值be5cab0695415d9363d18ad1345c73eb。黑客截获了这个密码，但他并不知道这个密码的来源和含义。但他想要弄清楚。他创建了一个包含所有可能字符串的表格，对每个字符串进行哈希运算，然后将得到的哈希值与你的哈希值进行匹配：
但如果你的原始字符串是“mail.google.comJacko”，那么“Jacko”就是盐值吗？在这种情况下，你的哈希值将是397ea03e8e23b5b0127dffc6db629eab，除非黑客猜到了你的盐值，否则他将无法反向匹配这个哈希值。
所以关键在于黑客是否知道你的盐是什么以及你把它放在哪里。
界面
我先从一些基本界面开始。在记事本中创建一个文本文档，粘贴这段代码并另存为 HTML 格式。如果您不太明白其中的原理，请阅读文档中的注释：
<html>
<!-- service area -->
<head>
<title>Password generator</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- next line loads the MD5 hashing function -->
<script src="https://thecode.media/wp-content/uploads/2019/05/js-md5.js"></script>
<style type="text/css">
/*Adding some basic design*/
body{ text-align: center; margin: 10;
font-family: Verdana, Arial, sans-serif;
font-size: 16px;}
input{ display: inline-block; margin: 20px auto;
border: 2px solid #eee; padding: 10px 20px;
font-family:Verdana, Arial, sans-serif;
font-size: 16px;}
</style>
</head>
<body>
<!-- Our page will be here -->
<div class="container" "margin: auto;">
<h2 class="todo__caption">Password generator</h2>
<br>
<!-- Interface begins -->
<input type="text" id="site_url" size="50" placeholder="Where do you need this password? Paste the address">
<br>
<input type="text" id="keyword" size="50" placeholder="Some key word here">
<br> <br>
<!-- Main button -->
<button style="font-size: 100%; padding:5px 10px 10px 10px" onclick="generate()">Generate password</button>
<p>Your password is:</p>
<div id = "pass_text" style="font-weight: bold"></div>
</div>
<script>
<!-- Your main script -->
</script>
</body>
</html>
如果你将这段文字保存为 .html 文件，然后在 Chrome 或其他浏览器中打开，你会看到类似这样的内容。看起来不错，但目前还不能正常使用：
接下来，我将编写一个在浏览器中运行的脚本，确保所有加密过程都能顺利完成。请按照以下步骤操作：
步骤 0：客房服务
为了保持代码简洁，我将首先声明一些变量并设置一个函数，该函数稍后将由按钮触发。这段代码目前不会执行任何操作，但它是真正有用的代码正常运行所必需的。所有这些内容都放在上一个文档末尾的代码块中：
// setting up variables
var site, salt;
var text, password;
// The function to run all the useful code
function generate(){
// Some useful code
}
第一步：从网站上获取地址
我正在使用 JavaScript 编写代码，它运行在浏览器中，可以直接访问网页上的所有操作。页面上有一些输入字段。读取这些字段的值只需要一行代码：
site = document.getElementById('site_url').value;
注意到 site_url 了吗？那是输入字段的 ID。这条命令的工作原理是：找到页面上所有 ID 为 'site_url' 的对象，查看它的值，并将该值传递给我之前声明的名为 'site' 的变量。
这一行代码放在“一些有用的代码”的注释下面。
第二步：取下密语
同样地，我读出了那个秘密词语：
salt = document.getElementById('keyword').value;
这一行写在上一行的下方。
步骤三：将它们捣碎
现在我需要把“site”和“salt”里的内容合并起来。我还可以加点料，让它更有味道。在JavaScript中，连接两段文本只需简单地添加：
text = site + salt + 'Practicum Rules';
我们的“文本”变量现在将包含页面上两个输入框中输入的内容，以及秘密词语“实习规则”。由于它是硬编码到页面中的，因此任何查看此生成器源代码的人都可以读取它，所以它实际上并不能保护我们的算法。但即便如此，它仍然很有趣。
第四步：加密
我已经加载了MD5脚本，所以现在我只需要使用它：
password = md5(text);
这行代码的意思是：调用名为 md5 的函数，并将变量 'text' 中的所有内容传递给它。然后，将函数返回的结果放入变量 'password' 中。
步骤 5. 输出密码
使用 JavaScript，向页面输出内容非常简单：
document.getElementById('pass_text').innerHTML=password;
这意味着：在文档中找到 id 为 'pass_text' 的元素，并将变量 'password' 的值放入其内部 HTML 代码中。我知道我刚刚放入的是编码后的密码，所以我会在页面上看到编码后的结果。
运行代码
现在我需要确保所有有用的代码都放在名为“generate”的函数中，并且我已经将这个函数映射到页面上的按钮上。我已经完成了，请看粗体部分：
<button style="font-size: 100%; padding:5px 10px 10px 10px" onclick="generate()">Generate password</button>
以下是最终代码
<html>
<!-- service area -->
<head>
<title>Password generator</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- next line loads the MD5 hashing function -->
<script src="https://thecode.media/wp-content/uploads/2019/05/js-md5.js"></script>
<style type="text/css">
/*This will be some basic design*/
body{ text-align: center; margin: 10; font-family: Verdana, Arial, sans-serif; font-size: 16px;}
input{ display: inline-block;
margin: 20px auto; border: 2px solid #eee;
padding: 10px 20px;
font-family:Verdana, Arial, sans-serif;
font-size: 16px;}
</style>
</head>
<body>
<!-- Our page will be here -->
<div class="container" margin: auto;">
<h2 class="todo__caption">Password generator</h2>
<br>
<!-- interface begins -->
<input type="text" id="site_url" size="50" placeholder="Where do you need this password? Paste the address">
<br>
<input type="text" id="keyword" size="50" placeholder="Some key word here">
<br> <br>
<!-- Main button -->
<button style="font-size: 100%; padding:5px 10px 10px 10px" onclick="generate()">Generate password</button>
<p>Your password is:</p>
<div id = "pass_text" style="font-weight: bold"></div>
</div>
<script>
// setting up variables
var site, salt;
var text, password;
// The function to run all the useful code
function generate(){
//Step 1
site = document.getElementById('site_url').value;
//Step 2
salt = document.getElementById('keyword').value;
//Step 3
text = site + salt + 'Practicum Rules';
//Step 4
password = md5(text);
//Step 5
document.getElementById('pass_text').innerHTML=password;
}
</script>
</body>
</html>
保存并加载它，输入你的密语和网站网址，然后点击“生成”。耶！你已经拥有了一个密码生成器。恭喜！
接下来可以做什么：
-
你可以通过多次运行 md5 算法来使加密更加复杂。
-
您可以使用大小写字母，并向生成的密码添加额外字符。
-
您可以将密码缩短至 9-12 个字符，使其更易于管理。
如果你想学习更多类似的内容，可以看看我们在Practicum上的Web 开发课程。它有 20 小时的免费课程🚀 另外，我一直在寻找 beta 测试人员，如果你有兴趣，请给我发邮件！
文章来源：https://dev.to/andrewu/make-your-own-password-generator-step-by-step-guide-3fdc