English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Spring Angular Anmeldung und Abmeldung

In diesem Abschnitt erstellen wir eine Anmelde- und Abmelde-Webanwendung. Diese Anwendung umfasst eine Registrierungs- und Anmeldeformular. In dieser Integration verwenden wir Spring für den Backend-Teil und Angular für den Frontend-Teil.

Arbeitsanwendung

Nachdem wir die Anwendung auf dem Server bereitgestellt haben, wird eine Willkommensseite mit zwei Links generiert-Registrierung und Anmeldung.Neue Benutzer können sich registrieren und sich durch Ausfüllen der erforderlichen Details registrieren.Bestehende Benutzer können jedoch mit ihrer E-Mail-ID und ihrem Passwort anmelden.Nach der Anmeldung können wir die Details des bestehenden Benutzers erhalten.Schließlich können wir durch Klicken auf den Abmelde-Link den aktuellen Zustand verlassen.

Zu verwendende Werkzeuge

Verwenden Sie jede IDE, um Spring- und Hibernate-Projekte zu entwickeln. Es könnte MyEclipse sein/Eclipse/Netbeans. Hier verwenden wir Eclipse.Datenbank MySQL.Verwenden Sie jede IDE, um ein Angular-Projekt zu entwickeln. Es könnte Visual Studio Code sein/Sublime. Hier verwenden wir Visual Studio Code.Server: Apache Tomcat/JBoss/Glassfish/Weblogic/Websphere.

Verwendete Technologien

Hier verwenden wir die folgenden Technologien:

Spring5 Hibernate5 Angular6 MYSQL

Datenbank erstellen

Lassen Sie uns die Datenbank erstellen loginlogoutexample 。Tabelle erstellen ist nicht erforderlich, da Hibernate es automatisch erstellt.

Spring-Modul

Lassen Sie uns schauen, welche Spring-Verzeichnisstruktur wir befolgen müssen:

Um eine Anmelde- und Abmeldeanwendung zu entwickeln, befolgen Sie die folgenden Schritte: -

Fügen Sie die Abhängigkeiten zur Datei pom.xml hinzu.

<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>
	<!-- Fügen Sie Jackson für JSON Konverter hinzu -->
	<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>
	<!-- um java 9 nicht einschließlich jaxb -->
	<dependency>
		<groupId>javax.xml.bind</groupId>
		<artifactId>jaxb-api</artifactId>
		<version>2.3.0</version>
	</dependency>
	<!--  Web Token Abhängigkeit -->
    <dependency>
    	<groupId>io.jsonwebtoken</groupId>
    	<artifactId>jjwt</artifactId>
    	<version>0.9.1</version>
	</dependency>
	 	
 	<!--  JUnit Abhängigkeit -->
    <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>

Erstellen Sie die Konfigurationsklasse
Wir führen eine auf Kommentaren basierende Konfiguration aus, anstatt XML. Daher erstellen wir zwei Klassen und spezifizieren darin die erforderlichen Einstellungen.

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;				
	}
	// benötige ein Hilfsverfahren 
		// lesen Sie das Umgebungsproperty und wandeln Sie es in int um
		private int getIntProperty(String propName) {
			String propVal = env.getProperty(propName);
			// jetzt in int umwandeln
			int intPropVal = Integer.parseInt(propVal);
			return intPropVal;
		}
		@Bean
		public LocalSessionFactoryBean sessionFactory(){
			// erstelle SessionFactory
			LocalSessionFactoryBean sessionFactory = new LocalSessionFactoryBean();
			// setze die Eigenschaften
			sessionFactory.setDataSource(myDataSource());
			sessionFactory.setPackagesToScan(env.getProperty("hibernate.packagesToScan"));
			sessionFactory.setHibernateProperties(getHibernateProperties());
			return sessionFactory;
		}
		@Bean
		@Autowired
		public HibernateTransactionManager transactionManager(SessionFactory sessionFactory) {
			// 基于session factory设置事务管理器
			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() {
		// 待办 自动-生成的方法占位符
		return null;
	}
	@Override
	protected Class<?>[] getServletConfigClasses() {
		return new Class[] { DemoAppConfig.class };
	}
	@Override
	protected String[] getServletMappings() {
		return new String[] { "/" };
	}
}

