Vous souhaitez protéger une photo, un document, un lien ou une partie d'un article voire d'une page web avec un mot de passe et bien vous êtes au bon endroit !
Cette fonctionnalité basique vous permettrait par exemple de contrôler l'accès à un contenu et recueillir les emails de vos visiteurs pour pouvoir les recontacter à l'avenir. En voici une démonstration en live :
Mot de passe de la démonstration : universblogger
- Un code JavaScript
- Quelques balises CSS pour personnaliser l'apparence
- Un code HTML d'activation
Code JavaScript
<script type='text/javascript'>
//Ce code JavaScript est rédigé par Taufik Nurrohman
//Design et adaptation de l'outil par univerblogger.com
(function() {
var o = document.getElementById('contenu-password');
var s = document.getElementById('contenu-protege');
s.style.display = "none";
o.getElementsByTagName('form')[0].onsubmit = function() {
if (this.answer.value === atob('dW5pdmVyc2Jsb2dnZXI=')) {
alert('Félicitation !');
o.style.display = "none"; // passed!
s.style.display = "block";
} else {
alert('Mot de passe incorrect !');
}
return false;
};
})();
function x() {
var x = document.getElementById("password");
if (x.type === "password") {
x.type = "text";
} else {
x.type = "password";
}
}
function a() {
var a = document.getElementById("password");
if (x.type === "text") {
x.type = "password";
} else {
x.type = "password";
}
}
</script>Code CSS
<style type='text/css'>
#contenu-password{position:relative;overflow:hidden;padding:20px;border:1px solid #fff;background: #f7f7f7;border-radius: 8px;max-width: 58rem;width: calc(100% - 4rem);}
#contenu-password::before{content:'';display:block;position:absolute;bottom:0;right:0;width:120px;height:120px;background-image:linear-gradient(230deg,#d7cdcd,#1b1722);background-repeat:no-repeat;border-radius:120px 0 0;transition:opacity .3s;opacity:1}
.contenu-password .title h3{font-size:16px;margin-bottom:15px}
.password-box p{font-size:14px;color:#767676;margin:0 0 15px;padding:0;line-height:normal}
.password-box .password-field{position:relative;margin:auto;z-index:1}
.password-box .password-field form{position:relative}
.password-box .password-field input{background:rgba(255,255,255,.9);padding:13px 20px;color:#aaa;border:1px solid rgba(0,0,0,0.05);font-size:14px;margin-bottom:16px;border-radius:99em}
.password-box .password-field input[type="submit"]{display:none}
.password-box .password-field .submitbuttonlabel{position:absolute;top:3px;right:8px;display:inline;padding:8px 12.5px 8px 20px;cursor:pointer;font-size:13px;background: transparent;border: none}
.password-box .password-field .submitbuttonlabel svg{fill:#767676;width:22px;height:22px;vertical-align:middle;transition:all .3s}
.password-box .password-field .submitbuttonlabel svg:hover,.password-box .password-field .submitbuttonlabel svg:focus{fill:#568af5}
#contenu-password::after{content:'';display:block;position:absolute;bottom:0;right:0;width:120px;height:120px;background-image:linear-gradient(50deg,#d7cdcd,#1b1722);background-repeat:no-repeat;border-radius:120px 0 0;transition:opacity .3s;opacity:1}
#contenu-password input#togglepassword{margin:10px 5px 0 0;padding:0;width:unset;border: 1px solid #131313}
.toggle-wrapper{display:block;}
.toggle-wrapper lable {font-size: 14px}
button#refresh{height: unset;padding:10px 15px;margin-top:1em;background:#1db954;border:0;outline:0;color:#fff;border-radius:3px;cursor:pointer;box-shadow:0 3px 10px rgba(0,0,0,.05)}
input[type="text"],input[type="password"]{-webkit-appearance:none;-moz-appearance:none;background:#fff;border-radius:0;border-style:solid;border-width:.1rem;box-shadow:none;display:block;font-size:1.6rem;letter-spacing:-.015em;margin:0;margin-bottom:0;max-width:100%;padding:1.5rem 1.8rem;width:100%}
</style>Code HTML d'activation
<div id="contenu-protege" class="body" style="margin:3em 0;">
<!-- Insérer le contenu à protéger par mot de passe ici -->
<a href=" https://www.universblogger.com/2020/06/creer-tableaux-responsive-sans-plugin.html "> Créer des tableaux stylisés et adaptables à tous les écrans sans plugin dans Wordpress et Blogger.</a>
</div>
<div id="contenu-password" class="overlay" style="margin:3em 0;">
<h3 class="title">Contenu protégé par mot de passe</h3>
<div class='password-box'>
<p>Pour accéder au contenu, veuillez contacter l'administrateur afin de récupérer votre mot de passe</p>
<div class='password-field'>
<form action="a()" method="GET">
<input name="answer" id="password" type="password" placeholder="Mot de passe"/>
<button class='submitbuttonlabel' type='submit' value='Submit'>
<svg class="icon" viewBox="0 0 24 24" xmlns="https://www.w3.org/2000/svg"><g transform="translate(2.000000, 3.000000)"><path d="M14.1972579,8.17124146e-14 C17.3979916,0.00978563072 19.990286,2.62120148 20,5.84554455 L20,5.84554455 L20,7.30693069 L19.99354,7.4036631 C19.9466817,7.75161611 19.6506049,8.01980198 19.2923485,8.01980198 L19.2923485,8.01980198 L19.2835029,8.0019802 L19.1721336,7.99309967 C19.0257158,7.96959451 18.889286,7.90013647 18.7831177,7.79318503 C18.6504073,7.65949573 18.5758514,7.47817413 18.5758514,7.28910891 L18.5758514,7.28910891 L18.5758514,5.84554455 C18.5518871,3.41954659 16.6054921,1.45879454 14.1972579,1.43465347 L14.1972579,1.43465347 L5.80274215,1.43465347 C3.39450789,1.45879454 1.44811291,3.41954659 1.42414861,5.84554455 L1.42414861,5.84554455 L1.42414861,12.1544554 C1.44811291,14.5804534 3.39450789,16.5412055 5.80274215,16.5653465 L5.80274215,16.5653465 L14.1972579,16.5653465 C16.6054921,16.5412055 18.5518871,14.5804534 18.5758514,12.1544554 C18.6163388,11.7890822 18.922975,11.5127474 19.2879257,11.5127474 C19.6528764,11.5127474 19.9595126,11.7890822 20,12.1544554 C19.990286,15.3787985 17.3979916,17.9902144 14.1972579,18 L14.1972579,18 L5.80274215,18 C2.599996,17.995093 0.00487110525,15.3808258 -1.42108547e-14,12.1544554 L-1.42108547e-14,12.1544554 L-1.42108547e-14,5.84554455 C-1.42108547e-14,2.61713944 2.59797615,8.17124146e-14 5.80274215,8.17124146e-14 L5.80274215,8.17124146e-14 Z M4.29443312,5.38692655 C4.48070099,5.36682207 4.6671823,5.42289927 4.81203008,5.54257426 L4.81203008,5.54257426 L8.96948253,8.85742574 C9.48880627,9.2678976 10.2192875,9.2678976 10.7386112,8.85742574 L10.7386112,8.85742574 L14.8518355,5.54257426 L14.8606811,5.54257426 L14.9473987,5.48291804 C15.2462388,5.30808809 15.6344967,5.37260085 15.8602388,5.64950495 C15.9785304,5.79800076 16.0329385,5.98799536 16.0113373,6.17714498 C15.9897361,6.36629461 15.8939207,6.53887938 15.7452455,6.65643564 L15.7452455,6.65643564 L11.6320212,9.98019802 C10.5861526,10.8280382 9.09540423,10.8280382 8.0495356,9.98019802 L8.0495356,9.98019802 L3.92746572,6.65643564 L3.8513546,6.58355583 C3.61891283,6.32594359 3.59998262,5.92999594 3.821318,5.64950495 C3.93770999,5.50163353 4.10816526,5.40703103 4.29443312,5.38692655 Z"></path></g></svg>
</button>
<div class="toggle-wrapper"><input id="togglepassword" type="checkbox" onclick="x()" value="Show Password"><lable>Afficher le mot de passe</lable></div>
</form>
</div>
</div>
</div>
<p>Mot de passe de la démonstration : <span style="color:red">universblogger</span></p>
Remarque : si vous ne comptez utiliser cette fonctionnalité qu'une seule fois. Il est préférable d'insérer tous les codes (JavaScript + CSS + HTML) directement dans le bloc HTML de l'article ou de la page concernée, quelle que soit la plateforme que vous utilisiez : WordPress ou Blogger.
Cependant si vous prévoyez de l'utiliser régulièrement, je vous recommande de suivre les étapes ci-dessous selon votre plateforme. En effet, cette deuxième méthode consiste à enregistrer le code JavaScript et CSS dans votre thème séparément, comme ça à l'avenir, vous n'aurez plus qu'à ajouter le code HTML seul à chaque fois que vous souhaitez utiliser cette fonctionnalité lors de l'étape d'édition de votre article ou de votre page.
Comment verrouiller un contenu avec un mot de passe dans WordPress sans plugin
La méthode qui suit vous permettra de réserver l'accès à un contenu sur votre site web uniquement aux détenteurs d'un mot de passe. Ce dernier sera fourni par l'administrateur sur demande.
Pour faciliter l'intégration des codes dans les fichiers du thème WordPress, on utilisera un plugin qui permet d'incorporer les codes JavaScript et CSS sans avoir à toucher aux fichiers sensibles de votre thème que vous trouverez dans "Apparence > Éditeur de thème". Cela dit, si vous vous sentez à l'aise, vous pouvez bien sûr les insérer directement dans les fichiers de votre thème sans plugin.
Le plugin qu'on va utiliser dans ce tutoriel s'appelle "Insert Headers and Footers", mais vous êtes libre de choisir n'importe quel plugin qui permet d'insérer les codes JavaScript et CSS dans les fichiers du thème WordPress.
Ajouter les propriétés CSS dans Wordpress
- Commencez par installer et activer le plugin "Insert Headers and Footers"
- Accédez ensuite au plugin dans le menu "Réglage" > "Insert Headers and Footers"
-
Insérez le code CSS ci-dessus dans la première boite "Scripts en en-tête"
Insérer le code JavaScript
Ajoutez le code JavaScript correspondant dans la boite "Scripts en pied de page" et cliquez sur "Sauvegarder".Insérer le code HTML pour activer la fonctionnalité dans l'éditeur HTML de votre article ou de votre page Wordpress
Dans la page d'édition de votre article, ajoutez un bloc "HTML personnalisé" à l'endroit où vous souhaitez voir apparaître le contenu (image, vidéo, document, texte, lien, etc.) qui sera protégé par mot de passe. Pour ce faire, cherchez "HTML" dans la barre de recherche et cliquez sur le bloc "HTML personnalisé".
Ensuite, insérez le code HTML d'activation dans le bloc HTML que vous venez de créer.
À présent, insérez le contenu que vous souhaitez verrouiller sous la balise <div id="contenu-protege" class="body" style="margin:3em 0;"> (l'endroit précis est marqué par un commentaire).
À titre d'exemple, je vais protéger le lien d'un article de ce blog comme dans la démonstration au début de l'article.
Vous pouvez intégrer toute sorte de ressources multimédias telles que des documents pdf, présentations, images, etc. à l'aide du code d'intégration iframe. Si vous ne savez pas comment procéder, je vous invite à lire ce guide consacré à ce sujet.
La dernière étape consiste à créer un mot de passe personnalisé qui sera inséré dans le code JavaScript. Veuillez consulter la procédure dans la troisième section de ce tutoriel.
Comment protéger un contenu par mot de passe dans Blogger
Ajouter les propriétés CSS dans le code HTML du thème Blogger
- Cliquez sur "Thème"> "Modifier le code HTML"
- Une boite contenant le code HTML de votre thème s'affichera
- Cliquez n'importe où à l'intérieur du code HTML
- Appuyez ensuite sur Ctrl et F en même temps ou Cmd et F pour Mac, une petite barre de recherche doit apparaître en haut à gauche dans la nouvelle interface de Blogger.
- Dans la barre de recherche, cherchez la balise </head>
- Insérez le code CSS juste au-dessus de la balise </head>
Insérer le code JavaScript
- Cherchez la balise </body> dans le code HTML de votre thème
- Ajoutez le code JavaScript au-dessus de la balise </body>
- Cliquez sur "Sauvegarder"
Insérer le code HTML pour activer la fonctionnalité dans Blogger
Ouvrez l'article ou la page dans laquelle vous souhaitez insérer l'outil de verrouillage à l'aide d'un mot de passe.
Dans la page d’édition (Affichage Rédiger), repérez d’abord l’endroit où vous désirez voir apparaître le contenu protégé et marquez-le avec un texte de votre choix pour faciliter l’intégration du code dans l’éditeur HTML (Affichage HTML).
Basculez ensuite vers le mode HTML "Affichage HTML" et repérez votre marquage
Supprimer ce marquage et insérer le code HTML d'activation à sa place.
Ensuite, insérez le contenu que vous souhaitez verrouiller sous la balise <div id="contenu-protege" class="body" style="margin:3em 0;"> (l'endroit précis est marqué par un commentaire). Cliquez ici pour voir l'exemple donné dans la section Wordpress de ce tutoriel.
Enfin, enregistrez votre page ou votre article.
Création d'un mot de passe personnalisé en utilisant le codage en base 64
On va utiliser la chaine de caractères base 64 pour encoder notre mot de passe. Brièvement, il s'agit d'un codage permettant de transformer toute donnée binaire en une donnée n’utilisant que 64 caractères ASCII disponibles sur la plupart des systèmes informatiques.
Attention : la méthode que je présente dans ce tutoriel n'est pas adaptée pour le partage des données sensibles. Les plus avertis pourront toujours la contourner. En plus, l'encodage base 64 ne permet pas le chiffrement des données.
D'abord, choisissez un mot de passe. Pour l'exemple, je prendrai "universblogger".
Maintenant, utilisez un encodeur base64 en ligne comme base64encode.org.
Vous pouvez aussi choisir d'encoder et de décoder en base 64 hors ligne à l'aide de l'éditeur Notepad++.
Pour ce faire, installez l'extension MIME Tools que vous trouverez ici " Modules d'extension" > "Gestionnaire des modules d'extension". Consulter le tutoriel d'installation des extensions dans Notepad++.
Saisissez votre mot de passe dans un nouveau document et cliquez ensuite sur "Modules d'extension" > "MIME Tools" > "Base64 encode with Unix EOL".
Cliquez sur le bouton "Encode" tout en haut de la page comme indiqué dans l'image ci-dessus et saisissez le mot de passe à encoder, puis cliquez sur "Encode" en bas.
Le résultat pour le terme universblogger est le suivant : dW5pdmVyc2Jsb2dnZXI=
Enfin, ajoutez-le dans le code JavaScript à cet endroit :
(function() {
var o = document.getElementById('protect-overlay');
var s = document.getElementById('protect-body');
s.style.display = "none";
o.getElementsByTagName('form')[0].onsubmit = function() {
if (this.answer.value === atob(' dW5pdmVyc2Jsb2dnZXI=')) {
alert('Félicitation !');
o.style.display = "none"; // passed!
s.style.display = "block";
…
…
Enregistrez et visualisez les résultats.
Voilà pour ce tutoriel consacré à l'installation de cet outil simple et
très léger qui vous permettra de garder un contenu caché sur votre site web.
Ainsi, seuls les utilisateurs disposant du mot de passe pourront y accéder.