Ajax Loginbox

Armin Bartsch, Dienstag, 10. März 2009

Login ohne Reload einer Seite

Der Gedanke der Ajax-Loginbox ist, einen Login ohne einen reload einer Seite zu ermöglichen und Usern ihren Login-Status unter der Nutzung der Extension Static File Cache (nc_staticfilecache) mitzuteilen.

Der Login-Status wird nach dem vollständigen Laden der Seite ermittelt, indem eine Abfrage gesendet wird, die von TYPO3 bearbeitet und ein Ergebnis zurückgesendet wird.

Mit wenigen Schritten ist eine Ajax-Loginbox zu realisieren. Bitte lesen Sie erst die ganze Beschreibung durch, bevor Sie Änderungen an Ihrer Arbeitsumgebung vornehmen!

Ich gehe davon aus, dass die Extensionen New front end login box (newloginbox) MD5 FE Password (kb_md5fepw) installiert sind und die Funktionalität gegeben ist. Zusätzlich kann die Extension Static File Cache (nc_staticfilecache) installiert sein.

Template der Hauptvorlage

In den Quelltext des Template/Quelltext muss ein Bereich angelegt werden, in den die Rückgabe des Ajax eingefügt werden soll.

<div id="log_res"><p> Der Login-Status kann nur bei aktiviertem JavaScript ermittelt werden. <p></div>
<div id="log_res"><p> Der Login-Status kann nur bei aktiviertem JavaScript ermittelt werden. <p></div>

Inhalte in dem Bereich id="log_res" werden nach den Funktionsaufrufen gelöscht! Ich empfehle einen Hinweis in diesem Bereich, dass das JavaScript aktiviert sein muss, um den Login-Status abfragen zu können!

JavaScript – Ajax - mootools

Zum Einsatz kommt hier das Framework mootools. Eingebunden wird die Funktion superchallenge_pass(), die für die Ext. kb_md5fepw benötigt wird.

mootools

mootools ist ein freies JavaScript-Framework, das eine Vielzahl von Klassen beinhaltet, die je nach Bedarf zusammengestellt werden können. Weite Information finden Sie unter http://mootools.net/ .

Unter http://mootools.net/download stehen die jeweils aktuellen Klassen als Download zur Verfügung. Für die Ajax-Loginbox müssen Window: Window.DomReady und Remote: Ajax aktiviert werden. Die restlichen benötigten Klassen werden dann automatisch eingebunden.

Das Einbinden der mootools.js unter TYPO3 erfolgt per TypoScript.

seite.includeJS.file1 = fileadmin/js/mootools.js
seite.includeJS.file1 = fileadmin/js/mootools.js

Zusatz JavaScript

Das folgende JavaScript muss noch in den Quelltext eingebunden werden, damit eine Anforderung gesendet und das Ergebnis in den Quelltext geschrieben werden kann.

