如何用JavaScript实现带两个输入框的提示弹窗？附示例需求

你提到的双输入框浏览器原生弹窗是*HTTP Basic Authentication（HTTP基本认证）*的默认交互，无需前端编写任何自定义弹窗代码，完全由服务端返回指定响应头触发：当服务端返回401 Unauthorized状态码，同时携带WWW-Authenticate: Basic realm="自定义区域说明"响应头时，浏览器会自动弹出对应样式的用户名+密码输入弹窗。

可运行实现示例 #

示例1：Node.js Express 版本 #

1. 先安装依赖：
   npm install express express-basic-auth
2. 编写服务端代码：

const express = require('express')
const basicAuth = require('express-basic-auth')
const app = express()

// 配置基本认证规则
app.use(basicAuth({
    // 配置合法的用户名:密码键值对，可配置多个
    users: {
        'testuser': 'testpass123'
    },
    // 必须开启challenge，才会返回触发弹窗的响应头
    challenge: true,
    // 弹窗上展示的保护区域说明
    realm: '受保护的站点资源'
}))

// 受保护的路由，认证通过才可访问
app.get('/', (req, res) => {
    res.send('认证成功，已进入受保护站点')
})

app.listen(3000, () => {
    console.log('服务已启动，访问 http://localhost:3000 即可看到认证弹窗')
})

3. 运行代码后访问http://localhost:3000即可触发对应弹窗，输入用户名testuser、密码testpass123即可通过认证。

示例2：Nginx 配置版本（无需编写业务代码） #

1. 首先生成加密密码文件，执行命令后按提示输入两次密码即可：
   htpasswd -c /etc/nginx/.htpasswd testuser
2. 修改Nginx站点配置：

server {
    listen 80;
    root /your/site/path;

    # 开启基本认证
    auth_basic "受保护的站点资源";
    # 指定刚才生成的密码文件路径
    auth_basic_user_file /etc/nginx/.htpasswd;

    location / {
        index index.html;
    }
}

3. 执行nginx -s reload重载配置后，访问对应站点即可触发原生认证弹窗。

注意：HTTP Basic Auth传递的凭证仅做Base64编码，未加密，生产环境使用必须配合HTTPS，避免凭证泄露。

内容的提问来源于stack exchange，提问作者Yatharth Shrivastava