Angular: 29. Auth0. Mostrar los datos del perfil de un usuario registrado

Vamos a ver cómo mostrar los datos del usuario que se encuentre registrado en la aplicación.

Vamos a seguir con la aplicación anterior. Lo primero que vamos a hacer es entrar de nuevo en la web de Auth0, y dentro de nuestra aplicación, nos dirigimos a la sección del perfil de usuarios:

Nos llevará a una página con instrucciones para mostrar los datos de los usuarios registrados. Sin embargo, vamos a verlos aquí.

Lo primero que tenemos que modificar es el "scope" del "WebAuth" del "AuthService" añadiéndole la palabra "profile":

Así que lo modificamos en nuestro servicio:

A continuación nos indica que debemos añadir una propiedad y un método en el mismo servicio:

Así que los copiamos y los añadimos tal cual:

Por último, debemos modificar el componente que queramos utilizar para mostrar los datos del perfil (en nuestro caso el componente "ProtegidaComponent"), añadiendo la propiedad "profile", inyectando el servicio "AuthService", y modificando el método "ngOnInit" del componente para que llame a la función del servicio que nos devolverá los datos del perfil:

Así que modificamos nuestro componente como nos indican:

Ahora modificamos el html del componente para que muestre los datos del perfil:

Y éste es el resultado:

Como se puede ver, aparecen todos los datos del perfil registrado.

Ahora sólo queda modificar el html del componente para que los datos aparezcan de forma "más bonita":

Y éste es el resultado:

Y eso sería todo.