Question

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

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;
}

返回代码418杀死弹出窗口，我喜欢茶壶。在/app/public/login/中，我创建了index.html，其格式很简单：

<script>
function authenticate() {
  var login = document.getElementById('username').value;
  var pass = document.getElementById('password').value;
  var xhr = new XMLHttpRequest();
  xhr.withCredentials = true;
  xhr.open("GET", "/", true);
  xhr.setRequestHeader("Authorization", 'Basic ' + btoa(login + ':' + pass));
  xhr.onreadystatechange = function() {
    console.log('xhr ready state: ' + xhr.readyState);
    console.log('xhr status: ' + xhr.status);
    console.log('xhr response: ' + xhr.response);
  };
  xhr.send();
}
</script>
<form method="get" onsubmit="authenticate(); return false">
    <input type="text" id="username" autocomplete="username" required/>
    <input type="password" id="password" autocomplete="current-password" required/>
    <input type="submit" value="OK" />
</form>

我尝试了AJAX / XHR到原始目标URL，以查看它是否返回200（登录成功）或418（登录失败），但是我不知道如何在所有后续请求上设置Authorization标头，或者这是可能的。任何帮助/建议表示赞赏。

如何将Webform登录添加到Nginx基本身份验证网站？

0 个答案: