如何在 HTML 或 JAVASCRIPT 中制作登录认证页面
Posted
技术标签:
【中文标题】如何在 HTML 或 JAVASCRIPT 中制作登录认证页面【英文标题】：How to make login authentication page in HTML or JAVASCRIPT 【发布时间】：2016-05-08 02:42:11 【问题描述】：我来自电子背景，所以在设计网页方面没有很好的知识。我正在做一个以太网项目，为此我需要制作一个网页，但在该网页之前我还需要制作一个登录身份验证网页。我设法使用 html javascript 做到了这一点，但问题是任何人都可以通过查看页面源来查看用户名密码。
我很难进行身份验证。我有 HTML 和 JAVASCRIPT 的基本知识，但准备学习。我在谷歌上只能找到登录模板，但我什至不知道如何使用它们。
谁能给我一个例子或指出一些好的链接。
【问题讨论】：
【参考方案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 协议，否则，第二页将通过未加密的线路...
这一切都会奏效，但我仍然强烈建议您考虑服务器端方式。
【讨论】：
感谢您提供这么好的信息。这就是我要的。您能否也解释一下服务器端的方式或指出一些有用的链接。？ 服务器端是到处使用的。一旦你理解了它，它就更容易、更安全、更灵活，适合未来的开发，而且是可以使用的东西。对于服务器端，这取决于您可以在服务器上使用什么技术。如果您自己托管它，您可以在所有不同的技术（ASP、PHP、Ruby、NodeJs ......）中进行选择。但是，如果您使用第三方托管，您通常会受到限制。成本最低的主机通常在 Linux 操作系统上运行并提供 PHP。互联网上有很多资源可以解决这个问题 - 例如。 phpeasystep.com/phptu/6.html 是一个简单的 PHP+mysql 示例。 如果你不想使用数据库，那没关系，你可以简单地修改那个样本来切断数据库代码。这里也有很多关于该主题的 SO 问题，因此请搜索“简单的 PHP 登录表单”。或者你可以试试这个tutorialspoint.com/php/php_login_example.htm，这里真的有很多选择。您只需要确定您可以并且想要使用的服务器端技术，然后学习其基础知识。 再次感谢。实际上我正在使用将托管所有网页的微控制器。所以我不知道在这里使用什么技术。但我会尝试这样做。 我对微控制器不熟悉，但如果你在上面运行任何 unix/linux，你可能可以运行任何东西，你只会受到硬件资源（例如可用内存）的限制。话虽如此，像 PHP 这样的东西有很多可以调整的设置，包括内存限制。【参考方案2】：在我之前的回答中，我使用的是客户端技术，这就是为什么我们检查页面源时用户名和密码不安全和隐藏的原因。
现在，我们将使用服务器端技术，为此您需要 Web-server 包，例如 WAMP、XAMPP 等
下载并安装其中一个包。（如果你有这两个包之一，那么它很好）
我正在使用 XAMPP，所以我将使用 XAMPP 进行解释。
如果您已成功下载 XAMPP， 然后在 XAMPP 文件夹中查找 htdocs 文件夹。我的是“C:\xampp\htdocs”
复制以下代码并创建新的php文件并将此文件保存为htdocs目录中的login.php。
这里是 php 代码。
<?php
$usr="root";
$pwd="root";
if(isset($_POST['username']) && !empty($_POST['username']) && isset($_POST['password']) && !empty($_POST['password']) )
$username=$_POST['username'];
$password=$_POST['password'];
if(($username==$usr) && ($password==$pwd) )
echo '<br>login successfull';
else
echo '<br>login unsuccessfull';
else
echo "<br>Connot be left empty!";
?>这是HTML代码
<html>
<head>
<title>Login</title>
</head>
<body>
<form action="login.php" method="POST" align="center">
<br>
Username:<input type="text" name="username"><br><br><br>
Password :<input type="text" name="password"><br><br>
<input type="Submit" value="Submit">
</form>
</body>
</html>现在，转到浏览器->输入 http://localhost/login.html 并运行 以 root 身份插入用户名和密码。
我假设你有 php 的基本知识，如果没有通过它，它很容易，也可以阅读 HTTP 请求
获取 发布【讨论】：
【参考方案3】：<html>
<head>
<title>Login paget</title>
</head>
<script type="text/javascript">
function display(form)
if (form.username.value=="root")
if (form.password.value=="root")
location="page2.html"
else
alert("Invalid Password")
else alert("Invalid Username")
</script>
<body >
<form >
<input type="text" name="username" /><br><br>
<input type="password" name="password"/><br><br>
<input type="button" value="Login" onClick="display(this.form)"/>
</form>
</body>
</html>找不到此网页
ERR_FILE_NOT_FOUND
所以你要做的就是用你的下一个页面名称替换 page2.html。
【讨论】：
我想你没有得到我的问题。如果有人查看页面源，他可以很容易地检查用户名和密码是什么。？我不想要这个页面之王 哦，是的！您可以分离出该javascript代码并创建一个单独的file.js，并可以在您的html代码中引用该js文件。【参考方案4】：仅使用 JavaScript 和 HTML 并不能真正拥有一个安全的身份验证系统。
我建议在您的服务器上使用Basic HTTP authentication，因为它更安全（无论如何都不完美，但至少采用标准的服务器端访问控制方法）。
如果您必须在 JavaScript 中实现某些东西，您可以根据隐藏目录的名称执行仅密码方案。类似于以下内容（请注意，这是未经测试的，因此需要进行一些调整）：
（代码借用并改编自this question）
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(function()
var url = "some_url";
$.ajax(url,
if (statusCode == 200)
document.location.href = url;
else
alert('Incorrect password')
);
);
</script>
<input type="password" /><a href="javascript:void(0)">Login</a>
代码应该完成，以便在单击按钮时调用该函数。因此，如果密码是 foo，则在您的网站上设置一个名为 foo 的目录，如果 JQuery JavaScript 检测到输入的密码与目录名称匹配（例如 /foo/），则将用户重定向到那里。因此，您需要创建一个/foo/index.html 来处理用户的登录会话。
请注意，这是您可以单独使用 JavaScript 和 HTML 做的最安全的事情，它存在以下漏洞。
它要求对 URL 保密，尽管这可能会被引用标头、浏览器历史记录和服务器/代理日志泄露。 一旦用户登录，他们将始终处于登录状态（他们可以为登录的页面添加书签） 没有简单的方法来撤销密码。 只有一个密码。 任何有权查看服务器上文件的人都可以查看目录结构并了解密码。 分析工具可能会泄露 URL。 假设您的服务器上的目录浏览功能已禁用（或者私有页面的父目录中有默认页面）。在任何情况下，始终使用 TLS/SSL 保护您的服务器。我的建议是使用来自OWASP 的建议正确创建用户身份验证系统。以上仅显示了基本 HTML 中可实现的功能（不多）。但是，这比在客户端文件中公开密码要好。
【讨论】：
【参考方案5】：试试这段代码 -
function validate()
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if ( username == "username1" && password == "password1")
alert ("Login successfully");
else
alert("Invalid username or password");
return false;
<html>
<head>
<title>Javascript Login Form Validation</title>
<!-- Include JS File Here -->
<script src="js/login.js"></script>
</head>
<body>
<div class="container">
<form id="form_id" method="post" name="myform">
<label>User Name :</label>
<input type="text" name="username" id="username"/>
<label>Password :</label>
<input type="password" name="password" id="password"/>
<input type="button" value="Login" id="submit" onclick="validate()"/>
</form>
</div>
</body>
</html>【讨论】：
请提供正确的问题描述 我想你没有得到我的问题。如果有人查看页面源，他可以很容易地检查用户名和密码是什么。？我不想要这个页面之王 只需将 java 脚本放在一个名为 login.js 的新 javascript 文件中，然后在调用 vaidate 函数时将值发送到 java 脚本。那么java脚本文件就不显示在源码中了 我希望它很简单，你的方法对我很有效。！ @user007：然后用户只需查看 JavaScript 文件的源即可获取密码。以上是关于如何在 HTML 或 JAVASCRIPT 中制作登录认证页面的主要内容，如果未能解决你的问题，请参考以下文章
如何在 HTML5（或 Fabric.js）中制作屋顶文字效果和山谷文字效果
如何使用在html文档中搜索文本的javascript制作功能搜索框[重复]
如何使用 javascript 或 html 按钮删除选定的表格行？