HTTP基本身份验证中的自定义HTML登录表单

Custom HTML login form in HTTP Basic Auth

本文关键字：自定义 HTML 登录 表单 身份验证 HTTP      更新时间：2023-09-26

我有一个带有HTTP基本验证的API。如果未通过身份验证的用户发送HTTP请求，则服务器返回401状态码和WWW-Authenticate头。浏览器显示标准登录表单。是否可以显示我的HTML登录表单而不是标准浏览器的登录表单？

由于您使用的是AJAX调用，因此您可以从服务器截取401状态代码，并将用户重定向到自定义登录表单。例如，假设您正在使用jQuery并试图访问受保护的基本身份验证API端点https://httpbin.org/basic-auth/user/passwd:

$.ajax({
    url: 'https://httpbin.org/basic-auth/user/passwd',
    type: 'GET'
}).then(function(result) {
    alert('success');
}).fail(function(xhr) {
   if (xhr.status === 401) {
       // we are not authenticated => we must redirect the user to our custom login form
       window.location.href = '/my-custom-login-form';
   }
});

一旦您收集了用户名和密码，您将知道如何在后续请求API时构造正确的身份验证头：

$.ajax({
    url: 'https://httpbin.org/basic-auth/user/passwd',
    type: 'GET',
    headers: {
        Authorization: 'Basic dXNlcjpwYXNzd2Q='
    }
})...
相关文章：