创建实体类
在这里,我们将创建以下实体类: AdminDetail.java-这是一个Entity/POJO(普通的旧Java对象)类。 Token.java-用于身份验证。

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="passwort")
	public String passwort;
	@Column(name="rolle")
	public String rolle;
	public AdminDetail() { }
	public AdminDetail(int adminID, String emailId, String name, String passwort, String role) {
		super();
		this.adminID = adminID;
		this.emailId = emailId;
		this.name = name;
		this.passwort = passwort;
		this.rolle = 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 getPasswort() {
		return passwort;
	}
	public void setPasswort(String passwort) {
		this.passwort = passwort;
	}
	public String getRolle() {
		return role;
	}
	public void setRolle(String role) {
		this.rolle = role;
	}
	@Override
	public String toString() {
		return "AdminDetail  [adminID=" + adminID + ", emailId=" + emailId + ",   name=" + name + ",   passwort=" + passwort
				+ ",   role=" + rolle + "]";
	}
}

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 + "]";
	}
}

创建DAO接口
在这里,我们将创建两个DAO接口以执行与数据库相关的操作。

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
	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("Exception 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("Exception 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("Exception 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);
	}
}

Tokenerstellungsklasse

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) {
	    //Das JWT-Signaturalgorithmus, den wir verwenden werden, um das Token zu signieren
	    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.parseBase64Binär(secretKey);
	    
	    Schlüssel 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);
	    
	    //Wenn es spezifiziert wurde, fügen wir das Ablaufdatum hinzu
	    if (ttlMillis >= 0) {
	    long expMillis = nowMillis + ttlMillis;
	        Date exp = new Date(expMillis);
	        builder.setExpiration(exp);
	    }
	    
	    String[] tokenInfo = {builder.compact() , secretKey};
	    return tokenInfo;
	    
	}
}

