Personalizar la página de Login

Clase 33 de 38 • Curso de Hibernate y Java Spring 2018

Para personalizar la página de Login de nuestra aplicación se deben tener en cuenta las siguientes consideraciones:

Es preferible no utilizar las tecnologías de Servlets y JSP dentro de un proyecto de Spring Boot debido a que se tiene algunas limitaciones.
Utilizaremos el motor de plantillas Thymeleaf que se integra muy bien con Spring.
Todo el contenido estático debe ser creado bajo el directorio src/main/resources/static como son las hojas de estilos, imágenes etc.
Todas las páginas web deben ser creadas bajo el directorio src/main/resources/templates

Teniendo en cuenta esta premisa vamos a construir nuestro Login. Para lo cual se tiene que realizar los siguientes pasos:

Instalar la dependencia de Thymeleaf en nuestro pom.xml como se muestra a continuación:

Crear un archivo de estilos llamado styles.css y colocarlo en un directorio llamado css bajo el directorio static:

Crear dos páginas web una que representará nuestro login y otro para la página de inicio bajo el directorio de templates, las cuales tendrán el nombre de login.html y home.html respectivamente:

En la página de login se utiliza el tag th:if para validar parámetro de error cuando las credenciales son incorrectas y presentar el mensaje configurado posteriormente en el controlador de login. Y también se utiliza el tag th:action para determinar a qué recurso se llamará para procesar la petición, el cual es el mismo. Adicionalmente es importante que los nombres de los campos de usuario y clave se llamen username y password.

Crear un controlador de vista llamado LoginController.java para validar las peticiones relacionadas con la autentificación y colocarlo en un nuevo paquete llamado com.platzi.ereservation.vista.controllers.

En este controlador se validará dos peticiones la de login y la home a través de la ruta /app/login y /app/home respectivamente. Las cuales se configurarán el clase de seguridad a continuación.

Modificar la clase BasicConfiguration.java que es la clase donde se configure los temas de seguridad para el soporte de Spring Security. En la cual se realizó lo siguiente:

Modificar el método configurar la página de login, error y satisfacción las cuales se enlaza con el controlador Login.

Configurar el método de autentificación, para lo cual utilizamos un método en memoria.

Configurar qué rutas de la aplicación se deben excluir del proceso de login, en la cual están todos los recursos estáticos configurados anteriormente.

Eliminar las propiedades de seguridad relacionadas al nombre de usuario y password en el archivo application.properties. Debido a que se utilizará las definidas en el método de autentificación explicado anteriormente.

Una vez realizado estos pasos, se deberá ejecutar el build del proyecto y se tendrá los siguientes resultados:

Es importante mencionar que el código fuente relacionado a esta lectura la pueden encontrar en el siguiente repositorio.

Jaime Andres Moreno Toro

student•

Buenas noches. En el punto 5, la imagen que corresponde a la indicación "Configurar el método de autenticación, para lo cual utilizamos un método en memoria", no esta completa. Le hace falta ".roles("USER");". Eso me causó errores. Favor actualizar la imagen completa o colocar bloques de texto mejor. Gracias

César Espitia

student•

Muchas gracias kopergroup me salvaste la vida. Acá dejo mi versión del archivo BasicConfiguration.java para el que lo quiera revisar y usar:

package com.platzi.ereservation.util;

import org.springframework.context.annotation.Configuration;
import org.springframework.security.config.annotation.authentication.builders.AuthenticationManagerBuilder;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.builders.WebSecurity;
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;
import org.springframework.security.crypto.factory.PasswordEncoderFactories;
import org.springframework.security.crypto.password.PasswordEncoder;

/**
 * Manages project security
 * @author csar
 */
@Configuration
@EnableWebSecurity
public class BasicConfig extends WebSecurityConfigurerAdapter {

    protected void configure(HttpSecurity httpSecurity) throws Exception {
        httpSecurity.csrf().disable()
            .authorizeRequests()
            .anyRequest()
            .authenticated()
            .and().formLogin()
                .loginPage("/app/login").permitAll()
                .failureUrl("/app/login?error=true")
                .defaultSuccessUrl("/app/home");
    }

    @Override
    protected void configure(AuthenticationManagerBuilder builder) throws Exception {
        PasswordEncoder encoder = PasswordEncoderFactories.createDelegatingPasswordEncoder();
                builder.inMemoryAuthentication()
                        .withUser("csar")
                        .password(encoder.encode("platzi"))
                        .roles("USER");
    }

    @Override
    public void configure(WebSecurity security) {
        security.ignoring()
                .antMatchers("/resources/**", "/static/**", "/css/**", "/js/**", "/images/**");
    }
}

Jherom Chacon

student•

Muchas gracias, lo diste todo!

Arturo Isaac Alamilla Cruz

student•

Si alguien tiene el problema de que no lo redirecciona a /app/home, yo lo que hice fué agregar el segundo parámetro en true a defaultSuccessUrl:
.defaultSuccessUrl("/app/home", true)
y ya con eso me funcionó correctamente.

