Aprovechando el propietario de la pregunta
Keep on Learning!
If you liked what you've learned so far, dive in! Subscribe to get access to this tutorial plus video, code and script downloads.
With a Subscription, click any sentence in the script to jump to that part of the video!
Login SubscribeAhora que cada Question
tiene un owner
-un objeto User
-, ¡es hora de celebrarlo! En el frontend, podemos empezar a renderizar datos reales... en lugar de tener siempre la misma foto del gato y la misma pregunta escrita por la misma Tisha. Ambas están codificadas, aunque nos encanta la gata Tisha aquí en SymfonyCasts.
Empieza en la página de inicio. Abre templates/question/homepage.html.twig
. Y... aquí es donde hacemos un bucle con las preguntas. Primero, para el avatar, podemos utilizar el método de ayuda que hemos creado antes: {{ question.owner.avatarUri }}
:
// ... lines 1 - 2 | |
{% block body %} | |
// ... lines 4 - 9 | |
<div class="container"> | |
// ... lines 11 - 15 | |
<div class="row"> | |
{% for question in pager %} | |
<div class="col-12 mb-3"> | |
<div style="box-shadow: 2px 3px 9px 4px rgba(0,0,0,0.04);"> | |
<div class="q-container p-4"> | |
<div class="row"> | |
<div class="col-2 text-center"> | |
<img src="{{ question.owner.avatarUri }}" width="100" height="100" alt="{{ question.owner.displayName}} avatar"> | |
// ... lines 24 - 29 | |
</div> | |
// ... lines 31 - 38 | |
</div> | |
</div> | |
// ... lines 41 - 45 | |
</div> | |
</div> | |
{% endfor %} | |
// ... lines 49 - 50 | |
</div> | |
</div> | |
{% endblock %} | |
// ... lines 54 - 55 |
A continuación... hacia abajo, aquí es donde imprimimos el nombre del propietario de la pregunta. Vamos a utilizar question.owner.displayName
:
// ... lines 1 - 2 | |
{% block body %} | |
// ... lines 4 - 9 | |
<div class="container"> | |
// ... lines 11 - 15 | |
<div class="row"> | |
{% for question in pager %} | |
<div class="col-12 mb-3"> | |
<div style="box-shadow: 2px 3px 9px 4px rgba(0,0,0,0.04);"> | |
<div class="q-container p-4"> | |
<div class="row"> | |
// ... lines 22 - 30 | |
<div class="col"> | |
// ... line 32 | |
<div class="q-display p-3"> | |
// ... lines 34 - 35 | |
<p class="pt-4"><strong>--{{ question.owner.displayName }}</strong></p> | |
</div> | |
</div> | |
</div> | |
</div> | |
// ... lines 41 - 45 | |
</div> | |
</div> | |
{% endfor %} | |
// ... lines 49 - 50 | |
</div> | |
</div> | |
{% endblock %} | |
// ... lines 54 - 55 |
100 puntos de experiencia por utilizar dos métodos personalizados seguidos.
Y ahora... ¡nuestra página empieza a parecer real! Haz clic en una pregunta. Hagamos lo mismo para la página del programa. Abre esa plantilla: show.html.twig
.
Para el avatar, utiliza question.owner.avatarUri
:
// ... lines 1 - 4 | |
{% block body %} | |
<div class="container"> | |
<div class="row"> | |
<div class="col-12"> | |
<h2 class="my-4">Question:</h2> | |
<div style="box-shadow: 2px 3px 9px 4px rgba(0,0,0,0.04);"> | |
<div class="q-container-show p-4"> | |
<div class="row"> | |
<div class="col-2 text-center"> | |
<img src="{{ question.owner.avatarUri }}" width="100" height="100" alt="{{ question.owner.displayName}} avatar"> | |
// ... lines 15 - 32 | |
</div> | |
// ... lines 34 - 41 | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
// ... lines 47 - 59 | |
</div> | |
{% endblock %} |
Luego... aquí abajo, para el nombre, {{ question.owner.displayName }}
:
// ... lines 1 - 4 | |
{% block body %} | |
<div class="container"> | |
<div class="row"> | |
<div class="col-12"> | |
<h2 class="my-4">Question:</h2> | |
<div style="box-shadow: 2px 3px 9px 4px rgba(0,0,0,0.04);"> | |
<div class="q-container-show p-4"> | |
<div class="row"> | |
// ... lines 13 - 33 | |
<div class="col"> | |
<h1 class="q-title-show">{{ question.name }}</h1> | |
<div class="q-display p-3"> | |
// ... lines 37 - 38 | |
<p class="pt-4"><strong>--{{ question.owner.displayName }}</strong></p> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
// ... lines 47 - 59 | |
</div> | |
{% endblock %} |
Ah, y se me ha olvidado hacer una cosa. Copia eso, vuelve a subir al avatar... para que también podamos actualizar el atributo alt
:
// ... lines 1 - 4 | |
{% block body %} | |
<div class="container"> | |
<div class="row"> | |
<div class="col-12"> | |
<h2 class="my-4">Question:</h2> | |
<div style="box-shadow: 2px 3px 9px 4px rgba(0,0,0,0.04);"> | |
<div class="q-container-show p-4"> | |
<div class="row"> | |
<div class="col-2 text-center"> | |
<img src="{{ question.owner.avatarUri }}" width="100" height="100" alt="{{ question.owner.displayName}} avatar"> | |
// ... lines 15 - 32 | |
</div> | |
// ... lines 34 - 41 | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
// ... lines 47 - 59 | |
</div> | |
{% endblock %} |
También tengo que hacerlo en la página de inicio... aquí está:
// ... lines 1 - 2 | |
{% block body %} | |
// ... lines 4 - 9 | |
<div class="container"> | |
// ... lines 11 - 15 | |
<div class="row"> | |
{% for question in pager %} | |
<div class="col-12 mb-3"> | |
<div style="box-shadow: 2px 3px 9px 4px rgba(0,0,0,0.04);"> | |
<div class="q-container p-4"> | |
<div class="row"> | |
<div class="col-2 text-center"> | |
<img src="{{ question.owner.avatarUri }}" width="100" height="100" alt="{{ question.owner.displayName}} avatar"> | |
// ... lines 24 - 29 | |
</div> | |
// ... lines 31 - 38 | |
</div> | |
</div> | |
// ... lines 41 - 45 | |
</div> | |
</div> | |
{% endfor %} | |
// ... lines 49 - 50 | |
</div> | |
</div> | |
{% endblock %} | |
// ... lines 54 - 55 |
¡Probemos esto! Actualiza la página y... ¡somos dinámicos!
Crear la página de edición de preguntas
En un sitio real, probablemente vamos a necesitar una página en la que el propietario de esta pregunta pueda editar sus detalles. No vamos a construir esto hasta el final -no quiero sumergirme en el sistema de formularios- pero vamos a ponerlo en marcha. Y esto nos va a llevar a una situación de seguridad realmente interesante.
En src/Controller/QuestionController.php
... encuentra la acción show()
. Vamos a hacer trampa copiando esto y pegándolo. Cambia la URL a /questions/edit/{slug}
, modifica el nombre de la ruta y actualiza el nombre del método. Dentro, sólo hay que renderizar una plantilla: question/edit.html.twig
:
// ... lines 1 - 18 | |
class QuestionController extends AbstractController | |
{ | |
// ... lines 21 - 69 | |
/** | |
* @Route("/questions/edit/{slug}", name="app_question_edit") | |
*/ | |
public function edit(Question $question) | |
{ | |
return $this->render('question/edit.html.twig', [ | |
'question' => $question, | |
]); | |
} | |
// ... lines 79 - 98 | |
} |
¡Genial! En templates/question/
, crea esto: edit.html.twig
.
Pondré una plantilla básica:
{% extends 'base.html.twig' %} | |
{% block title %}Edit Question: {{ question.name }}{% endblock %} | |
{% block body %} | |
<div class="container"> | |
<div class="row"> | |
<div class="col-12"> | |
<h1 class="my-4">Edit Question</h1> | |
<blockquote>{{ question.question }}</blockquote> | |
TODO | |
</div> | |
</div> | |
</div> | |
{% endblock %} |
Aquí no hay nada especial, excepto que estoy imprimiendo el texto de la pregunta dinámica. En realidad no hay un formulario... ya que nos estamos centrando en la seguridad... pero haz como si lo hubiera.
Enlace a la página de edición
Antes de probar esta página, vuelve a la plantilla de presentación de preguntas. Vamos a añadir un enlace de edición para ayudar al propietario. En realidad, busca el h1
. Aquí vamos.
Envuelve esto en un div con class="d-flex justify-content-between"
... y luego ciérralo y haz una sangría:
// ... lines 1 - 4 | |
{% block body %} | |
<div class="container"> | |
<div class="row"> | |
<div class="col-12"> | |
<h2 class="my-4">Question:</h2> | |
<div style="box-shadow: 2px 3px 9px 4px rgba(0,0,0,0.04);"> | |
<div class="q-container-show p-4"> | |
<div class="row"> | |
// ... lines 13 - 33 | |
<div class="col"> | |
<div class="d-flex justify-content-between"> | |
<h1 class="q-title-show">{{ question.name }}</h1> | |
// ... lines 37 - 40 | |
</div> | |
// ... lines 42 - 46 | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
// ... lines 53 - 65 | |
</div> | |
{% endblock %} |
Ahora añade un enlace con href=
path('app_question_edit')
. Y, por supuesto, tenemos que pasarle a esto el comodín: id
ajustado a question.id
. Oh... espera, en realidad, el comodín es slug
:
// ... lines 1 - 18 | |
class QuestionController extends AbstractController | |
{ | |
// ... lines 21 - 69 | |
/** | |
* @Route("/questions/edit/{slug}", name="app_question_edit") | |
*/ | |
public function edit(Question $question) | |
{ | |
// ... lines 75 - 77 | |
} | |
// ... lines 79 - 98 | |
} |
Así que usa slug
ajustado a question.slug
:
// ... lines 1 - 4 | |
{% block body %} | |
<div class="container"> | |
<div class="row"> | |
<div class="col-12"> | |
<h2 class="my-4">Question:</h2> | |
<div style="box-shadow: 2px 3px 9px 4px rgba(0,0,0,0.04);"> | |
<div class="q-container-show p-4"> | |
<div class="row"> | |
// ... lines 13 - 33 | |
<div class="col"> | |
<div class="d-flex justify-content-between"> | |
<h1 class="q-title-show">{{ question.name }}</h1> | |
<a href="{{ path('app_question_edit', { | |
slug: question.slug | |
}) }}" class="btn btn-secondary btn-sm mb-2">Edit</a> | |
</div> | |
// ... lines 42 - 46 | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
// ... lines 53 - 65 | |
</div> | |
{% endblock %} |
Genial. Después, di "Editar"... y dale a esto unas cuantas clases para que quede más bonito.
Gracias a esto... ¡tenemos un botón de edición! Oh, ¡pero necesitamos un poco de margen! Añade mb-2
:
// ... lines 1 - 4 | |
{% block body %} | |
<div class="container"> | |
<div class="row"> | |
<div class="col-12"> | |
<h2 class="my-4">Question:</h2> | |
<div style="box-shadow: 2px 3px 9px 4px rgba(0,0,0,0.04);"> | |
<div class="q-container-show p-4"> | |
<div class="row"> | |
// ... lines 13 - 33 | |
<div class="col"> | |
<div class="d-flex justify-content-between"> | |
// ... lines 36 - 37 | |
<a href="{{ path('app_question_edit', { | |
slug: question.slug | |
}) }}" class="btn btn-secondary btn-sm mb-2">Edit</a> | |
</div> | |
// ... lines 42 - 46 | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
// ... lines 53 - 65 | |
</div> | |
{% endblock %} |
y... mucho mejor. Haz clic en eso. Esta es la página de edición de la pregunta... que en realidad no es una página de edición... pero finge que lo es.
Ahora volvamos al tema de la seguridad. Porque... no podemos dejar que cualquiera acceda a esta página: sólo el propietario de esta pregunta debe poder editarla.
Así que dentro de QuestionController
, necesitamos una comprobación de seguridad. Primero tenemos que asegurarnos de que el usuario está conectado. Hazlo con $this->denyAccessUnlessGranted()
pasando por IS_AUTHENTICATED_REMEMBERED
:
// ... lines 1 - 18 | |
class QuestionController extends AbstractController | |
{ | |
// ... lines 21 - 72 | |
public function edit(Question $question) | |
{ | |
$this->denyAccessUnlessGranted('ROLE_USER'); | |
// ... lines 76 - 82 | |
} | |
// ... lines 84 - 103 | |
} |
Gracias a esto, tenemos garantizado que obtendremos un objeto User
si decimos $this->getUser()
. Podemos utilizarlo: si $question->getOwner()
no es igual a $this->getUser()
, entonces alguien que no es el propietario está intentando acceder a esta página. Niega el acceso con throw $this->createAccessDeniedException()
. Diré:
¡No eres el propietario!
Pero, recuerda, estos mensajes de error sólo se muestran a los desarrolladores:
// ... lines 1 - 18 | |
class QuestionController extends AbstractController | |
{ | |
// ... lines 21 - 72 | |
public function edit(Question $question) | |
{ | |
$this->denyAccessUnlessGranted('ROLE_USER'); | |
if ($question->getOwner() !== $this->getUser()) { | |
throw $this->createAccessDeniedException('You are not the owner!'); | |
} | |
// ... lines 79 - 82 | |
} | |
// ... lines 84 - 103 | |
} |
Vale, pues ahora mismo no estoy conectado en absoluto. Así que si refrescamos, nos devuelve a la página de inicio de sesión. Así que... ¡bien! ¡Acabamos de evitar con éxito que cualquier persona que no sea el propietario acceda a esta página de edición!
Pero... malas noticias amigos: No me gusta esta solución. No me gusta poner ninguna lógica de seguridad manual dentro de mi controlador. ¿Por qué? Porque significa que vamos a tener que repetir esa lógica en Twig para ocultar o mostrar el botón de edición. ¿Y qué pasa si nuestra lógica se vuelve más compleja? ¿Qué pasa si puedes editar una pregunta si eres el propietario o si tienes ROLE_ADMIN
? Ahora tendríamos que actualizar y mantener la lógica duplicada en dos lugares como mínimo. No, no queremos duplicar nuestras reglas de seguridad.
Así que a continuación vamos a aprender sobre el sistema de votantes, que es la clave para centralizar toda esta lógica de autorización de una forma bonita.
Gary Taverner • 6 minutes ago
Hi
At the end of this chapter I found the behaviour when I try to edit a question different from the video. If I'm not authenticated I go to the symfony local server's EOF page (traffic lights, red stripe on blue background # EOF). Searching for 'EOF' in symfony docs gets exactly 0 matches for EOF (which surprised me, and no, 'effective' is not what I was searching for).
Unauthenticated - my question -> # EOF
Authenticated - my question -> app_question_edit
Unauthenticated - not my question -> # EOF
Authenticated - not my question -> 403 Access Denied
The redirection to the login page works if I go to /api/me while unauthenticated.
In the logs I can see that three authenticators are tried and then I'm referred to the entry point which is form_login:
<blockquote>[Application] Aug 6 15:51:17 |DEBUG | SECURI Checking for authenticator support. authenticators=3 firewall_name="main"
[Application] Aug 6 15:51:17 |DEBUG | SECURI Checking support on authenticator. authenticator="App\Security\DummyAuthenticator"
[Application] Aug 6 15:51:17 |DEBUG | SECURI Authenticator does not support the request.
[Application] Aug 6 15:51:17 |DEBUG | SECURI Checking support on authenticator. authenticator="Symfony\Component\Security\Http\Authenticator\FormLoginAuthenticator"
[Application] Aug 6 15:51:17 |DEBUG | SECURI Authenticator does not support the request.
[Application] Aug 6 15:51:17 |DEBUG | SECURI Checking support on authenticator. authenticator="Symfony\Component\Security\Http\Authenticator\RememberMeAuthenticator"
[Application] Aug 6 15:51:17 |DEBUG | SECURI Authenticator does not support the request.
[Application] Aug 6 15:51:17 |DEBUG | DOCTRI SELECT t0.id AS id_1, t0.title AS title_2, t0.slug AS slug_3, t0.question AS question_4, t0.asked_at AS asked_at_5, t0.votes AS votes_6, t0.created_at AS created_at_7, t0.updated_at AS updated_at_8, t0.owner_id AS owner_id_9 FROM question t0 WHERE t0.slug = ? LIMIT 1 0="et-sunt-ut-numquam-sit"
[Application] Aug 6 15:51:17 |DEBUG | SECURI Access denied, the user is not fully authenticated; redirecting to authentication entry point.
[Application] Aug 6 15:51:17 |DEBUG | SECURI Calling Authentication entry point.
[Web Server ] Aug 6 15:51:18 |ERROR | SERVER GET (502) /questions/edit/et-sunt-ut-numquam-sit ip="::1"
</blockquote>
Under form_login in security.yaml I have:
My form_login leads to app_login so I'm mystified as to why this fails. In the address bar I can see the path /questions/edit/et-sunt-ut-numquam-sit. The end of the query looks odd though 't0.slug = ? LIMIT 1 0="et-sunt-ut-numquam-sit"'.
Any ideas?