在本節(jié)中,我們將創(chuàng)建一個(gè)登錄和注銷(xiāo)Web應(yīng)用程序。該應(yīng)用程序包括注冊(cè)和登錄表單。在這種集成中,我們使用Spring處理后端部分,使用Angular處理前端部分。
一旦我們?cè)诜?wù)器上部署了應(yīng)用程序,就會(huì)生成一個(gè)歡迎頁(yè)面,其中包含兩個(gè)鏈接-注冊(cè)和登錄。新用戶可以選擇注冊(cè)并通過(guò)填寫(xiě)所需的詳細(xì)信息進(jìn)行注冊(cè)。但是,現(xiàn)有用戶可以使用其電子郵件ID和密碼登錄。登錄后,我們可以獲取現(xiàn)有用戶的詳細(xì)信息。最后,我們可以通過(guò)單擊注銷(xiāo)鏈接退出當(dāng)前狀態(tài)。
使用任何IDE來(lái)開(kāi)發(fā)Spring和Hibernate項(xiàng)目??赡苁荕yEclipse/Eclipse/Netbeans。在這里,我們正在使用Eclipse。用于數(shù)據(jù)庫(kù)的MySQL。使用任何IDE來(lái)開(kāi)發(fā)Angular項(xiàng)目。它可能是Visual Studio代碼/Sublime。在這里,我們正在使用Visual Studio Code。服務(wù)器: Apache Tomcat/JBoss/Glassfish/Weblogic/Websphere。
在這里,我們正在使用以下技術(shù):
Spring5 Hibernate5 Angular6 MYSQL
讓我們創(chuàng)建數(shù)據(jù)庫(kù) loginlogoutexample 。無(wú)需創(chuàng)建表,因?yàn)镠ibernate會(huì)自動(dòng)創(chuàng)建它。
讓我們看看我們需要遵循的Spring目錄結(jié)構(gòu):
要開(kāi)發(fā)一個(gè)登錄和注銷(xiāo)應(yīng)用程序,請(qǐng)遵循以下步驟: -
將依賴項(xiàng)添加到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.nhooo</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> <!-- Add Jackson for JSON converters --> <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>
創(chuàng)建配置類(lèi)
我們執(zhí)行基于注釋的配置,而不是XML。因此,我們創(chuàng)建兩個(gè)類(lèi)并在其中指定所需的配置。
DemoAppConfig.java
package com.nhooo.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.nhooo.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() { // create connection pool ComboPooledDataSource myDataSource = new ComboPooledDataSource(); // set the jdbc driver try { myDataSource.setDriverClass("com.mysql.jdbc.Driver"); } catch (PropertyVetoException exc) { throw new RuntimeException(exc); } // set database connection props myDataSource.setJdbcUrl(env.getProperty("jdbc.url")); myDataSource.setUser(env.getProperty("jdbc.user")); myDataSource.setPassword(env.getProperty("jdbc.password")); // set connection pool props myDataSource.setInitialPoolSize(getIntProperty("connection.pool.initialPoolSize")); myDataSource.setMinPoolSize(getIntProperty("connection.pool.minPoolSize")); myDataSource.setMaxPoolSize(getIntProperty("connection.pool.maxPoolSize")); myDataSource.setMaxIdleTime(getIntProperty("connection.pool.maxIdleTime")); return myDataSource; } private Properties getHibernateProperties() { // set hibernate properties 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")); return props; } // need a helper method // read environment property and convert to int private int getIntProperty(String propName) { String propVal = env.getProperty(propName); // now convert to int int intPropVal = Integer.parseInt(propVal); return intPropVal; } @Bean public LocalSessionFactoryBean sessionFactory(){ // create session factory LocalSessionFactoryBean sessionFactory = new LocalSessionFactoryBean(); // set the properties sessionFactory.setDataSource(myDataSource()); sessionFactory.setPackagesToScan(env.getProperty("hibernate.packagesToScan")); sessionFactory.setHibernateProperties(getHibernateProperties()); return sessionFactory; } @Bean @Autowired public HibernateTransactionManager transactionManager(SessionFactory sessionFactory) { // setup transaction manager based on session factory HibernateTransactionManager txManager = new HibernateTransactionManager(); txManager.setSessionFactory(sessionFactory); return txManager; } }
MySpringMvcDispatcherServletInitializer.java
package com.nhooo.LoginLogoutExample.config; import org.springframework.web.servlet.support.AbstractAnnotationConfigDispatcherServletInitializer; public class MySpringMvcDispatcherServletInitializer extends AbstractAnnotationConfigDispatcherServletInitializer { @Override protected Class<?>[] getRootConfigClasses() { // TOdo Auto-generated method stub return null; } @Override protected Class<?>[] getServletConfigClasses() { return new Class[] { DemoAppConfig.class }; } @Override protected String[] getServletMappings() { return new String[] { "/" }; } }
創(chuàng)建實(shí)體類(lèi)
在這里,我們將創(chuàng)建以下實(shí)體類(lèi): AdminDetail.java-這是一個(gè)Entity/POJO(普通的舊Java對(duì)象)類(lèi)。 Token.java-用于身份驗(yàn)證。
AdminDetail.java
package com.nhooo.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.nhooo.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 "Token [tokenID=" + tokenID + ", userID=" + userID + ", authenticationToken=" + authenticationToken + ", secretKey=" + secretKey + ", emailId=" + emailId + "]"; } }
創(chuàng)建DAO接口
在這里,我們將創(chuàng)建兩個(gè)DAO接口以執(zhí)行與數(shù)據(jù)庫(kù)相關(guān)的操作。
AdminDAO.java
package com.nhooo.LoginLogoutExample.DAO.interfaces; import java.util.List; import com.nhooo.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.nhooo.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); }
創(chuàng)建DAO接口實(shí)現(xiàn)類(lèi)
AdminDAOImpl.java
package com.nhooo.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.nhooo.LoginLogoutExample.DAO.interfaces.AdminDAO; import com.nhooo.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 private SessionFactory sessionFactory; /* * Register Admin Details. */ 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.nhooo.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.nhooo.LoginLogoutExample.DAO.interfaces.TokenDAO; import com.nhooo.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(); } } }
創(chuàng)建服務(wù)層接口
在這里,我們正在創(chuàng)建充當(dāng)DAO和Entity類(lèi)之間橋梁的服務(wù)層接口。
AdminService.java
package com.nhooo.LoginLogoutExample.service.interfaces; import java.util.List; import com.nhooo.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.nhooo.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); }
創(chuàng)建服務(wù)層實(shí)現(xiàn)類(lèi)
AdminServiceImpl.java
package com.nhooo.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.nhooo.LoginLogoutExample.DAO.interfaces.AdminDAO; import com.nhooo.LoginLogoutExample.entity.AdminDetail; import com.nhooo.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.nhooo.LoginLogoutExample.service.implementation; import javax.transaction.Transactional; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import com.nhooo.LoginLogoutExample.DAO.interfaces.TokenDAO; import com.nhooo.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); } }
創(chuàng)建令牌類(lèi)
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) { //The JWT signature algorithm we will be using to sign the 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.parseBase64Binary(secretKey); Key signingKey = null; try{ signingKey = new SecretKeySpec(apiKeySecretBytes, signatureAlgorithm.getJcaName()); } catch(Exception e) { System.out.println("Exception while generating key " + e.getMessage() ); } JwtBuilder builder = Jwts.builder().setId(id) .setIssuedAt(now) .setSubject(subject) .setIssuer(issuer) .setPayload(role) .signWith(signatureAlgorithm, signingKey); //if it has been specified, let's add the expiration if (ttlMillis >= 0) { long expMillis = nowMillis + ttlMillis; Date exp = new Date(expMillis); builder.setExpiration(exp); } String[] tokenInfo = {builder.compact() , secretKey}; return tokenInfo; } }
創(chuàng)建控制器類(lèi)
AdminController.java
package com.nhooo.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.nhooo.LoginLogoutExample.entity.AdminDetail; import com.nhooo.LoginLogoutExample.service.interfaces.AdminService; import com.nhooo.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; // Authenticate User. status = adminService.adminLogin(adminDetail.getEmailId(), adminDetail.getPassword()); /* * if User is authenticated then do Authorization Task. */ if (status > 0) { /* * Generate token. */ String tokenData[] = generateToken.createJWT(adminDetail.getEmailId(), "Nhooo", "JWT Token", adminDetail.getRole(), 43200000); // get Token. String token = tokenData[0]; System.out.println("Authorization :: " + token); // Create the Header Object httpHeader = new HttpHeaders(); // Add token to the Header. httpHeader.add("Authorization", token); // Check if token is already exist. long isUserEmailExists = tokenService.getTokenDetail(adminDetail.getEmailId()); /* * if token exist then update Token else create and insert the 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; } } }
創(chuàng)建屬性文件
在這里,我們正在項(xiàng)目的 src/main/resources 中創(chuàng)建屬性文件。以下文件包含休眠連接配置。
persistence-mysql.properties
## JDBC connection properties# jdbc.driver=com.mysql.jdbc.Driver jdbc.url=jdbc:mysql://localhost:3306/loginlogoutexample?useSSL=false jdbc.user=root jdbc.password= ## Connection pool properties# connection.pool.initialPoolSize=5 connection.pool.minPoolSize=5 connection.pool.maxPoolSize=20 connection.pool.maxIdleTime=3000 ## Hibernate properties# <!-- 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.nhooo.LoginLogoutExample.entity
讓我們看看Angular的目錄結(jié)構(gòu):
創(chuàng)建一個(gè)Angular項(xiàng)目
讓我們使用以下命令創(chuàng)建Angular項(xiàng)目:
在這里,LoginLogoutExample是名稱(chēng)
使用以下命令在項(xiàng)目中安裝Bootstrap。
npm install bootstrap @ 3.3.7 --save
現(xiàn)在,在style.css文件中包含以下代碼。
@import "~bootstrap/dist/css/bootstrap.css";
生成組件
在Visual Studio中打開(kāi)項(xiàng)目,然后使用以下命令生成以下Angular組件:
ng gc主頁(yè)
ng gc登錄
ng gc注冊(cè)
ng gc配置文件
我們還使用以下命令創(chuàng)建服務(wù)類(lèi): -
ng gs services/Admin
編輯 app.module.ts 文件 實(shí)施路由-在這里,我們要導(dǎo)入 @ angular/router 包中的 RouterModule ,并在導(dǎo)入數(shù)組中定義路徑。 導(dǎo)入ReactiveFormsModule -在這里,我們將導(dǎo)入 ReactiveFormsModule 用于反應(yīng)形式,并在imports數(shù)組中指定它。 導(dǎo)入HttpModule -在這里,我們?yōu)榉?wù)器請(qǐng)求導(dǎo)入 HttpModule ,并在import數(shù)組中指定它。 注冊(cè)服務(wù)類(lèi)-在這里,我們?cè)谔峁┱邤?shù)組中提到了服務(wù)類(lèi)。
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 { }
編輯 app.component.html 文件
<router-outlet></router-outlet>
編輯 home.component.html 文件
這是應(yīng)用程序的歡迎頁(yè)面,其中包括兩個(gè)鏈接-"注冊(cè)"和"登錄"。
<div style="text-align: center"> <h2> <a [routerLink]="['/signup']">SignUp</a> <br><br> </h2> <h2> <a [routerLink]="['/login']">Login</a> <br><br> </h2> </div>
創(chuàng)建 AdminDetail.ts 類(lèi)
讓我們使用以下命令創(chuàng)建一個(gè)類(lèi): -
現(xiàn)在,在 AdminDetail 類(lèi)中指定必填字段。
export class AdminDetail { emailId : string; name : string; password : string ; role : string; }
此類(lèi)的目的是將指定的字段與Spring實(shí)體類(lèi)的字段進(jìn)行映射。
編輯 admin.service.ts 文件
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() { // Remove the token from the localStorage. localStorage.removeItem('token'); this.router.navigate(['']); } /* * Check whether User is loggedIn or not. */ isLoggedIn() { // create an instance of JwtHelper class. let jwtHelper = new JwtHelperService(); // get the token from the localStorage as we have to work on this token. let token = localStorage.getItem('token'); // check whether if token have something or it is null. if(!token) { return false; } // get the Expiration date of the token by calling getTokenExpirationDate(String) method of JwtHelper class. this method accepts a string value which is nothing but a token. if(token) { let expirationDate = jwtHelper.getTokenExpirationDate(token); // check whether the token is expired or not by calling isTokenExpired() method of JwtHelper class. 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 object of RequestOptions and include that in it. let options = new RequestOptions( { headers : headers } ); return this.http.get(url , options); } }
編輯 signup.component.ts 文件
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', templateUrl: './signup.component.html', styleUrls: ['./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("error occur while registring User. please try after sometime.") } }, error => { alert("error occur while registring User. please try after sometime.") } ); } else { alert("Password and confirm password not match."); } } 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'); } }
編輯 signup.component.html 文件
<h2>SignUp form</h2> <form [formGroup]="form" #AdminInformation (ngSubmit)="AdminForm(AdminInformation)"> <div class="row"> <div class=" col-md-offset-1 col-md-4"> <label for="fullName"> Name </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"> Email </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"> Password </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"> Confirm Password </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"> Role </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" >Save</button> </div> </div> </form>
編輯 login.component.ts 文件
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', templateUrl: './login.component.html', styleUrls: ['./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("please register before login Or Invalid combination of Email and password"); } }, error => { console.log("Error in authentication"); } ); } get Email(){ return this.form.get('email'); } get Password(){ return this.form.get('password'); } }
編輯 login.component.html 文件
<h2>Login form</h2> <form [formGroup]="form" #LoginInformation (ngSubmit)="Login(LoginInformation)"> <div class="row"> <div class=" col-md-offset-1 col-md-4"> <label for="email"> Email </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"> Password </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>
編輯 profile.component.ts 文件
用戶登錄后,它將重定向到配置文件組件。
import { Component, OnInit } from '@angular/core'; import { AdminService } from '../services/admin.service'; import { ActivatedRoute, Router } from '@angular/router'; @Component({ selector: 'app-profile', templateUrl: './profile.component.html', styleUrls: ['./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 while getting Admin Data"); } ); } }
編輯 profile.component.html 文件
<div style="text-align: right ; margin-right: 40px;"> <h2> <a (click)= "adminService.logout()">Logout</a> <br> </h2> </div> <div style="text-align: center ; margin-right: 40px;"> <h2> <a (click)="getAdminData()" >Get Admin Details</a> <br> </h2> </div> <div *ngIf="haveData > 0 && dataRequest"> <table class="table table-responsive table-striped"> <tr> <th>Email ID</th> <th>Name</th> <th>Password</th> <th>Role</th> </tr> <ng-container *ngfor = "let item of data"> <tr> <td>{{item.emailId}}</td> <td>{{item.name}}</td> <td>{{item.password}}</td> <td>{{item.role}}</td> </tr> </ng-container> </table> </div> <div *ngIf="haveData == 0 && dataRequest"> Don't have Data. </div>
用戶可以通過(guò)單擊獲取管理員詳細(xì)信息鏈接來(lái)獲取管理員詳細(xì)信息。
現(xiàn)在,用戶可以通過(guò)單擊注銷(xiāo)退出當(dāng)前狀態(tài)。