Erstellen Sie eine Kontrollklasse

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;
		// Authentifizieren Sie den Benutzer.
		status = adminService.adminLogin(adminDetail.getEmailId(), adminDetail.getPassword());
		/*
		 * Wenn der Benutzer authentifiziert ist, führen Sie die Autorisierungsaufgabe aus.
		 */
		if (status > 0) 
		{
			/*
			 * Erstellen Sie das Token.
			 */
			String tokenData[] = generateToken.createJWT(adminDetail.getEmailId(), "w3codebox", "JWT Token",
					adminDetail.getRole(), 43200000);
			// Holen Sie das Token.
			String token = tokenData[0];
			System.out.println("Authorization :: " + token);
			// Erstellen Sie das Header-Objekt
			httpHeader = new HttpHeaders();
			// Fügen Sie das Token dem Header hinzu.
			httpHeader.add("Authorization", token);
			// Überprüfen Sie, ob das Token bereits existiert.
			long isUserEmailExists = tokenService.getTokenDetail(adminDetail.getEmailId());
			/*
			 * Wenn das Token existiert, aktualisieren Sie das Token,否则创建并插入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);
		} 
		// Wenn nicht angemeldet, geben Sie das Folgende zurück: status, was wir erhalten.
		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;
		}
	}
}

Eigenschaftsdatei erstellen

Hier erstellen wir im Projekt src/main/resources In diesem Verzeichnis werden die Eigenschaftsdateien erstellt. Folgende Dateien enthalten die Konfiguration der ruhelosen Verbindungen.

persistence-mysql.properties

## JDBC-Verbindungseigenschaften #
jdbc.driver=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3306/loginlogoutexample?useSSL=false
jdbc.user=root
jdbc.password=
## Verbindungspool-Eigenschaften #
connection.pool.initialPoolSize=5
connection.pool.minPoolSize=5
connection.pool.maxPoolSize=20
connection.pool.maxIdleTime=3000
## Hibernate-Eigenschaften #
<!-- hibernate.dialect=org.hibernate.dialect.MySQLDialect -->
hibernate.dialect=org.hibernate.dialect.MySQL5Dialekt
hibernate.show_sql=true
hibernate.format_sql=true
hibernate.hbm2ddl=update
hibernate.packagesToScan=com.w3codebox.LoginLogoutExample.entity

Angular-Modul

Lassen Sie uns die Verzeichnisstruktur von Angular betrachten:

Erstellung eines Angular-Projekts

Lassen Sie uns den folgenden Befehl verwenden, um ein Angular-Projekt zu erstellen:

Hier ist der Name LoginLogoutExample

Installation des Bootstrap CSS-Frameworks

Verwenden Sie die folgenden Befehle, um Bootstrap in Ihrem Projekt zu installieren.

npm install bootstrap @ 3.3.7 --save

Jetzt enthalten Sie den folgenden Code in der Datei style.css.

@import "~bootstrap/dist/css/bootstrap.css";

Generierung von Komponenten
Öffnen Sie das Projekt in Visual Studio und verwenden Sie die folgenden Befehle, um die folgenden Angular-Komponenten zu generieren:
ng gc Hauptseite
ng gc Anmeldung
ng gc Registrierung
ng gc Konfigurationsdatei

Wir verwenden auch die folgenden Befehle, um Dienstklassen zu erstellen: -

ng gs services/Admin

Bearbeiten app.module.ts Datei Implementierung der Routen-Hier importieren wir @ angular/router im Paket RouterModule und definieren den Pfad im Import-Array. Importieren der ReactiveFormsModule -Hier definieren wir den Import ReactiveFormsModule zur Reaktion auf Formulare und spezifizieren es im imports-Array. Importieren der HttpModule -Hier importieren wir die HttpModule für Server-Anfragen. HttpModule und spezifizieren es im import-Array. Registrierung der Dienstklasse-Hier haben wir im Anbieter-Array die Dienstklasse erwähnt.

import { BrowserModule } from '@angular'/platform-browser';
import { NgModule } from '@angular',/import { Component, OnInit } from '@angular
// 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 { }

Bearbeiten app.component.html Datei

<router-outlet></router-outlet>

Bearbeiten home.component.html Datei
Dies ist die Willkommensseite der Anwendung, die zwei Links enthält-"Registrierung" und "Anmeldung".

<div style="Text-align: center">
    <h2>  <a [routerLink]="['/signup']">SignUp</a> <br><br> </h2>
    <h2>  <a [routerLink]="['/login']">Login</a> <br><br> </h2>
    
</div>

Erstellen AdminDetail.ts Klasse

Lassen Sie uns die folgenden Befehle verwenden, um eine Klasse zu erstellen: -

Jetzt, in AdminDetail Notwendige Felder im Klassen definiert.

export class AdminDetail {
    emailId: string;
    name: string;
    password: string;
    role: string;
}

Das Ziel dieses Klassen ist es, die angegebenen Felder mit den Feldern der Spring-Entitätsklasse zu verknüpfen.

Bearbeiten admin.service.ts Datei

import { Injectable } from '@angular/import { Component, OnInit } from '@angular
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 {
  // Basis-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() 
  { 
    // Entfernen Sie das Token aus dem localStorage.
    localStorage.removeItem('token');
    this.router.navigate(['']);
  }
  /*
  * Überprüfen Sie, ob der Benutzer angemeldet ist oder nicht.
  */
  isLoggedIn() { 
    // Erstellen Sie eine Instanz der JwtHelper-Klasse.
    let jwtHelper = new JwtHelperService();
    // Holen Sie das Token aus dem localStorage, da wir an diesem Token arbeiten müssen.
    let token = localStorage.getItem('token');
    // Überprüfen Sie, ob das Token etwas enthält oder ob es null ist.
    if(!token)
    {
      return false;
    }
    // Erhalten Sie das Ablaufdatum des Tokens, indem Sie die Methode getTokenExpirationDate(String) der JwtHelper-Klasse aufrufen. Diese Methode akzeptiert einen String-Wert, der nichts anderes als ein Token ist.
    if(token)
    {
      Setzen Sie expirationDate = jwtHelper.getTokenExpirationDate(token);
      // Überprüfen Sie, ob das Token abgelaufen ist oder nicht, indem Sie die Methode isTokenExpired() der JwtHelper-Klasse aufrufen.
      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);
  }
  
}

Bearbeiten signup.component.ts Datei

用户登录后,它将重定向到配置文件组件。/import { Component, OnInit } from '@angular
/forms';
import { AdminDetail } from ".."/classes/admin-detail';
import { AdminService } from '../core';/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');
  }
  console.log("Error in authentication");
      get Email(){
  }
  return this.form.get('email');
      get Password(){
  }
  get ConfirmPassword(){
      return this.form.get('confirmPassword');
  }
  get Role(){
      return this.form.get('role');
  }
}

