Ajax HTTP-Authentication

So ziemlich das lästigste ist die Verarbeitung von Server-Fehlermeldungen via Ajax. Eine Teil davon sind die 401er Fehler "401 Unauthorized" Meldungen. In diesem Artikel geht es darum effiziente Strategien zu Entwickeln bzw. zu verwenden um eben mit Ajax 401er Fehler abzufangen, nicht auftreten zu lassen oder eben Http-Authentication Logins mit Ajax zu gestalten.

Vorab:

Bitte lade dir die jybrid-examples auf einen Testserver herunter, der nicht für Dritte erreichbar ist. Rufe in deinem Browser die Beispiele auf. Speziell geht es um den Ordner "/Authentication". Hier ist einen Beispiel/Testsuite enthalten um praktische Hinweise und Bauweisen für die "Authentication via Ajax" anzuwenden. Die Beispiele beziehen sich konkret auf den Apache2 Server. Mit Nginx-Servers funktionieren diese Beispiele ebenso da Nginx das selbe Protokoll HTTP Authentication: Basic and Digest Access Authentication verwendet

Ajax Authentication Testsuite

Ein paar Hinweise vorab. In der .htaccess-File werden per default diese Zugangsdaten gesetzt:

  • Username ist "jybrid"
  • Passwort ist "jybrid"

Es ist extra ein Inputfeld "password change" eingebaut. Dies hat den Grund, dass sobald du dich einmal erfolgreich gegen HTTP Authentication authentifiziert hast, du dich nicht wie mit anderen Scripten ausloggen kannst. So setzt du einfach ein neues Passwort und musst nicht den Browser schließen oder den Browser-cache leeren. Die .htaccess und die .htpasswd wird hier jedesmal neu geschrieben und die alten Passwörter damit ungültig.

Die Eingangssituation:

  • Du hast eine ganz normale Webseite vor dir.
  • Diese Webseite wurde auf dem herkömmlichen Weg geladen. Also ohne Ajax.
  • Auf dieser Seite hast du einen Ajax-Request(onclick="jybrid.Exe('securedDirectory')") hinterlegt.
  • Der Ajax-request zielt auf eine Url die mit einer .Htaccess gesichert ist.

Ajax request against an .htaccess/.htpasswd protected Target(same domain)

Falls du dieses Beispiel bereits probiert hast, entferne bitte erst mit dem Klick [Remove if exist .htaccess + .htpasswd File] den ggf. vorhanden Passwortschutz. Als nächstes einen Klick auf [Ajax request against an .htaccess/.htpasswd protected Target(same domain)]. Du wirst feststellen, dass du ohne Passwortabfrage durch kommst, da auch kein Schutz gesetzt ist. Als nächstes legst du mit [Create .htaccess + .htpasswd File] den Verzeichnisschutz an. Automatisch werden folgende Zugangsdaten hinterlegt. Wieder einen Klick auf [Ajax request against an .htaccess/.htpasswd protected Target(same domain)].

Und nun bekommst du den sexy .htaccess-Schutz voll ins Gesicht gedrückt.

  • Zugangsdaten eingeben und richtig: Du bekommst als Ergebnis einen Text-hash zu sehen den ich als standard-response bereits in anderen Beispielen verwendet hatte.
  • oder nicht(abbrechen): Im Beispiel, konkret in der index.php habe ich eine Emitter auf die 400er und 500er Fehler gesetzt. "The Server responses the '+status+'er, so we can not finish successfully the Response via Jybrid"
  • oder falsch: Dann ploppt die beliebteste oder zweit-beliebteste Maske erneut auf.

Zusammenfassung

Das ist so das einfachste Beispiel wie man einen Ajax-Request gegen eine geschützte Url setzt. Sollten die Zugangsdaten noch nicht hinterlegt worden sein, werden diese zuerst eingefordert. Danach wird der Ajax-Request auf den Server, konkret gegen das PHP-script durchgewunken.

  • pro's
    • wenig Aufwand
  • con's
    • sieht arg unprofessionell aus

live-demo

@see example-ajax-http-authentication.php

Quellen/Verweise