je desire faire un code simple, mais il ne marche pas !!
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat Application</title>
<!-- Lien vers le fichier CSS -->
<link rel="stylesheet" href="styles.css" />
<!-- Lien vers le fichier JavaScript de BcryptJS -->
<script src="libs/bcrypt.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<center>
<div class="cadrereket">
<h1>Chat Application V : 0.00001a</h1>
</div>
<br><br>
<div class="formulaire">
<h2>Votre pseudo</h2>
<input type="text" id="pseudo" value="">
<h2>Votre mot de passe</h2>
<input type="password" id="pwd" autocomplete="current-password" required>
<br><br>
<input type="button" value="Validez" id="valide">
</div>
<br><br>
<div class="erreur" id="erreur"></div>
</center>
<!-- Lien vers le fichier JavaScript -->
<script>
document.getElementById("valide").onclick = function() {
var pseudo = document.getElementById("pseudo").value;
var mdp = document.getElementById("pwd").value;
validons(pseudo, mdp);
};
async function validons(pseudo, mdp) {
var erreurDiv = document.getElementById("erreur");
erreurDiv.innerHTML = ""; // Réinitialise le contenu du div erreur
// Vérifier si le champ pseudo est rempli
if (pseudo === "") {
erreurDiv.innerHTML += "<p>Veuillez remplir le champ pseudo.</p>";
return; // Arrête l'exécution de la fonction si le champ pseudo est vide
}
// Vérifier si le champ mot de passe est rempli
if (mdp === "") {
erreurDiv.innerHTML += "<p>Veuillez remplir le champ mot de passe.</p>";
return; // Arrête l'exécution de la fonction si le champ mot de passe est vide
}
// Affiche les informations dans la console
console.log("Pseudo: " + pseudo + "\nMot de passe: " + mdp);
erreurDiv.innerHTML += "Vérification en cours...";
// Hasher le mot de passe avec BcryptJS
try {
var salt = await bcrypt.genSalt(10); // Génère un sel
var hash = await bcrypt.hash(mdp, salt); // Hash le mot de passe avec le sel
console.log("Mot de passe hashé :", hash);
erreurDiv.innerHTML += " ";
erreurDiv.innerHTML += "<p>Mot de passe hashé avec succès.</p>";
} catch (error) {
erreurDiv.innerHTML += " ";
erreurDiv.innerHTML += "<p>Erreur lors du hachage du mot de passe.</p>"+ hash+"<br>"+error;
}
}
</script>
</body>
</html>
ca marche pas, avez vous une idée de pourquoi ?
Merci de votre aide
une fois ca, j utiliserai axios, pour envoyer mes data a php
Bonjour, peut être parce que tu utilises une librairie nodejs (pour ton backend) dans le front end ? ou alors il y a une librairie bcrypt utilisable côté front end qui est sortie ?
Ici encore quelques soucis sont visibles mais prochainement essaie de préciser ce qui ne marche pas avec ton post ça aiderait à savoir quoi regarder.
Tu parles d'envoyer tes données à php via axios , pourquoi tenter hasher dans le front end dans ce cas ? tu peux rapidement hasher en php (password_hash(mot_de_passe,PASSWORD_BCRYPT))
Konjiki Ashisogi Jizo