Information relative à l'utilisation des données personnelles

Le site pajagus.fr utilise des cookies pour analyser le trafic sur le site.

Seules les données nécessaires à l'agent Google Analytics sont enregistrées. Ces informations sont utilisées pour générer des rapports de connexions, sessions, pages vues, provenance des visiteurs...

Aucune autre information n'est enregistrée par le site pajaguse.fr.

En utilisant ce site vous acceptez l'utilisation de ces cookies.

Créer des liens protégés sur une page WordPress

javascriptDans cet article nous allons voir comment créer une page WordPress avec des liens et comment faire pour que ces liens ne soient accessible qu’avec la saisie d’un code confidentiel.

Ce tuto est inspiré d’un cas réel ou j’ai dû créer une page avec les liens vers toutes les interfaces d’administration de mon réseau d’entreprise (Pare-feu, Wifi, Imprimantes, Nas…). Mais il fallait que la page soit protégée pour éviter que toute le monde puissent accéder aux liens.

Les prérequis sont simples :

  • Avoir un site WordPress 🙂
  • Utiliser une thème qui contient un fichier xx.js dans lequel on pourra ajouter du code
  • Utiliser un thème qui intégre Jquery (sinon il faut l’intégrer manuellement)

Etape 1 : créer une page dans WordPress

  • Connectez vous sur votre admin WordPress
  • Page / Ajouter
  • Saisissez un titre et du texte si besoin
  • Créez une liste de libellés pour vos liens (en texte ne pas intégrer de lien via l’éditeur !)

page-manage

 

Etape 2 : Créer les liens

Nous allons maintenant créer les liens manuellement, car l’url ne doit pas être visible, sinon il serait simple de contourner la protection…

  • Cliquer sur l’icone texte (a coté de visuel) en haut à droite de la fenêtre de l’éditeur.
  • WordPress affiche le code ‘brut’ de la page
  • Dans ce code vous devriez retrouver des lignes avec :  <li>VOTRE_LIBELLE</li> qui contiennent chacune un libellé
  • Nous allons modifié chaque ligne pour qu’elle ressemble à cela :
<li><a href="XX" class="lienProtege">VOTRE_LIBELLE</a></li>

Vous voyez ce n’est pas compliqué, mais un peu long si vous en avez beaucoup…

Détails des modifications effectuées :

  • En encadre le libellé avec une balise <a ..>.. </a> pour qu’il soit cliquable
  • l’attribut href= »XX »  permettra de retrouver la bonne url (en javascript, voir ci-dessous), XX doit être unique pour chaque lien (01,02..)
  • l’attribut class= »lienProtege » est également utile pour le javascript.

Etape 3 : création d’un champ pour la saisie du code et ajout du code Javascript

Toujours dans l’éditeur (en mode texte) vous allez vous placer tout en bas et ajouter le code suivant :

<form><label for="codeAdmin">Code d'accés</label>
<input id="codeAdmin" type="password" value="" /></form>

Puis ajouter à la suite le code suivant :

<script>
//<![CDATA[
$(document).ready(function() {
  $(".lienProtege").click( function(e) {
    e.preventDefault();
    if( $("#codeAdmin").val() != codeProtectionLien) {
      alert('Code Admin incorrect !');
      $("#codeAdmin").focus();
    } else {
      var lien = $(this).attr('href');
      if( liensManage[lien] != undefined ) {
        window.open(liensManage[lien]);
      } else {
        alert('Erreur, code lien incorrect');
      }
    }
  });
});
// ]]
</script>

Le premier block de code permet de créer un champ de saisie pour le code de protection. Le deuxième block c’est le code Javascript nécessaire au traitement.

Etape 4 : Création des variables globales (Javascript)

Le traitement utilise deux variables globales Javascript qu’il faut définir dans un autre fichier js de votre thème :

  • var codeProtectionLien = « XXXX » ;  => C’est le code qui protège les liens
  • var liensManage => C’est un tableau avec l’ensemble des paires code / lien

Exemple de tableau :

var liensManage = {
 "0":"http://lien1",
 "1":"http://lien2/",
 .....
}

On retrouve dans cette variable le code (0,1..) qui est saisie dans l’atrribut  href et le lien http associé. Ainsi les liens ne sont pas visibles directement dans la page. Le code peut être numérique ou alpha (AA,BB…) peut importe dés l’instant qu’il est bien définis avec des doubles guillemets.

Vous pouvez intégrer la définition de ces variables dans le block <script> créé à l’étape 3, mais c’est clairement moins sécurisé car un simple affichage du code source de la page permet de trouver le mot de passe!. La page d’exemple utilise cette méthode, mais ce n’est que pour l’exemple.

Etape 5 : Testez !

Afin de vous monter le fonctionnement j’ai créer une page d’exemple sur mon site : Page d’exemple

vous pouvez afficher le code source de la page et toute en bas vous trouverez tout le code nécessaire, y compris le code de protection et le tableau avec la liste des liens.

Pas de Commentaire

Qu'en pensez-vous ?

Votre formulaire contient des erreurs, merci de corriger.