English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
In questa sezione, creeremo un'applicazione web di login e logout. L'applicazione include moduli di registrazione e login. In questa integrazione, utilizziamo Spring per la parte posteriore e Angular per la parte frontale.
Una volta che abbiamo deployato l'applicazione sul server, viene generata una pagina di benvenuto che contiene due link - registrazione e login.I nuovi utenti possono scegliere di registrarsi e registrarsi compilando i dettagli richiesti.Ma, gli utenti esistenti possono accedere utilizzando il loro ID email e password.Dopo il login, possiamo ottenere i dettagli dell'utente esistente.Infine, possiamo uscire dalla sessione corrente cliccando sul link di注销.
Utilizza qualsiasi IDE per sviluppare progetti Spring e Hibernate. Potrebbe essere MyEclipse/Eclipse/Netbeans. In questo caso, stiamo utilizzando Eclipse.MySQL per il database.Utilizza qualsiasi IDE per sviluppare progetti Angular. Può essere Visual Studio Code/Sublime. In questo caso, stiamo utilizzando Visual Studio Code.Server: Apache Tomcat/JBoss/Glassfish/Weblogic/Websphere.
Ecco le tecnologie che stiamo utilizzando:
Spring5 Hibernate5 Angular6 MYSQL
Creiamo il database loginlogoutexample Non è necessario creare tabelle, perché Hibernate le crea automaticamente.
Vediamo la struttura delle directory di Spring che dobbiamo seguire:
Per sviluppare un'applicazione di login e logout, segui i seguenti passaggi: -
Aggiungi le dipendenze al file 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> Aggiungi Jackson per i convertitori 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 dipendenza --> <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>
Creazione della classe di configurazione
Eseguiamo la configurazione basata sui commenti, non su XML. Pertanto, creiamo due classi e specifichiamo la configurazione necessaria.
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() { // 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; } // serve un metodo ausiliario // leggere la proprietà dell'ambiente e convertirla in int private int getIntProperty(String propName) { String propVal = env.getProperty(propName); // ora convertire in int int intPropVal = Integer.parseInt(propVal); return intPropVal; } @Bean public LocalSessionFactoryBean sessionFactory(){ // creare il fabbricante di sessioni LocalSessionFactoryBean sessionFactory = new LocalSessionFactoryBean(); // impostare le proprietà sessionFactory.setDataSource(myDataSource()); sessionFactory.setPackagesToScan(env.getProperty("hibernate.packagesToScan")); sessionFactory.setHibernateProperties(getHibernateProperties()); return sessionFactory; } @Bean @Autowired public HibernateTransactionManager transactionManager(SessionFactory sessionFactory) { // configurare il gestore delle transazioni basato sul fabbricante di sessioni 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-generato metodo stub return null; } @Override protected Class<?>[] getServletConfigClasses() { return new Class[] { DemoAppConfig.class }; } @Override protected String[] getServletMappings() { return new String[] { "/" }; } }
Creare classe entità
Qui, creeremo le seguenti classi entità: AdminDetail.java - è una classe Entity/POJO (Oggetto Java Normale Vecchio) Token.java - per l'autenticazione.
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 "Token [tokenID=" + tokenID + ", userID=" + userID + ", authenticationToken=" + authenticationToken + ", secretKey=" + secretKey + ", emailId=" + emailId + "]"; } }
Creare l'interfaccia DAO
In questo caso, creeremo due interfacce DAO per eseguire operazioni relative al Database.
AdminDAO.java
package com.w3codebox.LoginLogoutExample.DAO.interfaces; import java.util.List; import com.w3codebox.LoginLogoutExample.entity.AdminDetail; public interface AdminDAO { public int salvareDettaglioAmministratore(DettaglioAmministratore amministratoreDettaglio); public int loginAmministratore(String idEmail, String password); public List<DettaglioAmministratore> ottenereDatiAmministratore(); }
TokenDAO.java
package com.w3codebox.LoginLogoutExample.DAO.interfaces; public interface TokenDAO { public void salvareEmailUtente(String email, int idAmministratore); public boolean aggiornamentoToken(String email, String tokenAutenticazione, String chiaveSegreta); public int dettagliToken(String email); public int autenticazioneToken(String token, int emailId); }
Creare la classe di implementazione dell'interfaccia 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 Oggetto per poter ottenere l'oggetto sessione utilizzato per l'interazione con il Database. @Autowired private SessionFactory sessionFactory; /* * Registrare Dettagli Amministratore. */ 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("Eccezione durante il salvataggio dei dettagli amministrativi: " + 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("Eccezione durante il salvataggio dei dettagli amministrativi: " + 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("Eccezione durante il salvataggio dei dettagli amministrativi: " + 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("Eccezione durante l'autenticazione del token :: " + exception); return 0; } finally { session.flush(); } } }
Creazione dell'interfaccia di livello di servizio
Qui stiamo creando un'interfaccia di livello di servizio che funge da ponte tra le classi DAO ed Entity.
AdminService.java
package com.w3codebox.EsempioLoginLogout.service.interfacce; import java.util.List; import com.w3codebox.LoginLogoutExample.entity.AdminDetail; public interface ServizioAmministratore { public int salvareDettaglioAmministratore(DettaglioAmministratore amministratoreDettaglio); public int loginAmministratore(String idEmail, String password); public List<DettaglioAmministratore> ottenereDatiAmministratore(); }
TokenService.java
package com.w3codebox.EsempioLoginLogout.service.interfacce; public interface ServizioToken { public void salvareEmailUtente(String email, int idAmministratore); public boolean aggiornamentoToken(String email, String tokenAutenticazione, String chiaveSegreta); public int dettagliToken(String email); public int autenticazioneToken(String token, int emailId); }
crea la classe di implementazione del livello di servizio
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); } }
创建令牌类
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("Eccezione durante la generazione della chiave " + e.getMessage()); } JwtBuilder builder = Jwts.builder().setId(id) .setIssuedAt(now) .setSubject(subject) .setIssuer(issuer) .setPayload(role) .signWith(signatureAlgorithm, signingKey); //Se è stato specificato, aggiungiamo l'escadenza if (ttlMillis >= 0) { long expMillis = nowMillis + ttlMillis; Date exp = new Date(expMillis); builder.setExpiration(exp); } String[] tokenInfo = {builder.compact() , secretKey}; return tokenInfo; } }
Creare la classe del controller
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; // Autentica Utente. status = adminService.adminLogin(adminDetail.getEmailId(), adminDetail.getPassword()); /* * se l'utente è autenticato allora esegui il compito di autorizzazione. */ if (status > 0) { /* * Genera token. */ String tokenData[] = generateToken.createJWT(adminDetail.getEmailId(), "w3codebox", "Token JWT", adminDetail.getRole(), 43200000); // ottieni Token. String token = tokenData[0]; System.out.println("Autorizzazione :: " + token); // Crea l'oggetto Header. httpHeader = new HttpHeaders(); // Aggiungi il token all'intestazione. httpHeader.add("Authorization", token); // Verifica se il token esiste già. long isUserEmailExists = tokenService.getTokenDetail(adminDetail.getEmailId()); /* * Se il token esiste, aggiornalo; altrimenti crea e inserisci il 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); } // Se non autenticato, restituisci status = quello che otteniamo. 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; } } }
Creare un file di proprietà
Ecco, stiamo lavorando sul progetto src/main/resources Crea il file properties. I seguenti file contengono la configurazione delle connessioni Hibernate.
persistence-mysql.properties
## Proprietà di connessione JDBC # jdbc.driver=com.mysql.jdbc.Driver jdbc.url=jdbc:mysql://localhost:3306/loginlogoutexample?useSSL=false jdbc.user=root jdbc.password= ## Proprietà del pool di connessione # connection.pool.initialPoolSize=5 connection.pool.minPoolSize=5 connection.pool.maxPoolSize=20 connection.pool.maxIdleTime=3000 ## Proprietà 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
Vediamo la struttura dei directory di Angular:
Crea un progetto Angular
Usiamo i seguenti comandi per creare un progetto Angular:
Qui, LoginLogoutExample è il nome
Installa Bootstrap nel progetto con il seguente comando.
npm install bootstrap @ 3.3.7 --save
Ora, nel file style.css includi il seguente codice.
@import \
Genera il componente
Apri il progetto in Visual Studio e poi usa i seguenti comandi per generare i seguenti componenti Angular:
ng gc homepage
ng gc login
ng gc registrazione
ng gc file di configurazione
Usiamo anche i seguenti comandi per creare la classe di servizio: -
ng gs services/Admin
Modifica app.module.ts File Implementare il routingEcco, dobbiamo importare @angular/router nel pacchetto RouterModule e definiamo il percorso nell'array di import. Importiamo ReactiveFormsModule Ecco, importiamo ReactiveFormsModule per il form reattivo e specifica in array di imports. Importiamo HttpModule Ecco, importiamo HttpModule e specifica in array di import. Registra la classe di servizioEcco, abbiamo menzionato la classe di servizio nell'array dei fornitori.
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 { }
Modifica app.component.html File
<router-outlet></router-outlet>
Modifica home.component.html File
这是应用程序的欢迎页面,其中包括两个链接-"注册"和"登录"。
<div style="text-align: center"> <h2> <a [routerLink]="['/signup']">SignUp</a> <br><br> </h2> <h2> <a [routerLink]="['/login']">Login</a> <br><br> </h2> </div>
创建 AdminDetail.ts 类
让我们使用以下命令创建一个类: -
现在,在 AdminDetail 在类中指定必填字段。
export class AdminDetail { emailId: string; name: string; password: string; role: string; }
L'obiettivo di questa classe è mappare i campi specificati con i campi delle classi entità di Spring.
Modifica admin.service.ts File
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 { // URL di base 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() { // Rimuovi il token dal localStorage. localStorage.removeItem('token'); this.router.navigate(['']); } /* * Verifica se l'utente è loggato o meno. */ isLoggedIn() { // creare un'istanza della classe JwtHelper let jwtHelper = new JwtHelperService(); // ottenere il token dal localStorage poiché dobbiamo lavorare su questo token. let token = localStorage.getItem('token'); // controllare se il token ha qualcosa o se è nullo. if(!token) { return false; } // ottenere la data di scadenza del token chiamando il metodo getTokenExpirationDate(String) della classe JwtHelper. Questo metodo accetta un valore di stringa che non è altro che un token. if(token) { let expirationDate = jwtHelper.getTokenExpirationDate(token); // controllare se il token è scaduto o meno chiamando il metodo isTokenExpired() della classe JwtHelper. let isExpired = jwtHelper.isTokenExpired(token); return !isExpired; } } getAdminDetail(adminId) : Observable<any> { let url = this.baseUrl + "getAdminData/" + adminId; // creare un'istanza dell'oggetto Header. let headers = new Headers(); // ottenere il token dal localStorage. let token = localStorage.getItem('token'); // Aggiungere l'intestazione di autorizzazione. headers.append('Authorization', 'Bearer ' + token); // creare un oggetto RequestOptions e includerlo in esso. let options = new RequestOptions({ headers: headers }); return this.http.get(url, options); } }
Modifica signup.component.ts File
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() { } // creare l'oggetto del modulo. 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("Si è verificato un errore durante la registrazione dell'utente. Riprova più tardi.") } }, error => { alert("Si è verificato un errore durante la registrazione dell'utente. Riprova più tardi.") } ); } else { alert("La password e la conferma della password non corrispondono."); } } 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'); } }
Modifica signup.component.html File
<h2>Modulo di Iscrizione</h2> <form [formGroup]="form" #AdminInformation (ngSubmit)="AdminForm(AdminInformation)"> <div class="row"> <div class=" col-md-offset-1 col-md-4"> <label for="fullName">Nome</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">Conferma 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">Ruolo</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">Salva</button> </div> </div> </form>
Modifica login.component.ts File
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(['/profilo', localStorage.getItem('id')]); } else { this.router.navigate(['/login']); } } // creare l'oggetto del modulo. 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(['/profilo', result]); } if(result == -1) { alert("Effettuare la registrazione prima di accedere o combinazione non valida di Email e password"); } }, error => { console.log("Errore nell'autenticazione"); } ); } get Email(){ return this.form.get('email'); } get Password(){ return this.form.get('password'); } }
Modifica login.component.html File
<h2>Modulo di login</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>
Modifica profile.component.ts File
Dopo il login dell'utente, verrà reindirizzato al componente delle impostazioni.
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("errore durante l'acquisizione dei dati di Admin"); } ); } }
Modifica profile.component.html File
<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()">Ottieni Dettagli Amministratore</a> <br> </h2> </div> <div *ngIf="haveData > 0 && dataRequest"> <table class="table table-responsive table-striped"> <tr> <th>ID Email</th> <th>Nome</th> <th>Parola d'accesso</th> <th>Ruolo</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"> Non ci sono dati. </div>
L'utente può fare clic suOttieni i dettagli dell'amministratorelink per ottenere i dettagli dell'amministratore.
Ora, l'utente può fare clic suDisconnettersiEsci dalla sessione corrente.