kaichi
kaichi

搜索

关于
使用密码保护网站
使用密码保护网站

使用密码保护网站

Tags
Web Dev
NextJS
Docker
Nginx
Docker Compose
Published
Aug 20, 2023
Author
kaichi
👉
开始前，确保对 Nginx 有基本的了解
有时你想将你的网站共享给其他人，但不是所有人，不管是出于什么原因，你想要通过验证的人才能访问你的网站。一种简单的方式是使用 HTTP Basic Authentication 对访问者进行身份验证，就像下面这样：
notion image

什么是 HTTP Basic Authentication？

HTTP Basic Authentication（基本身份验证）是一种用于在网络通信中验证用户身份的简单身份验证机制。它在 HTTP 请求头中通过用户名和密码的组合来进行认证，以验证用户是否有权访问受限资源。

创建身份验证文件

通常网站的访问通过 .htpasswd 文件控制，用户名-密码对保存在这个文件中。要创建该文件，需要用到密码文件创建程序 apache2-utils （Debian、Ubuntu）或 httpd-tools (CentOS、RHEL、Oracle Linux)，确保安装好该程序。
创建用户和密码对：
htpasswd -c example.htpasswd user1
> New password:
> Re-type new password:
> Adding password for user user1
命令会创建 example.htpasswd 文件并将用户名参数和输入的密码的哈希写入文件。查看内容，其中包含创建的用户-密码对。
cat example.htpasswd
> user1:$apr1$iCtO6BCQ$g8fyv9r7fl0YCs/X3ftKB/
⚠️
虽然文件中只有密码的哈希值，也请不要随便泄漏
如果不想手动输入密码，可以通过 -b 参数在命令中传入密码。
htpasswd -b example.htpasswd user1 testpasswd
> Updating password for user user1
这在后面的脚本中会有帮助。

配置 Nginx

现在可以通过 auth_basic 指令对指定内容进行保护，例如：
server {
    listen 80 default_server reuseport;
    listen [::]:80 default_server reuseport;

    server_name example.com;

    location / {
        auth_basic "Restricted";
        auth_basic_user_file /file-creation-path/example.htpasswd;

        return 200 "hello world";
    }
}
现在访问受保护的内容浏览器会弹窗提示需要进行验证，用户名和密码则是之前创建的，验证通过后，才能访问该内容。查看更多使用情况。

Docker 化

假设有一个 NextJS 前端项目，使用 with-docker 模版创建，该服务启动会监听 3000 端口，docker-compose.yml 内容如下：
services:
  frontend:
    build: frontend
    container_name: frontend
另外还需要一个代理服务，添加如下内容：
	proxy:
    build:
      context: proxy
      args:
        - USER_NAME=${USER_NAME}
        - PASSWORD=${PASSWORD}
    container_name: nginx
    restart: unless-stopped
    ports:
      - '80:80'
注意，代理服务的构建参数通过 .env 文件提供：
USER_NAME=test
PASSWORD=test
另外代理服务基于 Nginx 镜像构建，以下是 Dockerfile：
FROM nginx:latest

// 参数
ARG USER_NAME
ARG PASSWORD

// 安装 apache2-utils
RUN apt-get update && \
    apt-get install --no-install-recommends -y apache2-utils

// 创建验证文件
RUN htpasswd -Bbn "$USER_NAME" "$PASSWORD" > /etc/nginx/example.htpasswd

// 拷贝 Nginx 配置
COPY nginx.conf /etc/nginx/conf.d/default.conf
镜像构建时会根据提供的用户名和密码创建验证文件，-B 使用 bcrypt 算法对密码进行加密，提供安全性；-b 使用批处理模式，不需要交互式地提供密码，-n 将结果输出到标准输出，然后将其写进 example.htpasswd 文件。
另外还需要 Nginx 的配置，nginx.conf 的内容如下：
server {
    listen 80 default_server reuseport;
    listen [::]:80 default_server reuseport;

    server_name example.com;

    location / {
        auth_basic "Restricted";
        auth_basic_user_file /etc/nginx/example.htpasswd;

        proxy_pass http://frontend:3000;
    }
}
最后启动服务：
docker-compose up -d
打开网站会看到提示输入用户名密码的弹框：
notion image
通过验证后，才可以访问网站内容：
notion image

总结

Basic Auth 是一种简单身份验证机制，适用于简单的应用场景，虽然凭证在传输过程中使用 Base64 进行编码，但是仍然是明文传输，一旦凭证泄露，网站内容将会失去保护，建议结合 HTTPS 来确保数据在传输过程的安全性。
结合 SSL，修改 Nginx 配置：
server {
    listen 443 default_server reuseport;
    listen [::]:443 default_server reuseport;

    server_name example.com;

		// 网站证书
    ssl_certificate example.com.rsa.crt;
    ssl_certificate_key example.com.rsa.key;

    auth_basic "Restricted";
    auth_basic_user_file /etc/nginx/example.htpasswd;

    location / {
        proxy_pass http://frontend:3000;
    }
}
另外，网站的 SSL 证书可以通过脚本自动生成，或者使用 nginx-certbot 自动获取。
最后，你可以在这里查看项目的完整代码。

参考链接