Discussion :

[SYNATIKS]

Bonjour, je suis actuellement entrain de réaliser un site WEB pour améliorer mon niveau en développement WEB (je suis débutant).

Informations sur mon offres et les langages utilisez :
Offre CPanel.
HTML, CSS, JS, PHP.
Base de données MariaDB avec accès phpMyAdmin

J'ai créer une page de connexion, à l'aide d'un script JS je peux vérifier que les cases de mon form ne sont pas vides, que l'email entrez est valide, que les mots de passes correspondent, cependant je voudrais vérifier si le nom d'utilisateur/ l'email ne sont pas déjà enregistrer dans ma base de données, pour cela il me faut un accès BDD

Le problème étant que JavaScript est un langage Client-side, donc niveau sécurité c'est pas recommandés.

Avec mon offres j'ai essayer d'installer une application NodeJS pour utiliser des variables d'environnement mais j'ai échoué, je n'ai pas compris le fonctionnement de celle-ci.

Auriez-vous des indications pour que je puisses vérifier si un utilisateur/email est déjà utilisé de façon sécurisé en JS?

En dernier recours, j'ai penser à créer un 2nd utilisateurs à ma BDD qui pourra accéder à la table mais n'a accès qu'à la fonction SELECT *.

( Si vous avez besoin de plus d'informations n'hésitez pas à demander )

Cordialement, SYNATIKS

[mathieu]

puisque vous avez PHP sur votre hébergement, vous pouvez essayer de l'utiliser.
regardez les différents tutoriels là :
https://php.developpez.com/cours/?pa...#securite-init

[SYNATIKS]

J'ai déjà réaliser une page login en PHP, je voulais essayer d'ajouter des effets, avoir un rendu plus dynamique à ma page de connexion

C'est pour cela que j'utilise du JavaScript, le problème c'est que lors de la vérification des input elements je dois vérifier également si l'utilisateur n'existe pas, ça ne sert à rien d'envoyer le formulaire si le nom est déjà pris par exemple.

[mathieu]

vous aviez parlé de nodejs qui est un autre langage serveur. c'est pour ça que je pensais que vous n'aviez pas de code côté serveur.

pour faire cet effet en javascript, vous pouvez utiliser le système ajax. votre code javascript va envoyer le nom d'utilisateur à un script PHP, le PHP va se connecter à la base de données, voir si le nom est déjà pris et envoyer le résultat à javascript.
vous avez plusieurs tutoriels à ce sujet là :
https://ajax.developpez.com/cours/
et si vous utilisez jquery, vous pouvez tester cela :
https://javascript.developpez.com/fa...ax#AjaxRequest

[SYNATIKS]

J'avais penser à une autre solutions, utiliser une page PHP qui va écrire 1 si mon utilisateur existe ou rien s'il n'existe pas et récupérer le contenu de la page avec un fetch, j'arrive à afficher le résultat de mon fetch dans la console mais j'arrive pas à sortir le [[PromiseResult]] du fetch(), pouvez-vous m'éclairez ?

Image du fetch sur deux noms d'utilisateur :

[mathieu]

utiliser une page PHP qui va écrire 1 si mon utilisateur existe ou rien s'il n'existe pas et récupérer le contenu de la page avec un fetch

c'est un peu le principe d'AJAX

montrez nous le code javascript que vous avez essayé.

[SYNATIKS]

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
const form = document.getElementById('form');
const username = document.getElementById('username');
const email = document.getElementById('email');
const password = document.getElementById('password');
const password2 = document.getElementById('password2');
 
form.addEventListener('submit', e => {
	e.preventDefault();
	let isUserTaken = 0; // Booléen qui contient si le nom d'utilisateur est déjà pris ou non
 
	fetch('https://www.constant-abraham.fr/account/check_input.php?username='+username.value.trim())
	.then(response => {return response.text();})
	.then(mytext => {
		if(mytext.charAt(0) === '1'){
			console.log('Nom d\'utilisateur deja pris.')
			isUserTaken = 1;
			// Ici il faudrait que j'arrive à faire indiquer à isUserTaken true;
		} 
		else {
			console.log('Nom d\'utilisateur libre.')
		}	})
	.catch(function(error){console.log('Error');});
 
 
	if(isUserTaken){
		console.log('Username is already taken');
	} else {
		console.log('Username not taken');
	}
	console.log(isUserTaken);
 
	checkInputs();
});

Voici mon code à l'instant, dans ce cas les affichages dans le fetch arrive après les vérifications if else.

[mathieu]

fetch lance une requête asynchrone. cela veut dire qu'après ça, c'est le code après fetch qui est lancé, et ensuite la réponse HTTP arrive et le code qui est dans "then" est lancé à ce moment.
donc pour faire une action en fonction de la valeur de retour, l'action devra se faire dans le "then".

[SYNATIKS]

Pour ceux que ça intéresse, j'ai utilisé cette méthode au final :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
			$.ajax({
				url: $newurl+'check_input.php?username='+username.value,
				success: function(data){
					let jsonData = JSON.parse(data);
					if(jsonData.username){
						setErrorFor(username, 'Ce nom d\'utilisateur est déjà utilisé.');
						isUsernameTaken = true;
					} else {
						isUsernameTaken = false;
						setSuccessFor(username);
					}
				}
			});

Je l'appelle à chaque fois qu'une lettre est entrée dans mon input username.