Dans l’article du jour nous allons voir comment mettre en place le mécanisme de connexion au Back-Office pour le propriétaire du blog.
La page login.html contient le formulaire de login.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" type="image/svg+xml" href="./assets/icons/Cat.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div data-include="./components/header.html"></div>
<main class="general">
<div class="connexion">
<!-- Le formulaire ci-dessous permet de récupérer les informations du login et du mot de passe et de les envoyer, via le script login.js vers l'API qui va vérifier les informations envoyées -->
<form action="POST" id="login">
<label for="email">Nom d'Utilisateur</label><input type="email" id="email" name="email" placeholder="Nom d'Utilisateur" required>
<label for="password">Mot de Passe</label><input type="password" id="password" name="password" placeholder="Mot de Passe" required>
<button type="submit">Valider</button>
</form>
</div>
</main>
<div data-include="./components/footer.html"></div>
<script src="./scripts/conf.js"></script>
<script src="./scripts/include.js"></script>
<!-- Import du script login.js qui permet la connexion -->
<script src="./scripts/login.js"></script>
</body>
</html>Le script login.js va permettre d’envoyer les informations à l’API, et si les informations sont correctes, un code OTP sera envoyé sur l’email du propriétaire du blog.
// Récupèration de l'élément HTML avec l'ID 'login'
const el = document.getElementById('login');
if (el) {
// Ajout d'un écouteur d'événement "submit" sur l'élément (lorsque le formulaire est soumis)
el.addEventListener('submit', async function sendLoginInfos(e) {
e.preventDefault();
// Récupération des valeurs des champs 'email' et 'password'
let email = document.getElementById('email').value;
let password = document.getElementById('password').value;
if (!email || !password) {
alert("Merci de renseigner l'identifiant et le mot de passe");
} else {
// Si les champs sont remplis, tentative d'envoi d'une requête à l'API
try {
// Effectue une requête POST vers l'URL de l'API pour la connexion
let response = await fetch(`${urlApi}/users/login`, {
method: 'POST',
body: JSON.stringify({
email,
password
}),
headers: {
'Content-Type': 'application/json',
}
});
// Si la requête a réussi (code HTTP 200)
if (response.status === 200) {
// Convertion de la réponse JSON en un objet JS
response = await response.json();
// Stockage de l'email dans le sessionStorage
sessionStorage.setItem("email", email);
// Redirection vers la page de vérification OTP
window.location = 'otp.html';
} else {
alert("Mot de passe ou Identifiant incorrect");
}
} catch (error) {
console.log(error);
}
}
});
} else {
console.log("no el");
}
La page OTP.html permet d’entrer le code OTP reçu par mail.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" type="image/svg+xml" href="./assets/icons/Cat.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OTP</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div data-include="./components/header.html"></div>
<main class="general">
<div class="connexion">
<!-- Formulaire d'envoi du code OTP -->
<form action="POST" id="otp">
<label for="codeOtp">Mot de Passe</label><input type="text" id="codeOtp" name="codeOtp" placeholder="Code OTP" required>
<button type="submit">Valider</button>
</form>
</div>
</main>
<div data-include="./components/footer.html"></div>
<script src="./scripts/conf.js"></script>
<script src="./scripts/include.js"></script>
<!-- Import du script otp.js permettant une double authentification -->
<script src="./scripts/otp.js"></script>
</body>
</html>Le script otp.js permet une vérification supplémentaire. En effet un mail contenant un code à 6 chiffres est envoyé sur l’adresse e-mail du propriétaire du blog. Si son login et mot de passe sont utilisés par une autre personne il ne sera pas possible d’aller plus loin si le bon code n’est pas entré.
const el = document.getElementById('otp');
if (el) {
// Ajout d'un écouteur d'événement "submit" sur l'élément (lorsque le formulaire est soumis)
el.addEventListener('submit', async function sendLoginInfos(e) {
e.preventDefault();
// Récupation de l'email stocké dans le sessionStorage.
let email = sessionStorage.getItem('email');
// Récupération de la valeur saisie dans le champ d'entrée avec l'ID "codeOtp"
let otp = document.getElementById('codeOtp').value;
if (!otp) {
alert("Merci de renseigner le code otp");
} else {
try {
// Envoie d'une requête POST à l'API pour vérifier le code OTP
let response = await fetch(`${urlApi}/users/verify`, {
method: 'POST',
body: JSON.stringify({
email,
otp
}),
headers: {
'Content-Type': 'application/json',
}
});
if (response.status === 200) {
// Parse de la réponse JSON pour récupérer les données
response = await response.json();
console.log(response);
sessionStorage.setItem("token", response.token);
sessionStorage.setItem("username", response.username);
sessionStorage.setItem("useremail", response.email);
sessionStorage.setItem("loginmsg", response.message);
// création d'une clé isAuthenticated passée à true qui sera utilisée par le script isAuthenticated.js
sessionStorage.setItem('isAuthenticated', true);
// Redirection vers le back-office après une vérification réussie
window.location = 'backoffice.html';
} else {
alert("OTP incorrect");
sessionStorage.setItem('isAuthenticated', false);
}
} catch (error) {
console.log(error);
}
}
});
} else {
console.log("no el");
}
Deux scripts permettent de rendre la page backoffice.html accessible uniquement au propriétaire du blog.
Il s’agit de isAuthenticated.js et loggedIn.js.
Voici le code pour isAuthenticated.js.
// Simple condition permettant de vérifier la clé isAuthenticated générée lors de la validaiton du code otp dans le script otp.js
if (sessionStorage.getItem('isAuthenticated') !== 'true') {
window.location = 'notauthorized.html';
}
Cette clé est utile car elle permet de rediriger un utilisateur qui tenterait de naviguer vers backoffice.html via la barre d’adresse et de lui indiquer qu’il n’est pas autorisé à naviguer vers le backoffice.
Et voici le script loggedIn.js qui permet simplement de vérifier si le propriétaire du blog s’est bien connecté.
async function fetchUser() {
token = sessionStorage.getItem("token");
if(!token) {
console.log("vous n'êtes pas connecté")
} else {
try {
const response = await fetch(`${urlApi}/users/loggedIn`, {
method: 'GET',
headers: {
Authorization: "Bearer " + sessionStorage.getItem("token"),
}
})
if(response.status === 200) {
console.log('bien connecté');
} else {
console.log('non autorisé');
}
}catch(error) {
console.log(error)
}
}
}
fetchUser();Le mécanisme de connexion à double authentification est maintenant en place et fonctionnel !
Retrouvez les premiers articles du projet ici ⬇️
– Simple Blog From Scratch Part1
– Simple Blog From Scratch Part2
– Simple Blog From Scratch Part3
– Simple Blog From Scratch Part4
– Simple Blog From Scratch Part5
– Simple Blog From Scratch Part6
– Simple Blog From Scratch Part7
– Simple Blog From Scratch Part8
– Simple Blog From Scratch Part9
Consultante spécialisée dans les technologies Microsoft, je justifie de plus de 14 ans d’expérience dans le secteur IT.
Mon parcours professionnel, riche et varié, m’a permis de développer de solides compétences, tant techniques qu’humaines. Je suis reconnue pour ma capacité à analyser rapidement les enjeux techniques et à concevoir des solutions pertinentes, y compris sur des problématiques complexes.
Mon approche proactive, alliée à mes compétences en développement, me permet de proposer des évolutions efficaces, toujours en cohérence avec les objectifs métiers.
En parallèle de mon activité professionnelle, je prends plaisir à approfondir mes compétences techniques en réalisant des projets personnels. Je développe notamment des jeux web basés sur React et PHP, ainsi que des applications orientées métier avec SPFx.