login mittles sajax?

[vain]

Hi PHP'ler,

beim stöbern im Web bin ich auf einen Login der Ajax verwendet gestoßen.
Die Motivation zur Arbeit an diesem Script entstand durch die Visits der Seiten:
http://mazaar.berlios.de/pages/login-form/
http://www.jamesdam.com/ajax_login/login.html

Um zu verstehen, wie das ganze funktioniert, hab ich die Ansätze der anderen aufgegriffen und angefangen eine Lösung mittels der Library Sajax nachzubasteln. Diese ist unter http://www.modernmethod.com/sajax/ zu finden. Desweiteren greife ich auf eine standard Db-Class zurück. Die md5 Generierung erfolgt mittels dem bekannten md5.javascript.
Funktionsumfang:
Email und Password werden eingegeben und sofort geprüft.
Falls eine richtige Eingabe erfolgte, werden die Eingabefelder deaktiviert.

Dann müsste noch der Login-Cookie gesetzt werden, aber diesbezüglich habe ich Fragen - deswegen auch der Post ins Brainstorming.
Die Seiten werden bei Ajax gerade nicht neugeladen, sodaß Cookies nicht gesetzt werden können. Mir kam die Idee, den Login-Cookie mittels eines verdeckt geladenen iframes zu setzen und diesen danach aus dem DOM zu entfernen.
Ist das ein brauchbarer Ansatz? Welche Varianten fallen euch ein?

Immo verwende ich keine Sessions - welche Änderungen ergeben sich wenn man Sessions verwendet? Evtl. könnte jemand mit Ahnung im Bereich Login mittels Sessions noch ein paar zündende Ideen haben.

Da das Script eine rudimentäre Entwurfsversion darstellt, sind
Feature-Vorschläge, Kritik und Bugfixes willkommen.
Postet einfach alles was euch einfällt... Es wird weitergearbeitet.

mfg, vain

[vain]

sajax_login.php source

login_sajax.php

<?php
require 'class.db.php'; // include libraries
require 'Sajax.php'; 

// LOGIN FUNCTIONS

