Servizi di Login e Registrazione

Su ws.cipiaceinfo.it sono disponibili dei web service per la gestione della login e della registrazione utenti. In questi servizi le password non sono controllate lato client ma lato server e la password corretta quindi non viene mai visualizzata nel browser.

Qui le indicazioni sui servizi:

REGISTRAZIONE:

url https://ws.cipiaceinfo.it/credential/register
method: POST
header:
{
  "Content-Type": "application/json",
  "key": <TOKEN>
}
body: 
{
   username: username,
   password: password
}

La risposta del sistema, se non ci sono errori, sarà semplicemente “ok”.

Con questo servizio è quindi possibile creare utenti.

E’ anche possibile usare il servizio da web tramite la pagina https://ws.cipiaceinfo.it per registrare nuovi utenti.

LOGIN

url https://ws.cipiaceinfo.it/credential/login
method: POST
header: 
{
  "Content-Type": "application/json",
  "key": <TOKEN>
}
body: 
{
   username: username,
   password: password
}

La risposta del sistema, se non ci sono errori, sarà:
{
    result: value
}

dove value può assumere il valore true (login ok) o false (login ko).

Sezione privata di un sito

Coi servizi sopra disponibili è possibile quindi creare una sezione riservata di un sito, anche nella stessa pagina.

Prima di tutto bisogna creare una struttura HTML che permetta di gestire nella stessa pagina una parte pubblica (accessibile a tutti, che conterrà la form di login) ed una privata (accessibile solo dopo la login).

<div id="login">
  <input id="name" type="text"/>
  <input id="password" type="password"/>
  <button id="login" type="button">Login</button>
</div>
<div id="private">
... (contenuto)
</div>

Nel JS quindi:

const myToken = "XXXXXXXXXXXXXXXX"; // token ottenuto via mail 

const inputName = document.querySelector("#name");
const inputPassword = document.querySelector("#password");
const loginButton = document.querySelector("#login");
const divPrivate = document.querySelector("#private");
const divLogin = document.querySelector("#login");
divPrivate.classList.remove(".visible");
divPrivate.classList.add(".hidden");

const login = (name, password) => {
  return new Promise((resolve, reject) => {
    fetch("http://ws.cipiaceinfo.it/credential/login", { 
      method: "POST",
      headers: {
         "content-type": "application/json",
         "key": myToken
      },
      body: JSON.stringify({
         username: username,
         password: password
      }
    })
    .then(r => r.json())
    .then(r => {
         resolve(r.result); 
      })
    .catch(reject);
  }
}

loginButton.onclick = () => {
  login(inputName.value, inputPassword.value).then((result) => {
    if (result) {
      divLogin.classList.remove(".visible");
      divLogin.classList.add(".hidden");
      divPrivate.classList.remove(".visible");
      divPrivate.classList.add(".hidden");
   } else {
     // login fallita
   }
}

dove le classi CSS .hidden e .visible imposteranno la proprietà display rispettivamente a “hidden” e “block”. Notare che il codice sopra non gestisce la catch.

Note finali

Visibilità pubblica e privata in una SPA.

Si ricorda che in una SPA sono presenti nella stessa pagina HTML:

• componenti pubblici visibili sempre (in quanto non è prevista autenticazione per vederli, e visibili sia da loggati che non)
• componenti privati (per vederli è necessario fare login, altrimenti sono invisibili)
• un componente di login (visibile quando non si è ancora loggati, ma nascosto da loggati)

L’esempio qui sopra va quindi modificato opportunamente per gestire queste tipologie di contenuti.

Session storage/cookie

Può essere utile gestire la persistenza della login tra un ricaricamento e l’altro, così non è necessario fare login ogni volta, usando le funzioni di storage (spiegate qui) in particolare sono utili il session storage e soprattutto i cookies. Sono presenti su npm diverse librerie che semplificano la gestione dei cookies.

E’ sconsigliabile invece usare il local storage, in quanto archivio permanente.

Applicazioni basate su componenti

Strutturare una pagina per componenti è il modo migliore per gestire la login. Per fare questo bisogna prevedere un componente “login” che gestirà l’autenticazione. Questo componente esporrà poi una proprietà pubblica che dirà agli altri componenti se l’utente si è loggato.

Il codice dovrà essere quindi pressapoco come questo:

const createLogin = () => {
  const myToken = "XXXXXXXXXXXXXXXX"; // token ottenuto via mail 
  const inputName = document.querySelector("#name");
  const inputPassword = document.querySelector("#password");
  const loginButton = document.querySelector("#login");
  const divPrivate = document.querySelector("#private");
  const divLogin = document.querySelector("#login");

  divPrivate.classList.remove(".visible");
  divPrivate.classList.add(".hidden");
  isLogged = sessionStorage.getItem("Logged") || false;

  const login = (name, password) => {
    ... // vedi sopra
  }

  loginButton.onclick = () => {
    login(input.name, input.password).then((result) => {
      if (login) {
        isLogged = true;
        sessionStorage.setItem("Logged": true);
      }
    });
  }

  return {
    isLogged: () => isLogged
  }

}

Gli altri componenti, se collegati a parti dell’applicazione visibili solo da utente loggato, eseguiranno alla render un controllo per vedere se la login è stata effettuata.