Saludos.

Juan José Cano Duque

student•

Genio, creí que me iba a acostar sin que me funcionara! pero no gracias a esa obra maestra.

Ronnie Moncayo

student•

Muchas gracias, lo que no se es por qué al profe si le corrió sin eso...

Erika Hernández

student•

Hola compañeros. A mi en lo personal no me funcionó este paso a paso. Se quedaba en la página de login al ingresar las credenciales. Intenté lo sugerido por @arturnoalamilla, y tampoco funcionó.

En la consola me mostraba la siguiente advertencia:

Resolved [org.springframework.web.HttpRequestMethodNotSupportedException: Request method 'POST' not supported]

A partir de esto investigué y encontré que en la clase BasicConfiguration, método configure(HttpSecurity http), faltaba especificar cuál ruta era la que manejaría el método POST del formulario de login, esto se hace con loginProcessingUrl. Quedando así:

	protected void configure(HttpSecurity http) throws Exception  {
		http.csrf().disable()
			.authorizeRequests().anyRequest().authenticated()
			.and()
			.formLogin()
			.loginPage("/app/login")
			.loginProcessingUrl("/app/login")  // <<<<---- AQUI
			.permitAll()
				.failureUrl("/app/login?error=true")
				.defaultSuccessUrl("/app/home"); 
	}

Junior Aguilera

student•

Me gusta este tipo de explicaciones.... platzi deberia tener una opcion aparte del video donde se explica asi (como si fuera una receta de la abuelita xD)

Danner Adib Uribe

student•

Así quedo mi home con un poco de Bootstrap...

Cristian David Franco Garcia

student•

Repositorio del proyecto para que se guien: https://github.com/martosfre/curso_spring_hibernate_platzi

Cesar David Ramírez Dimaté

student•

Te recomiendo que añadas en el gitignore los archivos propios del IDE.

Acá te dejo el mío para que te guies:

https://github.com/cesardramirez/e-reservation

Walberto Moncada

student•

Ok, ¿ahora como hago para que autentique desde los datos que se guardan en ni base de datos?

Walberto Moncada

student•

Me auto contesto. para lograr que los datos los leyera desde la base de datos modifique el metodo configure que recibe de parametro un AuthenticationManagerBuilder y me quedo de la siguiente manera.

<code>
@Autowired
DataSource dataSource;

@Override
protected void configure(AuthenticationManagerBuilder auth) throws Exception {
// CODIGO ORIGINAL
		/*
		PasswordEncoder encoder = PasswordEncoderFactories.createDelegatingPasswordEncoder();
			
		auth.inMemoryAuthentication()
			.withUser("w")
			.password(encoder.encode("1"))
			.roles("USER");
			
		*/	
		
		auth
			.jdbcAuthentication()
			.dataSource(dataSource)
			.usersByUsernameQuery("select codusuario as username, claveweb as password, estado as enabled from sg_usuario WHERE codusuario=?")
			.authoritiesByUsernameQuery("SELECT ? as username, 'USER' as ROLE")
			.passwordEncoder(new BCryptPasswordEncoder());
	}

Claro que con este código todos los usuarios son tratados con rol de USER, para guardar todo esto les dejo los scrpits de la base que están en la documentación oficial.

<code>
create table users(
	username varchar_ignorecase(50) not null primary key,
	password varchar_ignorecase(200) not null,
	enabled boolean not null
);

create table authorities (
	username varchar_ignorecase(50) not null,
	authority varchar_ignorecase(50) not null,
	constraint fk_authorities_users foreign key(username) references users(username)
);

Jhon Mario Ochoa Lemus

student•

Hola. Para complementar con otro ejemplo, también busque y encontré esta manera, donde al rol lo toma de BD y puede ser perzonaliado: https://medium.com/@gustavo.ponce.ch/spring-boot-spring-mvc-spring-security-mysql-a5d8545d837d

Daniel Arturo Salinas Verduzco

student•

¿Se puede validar la autenticación con los usuarios guardados en una base de datos?

Diego Forero

Team Platzi•

Claro, es la forma correcta de hacerlo, recibes el usuario y contraseña y validas que existan en la base de datos, si no existe lanzas un error que el nombre de usuario o contraseña están equivocados que intente nuevamente.

Luis Fernando Pedroza Taborda

student•

Exactamente pienso lo mismo que Diego, inclusive en las empresas que he trabajado destinan un microservicio para la autenticacion y segurida mediante un token

Ramiro Vargas

student•

Me sale este error javax.servlet.ServletException: Circular view path [login]: would dispatch back to the current handler URL [/app/login] again. Check your ViewResolver setup!

Al parecer no se esta rediregiendo al login

Cristobal Vega

student•

X2 :'v

Cristobal Vega

student•

Si alguien más tiene este error revisen el archivo pom.xml, el plugin que están trayendo debe ser así:

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-thymeleaf</artifactId>
		</dependency>

