Identification sans rechargement de toute la page (ajax?)

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par bradeux, 17 Janvier 2008.

  1. bradeux
    bradeux WRInaute occasionnel
    Inscrit:
    18 Mai 2005
    Messages:
    349
    J'aime reçus:
    0
    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!
     
  2. zedico
    zedico Nouveau WRInaute
    Inscrit:
    17 Janvier 2008
    Messages:
    24
    J'aime reçus:
    0
    oui c'est tout à fait possible.

    c'est tout ce que tu veux savoir ?
     
  3. bradeux
    bradeux WRInaute occasionnel
    Inscrit:
    18 Mai 2005
    Messages:
    349
    J'aime reçus:
    0
    :D bon bah je précise alors: comment faire?
     
  4. Mitirapa
    Mitirapa WRInaute passionné
    Inscrit:
    10 Juillet 2002
    Messages:
    1 160
    J'aime reçus:
    0
    si tu veux il existe des librairies faciles, par exemple mootools est facile a mettre en place pour faire un script dans ce genre
     
  5. zedico
    zedico Nouveau WRInaute
    Inscrit:
    17 Janvier 2008
    Messages:
    24
    J'aime reçus:
    0
    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
     
  6. bradeux
    bradeux WRInaute occasionnel
    Inscrit:
    18 Mai 2005
    Messages:
    349
    J'aime reçus:
    0
    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?
     
  7. bradeux
    bradeux WRInaute occasionnel
    Inscrit:
    18 Mai 2005
    Messages:
    349
    J'aime reçus:
    0
    je suis débutant en javascript.. et c la que ca bloque :oops:
    Tu n'as pas des idées tuto détaillé pour ca?
     
  8. zedico
    zedico Nouveau WRInaute
    Inscrit:
    17 Janvier 2008
    Messages:
    24
    J'aime reçus:
    0
    la partie javascript est simple.
    Tu tapes "tutoriel javascript" et "tutoriel ajax" sur ton moteur de recherche préféré et c'est parti.
     
  9. zedico
    zedico Nouveau WRInaute
    Inscrit:
    17 Janvier 2008
    Messages:
    24
    J'aime reçus:
    0
    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
     
  10. zeb
    zeb WRInaute accro
    Inscrit:
    5 Décembre 2004
    Messages:
    12 024
    J'aime reçus:
    1
    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.
     
  11. bradeux
    bradeux WRInaute occasionnel
    Inscrit:
    18 Mai 2005
    Messages:
    349
    J'aime reçus:
    0

    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! :oops:

    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>
    
     
  12. e-kiwi
    e-kiwi WRInaute accro
    Inscrit:
    23 Décembre 2003
    Messages:
    13 198
    J'aime reçus:
    1
Chargement...
Similar Threads - Identification rechargement (ajax Forum Date
Google tools et identification des visiteurs uniques Débuter en référencement 15 Août 2015
Autoriser une seule url à outrepasser une identification .htpassd URL Rewriting et .htaccess 25 Juillet 2014
Problème identification sources de conversion e-commerce et CA - Analytics Google Analytics 17 Octobre 2013
Identification des conversions issues du référencement naturel et des campagnes Adwords AdWords 12 Octobre 2012
Script d'identification Développement d'un site Web ou d'une appli mobile 16 Juin 2011
Identification d'un referer : Bluecoat Administration d'un site Web 10 Septembre 2010
Identification et Commentaires en php Développement d'un site Web ou d'une appli mobile 8 Mars 2009
Remplacer l'identification classique htpasswd URL Rewriting et .htaccess 19 Novembre 2007
Identification visiteur par adresse IP Référencement Google 12 Octobre 2007
Identification d'une signature de navigateur Administration d'un site Web 28 Septembre 2007
Identification de la langue du bot Référencement international (langues, pays) 30 Août 2007
PHP - identification d'url Développement d'un site Web ou d'une appli mobile 24 Août 2007
[Php] Formulaire d'identification et de renvoi prédéfini Développement d'un site Web ou d'une appli mobile 19 Août 2007
Cookies pour identification automatque Développement d'un site Web ou d'une appli mobile 19 Novembre 2006
Problème d'identification avec fichier .htpasswd et .htacces Développement d'un site Web ou d'une appli mobile 13 Septembre 2006
Forum et chat : gestion de l'identification Développement d'un site Web ou d'une appli mobile 5 Août 2006
Problème d'identification avec htaccess URL Rewriting et .htaccess 30 Mai 2006
Sites ventes privées, l'identification comment ça marche ? Développement d'un site Web ou d'une appli mobile 9 Mai 2006
Récupérer code source d'une page apres identification Développement d'un site Web ou d'une appli mobile 27 Avril 2006
Identification et iframe Développement d'un site Web ou d'une appli mobile 16 Mars 2006