// Variablen Anpassungen var txt_benuterstatus = '<p>Benutzerstatus wird abgerufen</p>'; var div_in_form = 'log_res'; var id_form = 'myForm'; var login_url = 'http://typo3.intervation.de/index.php?id=353&type=109'; var class_login = 'ajax-loading'; /* +++++++++++++++++++++++++++++++++ Ab hier keine Anpassungen mehr nötig +++++++++++++++++++++++++++++++++ */ // Funktion Notwendig wegen kb_md5fepw // Function wurde einfach kopiert function superchallenge_pass(form) { var pass = form.pass.value; if (pass) { form.pass.value = MD5(form.user.value + ":" + MD5(pass) + ":" + form.challenge.value); } } window.addEvent('domready', function(){ aktive(); }); window.onload = function() { ak(); } // Nachladen der Loginbox wenn ganze Seite geladen wurde function ak() { $(div_in_form).setHTML(txt_benuterstatus); var log = $(div_in_form).addClass(class_login); new Ajax(login_url, { method: "get", update: $(div_in_form), onComplete: function() { log.removeClass(class_login); aktive(); } }).request(); } function aktive() { if($(id_form)) { $(id_form).addEvent('submit', function(e) { new Event(e).stop(); var log = $(div_in_form).addClass(class_login); $(id_form).setProperties({'action': login_url }); // Kann auskommentriert werden, wenn kein // onSubmit="superchallenge_pass(this); return true;" im Quelltext // wird normalerweise eingebunden durch onSubmit="###ON_SUBMIT###" // in der newloginbox-Vorlage /* if(document.getElementsByName("logintype")[0].value == 'login') { superchallenge_pass($(id_form)); } */ this.send({ update: log, onComplete: function() { log.removeClass(class_login); aktive(); } }); }); } };
  1. // Variablen Anpassungen
  2.  
  3. var txt_benuterstatus = '<p>Benutzerstatus wird abgerufen</p>';
  4. var div_in_form = 'log_res';
  5. var id_form = 'myForm';
  6. var login_url = 'http://typo3.intervation.de/index.php?id=353&type=109';
  7. var class_login = 'ajax-loading';
  8.  
  9. /*
  10. +++++++++++++++++++++++++++++++++
  11.  
  12. Ab hier keine Anpassungen mehr nötig
  13.  
  14. +++++++++++++++++++++++++++++++++
  15. */
  16.  
  17. // Funktion Notwendig wegen kb_md5fepw
  18. // Function wurde einfach kopiert
  19.  
  20. function superchallenge_pass(form) {
  21.  
  22.     var pass = form.pass.value;
  23.  
  24.     if (pass) {
  25.  
  26.      form.pass.value = MD5(form.user.value + ":" + MD5(pass) + ":" + form.challenge.value);
  27.  
  28.   }
  29.  
  30. }
  31.  
  32.  
  33. window.addEvent('domready', function(){
  34.  
  35.   aktive();
  36.  
  37. });
  38.  
  39. window.onload = function() {
  40.  
  41.   ak();
  42.  
  43. }
  44.  
  45. // Nachladen der Loginbox wenn ganze Seite geladen wurde
  46. function ak() {
  47.  
  48.   $(div_in_form).setHTML(txt_benuterstatus);
  49.   var log = $(div_in_form).addClass(class_login);
  50.   new Ajax(login_url, {
  51.               method: "get",
  52.               update: $(div_in_form),
  53.                 onComplete: function() {
  54.              
  55.                   log.removeClass(class_login);
  56.                   aktive();
  57.              
  58.                 }
  59.                
  60.               }).request();
  61.  
  62. }
  63.  
  64. function aktive() {
  65.  
  66.   if($(id_form)) {
  67.  
  68.     $(id_form).addEvent('submit', function(e) {
  69.    
  70.       new Event(e).stop();
  71.       var log = $(div_in_form).addClass(class_login);
  72.       $(id_form).setProperties({'action': login_url });
  73.      
  74.       // Kann auskommentriert werden, wenn kein
  75.             // onSubmit="superchallenge_pass(this); return true;" im Quelltext
  76.             // wird normalerweise eingebunden durch onSubmit="###ON_SUBMIT###"
  77.             // in der newloginbox-Vorlage
  78.             /*
  79.       if(document.getElementsByName("logintype")[0].value == 'login') {
  80.      
  81.         superchallenge_pass($(id_form));
  82.      
  83.       }
  84.             */
  85.       this.send({
  86.      
  87.         update: log,
  88.         onComplete: function() {
  89.        
  90.           log.removeClass(class_login);
  91.           aktive();
  92.        
  93.         }
  94.      
  95.       });
  96.    
  97.     });
  98.    
  99.   }
  100. };

md5.js

Die Datei md5.js muss per TypoScript eingebunden werden.

seite.headerData.523 = TEXT seite.headerData.523.value = <script type="text/javascript" src="typo3/md5.js"></script>
  1. seite.headerData.523 = TEXT
  2. seite.headerData.523.value = <script type="text/javascript" src="typo3/md5.js"></script>
  3.  

Möchte man die Datei md5.js mit includeJS einbinden, ist darauf zu achten, dass md5.js erst in ein anderes Verzeichnis kopiert werden muss, da includeJS keine Dateien aus dem Verzeichnis typo3 laden kann!

PHP-Anpassungen

Leider ist es nötig, Änderungen direkt im Scoure der Extension kb_md5fepw vorzunehmen. Da es sich um geringfügige Änderungen handelt, habe ich auf das Erstellen einer weiteren Extension verzichtet.

In der Datei EXT:kb_md5fepw/pi1/ class.tx_kbmd5fepw_newloginbox.php sind folgende Zeilen in Kommentare umzuwandeln:

//$GLOBALS['TSFE']->JSCode .= $js; //$GLOBALS['TSFE']->additionalHeaderData['tx_kbmd5fepw_newloginbox'] = '<script type="text/javascript" src="typo3/md5.js"></script>';
  1. //$GLOBALS['TSFE']->JSCode .= $js;
  2. //$GLOBALS['TSFE']->additionalHeaderData['tx_kbmd5fepw_newloginbox'] = '<script type="text/javascript" src="typo3/md5.js"></script>';
  3.  

Fehlermeldungen in der Ausgabe der Ajax-Loginbox werden somit unterbunden.