Bearbeiten signup.component.html Datei

<h2>SignUp form</h2>
<form [formGroup]="form" #AdminInformation (ngSubmit)="AdminForm(AdminInformation)">
  control" type="text">
    <div class="row">-col-<div class="col-1 offset-col-4md
        <label for="fullName"> Name </<label for="password"> Password <
        <input formControlName="fullName" class="form-<input formControlName="email" class="form 
    </div>
  </div>
  control" type="text">
    <div class="row">-col-<div class="col-1 offset-col-4md
        <form [formGroup]="form" #LoginInformation (ngSubmit)="Login(LoginInformation)">/<label for="password"> Password <
        <label for="email"> Email <-<input formControlName="email" class="form 
    </div>
  </div>
  control" type="text">
    <div class="row">-col-<div class="col-1 offset-col-4md
        <div class=" col/<label for="password"> Password <
        label>-<input formControlName="password" class="form 
    </div>
  </div>
  control" type="text">
    <div class="row">-col-<div class="col-1 offset-col-4md
        <label for="confirmPassword"> Confirm Password </<label for="password"> Password <
        <input formControlName="confirmPassword" class="form-<input formControlName="password" class="form 
    </div>
  </div>
  control" type="text">
    <div class="row">-col-<div class="col-1 offset-col-4md
        <label for="role"> Role </<label for="password"> Password <
        <input formControlName="role" class="form-<input formControlName="email" class="form 
    </div>
  </div>
  control" type="password">-<div class="row" style="margin 40px;">
    top:-col-<div class="col-1 offset-col-4md
        ">-<button class="btn btn-md btn-style"  >Save</style"    >Login<
    </div>
  </div>
</button>

Bearbeiten login.component.ts Datei

用户登录后,它将重定向到配置文件组件。/import { Component, OnInit } from '@angular
import { FormGroup, Validators, FormControl } from "@angular"/forms';
import { AdminDetail } from ".."/classes/admin-detail';
import { AdminService } from '../core';/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)
            {
              )}}
            }
           
        },
        error => {
            alert("please register before login Or Invalid combination of Email and password");
        }
      );
  }
  console.log("Error in authentication");
      get Email(){
  }
  return this.form.get('email');
      get Password(){
  }
}

Bearbeiten return this.form.get('password'); Datei

<h2login.component.html/h2>
>Login form<
  control" type="text">
    <div class="row">-col-<div class="col-1 offset-col-4md
        <form [formGroup]="form" #LoginInformation (ngSubmit)="Login(LoginInformation)">/<label for="password"> Password <
        <label for="email"> Email <-<input formControlName="email" class="form 
    </div>
  </div>
  control" type="text">
    <div class="row">-col-<div class="col-1 offset-col-4md
        <div class=" col/<label for="password"> Password <
        label>-<input formControlName="password" class="form 
    </div>
  </div>
  control" type="password">-<div class="row" style="margin 40px;">
    top:-col-<div class="col-1 offset-col-4md
        ">-<button class="btn btn-md btn-primary btn/style"    >Login<
    </div>
  </div>
</button>

Bearbeiten form> Datei
profile.component.ts

用户登录后,它将重定向到配置文件组件。/import { Component, OnInit } from '@angular
import { AdminService } from '../core';/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("Fehler beim Abrufen von Admin-Daten");
          }
      );
  }
}

Bearbeiten profile.component.html Datei

<div style="Text-Ausrichtung: rechts; Abstand-right: 40px;">
  <h2">  <a (click)="adminService.logout()">Logout</a> <br> </h2>
  
</div>
<div style="Text-Ausrichtung: zentriert; Abstand-right: 40px;">
  <h2>  <a (click)="getAdminData()" >Admin-Daten erhalten</a>/a> <br> </h2>
  
</div>
<div *ngIf="haveData>0&&dataRequest">
    <table class="table table-responsive table-striped">
        <tr>
          <th>E-Mail-ID</th>/th>
          <th>Name</th>/th>
          <th>Passwort</th>/th>
          <th>Role</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">
    KeineDatenverfügbar.
</div>

Der Benutzer kann durch KlickenAdministratordetails erhaltenVerknüpfung um Administratordetails zu erhalten.

Jetzt kann der Benutzer durch KlickenAbmeldenAbmelden vom aktuellen Zustand.