Accès invité portail captif sans authentification
Resolution
Attaché à ce message est un exemple d'une page de confort portail captif, modifié pour une utilisation dans un "accès invité" environnement. L'objectif est ici de forcer les utilisateurs à cliquer sur un bouton, confirmant qu'ils reconnaissent les conditions d'utilisation, avant d'être autorisés à accéder au réseau/Internet. Vous devrez créer un utilisateur "invité" (non couvert dans cet article) pour utilisation dans ce portail.
La page ci-jointe est identique à la page de confort du portail captif «intégré». Je viens d'ajouter le JavaScript nécessaire pour faire fonctionner le portail captif sans authentification par l'utilisateur. Vous aurez juste besoin d'ajouter le HTML/texte que vous souhaitez afficher à vos utilisateurs "invités".
Pour utiliser votre nouvelle page de confort portail captif, suivez les opérations suivantes:
1.) accédez à l'onglet Device (périphérique) et cliquez sur «pages de réponse» sur la gauche.
2.) cliquez sur "captive Portal Comfort page".
3.) cliquez sur le bouton "importer", sélectionnez le fichier que vous venez de modifier, sélectionnez l'emplacement (partagé ou VSYS), puis cliquez sur OK.
4.) valider la configuration.
Contenu du fichier joint:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><META http-equiv="PRAGMA" content="NO-CACHE"><meta name="viewport" content="initial-scale=1.0"><title>Portail D'Identification de l'Utilisateur</title><style> html, body{ height: 99%; } body { color: #111; font-family: Verdana,Arial,Helvetica,sans-serif; background-color:#d2d6dA; vertical-align: middle; } #activearea { border-width: 2px; border-color: #c2c6cA; border-style: solid; border-radius: 15px; background-color: #ffffff; padding: 20px; max-width: 400px; margin-left: auto; margin-right: auto; } #heading { font-size: 1.1em; font-weight: bold; max-width: 400px; margin-left: auto; margin-right: auto; text-align: center; } #desc { font-size: 1em; margin: 15px; max-width: 400px; text-align: left; margin-left: auto; margin-right: auto; } form td span { font-size: 1em; font-weight: bold; } #formtable { height: 100%; width: 100%; } #taLogin { width: 250px; margin-left: auto; margin-right: auto; } .buttonFixed { font-size: 1em; } .msg { background-color: #ffff99; border-width: 2px; border-color: #ff0000; border-style: solid; border-radius: 5px; margin-top: 0.5em; padding: 0.5em; max-height: 150px; height: expression( this.scrollHeight > 150 ? "150px" : "auto" ); /* sets max-height for IE */ overflow: auto; font-size: 1em; }</style></head><!-- Changed LoadPage function to myLoadPage function for onload --><body onload="myLoadPage();"><table id="formtable"><tr><td>Portail D'Identification de l'Utilisateur<x 81=""><div id="desc">La ressource que vous essayez d'accéder nécessite une identification correcte de l'utilisateur avant l'accès.</div></td></tr></table></body></html> Veuillez entrer vos informations d'identification.
<!-- This function hides the "pan_form", provides a new submit button and populates the username, password, escapeUser, and submit values used by the backend to process the form -->
<script>
function myLoadPage() {
//get the login form object
var my_form = document.getElementById("login_form");
//get the username form object
var my_user = document.getElementsByName("user")[0];
//populate the username form object with the configured "guest" user
my_user.setAttribute("value", "guestuser");
//get the password form object
var my_pass = document.getElementsByName("passwd")[0];
//populate the password object with the configured "guest" password
my_pass.setAttribute("value", "guestpass");
//get the escapeUser form object
var escape_user = document.getElementsByName("escapeUser")[0];
//populate the escapeUser object with the configured "guest" user
escape_user.setAttribute("value", "guestuser");
//remove the existing submit button from the DOM
document.getElementById("submit").remove();
//add a new custom button to the DOM with our own text on it
my_form.insertAdjacentHTML('beforeend', '<button class="buttonFixed" type="submit" id="submit" name="ok" onclick="submitClicked()" value="Login">Accept and Continue</button>');
//get the entire "original" login form object
var hide_form = document.getElementById("taLogin");
//hide the "original" login form object
//we need it to POST but not be visible
hide_form.style.visibility = "hidden";
hide_form.style.position = "absolute";
}
</script>
<pan_form>
</pan_form>