Xamp : exemple de script d'identification simple

Soyez le premier à donner votre avis sur cette source.

Vue 36 154 fois - Téléchargée 14 780 fois

Description

XAMP est un acronyme qui désigne le regroupement des technologies destinées à la gestion de contenu WEB suivantes :

- Xhtml pour le balisage du contenu
- Ajax pour la manipulation des requêtes asynchrones ( sans recharger la page )
- MySQL pour le stockage des données
- PhP pour le traitement des requêtes et la communication avec la base de données MySQL

À l'aide d'un script d'identification de base, j'espères vous faire découvrir le potentiel de cette technologie de développement de solutions WEB et vous inciter à aller de l'avant dans l'apprentissage de cette nouvelle méthode de travail :)

Précisions


Avec les requêtes de type XMLHttpRequest, JavaScript vous permet de repousser les limites de la présentation traditionnelle du contenu en traitant les requêtes en "background" sans avoir besoin de recharger la page. Cette technologie, couplée à un language de script comme PHP et à une base de donnée vous permet de développement des applications en ligne qui allient les avantages du WEB à l'ergonomie des applications logicielles. Une fois maîtrisée, la technologie XAMP vous permet de gérer "en temps réel" des paramêtres fournis par l'utilisateur et ainsi faciliter la prise en main de vos interfaces WEB.

Source / Exemple :


[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>

Conclusion :


Ce script a été conçu dans le but express de vous apprendre les bases de la technologie XAMP et ne ne devrait en aucun cas être utilisé dans son état actuel pour des fins d'identification. Le code n'est pas entièrement commenté car le but n'est pas de vous donner des informations qui ne seraient pas entièrement exacts et conformes aux normes. Vous devez déjà posséder une certaine connaissance de base de chacune des technologies employées pour bien comprendre comment ce script fonctionne.

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

Messages postés
10
Date d'inscription
mardi 16 mai 2006
Statut
Membre
Dernière intervention
26 avril 2008

Bah, laissez tomber, j'ai trouvé en utilisant un decrypter ;)

Sinon, si jamais vous connaissez un script/tuto pour faire un script similaire, n'hésitez pas à partager hein :)
Messages postés
10
Date d'inscription
mardi 16 mai 2006
Statut
Membre
Dernière intervention
26 avril 2008

Hmmph! C'est vieux!

Anyway... c'est moi qui est trop c** ou je ne vois pas c'est quoi le mot de pass?
Le nom d'utilisateur est "test" et le hash du mot de passe est "15161160009d76427791ebd5809ded7c" mais en clair, c'est quoi...?

Merci ;)
Messages postés
5
Date d'inscription
lundi 7 février 2005
Statut
Membre
Dernière intervention
30 juillet 2006

Oui t'as raison Malalam, le code du formulaire est pas optimisé la honte :d En même temps le but de l'exercise était de présenter le XAMP et rien n'est optimisé ni en état de servir tel quel dans un réel script.

Sinon une fois optimisé avec un hash du champs "password" avant l'envoi de la requête POST je ne vois pas pourquoi ça ne pourrait pas convenir pour une identification convenable. Même des applications comme phpBB ne hash pas pas le mot de passe directement dans le formulaire ...

Et sinon l'identification XAMP permet entre autres choses d'insérer des formulaires de "réponse rapide a un topic" sans avoir à passer par une page de login.
Messages postés
10840
Date d'inscription
lundi 24 février 2003
Statut
Modérateur
Dernière intervention
2 mars 2010
21
Hello,

Ajax est une méthode de programmation, permettant, via javascript et un objet xmlhttp (activeX pour IE, chaque navigateur a -ou non - son implémentation) d'interroger une page sur le serveur et d'en recevoir la réponses de manière transparente pour l'utilisateur.
En gros.

Pour ce qui est du code, ça me parait assez dangereux d'utiliser Ajax pour une identification. Et assez inutile, à dire vrai.
De plus, xhtml strict implique qu'on ferme les balises, hein... :
Messages postés
954
Date d'inscription
mardi 11 mai 2004
Statut
Membre
Dernière intervention
11 novembre 2008
2
Salut,

question un peu c** c' est quoi la différance entre Ajax et JavaScript ??

@+
Afficher les 10 commentaires

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.