Maison >interface Web >js tutoriel >Comment protéger par mot de passe une page en utilisant uniquement HTML, CSS et JavaScript ?

Comment protéger par mot de passe une page en utilisant uniquement HTML, CSS et JavaScript ?

WBOYavant: 2023-09-07 14:33:02930parcourir

如何仅使用 HTML、CSS 和 JavaScript 来密码保护页面？

La protection par mot de passe est une mesure de sécurité importante pour les pages Web contenant des informations sensibles ou nécessitant une authentification pour y accéder. Si vous souhaitez ajouter une sécurité supplémentaire à vos pages Web sans utiliser de langage côté serveur, vous pouvez protéger vos pages par mot de passe en utilisant HTML, CSS et JavaScript.

Cet article vous montrera comment créer un formulaire simple qui demande aux utilisateurs de saisir un mot de passe pour afficher le contenu d'une page protégée. Regardons l'exemple suivant pour mieux comprendre l'utilisation d'un mot de passe pour protéger une page.

Exemple

Dans l'exemple ci-dessous, nous exécutons un script et protégeons une page Web ; si l'utilisateur tente d'accéder à la page Web, il lui sera demandé son mot de passe.

<!DOCTYPE html>
<html>
   <body>
      <script>
         var password = "tutorial";
         (function passcodeprotect() {
            var passcode = prompt("Enter PassCode");
            while (passcode !== password) {
               alert("Incorrect PassCode");
               return passcodeprotect();
            }
         }());
         alert('Welcome To The TP..!');
      </script>
   </body>
</html>

Lorsque le script est exécuté, il générera une sortie affichant une alerte demandant un mot de passe. Lorsque l'utilisateur correspond au mot de passe (« tutoriel »), un message s'affiche ; sinon, le mauvais mot de passe s'affiche sur la page Web.

Exemple

Considérez l'exemple suivant où nous créons un champ de saisie pour un mot de passe saisi pour protéger une page Web ainsi qu'un clic sur un bouton.

<!DOCTYPE HTML>
<html>
   <body>
      <center>
         <input type="password" placeholder="passcode" id="tutorial">
         <button onclick="protectpasscode()">CHECK</button>
         <script>
            function protectpasscode() {
               const result = document.getElementById("tutorial").value;
               let passcode = 12345;
               let space = '';
               if (result == space) {
                  alert("Type passcode")
               } else {
                  if (result == passcode) {
                     document.write("<center><h1>TP, The Best E-Learning </h1></center>");
                  } else {
                     alert("Incorrect Passcode");
                     location.reload();
                  }
               }
            }
         </script>
      </center>
   </body>
</html>

Lorsque vous exécutez le script ci-dessus, une fenêtre de sortie apparaîtra affichant le champ de saisie pour saisir le mot de passe et le bouton de clic sur la page Web. Si l'utilisateur correspond au mot de passe (12345), il ouvrira un formulaire composé de texte, sinon un mauvais mot de passe s'affichera.

Exemple

Exécutez l'exemple ci-dessous dans lequel nous exécutons un script pour empêcher une page Web d'afficher son contenu après l'exécution du script.

<!DOCTYPE html>
<html>
   <body style="background-color:#EAFAF1">
      Enter Password:
      <input type='text' value='' id='input'><br><br>
      <input type='checkbox' onclick='protectpasscode()'>Show results
      <p id='tutorial' style='display:none; color: black;'>Mahendra Singh Dhoni, also known as MS Dhoni, is an Indian former international
      cricketer who was captain of the Indian national cricket team in limited-overs formats
      from 2007 to 2017 and in Test cricket from 2008 to 2014. </p>
      <script>
         function protectpasscode() {
            var a = document.getElementById('input');
            var b = document.getElementById('tutorial');
            if (a.value === '54') {
               b.style.display = 'block';
            } else {
               b.style.display = 'none';
            }
         }
      </script>
   </body>
</html>

Lorsque le script est exécuté, il générera une sortie montrant le champ de saisie pour saisir le mot de passe et la case à cocher sur la page Web. Lorsque l'utilisateur fait correspondre le mot de passe (54) et coche la case, le contenu de la page Web s'affiche.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript css html

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment quitter l'état d'édition dans IText à l'aide de FabricJS ?Article suivant：Comment quitter l'état d'édition dans IText à l'aide de FabricJS ?

Articles Liés

Voir plus