authentication - 如何用HTML或JAVASCRIPT制作登录认证页面

Question

我是电子学出身，所以不太懂网页设计。我正在做一个以太网项目，为此我需要制作一个网页，但在该网页之前我还需要制作一个登录身份验证网页。我以某种方式设法使用 HTML JAVASCRIPT 做到了，但问题是任何人都可以通过查看页面源代码来查看用户名密码。

我很难进行身份验证。我有 HTML 和 JAVASCRIPT 的基本知识，但准备学习。我在谷歌上只能找到登录模板，但我什至不知道如何使用它们。

任何人都可以给我一个例子或给我一些好的链接。

Answer 1

HTML 和 Javascript 在 client side 上被解释。出于登录目的，服务器端代码通常用于验证凭据 - 仅仅是因为您已经知道这一事实 - 通过简单的客户端实现，您可以在源代码中看到凭据，服务器端也是更容易使用，一旦您理解了它，它就可以更灵活地进行进一步的开发，它更安全，而且它确实可以在任何地方用于此任务。

最好为此使用 PHP、ASP、Ruby(或任何其他 server side 语言)。如果您不希望这样，则需要让用户难以从源代码中读取凭据。

为此，您可以使用各种方法，例如密码学或 obfuscation 。强烈建议加密而不是混淆，因为它可以为您的应用程序增加更多的安全性。混淆基本上意味着您以难以阅读的方式更改源代码 - 您添加了对字符串进行编码的函数，这样您的“密码”就不会在第一眼就被发现。然而，混淆总是可以被绕过的，通常使用好的调试工具可以很容易地绕过。

那么，让我们来看看密码学吧。您在这里寻找的是使用 one way hash functions 。您有多种选择 - MD5、SHA1、SHA256 ……每种都提供不同级别的安全性。 SHA256 implementation in Javascript 是您可以使用的示例。有许多其他库和示例可用于此，因此只需使用 Google 并找到您喜欢的那个即可。

现在，该怎么办呢？假设您有 sha256() 函数，它接受一个字符串并将其散列作为字符串返回。对于您拥有的每个用户和密码，您预先计算字符串“用户 + 密码”的 SHA256 哈希值。

例如，您希望此帐户的用户名是“Pedro”，密码是“MyPassword”。

您预先计算“PedroMyPassword”的哈希值 - 例如与 with online hashing tool 。你可以看到它的 SHA256 哈希是

40be6e939eedf018b2b846e027067dcb006585a2155ce324f1f2a6a71d418b21

这个散列是您放入 Javascript 代码中的内容。

当用户输入他们的用户名和密码时，您会在“用户名 + 密码”上调用 sha256 函数，并将其与预先计算的哈希值进行比较。

请注意，您必须选择非常强的密码，否则某些攻击(例如字典攻击)很容易被用来破解您的哈希值。

现在的问题是，您没有指定下一步要做什么。例如，您可能希望将经过身份验证的用户重定向到下一页，但在这里您又遇到了同样的问题 - 如果您在代码中使用 Javascript 重定向到“secondpage.html”，那么有人可能会跳过身份验证并导航到第二页页面直接。

在这种情况下，您可以将第二个页面命名为

40be6e939eedf018b2b846e027067dcb006585a2155ce324f1f2a6a71d418b21.html

即您的用户+密码字符串的哈希值。在此变体中，您根本不将散列放在代码中。 Web 服务器将只为所有未通过身份验证的用户返回错误 404。例如，如果有人试图使用“Pedro”和“123456”作为密码，则 SHA256 将是

3bac31720fdd4619ebe2e8865ccc0dc87eb744f3f05f08c628bb9217a77e4517

如果你将他们重定向到

3bac31720fdd4619ebe2e8865ccc0dc87eb744f3f05f08c628bb9217a77e4517.html

它不会存在，因为你的第二个页面文件被调用了

40be6e939eedf018b2b846e027067dcb006585a2155ce324f1f2a6a71d418b21.html

您需要为每个用户/通行证组合创建这些第二页。然后，您可以将一个简单的重定向代码放入真正的第二页。

但请确保您使用的是 HTTPS 协议(protocol)，否则，第二个页面将通过未加密的线路......

这一切都可行，但我仍然强烈建议您考虑服务器端方式。