如何将webform登录添加到nginx basic auth网站？

我有一个简单的nginx静态站点，带有基本的auth。当有人想要访问网站时，他们会看到浏览器模式对话框，提示输入用户名/密码：

nginx.conf：

server {
  listen 1337;
  server_name _;
  root /app/public;
  location / {
    auth_basic "Protected";
    auth_basic_user_file /app/etc/htpasswd;
  }
}

如何更改它，使我不再使用对话框，而是使用一个web表单在同一

htpasswd

文件中输入用户名和密码

我尝试将以下内容添加到

nginx.conf

：

# In location / block
error_page 401 =418 /login/?dest=https://$http_host$request_uri;

# In server block
location /login/ {
  auth_basic off;
}

Return code

418

关闭弹出窗口，我喜欢茶壶。 在

/app/public/login/

中，我创建了

index.html

，它有一个简单的表单：

函数身份验证（）{
var login=document.getElementById（'username'）。值；
var pass=document.getElementById（'password'）。值；
var xhr=new XMLHttpRequest（）；
xhr.withCredentials=true；
xhr.open（“GET”、“/”、true）；
setRequestHeader（“授权”，“基本”+btoa（登录+”：“+pass））；
xhr.onreadystatechange=函数（）{
log（'xhr就绪状态：'+xhr.readyState）；
console.log（'xhr状态：'+xhr.status）；
log（'xhr响应：'+xhr.response）；
};
xhr.send（）；
}

我尝试对原始目标url使用AJAX/XHR，以查看它是否返回200（登录成功）或418（登录失败），但我不知道如何在所有后续请求上设置授权头，或者是否可能。任何帮助/建议都将不胜感激