English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
En esta sección, crearemos una aplicación web de inicio de sesión y salida. La aplicación incluye formularios de registro e inicio de sesión. En esta integración, usamos Spring para manejar la parte trasera, y Angular para manejar la parte frontal.
Una vez que desplegamos la aplicación en el servidor, se generará una página de bienvenida que contendrá dos enlaces-Registro y inicio de sesión.Los nuevos usuarios pueden elegir registrarse y registrarse llenando los detalles requeridos.Sin embargo, los usuarios existentes pueden iniciar sesión utilizando su ID de correo electrónico y contraseña.Después de iniciar sesión, podemos obtener los detalles del usuario existente.Por último, podemos salir del estado actual haciendo clic en el enlace de desconexión.
Usar cualquier IDE para desarrollar proyectos Spring y Hibernate. Puede ser MyEclipse/Eclipse/Netbeans. Aquí, estamos utilizando Eclipse。Para la base de datos MySQL.Usar cualquier IDE para desarrollar proyectos Angular. Puede ser Visual Studio Code/Sublime. Aquí, estamos utilizando Visual Studio Code。Servidor: Apache Tomcat/JBoss/Glassfish/Weblogic/Websphere。
Aquí, estamos utilizando las siguientes tecnologías:
Spring5 Hibernate5 Angular6 MYSQL
Vamos a crear la base de datos loginlogoutexample 。No es necesario crear tablas, ya que Hibernate lo creará automáticamente。
Veamos la estructura de directorios de Spring que debemos seguir:
Para desarrollar una aplicación de inicio de sesión y salida, siga los siguientes pasos: -
Añadir dependencias al archivo pom.xml.
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>com.w3codebox</groupId> <artifactId>LoginLogoutExample/artifactId> <packaging>war</packaging> <version>0.0.1-SNAPSHOT</version> <name>LoginLogoutExample Maven Webapp/name> <url>http://maven.apache.org/url> <properties> <springframework.version>5.0.6.RELEASE</springframework.version> <hibernate.version>5.2.16.Final</hibernate.version> <mysql.connector.version>5.1.45</mysql.connector.version> <c3po.version>0.9.5.2</c3po.version> <maven.compiler.source>1.8</maven.compiler.source> <maven.compiler.target>1.8</maven.compiler.target> </properties> <dependencies> <!-- Spring --> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-webmvc</artifactId> <version>${springframework.version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-tx</artifactId> <version>${springframework.version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-orm</artifactId> <version>${springframework.version}</version> </dependency> <!-- Añadir Jackson para convertidores JSON --> <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-databind</artifactId> <version>2.9.5</version> </dependency> <!-- Hibernate --> <dependency> <groupId>org.hibernate</groupId> <artifactId>hibernate-core</artifactId> <version>${hibernate.version}</version> </dependency> <!-- MySQL --> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <version>${mysql.connector.version}</version> </dependency> <!-- C3PO --> <dependency> <groupId>com.mchange</groupId> <artifactId>c3p0</artifactId> <version>${c3po.version}</version> </dependency> <!-- Servlet+JSP+JSTL --> <dependency> <groupId>javax.servlet</groupId> <artifactId>javax.servlet-api</artifactId> <version>3.1.0</version> </dependency> <dependency> <groupId>javax.servlet.jsp</groupId> <artifactId>javax.servlet.jsp-api</artifactId> <version>2.3.1</version> </dependency> <dependency> <groupId>javax.servlet</groupId> <artifactId>jstl</artifactId> <version>1.2</version> </dependency> <!-- to compensate for java 9 not including jaxb --> <dependency> <groupId>javax.xml.bind</groupId> <artifactId>jaxb-api</artifactId> <version>2.3.0</version> </dependency> <!-- Web token dependency --> <dependency> <groupId>io.jsonwebtoken</groupId> <artifactId>jjwt</artifactId> <version>0.9.1</version> </dependency> <!-- JUnit dependency --> <dependency> <groupId>junit</groupId> <artifactId>junit</artifactId> <version>3.8.1</version> <scope>test</scope> </dependency> <!-- https://mvnrepository.com/artifact/org.apache.commons/commons-dbcp2 --> <dependency> <groupId>org.apache.commons</groupId> <artifactId>commons-dbcp2</artifactId> <version>2.0</version> </dependency> </dependencies> <build> <finalName>LoginLogoutExample</finalName> </build> </project>
创建配置类
我们执行基于注释的配置,而不是XML。因此,我们创建两个类并在其中指定所需的配置。
DemoAppConfig.java
package com.w3codebox.LoginLogoutExample.config; import java.beans.PropertyVetoException; import java.util.Properties; import javax.sql.DataSource; import org.hibernate.SessionFactory; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.ComponentScan; import org.springframework.context.annotation.Configuration; import org.springframework.context.annotation.PropertySource; import org.springframework.core.env.Environment; import org.springframework.orm.hibernate5.HibernateTransactionManager; import org.springframework.orm.hibernate5.LocalSessionFactoryBean; import org.springframework.transaction.annotation.EnableTransactionManagement; import org.springframework.web.servlet.config.annotation.EnableWebMvc; import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; import com.mchange.v2.c3p0.ComboPooledDataSource; @Configuration @EnableWebMvc @EnableTransactionManagement @ComponentScan("com.w3codebox.LoginLogoutExample") @PropertySource(value = { "classpath:persistence-mysql.properties" }) @PropertySource(value = { "classpath:persistence-mysql.properties" }) @PropertySource(value = { "classpath:application.properties" }) public class DemoAppConfig implements WebMvcConfigurer { @Autowired private Environment env; @Bean public DataSource myDataSource() { // crear pool de conexión ComboPooledDataSource myDataSource = new ComboPooledDataSource(); // establecer el driver jdbc try { myDataSource.setDriverClass("com.mysql.jdbc.Driver"); } catch (PropertyVetoException exc) { lanzar new RuntimeException(exc); } // establecer propiedades de conexión de base de datos myDataSource.setJdbcUrl(env.getProperty("jdbc.url")); myDataSource.setUser(env.getProperty("jdbc.user")); myDataSource.setPassword(env.getProperty("jdbc.password")); // establecer propiedades de pool de conexión myDataSource.setInitialPoolSize(getIntProperty("connection.pool.initialPoolSize")); myDataSource.setMinPoolSize(getIntProperty("connection.pool.minPoolSize")); myDataSource.setMaxPoolSize(getIntProperty("connection.pool.maxPoolSize")); myDataSource.setMaxIdleTime(getIntProperty("connection.pool.maxIdleTime")); regresar myDataSource; } private Properties getHibernateProperties() { // establecer propiedades de hibernate Properties props = new Properties(); props.setProperty("hibernate.dialect", env.getProperty("hibernate.dialect")); props.setProperty("hibernate.show_sql", env.getProperty("hibernate.show_sql")); props.setProperty("hibernate.format_sql", env.getProperty("hibernate.format_sql")); props.setProperty("hibernate.hbm2ddl.auto", env.getProperty("hibernate.hbm2ddl")); volver props; } // necesito un método auxiliar // leer la propiedad del entorno y convertirla a int private int getIntProperty(String propName) { String propVal = env.getProperty(propName); // ahora convertir a int int intPropVal = Integer.parseInt(propVal); volver intPropVal; } @Bean public LocalSessionFactoryBean sessionFactory(){ // crear fábrica de sesión LocalSessionFactoryBean sessionFactory = new LocalSessionFactoryBean(); // establecer las propiedades sessionFactory.setDataSource(myDataSource()); sessionFactory.setPackagesToScan(env.getProperty("hibernate.packagesToScan")); sessionFactory.setHibernateProperties(getHibernateProperties()); return sessionFactory; } @Bean @Autowired public HibernateTransactionManager transactionManager(SessionFactory sessionFactory) { // configurar el administrador de transacciones basado en el fábrica de sesiones HibernateTransactionManager txManager = new HibernateTransactionManager(); txManager.setSessionFactory(sessionFactory); return txManager; } }
MySpringMvcDispatcherServletInitializer.java
package com.w3codebox.LoginLogoutExample.config; import org.springframework.web.servlet.support.AbstractAnnotationConfigDispatcherServletInitializer; public class MySpringMvcDispatcherServletInitializer extends AbstractAnnotationConfigDispatcherServletInitializer { @Override protected Class<?>[] getRootConfigClasses() { // TOdo Auto-método de plantilla generado return null; } @Override protected Class<?>[] getServletConfigClasses() { return new Class[] { DemoAppConfig.class }; } @Override protected String[] getServletMappings() { return new String[] { "/" }; } }
Crear clase de entidad
Aquí, crearemos las siguientes clases de entidad: AdminDetail.java-Esto es una Entity/Clase POJO (objeto Java ordinario y viejo). Token.java-Para la autenticación.
AdminDetail.java
package com.w3codebox.LoginLogoutExample.entity; import javax.persistence.Column; import javax.persistence.Entity; import javax.persistence.GeneratedValue; import javax.persistence.GenerationType; import javax.persistence.Id; import javax.persistence.Table; @Entity @Table(name="admin_detail") public class AdminDetail { @Id @GeneratedValue(strategy=GenerationType.AUTO) @Column(name="admin_id") private int adminID; @Column(name="email_id", unique=true) public String emailId; @Column(name="name") public String name; @Column(name="password") public String password; @Column(name="role") public String role; public AdminDetail() { } public AdminDetail(int adminID, String emailId, String name, String password, String role) { super(); this.adminID = adminID; this.emailId = emailId; this.name = name; this.password = password; this.role = role; } public int getAdminID() { return adminID; } public void setAdminID(int adminID) { this.adminID = adminID; } public String getEmailId() { return emailId; } public void setEmailId(String emailId) { this.emailId = emailId; } public String getName() { return name; } public void setName(String name) { this.name = name; } public String getPassword() { return password; } public void setPassword(String password) { this.password = password; } public String getRole() { return role; } public void setRole(String role) { this.role = role; } @Override public String toString() { return "AdminDetail [adminID=" + adminID + ", emailId=" + emailId + ", name=" + name + ", password=" + password + ", role=" + role + "]"; } }
Token.java
package com.w3codebox.LoginLogoutExample.entity; import javax.persistence.Column; import javax.persistence.Entity; import javax.persistence.GeneratedValue; import javax.persistence.GenerationType; import javax.persistence.Id; import javax.persistence.Table; @Entity @Table(name="Token") public class Token { @Id @GeneratedValue(strategy=GenerationType.AUTO) @Column(name="token_id") private int tokenID; @Column(name="user_id", unique=true) private int userID; @Column(name="authenticationToken") private String authenticationToken; @Column(name="secretKey") private String secretKey; @Column(name="email_id") private String emailId; public Token() { } public Token(int tokenID, int userID, String authenticationToken, String secretKey, String emailId) { super(); this.tokenID = tokenID; this.userID = userID; this.authenticationToken = authenticationToken; this.secretKey = secretKey; this.emailId = emailId; } public int getTokenID() { return tokenID; } public void setTokenID(int tokenID) { this.tokenID = tokenID; } public int getUserID() { return userID; } public void setUserID(int userID) { this.userID = userID; } public String getAuthenticationToken() { return authenticationToken; } public void setAuthenticationToken(String authenticationToken) { this.authenticationToken = authenticationToken; } public String getSecretKey() { return secretKey; } public void setSecretKey(String secretKey) { this.secretKey = secretKey; } public String getEmailId() { return emailId; } public void setEmailId(String emailId) { this.emailId = emailId; } @Override public String toString() { return \ + tokenID + ", userID=" + userID + ", authenticationToken=" + authenticationToken + ", secretKey=" + secretKey + ", emailId=" + emailId + "]"; } }
创建DAO接口
Aquí, crearemos dos interfaces DAO para ejecutar operaciones relacionadas con la base de datos.
AdminDAO.java
package com.w3codebox.LoginLogoutExample.DAO.interfaces; import java.util.List; import com.w3codebox.LoginLogoutExample.entity.AdminDetail; public interface AdminDAO { public int saveAdminDetail(AdminDetail adminDetail); public int adminLogin(String emailId, String password); public List<AdminDetail> getAdminData(); }
TokenDAO.java
package com.w3codebox.LoginLogoutExample.DAO.interfaces; public interface TokenDAO { public void saveUserEmail(String email, int adminId); public boolean updateToken(String email, String authenticationToken, String secretKey); public int getTokenDetail(String email); public int tokenAuthentication(String token, int emailId); }
创建DAO接口实现类
AdminDAOImpl.java
package com.w3codebox.LoginLogoutExample.DAO.implementation; import java.util.List; import org.hibernate.Session; import org.hibernate.SessionFactory; import org.hibernate.query.Query; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Repository; import com.w3codebox.LoginLogoutExample.DAO.interfaces.AdminDAO; import com.w3codebox.LoginLogoutExample.entity.AdminDetail; @Repository("adminDAO") public class AdminDAOImpl implements AdminDAO { // Autowired SessionFactory Object So that we can get session object used for interaction with Database. @Autowired SessionFactory sessionFactory; /* * Registrar detalles de administrador. */ public int saveAdminDetail(AdminDetail adminDetail) { Session session = null; try { session = sessionFactory.getCurrentSession(); int id = (Integer) session.save(adminDetail); return id; } catch(Exception exception) { System.out.println("Excecption while saving admin Details:"); + exception.getMessage()); return 0; } finally { session.flush(); } } public int adminLogin(String emailId, String password) { Session session = null; try { session = sessionFactory.getCurrentSession(); Query query = session.createQuery("from AdminDetail where emailId=:emailId and password=:password"); query.setParameter("emailId", emailId); query.setParameter("password", password); List<AdminDetail> list = query.list(); int size = list.size(); if(size == 1)}} { return list.get(0).getAdminID(); } else { return -1; } } catch(Exception exception) { System.out.println("Excecption while saving admin Details:"); + exception.getMessage()); return 0; } finally { session.flush(); } } public List<AdminDetail> getAdminData() { Session session = null; try { session = sessionFactory.getCurrentSession(); Query<AdminDetail> query = session.createQuery("from AdminDetail"); List<AdminDetail> list = query.list(); if(list.size() > 0) { return list; } else { return null; } } catch(Exception exception) { System.out.println("Excecption while saving admin Details:"); + exception.getMessage()); return null; } finally { session.flush(); } } }
TokenDAOImpl.java
package com.w3codebox.LoginLogoutExample.DAO.implementation; import java.util.List; import org.hibernate.Session; import org.hibernate.SessionFactory; import org.hibernate.query.Query; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Repository; import com.w3codebox.LoginLogoutExample.DAO.interfaces.TokenDAO; import com.w3codebox.LoginLogoutExample.entity.Token; @Repository("tokenDAO") public class TokenDAOImpl implements TokenDAO { @Autowired SessionFactory sessionFactory; public void saveUserEmail(String email, int adminId) { Session session = null; try { session = sessionFactory.getCurrentSession(); Token t = new Token(); t.setUserID(adminId); t.setEmailId(email); session.save(t); } catch(Exception exception) { System.out.println("Exception in saving UserEmail In Token Table :: "); + exception.getMessage()); } finally { session.flush(); } } public boolean updateToken(String email, String authenticationToken, String secretKey) { Session session = null; try { session = sessionFactory.getCurrentSession(); Query theQuery = null; theQuery = session.createQuery("Update Token set authenticationToken = :authenticationToken, secretKey = :secretKey where emailId = :userEmail "); theQuery.setParameter("authenticationToken", authenticationToken); theQuery.setParameter("userEmail", email); theQuery.setParameter("secretKey", secretKey); int result = theQuery.executeUpdate(); if(result == 1)}} { return true; } else { return false; } } catch(Exception exception) { System.out.println("Error while updating token :: "); + exception.getMessage()); return false; } finally { session.flush(); } } public int getTokenDetail(String email) { Session session = null; try { session = sessionFactory.getCurrentSession(); Query<Token> query = session.createQuery("from Token where emailId = :userEmail"); query.setParameter("userEmail", email); List<Token> tokenDetails = query.list(); if(tokenDetails.size() > 0) { return tokenDetails.get(0).getTokenID(); } else { return 0; } } catch(Exception exception) { System.out.println("Exception while getting token ID :: "); + exception.getMessage()); } finally { session.flush(); } return 0; } public int tokenAuthentication(String token, int emailId) { Session session = null; try { session = sessionFactory.getCurrentSession(); Query query = session.createQuery("from Token where userID = :userID and authenticationToken = :token"); query.setParameter("userID", emailId); query.setParameter("token", token); List<Token> tokenDetails = query.list(); if(tokenDetails.size() > 0) { return tokenDetails.get(0).getTokenID(); } else { return 0; } } catch(Exception exception) { System.out.println("Exception while Authenticating token :: ");+ exception); return 0; } finally { session.flush(); } } }
创建服务层接口
在这里,我们正在创建充当DAO和Entity类之间桥梁的服务层接口。
AdminService.java
package com.w3codebox.LoginLogoutExample.service.interfaces; import java.util.List; import com.w3codebox.LoginLogoutExample.entity.AdminDetail; public interface AdminService { public int saveAdminDetail(AdminDetail adminDetail); public int adminLogin(String emailId, String password); public List<AdminDetail> getAdminData(); }
TokenService.java
package com.w3codebox.LoginLogoutExample.service.interfaces; public interface TokenService { public void saveUserEmail(String email, int adminId); public boolean updateToken(String email, String authenticationToken, String secretKey); public int getTokenDetail(String email); public int tokenAuthentication(String token, int emailId); }
创建服务层实现类
AdminServiceImpl.java
package com.w3codebox.LoginLogoutExample.service.implementation; import java.util.List; import javax.transaction.Transactional; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import com.w3codebox.LoginLogoutExample.DAO.interfaces.AdminDAO; import com.w3codebox.LoginLogoutExample.entity.AdminDetail; import com.w3codebox.LoginLogoutExample.service.interfaces.AdminService; @Service("adminService") public class AdminServiceImpl implements AdminService { @Autowired private AdminDAO adminDAO; @Transactional public int saveAdminDetail(AdminDetail adminDetail) { return adminDAO.saveAdminDetail(adminDetail); } @Transactional public int adminLogin(String emailId, String password) { return adminDAO.adminLogin(emailId, password); } @Transactional public List<AdminDetail> getAdminData() { return adminDAO.getAdminData(); } }
TokenServiceImpl.java
package com.w3codebox.LoginLogoutExample.service.implementation; import javax.transaction.Transactional; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import com.w3codebox.LoginLogoutExample.DAO.interfaces.TokenDAO; import com.w3codebox.LoginLogoutExample.service.interfaces.TokenService; @Service("tokenService") public class TokenServiceImpl implements TokenService { @Autowired private TokenDAO tokenDAO; @Transactional public void saveUserEmail(String email, int adminId) { tokenDAO.saveUserEmail(email, adminId); } @Transactional public boolean updateToken(String email, String authenticationToken, String secretKey) { return tokenDAO.updateToken(email, authenticationToken, secretKey); } @Transactional public int getTokenDetail(String email) { return tokenDAO.getTokenDetail(email); } @Transactional public int tokenAuthentication(String token, int emailId) { return tokenDAO.tokenAuthentication(token, emailId); } }
Clase de creación de tokens
GenerateToken.java
package com.javavtpoint.LoginLogoutExample.Token; import javax.crypto.spec.SecretKeySpec; import javax.xml.bind.DatatypeConverter; import java.security.Key; import java.util.Date; import java.util.Random; import io.jsonwebtoken.*; public class GenerateToken { public String[] createJWT(String id, String issuer, String subject, String role, long ttlMillis) { //El algoritmo de firma JWT que utilizaremos para firmar el token SignatureAlgorithm signatureAlgorithm = SignatureAlgorithm.HS256; long nowMillis = System.currentTimeMillis(); Date now = new Date(nowMillis); Random random = new Random(); String secretKey = id + Integer.toString(random.nextInt(1000)); byte[] apiKeySecretBytes = DatatypeConverter.parseBase64Binario(secretKey); Firma de clave signingKey = null; try{ signingKey = new SecretKeySpec(apiKeySecretBytes, signatureAlgorithm.getJcaName()); } catch(Exception e) { System.out.println("Excepción al generar la clave " + e.getMessage()); } JwtBuilder builder = Jwts.builder().setId(id) .setIssuedAt(now) .setSubject(subject) .setIssuer(issuer) .setPayload(role) .signWith(signatureAlgorithm, signingKey); //si se ha especificado, agreguemos la expiración if (ttlMillis >= 0) { long expMillis = nowMillis + ttlMillis; Date exp = new Date(expMillis); builder.setExpiration(exp); } String[] tokenInfo = {builder.compact(), secretKey}; return tokenInfo; } }
Crear la clase controladora
AdminController.java
package com.w3codebox.LoginLogoutExample.restController; import java.util.List; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.http.HttpHeaders; import org.springframework.http.HttpStatus; import org.springframework.http.ResponseEntity; import org.springframework.web.bind.annotation.CrossOrigin; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.PathVariable; import org.springframework.web.bind.annotation.PostMapping; import org.springframework.web.bind.annotation.RequestBody; import org.springframework.web.bind.annotation.RequestHeader; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import com.w3codebox.LoginLogoutExample.entity.AdminDetail; import com.w3codebox.LoginLogoutExample.service.interfaces.AdminService; import com.w3codebox.LoginLogoutExample.service.interfaces.TokenService; import com.javavtpoint.LoginLogoutExample.Token.GenerateToken; @RestController @RequestMapping("/api") @CrossOrigin(origins = "http://localhost:4200", allowedHeaders = ")*", exposedHeaders = "Authorization") public class AdminController { @Autowired private AdminService adminService; @Autowired private TokenService tokenService; GenerateToken generateToken = new GenerateToken(); @PostMapping("/saveAdmin") public int saveAdminDetail(@RequestBody AdminDetail adminDetail) { return adminService.saveAdminDetail(adminDetail); } @PostMapping("/login") public ResponseEntity<Integer> login(@RequestBody AdminDetail adminDetail) { int status; HttpHeaders httpHeader = null; // Autenticar Usuario. status = adminService.adminLogin(adminDetail.getEmailId(), adminDetail.getPassword()); /* * si el Usuario está autenticado, realice la tarea de Autorización. */ if (status > 0) { /* * Generar token. */ String tokenData[] = generateToken.createJWT(adminDetail.getEmailId(), "w3codebox", "JWT Token", adminDetail.getRole(), 43200000); // Obtener el Token. String token = tokenData[0]; System.out.println("Authorization :: ", + token); // Cree el objeto Encabezado. httpHeader = new HttpHeaders(); // Añada el token al encabezado. httpHeader.add("Authorization", token); // Verifique si el token ya existe. long isUserEmailExists = tokenService.getTokenDetail(adminDetail.getEmailId()); /* * si el token existe, actualice Token, de lo contrario, cree e inserte el token. */ if (isUserEmailExists > 0)} { tokenService.updateToken(adminDetail.getEmailId(), token, tokenData[1]); } else { tokenService.saveUserEmail(adminDetail.getEmailId(), status); tokenService.updateToken(adminDetail.getEmailId(), token, tokenData[1]); } return new ResponseEntity<Integer>(status, httpHeader, HttpStatus.OK); } // if not authenticated return status what we get. else { return new ResponseEntity<Integer>(status, httpHeader, HttpStatus.OK); } } @GetMapping("/getAdminData/{adminId} public List<AdminDetail> getAdminData(@PathVariable int adminId, @RequestHeader("Authorization") String authorizationToken) { String token[] = authorizationToken.split(" "); int result = tokenService.tokenAuthentication(token[1], adminId); if (result > 0) { return adminService.getAdminData(); } else { return null; } } }
Crear archivo de propiedades
Aquí estamos creando el archivo de propiedades en el proyecto. src/main/resources se crea el archivo de propiedades. A continuación se encuentra la configuración de conexión en espera.
persistence-mysql.properties
## Propiedades de conexión JDBC # jdbc.driver=com.mysql.jdbc.Driver jdbc.url=jdbc:mysql://localhost:3306/loginlogoutexample?useSSL=false jdbc.user=root jdbc.password= ## Propiedades de la conexión pool # connection.pool.initialPoolSize=5 connection.pool.minPoolSize=5 connection.pool.maxPoolSize=20 connection.pool.maxIdleTime=3000 ## propiedades de Hibernate # <!-- hibernate.dialect=org.hibernate.dialect.MySQLDialect --> hibernate.dialect=org.hibernate.dialect.MySQL5Dialect hibernate.show_sql=true hibernate.format_sql=true hibernate.hbm2ddl=update hibernate.packagesToScan=com.w3codebox.LoginLogoutExample.entity
Vamos a ver la estructura de directorios de Angular:
Crear un proyecto Angular
Vamos a usar las siguientes órdenes para crear un proyecto Angular:
Aquí, LoginLogoutExample es el nombre
Utilice las siguientes órdenes para instalar Bootstrap en el proyecto.
npm install bootstrap @ 3.3.7 --guardar
Ahora, incluya el siguiente código en el archivo style.css.
@import "~bootstrap/dist/css/bootstrap.css";
Generar componentes
Abra el proyecto en Visual Studio y utilice las siguientes órdenes para generar los siguientes componentes Angular:
ng gc página principal
ng gc inicio de sesión
ng gc registro
ng gc archivo de configuración
También utilizamos las siguientes órdenes para crear el tipo de servicio: -
ng gs services/Admin
editar app.module.ts archivo Implementar rutas-Aquí, importaremos @ angular/router del paquete RouterModule y definir la ruta en el array de imports. Importar ReactiveFormsModule -Aquí, importaremos ReactiveFormsModule para reacciones y especificarlo en el array de imports. Importar HttpModule -Aquí, importamos HttpModule para las solicitudes del servidor HttpModule y especificarlo en el array de importaciones. Registrar el tipo de servicio-Aquí, mencionamos el tipo de servicio en el array de proveedores.
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; // import Http module import { HttpModule} from '@angular/http'; // import ReactiveFormsModule for reactive form import { ReactiveFormsModule } from '@angular/forms'; // import module for Routing. import { RouterModule } from '@angular/router'; import { AppComponent } from './app.component'; import { LoginComponent } from './login/login.component'; import { HomeComponent } from './home/home.component'; import { SignupComponent } from './signup/signup.component'; import { AdminService } from './services/admin.service'; import { ProfileComponent } from './profile/profile.component'; @NgModule({ declarations: [ AppComponent, LoginComponent, HomeComponent, SignupComponent, ProfileComponent ], imports: [ BrowserModule, ReactiveFormsModule, HttpModule, RouterModule.forRoot([ { path : '', component : HomeComponent }, { path : 'login', component : LoginComponent }, { path : 'signup', component : SignupComponent }, { path: 'profile'/:adminId', component: ProfileComponent } ]) ], providers: [ AdminService ], bootstrap: [AppComponent] }) export class AppModule { }
editar app.component.html archivo
<router-outlet></router-outlet>
editar home.component.html archivo
Esta es la página de bienvenida de la aplicación, que incluye dos enlaces-"Registro" y "Inicio de sesión".
<div estilo="text-align: center"> <h2> <a [routerLink]="['/signup']">SignUp</a> <br><br> </h2> <h2> <a [routerLink]="['/login']">Login</a> <br><br> </h2> </div>
crear AdminDetail.ts clase
usaremos el siguiente comando para crear una clase: -
ahora, en AdminDetail especificar los campos obligatorios en la clase.
export class AdminDetail { emailId: string; name: string; password: string; role: string; }
Este tipo de clase tiene como objetivo mapear los campos especificados con los campos de las clases de entidad de Spring.
editar admin.service.ts archivo
import { Injectable } from '@angular/core'; import { Http, RequestOptions, Headers } from '@angular/http'; import { Observable } from 'rxjs'; import { AdminDetail } from '../classes/admin-detail'; import { Router } from '@angular/router'; import { JwtHelperService } from '@auth0/angular-jwt'; @Injectable({ providedIn: 'root' }) export class AdminService { // Base URL private baseUrl = "http://localhost:8080/LoginLogoutExample/api/";" constructor(private http: Http, private router: Router) { } saveAdminDetails(adminDetail : AdminDetail) : Observable<any> { let url = this.baseUrl + "saveAdmin"; return this.http.post(url,adminDetail); } login(adminDetail : AdminDetail) : Observable<any> { let url = this.baseUrl + "login"; return this.http.post(url, adminDetail); } logout() { // eliminar el token del localStorage. localStorage.removeItem('token'); this.router.navigate(['']); } /* * verificar si el Usuario está conectado o no. */ isLoggedIn() { // crear una instancia de la clase JwtHelper. let jwtHelper = new JwtHelperService(); // obtener el token del localStorage ya que tenemos que trabajar con este token. let token = localStorage.getItem('token'); // verificar si el token tiene algo o si es nulo. if(!token) { return false; } // obtener la fecha de expiración del token llamando al método getTokenExpirationDate(String) de la clase JwtHelper. Este método acepta un valor de cadena que no es más que un token. if(token) { let expirationDate = jwtHelper.getTokenExpirationDate(token); // verificar si el token ha expirado o no llamando al método isTokenExpired() de la clase JwtHelper. let isExpired = jwtHelper.isTokenExpired(token); return !isExpired; } } getAdminDetail(adminId): Observable<any> { let url = this.baseUrl + "getAdminData/" + adminId; // create an instance of Header object. let headers = new Headers(); // get token from localStorage. let token = localStorage.getItem('token'); // Append Authorization header. headers.append('Authorization', 'Bearer ') + token); // create an object of RequestOptions and include that in it. let options = new RequestOptions({ headers: headers }); return this.http.get(url, options); } }
editar signup.component.ts archivo
import { Component, OnInit } from '@angular/core'; import { FormGroup, FormControl, Validators } from '@angular/forms'; import { AdminDetail } from '../classes/admin-detail'; import { AdminService } from '../services/admin.service'; import { Router } from '@angular/router'; @Component({ selector: 'app-signup', plantillaUrl: './signup.component.html', estilosUrl: ['./signup.component.css' }) export class SignupComponent implements OnInit { private adminDetail = new AdminDetail(); constructor(private adminService: AdminService, private router: Router) { } ngOnInit() { } // create the form object. form = new FormGroup({ fullName: new FormControl('', Validators.required), email: new FormControl('', Validators.required), password: new FormControl('', Validators.required), confirmPassword: new FormControl('', Validators.required), role: new FormControl('', Validators.required), }); AdminForm(AdminInformation) { let pass = this.Password.value; let confirmPass = this.ConfirmPassword.value; if(pass == confirmPass) { this.adminDetail.name = this.FullName.value; this.adminDetail.emailId = this.Email.value; this.adminDetail.password = this.Password.value; this.adminDetail.role = this.Role.value; this.adminService.saveAdminDetails(this.adminDetail).subscribe( response => { let result = response.json(); if(result > 0) { this.router.navigate(['/login']); } else { alert("Se produjo un error al registrar el Usuario. Por favor, inténtelo de nuevo más tarde.") } }, error => { alert("Se produjo un error al registrar el Usuario. Por favor, inténtelo de nuevo más tarde.") } ); } else { alert("La contraseña y la confirmación de la contraseña no coinciden."); } } get FullName(){ return this.form.get('fullName'); } get Email(){ return this.form.get('email'); } get Password(){ return this.form.get('password'); } get ConfirmPassword(){ return this.form.get('confirmPassword'); } get Role(){ return this.form.get('role'); } }
editar signup.component.html archivo
<h2>Formulario de Registro </h2> <form [formGroup]="form" #AdminInformation (ngSubmit)="AdminForm(AdminInformation)"> <div class="row"> <div class=" col-md-offset-1 col-md-4"> <label for="fullName"> Nombre </label> <input formControlName="fullName" class="form-control" type="text"> </div> </div> <div class="row"> <div class=" col-md-offset-1 col-md-4"> <label for="email"> Correo electrónico </label> <input formControlName="email" class="form-control" type="text"> </div> </div> <div class="row"> <div class=" col-md-offset-1 col-md-4"> <label for="password"> Contraseña </label> <input formControlName="password" class="form-control" type="password"> </div> </div> <div class="row"> <div class=" col-md-offset-1 col-md-4"> <label for="confirmPassword"> Confirmar Contraseña </label> <input formControlName="confirmPassword" class="form-control" type="password"> </div> </div> <div class="row"> <div class=" col-md-offset-1 col-md-4"> <label for="role"> Rol </label> <input formControlName="role" class="form-control" type="text"> </div> </div> <div class="row" style="margin-top: 40px;"> <div class="col-md-offset-1 col-md-4"> <button class="btn btn-md btn-primary btn-style" >Guardar</button> </div> </div> </form>
editar login.component.ts archivo
import { Component, OnInit } from '@angular/core'; import { FormGroup, Validators, FormControl } from '@angular/forms'; import { AdminDetail } from '../classes/admin-detail'; import { AdminService } from '../services/admin.service'; import { Router } from '@angular/router'; @Component({ selector: 'app-login', plantillaUrl: './login.component.html', estilosUrl: ['./login.component.css' }) export class LoginComponent implements OnInit { private adminDetail = new AdminDetail(); constructor(private adminService: AdminService, private router: Router) { } ngOnInit() { if((this.adminService.isLoggedIn()) { this.router.navigate(['/profile', localStorage.getItem('id')]); } else { this.router.navigate(['/login']); } } // create the form object. form = new FormGroup({ email: new FormControl('', Validators.required), password: new FormControl('', Validators.required), }); Login(LoginInformation) { this.adminDetail.emailId = this.Email.value; this.adminDetail.password = this.Password.value; this.adminService.login(this.adminDetail).subscribe( response => { let result = response.json(); if(result > 0) { let token = response.headers.get("Authorization"); localStorage.setItem("token", token); localStorage.setItem("id", result); this.router.navigate(['/profile', result]); } if(result == -1)}} { alert("Por favor, registre una cuenta antes de iniciar sesión o la combinación de correo electrónico y contraseña no es válida"); } }, error => { console.log("Error en autenticación"); } ); } get Email(){ return this.form.get('email'); } get Password(){ return this.form.get('password'); } }
editar login.component.html archivo
<h2>formulario de iniciar sesión</h2> <form [formGroup]="form" #LoginInformation (ngSubmit)="Login(LoginInformation)"> <div class="row"> <div class=" col-md-offset-1 col-md-4"> <label for="email"> Correo electrónico </label> <input formControlName="email" class="form-control" type="text"> </div> </div> <div class="row"> <div class=" col-md-offset-1 col-md-4"> <label for="password"> Contraseña </label> <input formControlName="password" class="form-control" type="password"> </div> </div> <div class="row" style="margin-top: 40px;"> <div class="col-md-offset-1 col-md-4"> <button class="btn btn-md btn-primary btn-style" >Login</button> </div> </div> </form>
editar profile.component.ts archivo
Después de que el usuario inicie sesión, se redirigirá al componente de archivo de configuración.
import { Component, OnInit } from '@angular/core'; import { AdminService } from '../services/admin.service'; import { ActivatedRoute, Router } from '@angular/router'; @Component({ selector: 'app-profile', plantillaUrl: './profile.component.html', estilosUrl: ['./profile.component.css] }) export class ProfileComponent implements OnInit { private adminId; private haveData= 0; private data = []; private dataRequest = false; constructor(private adminService : AdminService, private route : ActivatedRoute, private router : Router) {} ngOnInit() { if((this.adminService.isLoggedIn()) { this.route.paramMap.subscribe(params => { this.adminId =+ params.get('adminId'); }); } else { this.router.navigate(['/login']); } } getAdminData() { this.haveData = 0; this.dataRequest = true; this.adminService.getAdminDetail(this.adminId).subscribe( response => { let result = response.json(); this.data = result; if(result == " ") { this.haveData = 0; } else { this.haveData = this.haveData + 1; } }, error => { console.log("error mientras se obtienen los datos de Admin"); } ); } }
editar profile.component.html archivo
<div estilo="text-alineación: derecha; margen-right: 40px;"> <h2> <a (click)= "adminService.logout()">Salir</a> <br> </h2> </div> <div estilo="text-alineación: centro; margen-right: 40px;"> <h2> <a (click)="getAdminData()" >Obtener detalles del administrador</a> </a> <br> </h2> </div> <div *ngIf="haveData > 0 && dataRequest"> <table class="table table-responsive table-striped"> <tr> <th>ID de correo electrónico</th>/th> <th>Nombre</th>/th> <th>Contraseña</th>/th> <th>Rol</th>/th> </tr> <ng-container *ngfor = "let item of data" <tr> <td>{{item.emailId}}</td>/td> <td>{{item.name}}</td>/td> <td>{{item.password}}</td>/td> <td>{{item.role}}</td>/td> </tr> </ng-container> </table> </div> <div *ngIf="haveData == 0 && dataRequest"> No hay datos. </div>
Los usuarios pueden hacer clicObtener detalles del administradorenlace para obtener detalles del administrador.
Ahora, los usuarios pueden hacer clicDesconectarSalir del estado actual.