TypoScript Ajax-Loginbox

Damit die Rückgabe von TYPO3 nur den notwendigen Quelltext enthält und unnötige Rendering-Prozesse nicht geladen bzw. ausgeführt werden, ist es ratsam, eine neue Seite anzulegen. Die Seite sollte unterhalb eines Storange-Folder liegen oder zumindest so eingerichtet sein, dass ein „normaler“ Zugriff nicht möglich ist (Nicht im Menue etc.)

Die Seite erhält ein Template, in dem die Vererbung von Setup und Constant unterbunden wird.

Für das setup des Templates sind nur wenige Angaben erforderlich:

login_ajax = PAGE login_ajax { typeNum = 109 config { disableAllHeaderCode = 1 no_cache = 1 additionalHeaders = Content-Type:text/html;charset=utf-8|Expires: Mon, 26 Jul 1997 05:00:00 GMT|Last-Modified: 1999 GMT|Cache-Control: no-cache|Pragma: no-cache|Cache-Control: post-check=0, pre-check=0, FALSE } 10 < plugin.tx_newloginbox_pi1 10 { storagePid = 187 detailsPage = showForgotPassword = email_from = email_fromName = replyTo = templateFile = EXT:newloginbox/res/newloginbox_00.html // Allowed Referrer-Redirect-Domains: domains = } }
  1. login_ajax = PAGE
  2. login_ajax {
  3.   typeNum = 109
  4.   config {
  5.     disableAllHeaderCode = 1
  6.     no_cache = 1
  7.     additionalHeaders = Content-Type:text/html;charset=utf-8|Expires: Mon, 26 Jul 1997 05:00:00 GMT|Last-Modified: 1999 GMT|Cache-Control: no-cache|Pragma: no-cache|Cache-Control: post-check=0, pre-check=0, FALSE
  8.    }
  9.   10 < plugin.tx_newloginbox_pi1
  10.   10 {
  11.   storagePid = 187
  12.   detailsPage =
  13.   showForgotPassword =
  14.   email_from =
  15.   email_fromName =
  16.   replyTo =
  17.   templateFile = EXT:newloginbox/res/newloginbox_00.html
  18.   // Allowed Referrer-Redirect-Domains:
  19.   domains =
  20.   }
  21.  
  22. }

Es ist auch möglich, in einem bereits vorhanden Template einen neuen typeNum zu erstellen, dies ist aber nicht zu empfehlen!

Anpassungen "Template Newloginbox"

In dem TemplateFile der Newloginbox sind nur wenige Änderungen nötig.

id

Jedem Formular im TemplateFile der Newloginbox muss die id id="myForm" zugeordnet werden.

Rückgabe Quelltext

Die Workparts im TemplateFile der Newloginbox müssen so angepasst werden, dass nur der Quelltext zurückgegeben wird der für die Loginbox erforderlich ist!

CSS

Wärend das Ladevorgangs wird dem id="log_res" eine weitere Klasse zugeordnet die mit CSS angesprochen werden kann. Somit kann während der Ladezeit z.B. eine Einblendung eine "Wartegrafik" erreicht werden.

#log_res.ajax-loading { background: url(../image/spinner.gif) no-repeat left top; }
  1. #log_res.ajax-loading {
  2.   background: url(../image/spinner.gif) no-repeat left top;
  3. }

Sonstiger Hinweis

Die hier vorgestellte Ajax-Loginbox funktioniert nur mit JavaScript. Der Grund liegt unter anderem darin, dass die Extension kb_md5fepw zur Verschlüsselung der Zugangsdaten JavaScript benötigt.

Ohne den Einsatz der Extension kb_md5fepw könnte der Login auch so gestaltete werden, dass bei deaktiviertem JavaScript ein Neuladen der Seite erfolgen würde. Nur bei aktiviertem JavaScript greift die Ajax-Loginbox.

Häufige Frage

Test
test2
Funktioniert die Ajax-Loginbox nur mit JavaScript?
Die hier vorgestellte Ajax-Loginbox funktioniert nur mit JavaScript. Der Grund liegt unter anderem darin, dass die Extension kb_md5fepw zur Verschlüsselung der Zugangsdaten JavaScript benötigt. Ohne den Einsatz der Extension kb_md5fepw könnte der Login auch so gestaltete werden, dass bei deaktiviertem JavaScript ein Neuladen der Seite erfolgen würde. Nur bei aktiviertem JavaScript greift die Ajax-Loginbox.

Snippets

Sponsored by:

ideenwerft webhosting
ideenwerft caretaker