Espero les sirva. :nerd_face:

Andres Felipe Marulanda Cortes

student•

Se puede delimitar la cantidad de sesiones activas que se puede tener un usuario??

Me refiero a que en el caso de que yo realice el login en un browser A si quiero despues loguearme en un browser B no me permita loguearme en el browser B hasta que cierre la sesión en el browser A.

Espero y se entienda mi inquietud.

Saludos

Edwar Baron

Team Platzi•

Hola, si se puede, se me ocurre esta forma de hacerlo:

Puedes crear un token asociado al usuario apenas haga login, y a su vez, inactiva los token que tenga activos el usuario; luego cuando ingreses desde otro navegador, al no dectectar la session iniciada, tendras que hacer login, y como se inactivan los tokens anteriores, en el primer navegador que ingresaste la session no sera validad.

Marco Antonio Toscano Freire

teacher•

Estimado Andrés, Se debe entender que cada browser es un cliente en el cual se establece una sesión que es válida en ese browser, si te conectas desde otro browser se establecerá otra sesión, para controlar eso lo he realizado a nivel de base de datos; es decir, si un usuario se logea en un browser cuando pase la autentificación le coloco un valor de 1 en una colunma de la tabla usuario llamada logeado, entonces cuando alguien quiere logearse desde otro browser no va a poder hasta que se cierre la sesiòn y se pongo en 0 la columna otra vez. Ahora si quieres sacar a todas las sesiones conectadas deberìas utilizar notificaciones push, existe un framework llamado Atmosphere

Robin Arellano

student•

Hola a todos, tengo un problema al ejecutar el proyecto.
aunque he seguido todos los pasos al compilar me esta generando una clave aleatoria para ingresar con el usuario “user” y no me utiliza mi configuración.

PasswordEncoder encoder = PasswordEncoderFactories.createDelegatingPasswordEncoder();

auth.inMemoryAuthentication().withUser("admin").password(encoder.encode("platzi")).roles("USER");

Marco Antonio Toscano Freire

teacher•

Robin debes eliminar las credenciales del archivo properties, también verificale los archivos de configuración en el repositorio.

Cesar David Ramírez Dimaté

student•

Yo lo que hice fue comentarlas, cuando comentó el profesor que la iba a usar acá.

ARIEL RICARDO MOLINAS LEZCANO

student•

En el paso 5 punto dos Tengo el siguiente error de compilación:

Description Resource Path Location Type
The method createDelegatingPasswordEncoder() in the type PasswordEncoderFactories is not applicable for the arguments (UserDetailsManagerConfigurer<AuthenticationManagerBuilder,InMemoryUserDetailsManagerConfigurer<AuthenticationManagerBuilder>>.UserDetailsBuilder) BasicConfiguration.java /e-reservation/src/main/java/com/platzi/ereservation/util line 45 Java Problem

Me ayudar a resolver. Gracias!

Antonio Perez Jr

student•

@Override
protected void configure(AuthenticationManagerBuilder auth) throws Exception {
PasswordEncoder encoder = PasswordEncoderFactories.createDelegatingPasswordEncoder();
auth.inMemoryAuthentication().withUser(“NameUser”).password(encoder.encode(“Password”)).roles(“USER”);
}

Esta es la forma en la que se resuelve ese pequeño detalle, ya que el método createDelegatingPasswordEncoder(), no espera ningún parametro.
Sólo es para encodificar el password.

Christian Pearson

student•

Buenas, mi pregunta es si ya esta rest está lista para ser consumida por un framework de frontend?

Marco Antonio Toscano Freire

teacher•

Si Christian, ahora lo que tendrías que hacer es generar un cliente para consumirle en el front

JOSE ADRIAN TEZOYOTL MORALES

student•

Los 3 configure van dentro de la clase BasicConfiguration.java vdd?

JESUS ALMIRCAR CASTELLANOS

student•

🔥Ir a repositorio
🔥Ir a repositorio

Leonel Lopez

student•

no me redirecciona directamente a /app/home "This application has no explicit mapping for /error, so you are seeing this as a fallback."

Yojan Antonio Pardo Zabala

student•

Es posible que tu error se deba a que no guardaste los archivos html en el directorio templates, asegurate de eso.

Rubén Zamora González

student•

A mi hay momentos que me pasa, pero recargando la página o poniendo el path /app/home directamente, sí que me lo coge, y a la segunda vez que hago la prueba funciona bien.

Un poco raro 🤪

Yossijaki Jorge Astilleros Chávez

student•

Gran explicación de instalación y configuración.

Noe de Jesus Muñoz Martinez

student•

Muy buena explicación!!!

Teddy Everson Sipra Morgado

student•

Me funciono todo correctamente, .defaultSuccessUrl("/app/home", true), no tube necesidad de colocar eso.

Luis Fernando Pedroza Taborda

student•

Ahi vamos.