自定义基本Http身份验证

我将在此处描述的问题和解决方案是“基本Http身份验证”的基本对话框的解决方法。尝试统一身份验证流程时遇到了这样的问题。像我们大多数人一样，我从浏览互联网开始寻找解决方案，不幸的是，我发现没有一种解决方案适合我的情况。在这里，我想分享我的经验，希望有人会觉得有用。

问题

通常，一个问题是取消基本的http身份验证对话框并显示自定义UI而不是“基本浏览器”对话框，只是为了使跨浏览器具有通用的用户体验。例如，在Chrome，FF或Opera浏览器上输入错误的用户凭据时的用户体验将不同于InternetExplorer和Safari.IE或Safari在几次尝试在服务器上对用户进行身份验证后将取消错误请求（如果是错误的），并且Web应用程序可以显示某些页面，例如“无法访问您的帐户”。Chrome，FF和Opera将无限执行此操作（请求将处于待处理状态），直到用户放弃并按“取消”按钮。另一个问题是在进行基本身份验证的情况下如何注销。

我的实验是围绕Apache服务器的配置进行的，但我认为可以轻松地针对IIS或Nginx进行配置。因为那时一切都围绕基本Http身份验证。

该解决方案通过了IE（10，11），Chrome49，FF44，Opera36的测试。

解决方案

首先，必须要做的是配置Http服务器，在我的例子中是Apache。通常，不需要身份验证的所有静态内容（例如图像，脚本，html）都不需要身份验证。但是对于该解决方案，我们将需要一个经过身份验证的图像（例如）。

我在服务器上创建了一个目录，并在其中放置了小映像并配置了apache，以便需要对资源进行身份验证。

这是名称为“”的目录的配置示例auth_required

Alias/auth_required/path/auth_required/<Location /auth_required>
Options Indexes
Order allow,deny
Allow from all
Include "/your/path/here/an_auth_config.conf"</Location>1234567复制代码类型：[javascript]

我为自定义身份验证UI创建了一个免费的身份验证目录。该目录具有一个简单的HTML页面，该页面无法破坏整个门户网站的安全性，并显示简单的身份验证页面。

这是目录身份验证的Apache配置示例。

# Unprotected resources
<Directory /path/auth>
AuthType None
</Directory>

Alias/auth/path/auth
<Location /auth>
# No Auth
AuthType None
#Require all granted
DirectoryIndex auth_test.html
</Location>123456789101112复制代码类型：[javascript]

这就是我们在服务器端要做的所有事情。

主要技巧是在客户端实现的。

在下面，您将找到带有内联注释的代码示例。该解决方案适用于InternetExplorer，Chrome，FF和Opera，但不幸的是不适用于Safari。

我想如果服务器将在用户凭据错误的情况下提供403代码而不是401代码，那么Safari也可以正常工作。目前，我还没有找到适合Safari的正确方法。

此外，我还有一个开放的问题，即在用户成功通过身份验证时，客户端应在哪里保留用户名，如果下次用户自动将其重定向到主页而不提示身份验证页，客户端应该这样做。现在，我将用户名保留在cookie上，如果不为空，它将触发自动重定向到主页，而无需直接在url上提供用户名和密码。

function doLoad(){ //the method will be called on page load and in case
 //if user previously was authenticated should redirect to main page
 //here we have to get logged in user somehow, probably from cookie or local storage.

 //we always have to provide user name to XMLHttpRequest even if it is not correct,
 //because in case if user was not logged in before
 //and we do not provide any user name for XMLHttpRequest.open method
 //default authentication window will be prompted, but we want to suppress it

 var user = $.cookie('loggedas'); if (user && user.length > 0)
 {
  authenticate();
 }
}function doAuthenticate(){ //the method have to be called on user click on user credentials form
 var user = $('#useridUIID').val(); var pswd = $('#pswdUIID').val(); //it is main trick, default authenticated window will be
 //prompted until ANY user name (even not correct) will be passed to XMLHttpRequest
 //but it doesn't work for Safari
 user = (user && user.length > 0 ? user : '' + Date.now().getTime())

 authenticate(user, pswd);
}function authenticate(user, pswd){ var warning = $('div.warning'); if (!warning.hasClass('hidden'))
 {
  warning.addClass('hidden');
 } //path to resource which require authentication
 var img = location.protocol + '//' + location.host +
 (location.port && location.port.length > 0 ? ':' +
 location.port : '') + '/auth_required/favicon.ico'; var xhr = new XMLHttpRequest(); if (user)
 {
  xhr.open('GET', img, true, user, pswd);
 } else
 {
  xhr.open('GET', img, true);
 }

 xhr.onreadystatechange = function (e) {  if (this.status !== 0) //work around for IE
  {   if (this.status === 200)
   { //keep user name, in order to redirect automatically next time
 //from my perspective I dont see any security breach to keep user name at cookies,
 //if it is not so, here should be another way to automatically redirecting next time
 $.cookie('loggedas', user); //redirect to main page
 if (user)
 {  try
  {   document.location.href = location.protocol + '//' +
   user + ':' + pswd + '@' + location.host +
   (location.port && location.port.length > 0 ? ':' +
   location.port : '') + '/admin/';
  }  catch (e)
  {   document.location.href = location.protocol + '//' +
   location.host + (location.port && location.port.length > 0 ?
   ':' + location.port : '') + '/admin/';
  }
 } else
 {  document.location.href = location.protocol + '//' + location.host +
  (location.port && location.port.length > 0 ? ':' +
  location.port : '') + '/admin/';
 }
   }   else
   { //show error in case wrong credentials
 if (warning.hasClass('hidden'))
 {
  warning.removeClass('hidden');
 }
   }
  }
 };

 xhr.send();
}

$(document).ready(function (){
 doLoad();
});123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108复制代码类型：[javascript]

现在，您可以像这样对服务器进行身份验证：

代替默认值：

结论

当然，如果您不想在服务器端实现自定义身份验证，而只使用基本身份验证，那么我所说的一切都会起作用。

另外，我仍然不知道Safari合适的解决方法。而且我没有针对较旧的浏览器进行测试，该解决方案是否适用于它们？

赞 (0)

相关推荐