blog.bartlweb - a technologist's external brain

HTML-Anmeldeformulare mit Apache Modul mod_auth_form

Apache stellt verschiedene Varianten für die Authentifizierung von Nutzern bereit. Die bekannteste ist wohl AuthType Basic die im Browser eine schnöde Eingabeaufforderung für Benutzername und Passwort erzeugt. Aber der Apache Webserver liefert mit mod_auth_form auch ein Modul mit, mit dem sich ein HTML-Formular für die Anmeldung nutzen und vor allem selbst adaptieren und gestalten lässt.

Module laden

Damit mod_auth_form funktioniert, muss das entsprechende Modul durch Auskommentieren in der httpd.conf geladen werden. Außerdem werden noch weitere Module zum Verarbeiten der Requests und zum Erzeugen und Speichern der Sessions benötigt.

LoadModule auth_form_module modules/mod_auth_form.so
LoadModule session_module modules/mod_session.so
LoadModule request_module modules/mod_request.so
LoadModule session_cookie_module modules/mod_session_cookie.so
LoadModule session_crypto_module modules/mod_session_crypto.so

vHosts konfigurieren

Die Konfiguration der vHosts muss entsprechend angepasst werden und unterscheidet sich ein wenig, je nachdem ob es sich um ein reales Verzeichnis oder eine Proxy-Konfiguration handelt.

Das Template für das HTML-Formular liegt in meinem Beispiel in einem eigenen Verzeichnis, dass mittels Alias alias.static.apache angesprochen werden kann. Auch eine manuelle Logout-Funktion lässt sich über ein virtuelles Verzeichnis logout und das Session-Handling realisieren.

Konfiguration für ein Verzeichnis

<Directory "/srv/www/admin">
  Options FollowSymlinks
  AllowOverride AuthConfig Indexes
  
  AuthType form
  AuthFormUsername bw_username
  AuthFormPassword bw_password
  ErrorDocument 401 /alias.static.apache/authform/login.htm
 
  AuthName "Authentication required"
 
  AuthFormProvider file
  AuthUserFile /srv/htpasswd/admin.htpasswd
        
  Session On
  SessionCryptoPassphrase gUxw1NQnqCbkj01Ubv2E
  SessionCookieName session path=/
  SessionMaxAge 0
 
  Require valid-user
</Directory>

<Location "/logout">
  SetHandler form-logout-handler
  AuthFormLogoutLocation "/"
  Session on
  SessionCryptoPassphrase gUxw1NQnqCbkj01Ubv2E
  SessionCookieName session path=/
  SessionMaxAge 1
</Location>

Konfiguration für einen Proxy

ProxyPreserveHost On
ProxyPass /alias.static.apache/ !
ProxyPass /logout !
ProxyPass / http://backendserver:8420/
ProxyPassReverse / http://backendserver:8420/
 
<Location />        
  AuthType form
  AuthFormUsername bw_username
  AuthFormPassword bw_password
  ErrorDocument 401 /alias.static.apache/authform/login.htm
        
  AuthName "Authentication required"
 
  AuthFormProvider file
  AuthUserFile /serv/htpasswd/backend.htpasswd
 
  Session On
  SessionCryptoPassphrase gUxw1NQnqCbkj01Ubv2E
  SessionCookieName session path=/
  SessionMaxAge 86400
 
  <RequireAny>
    Require valid-user
  </RequireAny>
</Location>
 
<Location "/alias.static.apache">
  Require all granted
</Location>
 
<Location "/logout">
  SetHandler form-logout-handler        
  AuthFormLogoutLocation "/"
 
  Session on
  SessionCryptoPassphrase gUxw1NQnqCbkj01Ubv2E
  SessionCookieName session path=/
  SessionMaxAge 1
</Location>

Manchmal kann die durch den Proxy bereitgestellte Anwendung, nach der Umstellung auf mod_auth_form, nicht geladen werden (Browser lädt endlos). Dann sorgt die zusätzliche Direktive AuthFormLoginSuccessLocation / für Abhilfe.

HTML-Formular

Das HTML-Formular kann frei gestaltet werden, insofern die Feldbezeichnungen aus der Konfiguration für Benutzername und Passwort beachtet bzw. entsprechend adaptiert werden.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>Authentication required</title>
   <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
   <meta name="robots" content="noindex, nofollow" />
   <link rel="shortcut icon" href="/alias.static.apache/authform/favicon.ico" type="image/x-icon" />
   <link rel="stylesheet" type="text/css" href="/alias.static.apache/authform/style.css" />
   <script language="javascript" src="/alias.static.apache/authform/jquery/jquery-3.1.0.min.js" type="text/javascript"></script>
   <script language="javascript" src="/alias.static.apache/authform/script.js" type="text/javascript"></script>
</head>
<body>
   <h1>Authentication required to access <span class="bw_domain">the requested website</span></h1>
   <form method="post" action="">
     <div id="bw_error">
       <p>Login failed!<br/>Please check the provided username and password and try again.</p>
     </div>
     <fieldset>
       <label>Username</label>
       <input type="text" name="bw_username" value="" id="bw_username" />
       <label>Password</label>
       <input type="password" name="bw_password" value="" id="bw_password" />
       <input type="submit" value="Login" name="bw_login" />
     </fieldset>
   </form>
</body>
</html>

Das eingebundene JavaScript kümmert sich, um das Vorausfüllen des Benutzernamens und die Anzeige von Fehlermeldungen, denn das beherscht mod_auth_form leider noch nicht.

jQuery(document).ready(function(){
   // write domain name in header
   jQuery("span.bw_domain").text(window.location.hostname);
 
   // invalidate locale storage items after 5 seconds
   d = new Date();
   limit = d.getTime() - 1000 * 5;
   if(localStorage.getItem("bw_login") && localStorage.getItem("bw_login") < limit) {
     localStorage.removeItem("bw_username");
     localStorage.removeItem("bw_login");
   }
 
   // error handling and preserved values
   if(localStorage.getItem("bw_login")){
     jQuery("#bw_error").show();
   }
 
   if(localStorage.getItem("bw_username") && localStorage.getItem("bw_username").length > 0){
     jQuery("#bw_username").val(localStorage.getItem("bw_username"));
     jQuery("#bw_password").focus();
   } else {
     jQuery("#bw_username").focus();
   }
 
   // store data on login
   jQuery("form").submit(function(){
     localStorage.setItem("bw_username", jQuery("#bw_username").val());

     d = new Date();
     localStorage.setItem("bw_login", d.getTime());
   });

   // remove data after usage
   localStorage.removeItem("bw_username");
   localStorage.removeItem("bw_login");
});

Dieser Artikel hat dir deinen Tag gerettet?
... und mühevolles Probieren, Recherchieren und damit Stunden an Zeit gespart? ... oder einfach nur dein Problem gelöst?

Dann würde ich mich freuen, wenn Du meine Zeit für die Erstellung dieses Blogartikels mit einer kleinen Spende honorierst:

Kommentare

Noch kein Kommentar vorhanden.
Sei der Erste - ich freue mich über deine Anmerkungen, Kritik und Fragen.

Kommentar schreiben

Deine E-Mailadresse wird nur für Benachrichtigungen und Rückfragen verwendet und wird nicht veröffentlicht.

Benachrichtigungen können jederzeit wieder abbestellt werden.

Bitte tippe die Zahlenkombination "8782" ein, nur dann kann ich deinen Kommentar entgegennehmen.

Bitte fülle dieses Feld nicht aus, nur dann kann ich deinen Kommentar entgegennehmen.