Esempio login e JWT token

Vi riporto un semplice esempio che ci permette di rendere più sicure le nostre aree protette sulle nostre webapp. Una login che ci restituisce un token con tutti i dati che vogliamo salvarci dell’utente. Troverete tanti esempi in rete di questa metrologia. Dopo la login web di solito andiamo a salvarci dei dati dentro le sessioni o cookies per capire chi è l’utente e se è loggato. In questo modo andiamo a creare un token con chiave di codifica che ci permette di avere più sicurezza dei dati.

Prima di tutto dobbiamo installare sul nostro progetto JWT. Da terminale usiamo queste istruzioni (premetto che è necessario avere composer installato):

composer update

Poi andiamo a installare sulla cartella del progetto Firebase\JWT:

composer require firebase/php-jwt

A questo punto viene generata la cartella vendor sul nostro progetto. Ora andiamo a creare la nostra pagina di login io l’ho chiamata nel progetto index.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
</head>
<body>
<h2>Login</h2>
<form id="loginForm">
  <label for="username">Username:</label><br>
  <input type="text" id="username" name="username"><br>
  <label for="password">Password:</label><br>
  <input type="password" id="password" name="password"><br><br>
  <input type="submit" value="Login">
</form>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</body>
</html>

A questo punto andiamo a creare la pagina script.js dove andiamo a interagire con il server e il codice php che si occupa di andare a verificare i dati inseriti (potranno essere verificati da un db o da altro) :

$(document).ready(function() {
  $('#loginForm').submit(function(e) {
    e.preventDefault();
    var username = $('#username').val();
    var password = $('#password').val();      
    $.ajax({
      type: 'POST',
      url: 'login.php',
      data: { username: username, password: password },
      success: function(response) {          
        var token = JSON.parse(response); // faccio parse
        console.log("Token: " + token.token); // mi restituisco tutto il token in console log          
      },
        error: function(xhr, status, error) {
        console.error(error);
      }
    });
  });
});

Quindi andiamo a creare la pagina login.php:

<?php 
require_once 'vendor/autoload.php';
use \Firebase\JWT\JWT;

function jwt_encode($payload, $key) {
  $header = base64_encode(json_encode(array('typ' => 'JWT', 'alg' => 'HS256')));
  $payload = base64_encode(json_encode($payload));
  $signature = hash_hmac('sha256', "$header.$payload", $key, true);
  $signature = base64_encode($signature);
  return "$header.$payload.$signature"; 
}

$username = $_POST['username'];
$password = $_POST['password'];

if ($username === 'utente' && $password === 'prova') {
  // Emetti un token JWT valido


  $key = "14071973";
  $payload = array(
      "user_id" => 123,
      "username" => "esempio",
      "email" => "esempio@example.com",
      "exp" => time() + 3600 // Scadenza del token dopo 1 ora (tempo in formato UNIX)
  );
  
  $token = jwt_encode($key, 'chiave-segreta');
  $_SESSION['token'] = $token;
  echo json_encode(array('token' => $token));

} else {
  http_response_code(401); // Non autorizzato
  echo json_encode(array('message' => 'Credenziali non valide'));
}
?>

Andiamo prima di tutto a includere la libreria jwt:
require_once ‘vendor/autoload.php’;
use \Firebase\JWT\JWT;

e poi utilizziamo la funzione function jwt_encode($payload, $key) per creare la codifica.

Nel $payload andiamo a settarci i dati che vogliamo salvarci.

Molto semplice da applicare ai propri progetti.

trovate tutto l’esempio scaricabile qui: https://github.com/oldpan73/phpjwtlogin

Letture: 48

By : Andrea Tags: javascript JWT LOGIN php web