Пользовательская HTML-форма входа в HTTP Basic Auth

У меня есть API с HTTP Basic Auth. Если пользователи, не прошедшие проверку подлинности, отправляют HTTP-запросы, сервер возвращает код состояния 401 и заголовок WWW-Authenticate. И браузер показывает стандартную форму входа. Можно ли показать мою HTML-форму входа вместо стандартной формы входа в браузере?


javascript basic-authentication http-authentication
person Ildar    schedule 05.01.2016    source источник
comment
Как этот API запрашивается у клиента? Используете ли вы какой-либо вызов AJAX или напрямую отправляете форму или перенаправляете на конечную точку?   -  person Darin Dimitrov    schedule 05.01.2016
comment
клиент отправляет запросы AJAX к API   -  person Ildar    schedule 05.01.2016
comment
Если вы используете ajax, возможно, вам следует обработать ответ сервера и показать страницу входа пользователю.   -  person amitguptageek    schedule 05.01.2016
comment
Если вы используете AJAX, то обычно браузер не отображает стандартный диалог входа в систему. Вместо этого он вернет 401, который вы можете зафиксировать в своем вызове AJAX и действовать соответствующим образом (перенаправить на свою пользовательскую форму входа).   -  person Darin Dimitrov    schedule 05.01.2016

Ответы (1)


arrow_upward
5
arrow_downward

Поскольку вы используете вызов 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='
    }
})...
person Darin Dimitrov    schedule 05.01.2016
comment
Спасибо! У меня был стандартный диалог входа, потому что я использовал опцию xhrFields: { withCredentials: true } при отправке AJAX - person Ildar; 05.01.2016