Identification sans rechargement de toute la page (ajax?)

bradeux · 17 Janvier 2008

Bonjour à tous,

Le sujet existe peut etre déjà mais je cherche depuis des heures en vain! :?

Je souhaite ajouter dans une page php, un bloc identification avec login et mot de passe.
Lorsqu'un membre essai de s'identifier, je souhaite que:
1) la réponse d'erreur (si pas reconnu par ex) se fasse en live (sans rechargement de toute la page).
2) si l'identification réussie, qu'uniquement ce bloc se recharge avec un autre contenu.

possible?

merci pour vos lumieres!

zedico · 17 Janvier 2008

oui c'est tout à fait possible.

c'est tout ce que tu veux savoir ?

bradeux · 17 Janvier 2008

zedico a dit:
oui c'est tout à fait possible.

c'est tout ce que tu veux savoir ?

bon bah je précise alors: comment faire?

Mitirapa · 17 Janvier 2008

si tu veux il existe des librairies faciles, par exemple mootools est facile a mettre en place pour faire un script dans ce genre

zedico · 17 Janvier 2008

tu es débutant en PHP et Javascript ?

je te conseillerais d'apprendre (si tu as déjà programmé ce sera rapide) et de le faire par toi même.

si tu as déjà fait du développement web, bah tu peux commencer par un appel asynchrone (ajax) vers une page de ton serveur avec du
session_start()
validation des $_POST ou $_GET
tu notes dans $_SESSION si l'identification est réussie ou pas, tu ajoutes quelques infos selon tes besoins
tu echo qqch pour updater ton petit bloc

bradeux · 17 Janvier 2008

Mitirapa a dit:
si tu veux il existe des librairies faciles, par exemple mootools est facile a mettre en place pour faire un script dans ce genre

merci, le ajax.form est pas mal.

Mais le soucis c'est que toutes les librairies charges le contenu dans un div mais laisse le formulaire visible mais après identification.

Comment faire pour que si l'identification réussi, le formulaire disparaissent et qu'un autre bloc prenne sa place?

bradeux · 17 Janvier 2008

zedico a dit:
tu es débutant en PHP et Javascript ?

je te conseillerais d'apprendre (si tu as déjà programmé ce sera rapide) et de le faire par toi même.

si tu as déjà fait du développement web, bah tu peux commencer par un appel asynchrone (ajax) vers une page de ton serveur avec du
session_start()
validation des $_POST ou $_GET
tu notes dans $_SESSION si l'identification est réussie ou pas, tu ajoutes quelques infos selon tes besoins
tu echo qqch pour updater ton petit bloc

je suis débutant en javascript.. et c la que ca bloque

Tu n'as pas des idées tuto détaillé pour ca?

zedico · 17 Janvier 2008

la partie javascript est simple.
Tu tapes "tutoriel javascript" et "tutoriel ajax" sur ton moteur de recherche préféré et c'est parti.

zedico · 17 Janvier 2008

bradeux a dit:
Comment faire pour que si l'identification réussi, le formulaire disparaissent et qu'un autre bloc prenne sa place?

voilà la méthode la plus rapide (mais pas forcément la plus belle) pour le faire :
tu ajoutes la fonction javascript :

Code:

function blabla() {
 document.getElementById('bloc').innerHTML = '<p>mon bloc après identification</p>';
 // cette ligne va tout simplement modifier le code HTML de ta page au niveau de la balise
 // ayant l' id "bloc"
}

et dans ta page HTML ton bloc est de la forme

Code:

<div id="bloc"><p>Mon bloc avant identification</p></div>

ensuite tu n'as qu'à appeler la fonction blabla() dans ta fonction qui gère l'envoi asynchrone. va chercher un tutoriel pour cette partie

zeb · 17 Janvier 2008

bradeux a dit:
Mais le soucis c'est que toutes les librairies charges le contenu dans un div mais laisse le formulaire visible mais après identification.

Comment faire pour que si l'identification réussi, le formulaire disparaissent et qu'un autre bloc prenne sa place?

suffit de mettre le formulaire dans le div en question.
si identification OK tu charge ton message et contenu d'authentification réussi.
si identification pas OK tu recharge le formulaire avec le message pour dire 'fais gaffe a ton mdp !'

je sais pas si je suis parano mais ces script me font un peut flipper vis a vis du brute force. car du coup ça répond plus vite que si tu renvoie la page donc il est plus facile d'envoyer beaucoup de requêtes pour tester.
Faux peut être limiter ne nombre d'essais avec une variable de session pour pouvoir ban l'IP un moment.

bradeux · 17 Janvier 2008

zeb a dit:
bradeux a dit:

Mais le soucis c'est que toutes les librairies charges le contenu dans un div mais laisse le formulaire visible mais après identification.

Comment faire pour que si l'identification réussi, le formulaire disparaissent et qu'un autre bloc prenne sa place?

Cliquez pour agrandir...

suffit de mettre le formulaire dans le div en question.
si identification OK tu charge ton message et contenu d'authentification réussi.
si identification pas OK tu recharge le formulaire avec le message pour dire 'fais gaffe a ton mdp !'

je sais pas si je suis parano mais ces script me font un peut flipper vis a vis du brute force. car du coup ça répond plus vite que si tu renvoie la page donc il est plus facile d'envoyer beaucoup de requêtes pour tester.
Faux peut être limiter ne nombre d'essais avec une variable de session pour pouvoir ban l'IP un moment.

Ok, c'est un peu près ce que j'avais imaginé grace à ce tuto :
http://www.phpcs.com/codes/XAMP-EXEMPLE ... 38833.aspx

