web design umbria

Vuoi vedere quali sono i libri messi all’ Indice dall’ Inquisizione futura che verrà ma non conosci la pwd? Allora ti basta armeggiare con Ajax, JQuery e PHP e con il metodo POST!

All’ indirizzo http://umbriawayformazione.altervista.org/uwcode/postajax/postajax.html abbiamo un caso di accesso ad area riservata usando AJAX , JQUERY e il metodo POST perché di default viene accettata la GET e non è necessaria specificarla. In sostanza se ci sono le credenziali corrette user e password si accede a una area riservata altrimenti l’algortimo tramite istruzione condizionale che definisce degli errori dice “pikke”. Dopo aver visto come prelevare dati da un foglio testo e da un oggetto json (consultare https://umbriawaysemplifica.wordpress.com/ ) ora andiamo a leggere qualcosa di dinamico direttamente dentro a un file PHP che indirizzerà le scelte dell’ utente in base ai criteri di input. Come al solito necessita un link alla nostra pagina per integrare jquery, poi serviranno due campi di cui uno testo e uno di tipo password con un button. Vediamo come é fatta questa pagina:

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Esempi Ajax</title>
  <script src="jquery-3.3.1.min.js"></script>
  <style>
* {box-sizing: border-box;}

/* Style the navbar */
.topnav {
  overflow: hidden;
  background-color: #e9e9e9;
}

/* Navbar links */
.topnav a {
  float: left;
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Navbar links on mouse-over */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Active/current link */
.topnav a.active {
  background-color: #2196F3;
  color: white;
}

/* Style the input container */
.topnav .login-container {
  float: right;
}

/* Style the input field inside the navbar */
.topnav input[type=text] {
  padding: 6px;
  margin-top: 8px;
  font-size: 17px;
  border: none;
  width: 150px; /* adjust as needed (as long as it doesn't break the topnav) */
}

/* Style the input field inside the navbar */
.topnav input[type=password] {
  padding: 6px;
  margin-top: 8px;
  font-size: 17px;
  border: none;
  width: 150px; /* adjust as needed (as long as it doesn't break the topnav) */
}

/* Style the button inside the input container */
.topnav .login-container button {
  float: right;
  padding: 6px;
  margin-top: 8px;
  margin-right: 50px;
  margin-left: 20px;
  background: #ddd;
  font-size: 17px;
  border: none;
  cursor: pointer;
}

.topnav .login-container button:hover {
  background: #ccc;
}

/* Add responsiveness - On small screens, display the navbar vertically instead of horizontally */
@media screen and (max-width: 600px) {
  .topnav .login-container {
    float: none;
  }
  .topnav a, .topnav input[type=text], .topnav .login-container button {
    float: none;
    display: block;
    text-align: left;
    width: 100%;
    margin: 0;
    padding: 14px;
  }
  .topnav input[type=text] {
    border: 1px solid #ccc;
  }
}

  </style>
  <!-- <link rel="stylesheet" href="css/style.css" type="text/css"> -->
</head>

<body>

	<div class="topnav">
		<a class="active" href="#home">Home</a>
		<a href="#about">About</a>
		<a href="#contact">Contact</a>
		<div class="login-container">
		  <!-- <form action="/action_page.php"> -->
			<input type="text" placeholder="Username" name="username">
			<input type="password" placeholder="Password" name="password">
			<button type="submit">Login</button>
		  <!-- </form> -->
		</div>
	  </div>

  <!-- <div id="contenitore">
	<input type="text" name="username" placeholder="Username"/>
	<input type="password" name="password" placeholder="Password"/>
	<button>Login</button>
  </div> -->


  <script>
  $(document).ready(
	function(){
		$("button").click(function(){
			username=$("[name=username]").val();
			password=$("[name=password]").val();
			$.ajax(
				{
					url:"nomedeltuofile.php",
					type: "POST",
					data: {"username":username, "password":password},
					success:function(result)
					{
						if (result=='OK')
						{
							alert("Puoi entrare");
              							window.location='paginasegreta.html';
							//$("[name=username]").val('');
							//$("[name=password]").val('');
						}
						else if (result=='KO')
						{
							alert("Credenziali errate");
						}
						else
							alert("Errore");
					}

				}
			);
		});
	});

  </script>
</body>

Ok per fare la barra di navigazione siamo andati su https://www.w3schools.com/ e abbiamo anche preso il foglio stile condiviso e proposto per formattare la barra. Dentro le graffe incontriamo delle accoppiate chiave / valore appena aperto il metodo ajax e in particolare vediamo che esiste un type che punta su POST e prima il file punta su nomedeltuofile.php che è quello che fa il lavoro sporco; cosa conterrà questo file? Andiamo a scoprirlo:

<?php
  if (array_key_exists("username", $_POST) &&
	array_key_exists("password", $_POST) &&
           strlen($_POST['username'])>0 && strlen($_POST['password'])>0)
 {
  if  ($_POST['password']==strtoupper($_POST['username'])."precipitevolissimevolmente")
	echo "OK";
   else
	echo "KO";
}
else
   echo "ERROR";

?>

Chi ha un pò di dimestichezza con PHP sa bene a questo punto come si potrebbe entrare nell’ area segreta, magari dietro la facciata rispettabile della index troviamo l’indice dei libri proibiti messi al bando nel XVII secolo! L’effetto finale di tutto l’ambaradan è quello che viene mostrato nelle figure allegate. In sostanza quello che sta dicendo lo script é di digitare in maiuscola la pwd, riprendendo la username pari pari, seguita da una stringa un pò bislacca, nulla di trascendentale tale da scomodare Champollion!

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo di WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione /  Modifica )

Google photo

Stai commentando usando il tuo account Google. Chiudi sessione /  Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione /  Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione /  Modifica )

Connessione a %s...