📅 最后修改于: 2023-12-03 15:39:08.977000 🧑 作者: Mango
在实际开发中，有时候需要一些设计精美，具有权限控制的静态网站。在这种情境下，我们通常会使用用户名和密码来访问网页。本文将会讲解如何保护我们的静态网站，为其增加访问限制。
密码保护静态网站的思路其实很简单：当用户在访问网站时，弹出一个对话框，要求输入用户名和密码。输入错误则无法进入网站，输入正确则允许进入。
htpasswd 是一个Apache密码文件创建与管理工具。我们可以通过htpasswd创建一个文件，以实现访问权限的控制。下面是一个简单的htpasswd文件示例：
user1:$apr1$ZbITGZ9P$Q9pJxit0ssr.0zV5zcmL51
user2:$apr1$VDIn6rbv$EpDfS6wwByfM50XVrs952.
其中，“user1”为用户名，用户密码被加密后存储在后面。创建密码文件的命令如下：
htpasswd -c .htpasswd user1 # -c 表示创建文件
htpasswd .htpasswd user2 # 添加用户
我们需要在服务器上配置 Apache 或者 Nginx 来限制访问。以 Apache 举例：
<VirtualHost *:80>
ServerName example.com
DocumentRoot /path/to/site
<Directory /path/to/site>
Options Indexes FollowSymLinks MultiViews
AllowOverride All
Order allow,deny
allow from all
AuthType Basic
AuthName "Password Authentication"
AuthUserFile /path/to/.htpasswd
Require valid-user
</Directory>
</VirtualHost>
在这个配置文件中，我们指定了基本的认证方式。所有被访问的文件都必须通过用户名和密码进行验证。.htpasswd 文件记录了已经授权的用户名和密码。
最后，我们还需要在网页中实现密码保护。在这里，我们使用 JavaScript 来实现弹出认证框。下面是一个示例：
<html>
<head>
<title>My Protected Site</title>
<script language="javascript" type="text/javascript">
function check_auth() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://example.com/check_auth?u=" + username + "&p=" + password, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
window.location.href = "http://example.com/";
} else {
alert("Authentication failed");
}
}
};
xhr.send();
}
</script>
</head>
<body>
<p>Welcome to My Protected Site! Please authenticate:</p>
<label for="username">Username:</label>
<input type="text" id="username" name="username" />
<br />
<label for="password">Password:</label>
<input type="password" id="password" name="password" />
<br />
<input type="button" value="Login" onclick="check_auth()" />
</body>
</html>
在这个示例中，我们使用 AJAX 向服务器发送用户名和密码，如果验证成功，则跳转到首页。
本文介绍了如何实现静态网站的密码保护。方法包括使用 htpasswd 管理密码文件，通过服务器配置限制访问，以及使用 JavaScript 弹出认证框保护网页。