par contre le résultat de l'identification s'ajoute en dessous du formulaire et je ne trouve pas comment remplacer le bloc si l'identification réussie!

Code:

[Partie PHP]
<?php
# CONFIGURATION
$CONFIG['host'] = "localhost";
$CONFIG['name'] = "Nom de la base de données";
$CONFIG['user'] = "Utilisateur";
$CONFIG['pass'] = "Mot de passe";
# IDENTIFICATION
$connection = null;
$result = null;
$user = null;
$password = null;
$username = null;
if ( isset( $_GET['username'] ) && $_GET['username'] != "" && isset( $_GET['password'] ) && $_GET['password'] != "" )
{
	$username = trim( addslashes( $_GET['username'] ) );
	$password = md5( trim( addslashes( $_GET['password'] ) ) );
	$connection = @mysql_connect( $CONFIG['host'], $CONFIG['user'], $CONFIG['pass'] );
	
	if( $connection != null && $connection )
	{
		if ( @mysql_select_db( $CONFIG['name'], $connection ) )
		{
			$result = mysql_query("SELECT * FROM users WHERE user_name = '".$username."'  ");
			if ( $result != null && $result && !empty( $result ) )
			{
				$user = mysql_fetch_assoc( $result );
				if ( $user != null && $user && !empty( $user ) )
				{
					if ( $password == $user['user_password'] )
					{
						print "good";
					} else {
						print "wrong";
					}
				} else {
					print "Aucun compte n'est associé a ce nom d'utilisateur !";
				}
			} else {
				print "Veuillez exécuter la routine d'installation avant de tester ce script !";
			}
		} else {
			print "Impossible de sélectionner la base de donnée !";
		}
	} else {
		print "Impossible de se connecter au serveur MySQL !";
	}
} else{
	print "Veuillez entrer un nom d'utilisateur et un mot de passe valide !";
}
?>



[Partie AJAX]

	// Mise à jour du message destiné à l'utilisateur sans recharger la page
	function update_status( text, img )
	{
		document.getElementById("message").innerHTML = '<img id="status" src="theme/' + img + '.gif"> ' + text;
	}
	
	// Manipulation de la requête d'identification de manière asynchrone
	function handle_login()
	{ 
		var loginRequest = null; 
		update_status( "Votre requête est en cours de traitement ...", "handle");
		
		// Définition du connecteur en fonction du navigateur :
		if (window.XMLHttpRequest)
		{
 			loginRequest = new XMLHttpRequest();
			if (loginRequest.overrideMimeType) 
			{
				loginRequest.overrideMimeType('text/xml');
			}
		} 
		else if (window.ActiveXObject) 
		{
			try {
				loginRequest = new ActiveXObject("Msxml2.XMLHTTP");
			} catch (e)	{
				try {
					loginRequest = new ActiveXObject("Microsoft.XMLHTTP");
				} catch (e) {
					update_status( "Impossible de communiquer avec le serveur", "handle");
				}
			}
        }
		
		// le secret d'AJAX réside en partie dans la réception et le traitement des résultats en background :
		loginRequest.onreadystatechange = function()
		{ 
			update_status( "Veuillez patienter pendant le processus d'authentification ...", "busy");
			if( loginRequest.readyState == 4 )
			{
				// Ici le code 200 signifie que la requête a renvoyé une valeur valide. On pourrait aussi gérer les erreurs 500, 404 ...
                                if( loginRequest.status == 200 )
				{
					if ( loginRequest.responseText == "good" )
					{
						update_status( "Identification réussie !" , loginRequest.responseText );
					} else if ( loginRequest.responseText == "wrong" )  {
						update_status( "Le mot de passe est erroné	 !" , loginRequest.responseText );
					} else {
						update_status( loginRequest.responseText , "handle" );
					}
				}
				else	
				{
					update_status( "Une erreur est survenue : " + loginRequest.status + " " + loginRequest.statusText, "handle");
				}	
			} 
		};
		
		username = document.getElementById('username').value;
		password = document.getElementById('password').value;
		
		// le secret d'AJAX réside également dans l'envoi de la requête en background ( sans recharger la page ) :
		loginRequest.open("GET", "login.php?username=" + username + "&password=" + password, true); 
		loginRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 
		loginRequest.send(null); 
	}





[Formulaire XHTML]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="fr">
	<head>
		<title>Exemple de système d'identification simple codé en XAMP</title>
		<script src="login.js" type="text/javascript"></script>
		<link type="text/css" href="theme/login.css" rel="stylesheet">
	</head>
	<body>
	<div id="Header">
		Exemple de système d'identification simple codé en XAMP ( xhtml, ajax, mysql et php )
	</div>
	<div id="LoginForm">
		<form onSubmit="return false">
			<p>
				<label for="username">Nom d'utilisateur : </label>
				<input type="text" name="username" id="username" size=20>	
			</p>
			<p>		
				<label for="password">Mot de passe : </label>
				<input type="password" name="password" id="password" size=20>
			</p>
			<input type="submit" name="submit" value="Login" onClick="handle_login();">
		</form>
	</div>
	<div id="message" for="status">
		<img id="status" src="theme/handle.gif">
		Entrez votre nom d'utilisateur ainsi que votre mot de passe pour ouvrir une nouvelle session ...
	</div>
	</body>
</html>

e-kiwi · 17 Janvier 2008

http://xhrconnection.sutekidane.net/exe ... e-la-page/

avec ca tu change le contenu d'un element identifié par son "id" par le résultat d'un script php, pile ce que tu veux faire, et tres simple à mettr en place