- Learn
- PHP: creare un social network con Symfony framework
- Personalizzazione della pagina di login
Personalizzazione della pagina di login
Ora che abbiamo il form di login possiamo dare un’occhiata ai file che il MakerBundle ha creato per noi. All’interno di security.yaml
sono state aggiunte delle regole per abilitare il logout e per definire qual è la classe Authenticator
che utilizzeremo.
Questa classe serve per verificare le credenziali immesse e per effettuare concretamente il login. La modificheremo in seguito per caricare gli utenti dal database ma, in questo momento, ci limiteremo a definire la pagina su cui effettuare il redirect quando il login va a buon fine.
Apriamo quindi il file src/Security/LoginFormAuthenticator.php
alla riga 96 sostituiamo l’eccezione con un redirect alla home page a cui avevamo assegnato index
come nome della rotta:
return new RedirectResponse($this->urlGenerator->generate('index'));
Possiamo ora dedicarci al controller per impostare un redirect qualora aprissimo la pagina di login da utente già autenticato. Apriamo il file app/src/Controller/SecurityController.php
e decommentiamo le prime righe che verificano lo stato dell’utente.
A questo punto non ci resta che adeguare lo stile grafico della pagina di login in maniera che sia congruente con il template statico relativo.
Come prima cosa, come per la home page nelle precedenti lezioni, prendiamo il contenuto del tag body
e lo incolliamo wrappando gli asset statici con la funzione asset()
di Twig. Dopodiché possiamo definire le classi del body nel relativo blocco.
Ora possiamo sostituire il form creato da Symfony con lo stile e i tag del nostro, è sufficiente spostare il blocco if
per mostrare eventuali errori di login, modificare i due campi di input e aggiungere il campo hidden necessario al CSFR token.
Un token CSRF è un valore univoco e segreto generato dall’applicazione lato server e trasmesso al client in modo tale da essere incluso in una successiva richiesta HTTP effettuata dal client. Quando viene effettuata la richiesta successiva l’applicazione lato server verifica che la richiesta includa il token previsto e rifiuta la richiesta se il token è mancante o non valido.
<form class="form" method="post">
<div class="card-header text-center">
<h1 class="display-1">KVAK</h1>
{% if error %}
<div class="alert alert-danger">{{ error.messageKey|trans(error.messageData, 'security') }}</div>
{% endif %}
</div>
<div class="card-body">
<div class="input-group no-border input-lg">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="now-ui-icons users_circle-08"></i>
</span>
</div>
<input type="text" value="{{ last_username }}" name="username" id="inputUsername" class="form-control"
required autofocus>
</div>
<div class="input-group no-border input-lg">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="now-ui-icons text_caps-small"></i>
</span>
</div>
<input type="password" name="password" id="inputPassword" class="form-control" required>
</div>
</div>
<div class="card-footer text-center">
<button class="btn btn-primary btn-round btn-lg btn-block" type="submit">Log In</button>
<div class="pull-left">
<h6>
<a href="#pablo" class="link">Create Account</a>
</h6>
</div>
<div class="pull-right">
<h6>
<a href="#" class="link">Need Help?</a>
</h6>
</div>
</div>
<input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
</form>
Il codice della lezione è disponibile con il tag login-page
all’interno del repository.
Progettare le rotte con autenticazione
La guida è in pubblicazione. Altre lezioni saranno pubblicate nei prossimi giorni.
Se vuoi aggiornamenti su PHP inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
I Video di HTML.it
Photoshop: come creare l’effetto Bokeh
L’effetto Bokeh, dal giapponese “boke” cioè “confusione mentale”, è un particolare tipo di sfocatura che permette di ottenere un gradevole effetto […]