// SEED: 
// a. let mysql insert TIMESTAMP
// b. give this timestamp and it's id back
function getseed() {
global $Db;

$Db->execute('INSERT INTO login_hashing SET seed = NOW()');
$result = $Db->getALL('SELECT id, UNIX_TIMESTAMP(seed) AS time 
                                FROM login_hashing ORDER BY id DESC LIMIT 1');
$ret = $result[0]['id'].":".$result[0]['time']." ";
return trim($ret);
}

// CHECK: 
// a. check if user-row exist for input email, else die
// b. get timestamp where seed_id
// c. combine timestamp with md5-pw-string and md5 it again
// d. compare with hash | case false = return invalid email/pw 
// case true = delete seed .... return valid username for email 
function checklogin($rememberme, $email, $seed_id, $hash) { 
global $Db;
                //a. 
                $user = $Db->getRow("SELECT * FROM users WHERE email = ?", $email);
                if (!$user)     { die('false|Invalid email and password combination.'); }
                
                // b.
                $seed_row = $Db->getRow("SELECT id, UNIX_TIMESTAMP(seed) AS time 
                                         FROM login_hashing WHERE id= ?", $seed_id);
                    
                    // c.
                    $combined_md5 = $user['password'] . $seed_row['time'];
                    if ( md5($combined_md5) == $hash) {
                    // sorry, i'm too dumb or blind or something
                    // to get this to work in just one line
                    //if (md5($user_row['password'] . $seed_row['time']) == $hash) {
                            
                      $Db->execute("DELETE FROM login_hashing WHERE id= ?", $seed_id);
                        
                        //         
                        //renew this -> add cookie to session 
                        //
                      //$expire = 0;

                    //if ($rememberme == TRUE) { $expire = time() + 3600*24*365; }
                    //$user_id = $user['user_id'];
                    //setcookie("user_id", $user_id, $expire, WWW_ROOT.'/');
                    //setcookie("password", $user['password'], $expire, WWW_ROOT.'/');
       //header('Location: '.WWW_ROOT.'/index.php');  //exit;
                    
                    $checkedlogin = 'true|' . $user['nick'];
                    return $checkedlogin;
                      }     
                else { //not logged in.. incorrect password   
                        $checkedlogin = "false|Invalid email and password combination.";
                        return $checkedlogin;
                        }
}

$sajax_request_type = "GET";
sajax_init();
$sajax_debug_mode = 0;
sajax_export("getseed","checklogin");
sajax_handle_client_request();

?>
                 
<html>
<head>
<script src="hexmd5.js" type="text/javascript">
// javascript md5 encoder originated from <[url]http://pajhome.org.uk/crypt/md5/[/url]>
// Copyright (c) 1998 - 2002, Paul Johnston & Contributors
</script>
<script>
<?php
sajax_show_javascript();
?>
//javscript functions
var hasSeed = false;
var loggedIn = false;
var seed_id = 0;
var seed = 0;
var showingLoggedIn = false;
var messageElement = false;
var messageP = false;
var message = '';

// handleGetSeed: called when the seed is returned from the server
function handle_getseed(ret)
{     // split by the divider :
      var results = ret.split(":");
      document.getElementById("status").innerHTML = "id:timestamp ="+ret; 
             
      // id is 1th - seed is 2nd element of string
        seed_id = results[0];
        seed = results[1];
        
        // now we have the seed
        hasSeed = true;
}

// getSeed method:  gets a seed from the server
function getSeed() 
{        // only get a seed if we're not logged in and we don't already have one
        if (!loggedIn && !hasSeed) {
           if (messageElement != false)
                    {    document.getElementById('message').removeChild(messageElement);
                        }
            x_getseed(handle_getseed); 
        }
}
// print_validating: called when the result of hash-compare comes from the server
function print_validating(checkedlogin) 
{     // split by the divider |
      var results = checkedlogin.split("|");
      document.getElementById("status").innerHTML = "results of hashcompare :"+results;
      
      if (messageElement != false)
                    {    document.getElementById('message').removeChild(messageElement);
                            }
      
      if (results[0] == 'true')
        { 
           loggedIn = true;
            hasSeed = false;
           showingLoggedIn = true;
                                    
                    //show logged in as user with logoutlink
                    loginPanel = document.getElementById('login');
                    p = document.createElement('p');
                    pre = document.createTextNode('Logged in as ');
                    strong = document.createElement('strong');
                    strong_text = document.createTextNode(results[1]);
                    strong.appendChild(strong_text);
                    mid = document.createTextNode(' [');
                    a = document.createElement('a');
                    a.href='javascript:logout();';
                    a_text = document.createTextNode('logout');
                    a.appendChild(a_text);
                    post = document.createTextNode(']');
                
                    p.appendChild(pre);
                    p.appendChild(strong);
                    p.appendChild(mid);
                    p.appendChild(a);
                    p.appendChild(post);
                    
                    messageP = document.getElementById('message');
                    loginPanel.removeChild(messageP);
                    loginPanel.appendChild(p);
                    
                    messageElement = p;
                    
                    //disable inputfields
                    document.getElementById('email').disabled = 'disabled';
                   document.getElementById('password').disabled = 'disabled';
                    
                } 
        else 
                { showingLoggedIn = false;
                        
                    messageElement = document.createElement('strong');
                    messageElement.appendChild(document.createTextNode(' ' +  results[1]));
                    messageElement.style.color = '#ff0000';
                    document.getElementById('message').appendChild(messageElement);
                }    
}

// validateLogin method: validates a login request
function validateLogin()
{
    // ignore request if we are already logged in
    if (loggedIn) return;

    // get form form elements 'email' and 'password'
        email = document.getElementById('email').value;
    password = document.getElementById('password').value;
    // additional rememberme 
    rememberme = document.getElementById('rememberme').checked;

    // ignore if either is empty
    if (email != '' && password  != '') {
        // compute the hash of the hash of the password and the seed
        hash = hex_md5((hex_md5(password)) + seed);
        //document.getElementById('status').innerHTML = "<span>Hash was calculated ... </span>";
        // check 
        x_checklogin(rememberme, email, seed_id, hash, print_validating);
    }
}

// logout method: prepares for a new login
function logout()
{
    loggedIn = false; 
    hasSeed = false;
   showingLoggedIn = false;
    
    email = document.getElementById('email');
    password = document.getElementById('password');
    loginPanel = document.getElementById('login');
    email.value = '';
    password.value = '';
    rememberme.value = '1';
    email.disabled = null;
    password.disabled = null;
    
   loginPanel.removeChild(messageElement);
    loginPanel.appendChild(messageP);
    
    messageElement = false;
    showingLoggedIn = false;
    
    email.focus();
}

// page load calls setupLogin
function setupLogin()
{
    email = document.getElementById('email');
    password = document.getElementById('password');
    addEvent(email, 'focus', getSeed);
    addEvent(email, 'blur', validateLogin);
    addEvent(password, 'focus', getSeed);
    addEvent(password, 'blur', validateLogin);
}


// add events (cross-browser)
function addEvent(objObject, strEventName, fnHandler) { 
    // DOM-compliant way to add an event listener 
     if (objObject.addEventListener) {
        objObject.addEventListener(strEventName, fnHandler, false); 
    }
    // IE/windows way to add an event listener 
    else if (objObject.attachEvent) {
        objObject.attachEvent('on' + strEventName, fnHandler); 
    }
}

</script>

</head>
<body onload='setupLogin();'>

<h1>Login</h1>


<table><tr><td>
 <form action="post" onsubmit="return false">
    <div id="login" class="login">
      <label for="email">EMail: </label>
      <input type="text" name="email" id="email" size="20">
      <label for="password">Password: </label>
      <input type="password" name="password" id="password" size="20">
      <input type="button" name="Login" value="Login" onclick='validateLogin();'>
      <p>
      <input type="checkbox" name="rememberme" id="rememberme" value="1" CHECKED>remember me?</p>
      <p id="message">Enter your email and password to log in.</p>
   </div>
  </form></td></tr>        
    <tr><td colspan="2">
                     <p id="status">--- shows debuginfo ---</p>
                <a href="register.php">Not yet registered ?</a> <br>
                <a href="forgot-password.php">Forgot password ?</a> <br>
                <a href="activation-email.php">Did not get an activation email ?</a> <br></td></tr></table></body></html>

[Hopka]

Warum setzt du die Cookies nicht mit JavaScript?

[wahsaga]

Re: login mittles sajax?

Original geschrieben von vain
Die Seiten werden bei Ajax gerade nicht neugeladen, sodaß Cookies nicht gesetzt werden können.

du befindest dich im HTTP-umfeld - also solltest du auffhören in "seiten" zu denken.

du fordert per javascript per HTTP eine ressource vom server an - also kann dieser im response header selbstverständlich auch versuchen, einen cookie zu setzen.