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

Springチュートリアル

Spring Angular ログインおよびログアウト

このセクションでは、ログインおよびログアウトWebアプリケーションを作成します。このアプリケーションには、登録およびログインフォームが含まれます。この統合では、Springを使用してバックエンド部分を処理し、Angularを使用してフロントエンド部分を処理します。

作業アプリケーション

アプリケーションをサーバーにデプロイした後、ウェルカムページが生成され、2つのリンクが含まれます-登録およびログイン新規ユーザーは登録を選択し、必要な詳細を入力して登録を行うことができます。ただし、既存ユーザーはメールIDとパスワードを使用してログインできます。ログインした後、既存ユーザーの詳細情報を取得できます。最後に、ログアウトリンクをクリックして現在の状態を退出することができます。

使用するツール

SpringおよびHibernateプロジェクトを開発するためにどんなIDEを使用しても構いません。それはMyEclipseかもしれません。/Eclipse/Netbeans。ここでは、Eclipseを使用しています。データベースにはMySQLを使用しています。Angularプロジェクトを開発するためにどんなIDEを使用しても構いません。それはVisual Studioコードかもしれません。/Sublime。ここでは、Visual Studio Codeを使用しています。サーバー: Apache Tomcat/JBoss/Glassfish/Weblogic/Websphere。

使用する技術

ここでは、以下の技術を使用しています:

Spring5 Hibernate5 Angular6 MYSQL

データベースを作成する

データベースを作成しましょう loginlogoutexample テーブルを作成する必要はありません。なぜなら、Hibernateが自動的に作成するからです。

Springモジュール

私たちが従う必要があるSpringのディレクトリ構造を見てみましょう:

ログインおよびログアウトアプリケーションを開発するには、以下の手順に従ってください: -

pom.xmlファイルに依存関係を追加してください。

<project　xmlns="http:\//maven.apache.org/POM/4.0.0"　xmlns:xsi="http:\//www.w3.org/2001/XMLSchema-instance
　　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>
	<!--　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>
	<!--　サーブレット+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>
	<!--　javaのために補償するため　9　jaxb を含まない　-->
	<dependency>
		<groupId>javax.xml.bind</groupId>
		<artifactId>jaxb-api/artifactId>
		<version>2.3.0</version>
	</dependency>
	<!--　　Web テークトゥークディペンデンシー　-->
　　　　<dependency>
　　　　	<groupId>io.jsonwebtoken</groupId>
　　　　	<artifactId>jjwt</artifactId>
　　　　	<version>0.9.1</version>
	</dependency>
	　	
　	<!--　　JUnit ディペンデンシー　-->
　　　　<dependency>
　　　　　　　　<groupId>junit</groupId>
　　　　　　　　<artifactId>junit</artifactId>
　　　　　　　　<version>3.8.1</version>
　　　　　　　　<scope>test</scope>
　　　　</dependency>
　　　　
	<!--　https://mvnrepository.com/artifact/org.apache.commons/commons-dbcp2　-->
	<dependency>
	　　　　<groupId>org.apache.commons</groupId>
	　　　　<artifactId>commons-dbcp2</artifactId>
	　　　　<version>2.0</version>
	</dependency>　
　　</dependencies>
　　
　　
　　<build>
　　　　<finalName>LoginLogoutExample</finalName>
　　</build>
</project>

設定クラスの作成
コメントベースの設定を実行します。XMLではなく、必要な設定を指定するために、2つのクラスを作成します。

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() {
		//　接続プールを作成
		ComboPooledDataSource myDataSource = new ComboPooledDataSource();
		//　jdbc ドライバーを設定
		try {
			myDataSource.setDriverClass("com.mysql.jdbc.Driver");		
		}
		catch (PropertyVetoException exc) {
			throw new RuntimeException(exc);
		}
		//　データベース接続プロパティを設定
		myDataSource.setJdbcUrl(env.getProperty("jdbc.url"));
		myDataSource.setUser(env.getProperty("jdbc.user"));
		myDataSource.setPassword(env.getProperty("jdbc.password"));
		//　connection pool プロパティを設定
		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() {
		//　hibernate プロパティを設定
		Properties props = new Properties();
		props.setProperty("hibernate.dialect", env.getProperty("hibernate.dialect"));
		props.setProperty("hibernate.show_sql", env.getProperty("hibernate.show_sql"));
		props.setProperty("hibernate.format_sql", env.getProperty("hibernate.format_sql"));
		props.setProperty("hibernate.hbm2ddl.auto", env.getProperty("hibernate.hbm2ddl"));
		propsを返します;				
	}
	//　ヘルパーメソッドが必要です　
		//　環境プロパティを読み取り、整数に変換します
		private int get_intProperty(String propName) {
			String propVal = env.getProperty(propName);
			//　現在、整数に変換します
			int intPropVal = Integer.parseInt(propVal);
			intPropValを返します;
		}
		@Bean
		public LocalSessionFactoryBean sessionFactory(){
			//　セッション・ファクトリーの作成
			LocalSessionFactoryBean sessionFactory = new LocalSessionFactoryBean();
			//　プロパティを設定します
			sessionFactory.setDataSource(myDataSource());
			sessionFactory.setPackagesToScan(env.getProperty("hibernate.packagesToScan"));
			sessionFactory.setHibernateProperties(getHibernateProperties());
			return　sessionFactory;
		}
		@Bean
		@Autowired
		public　HibernateTransactionManager　transactionManager(SessionFactory　sessionFactory)　{
			//　sessionFactoryに基づいてトランザクションマネージャを設定します
			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-生成されたメソッドスタブ
		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="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　+　"]";
	}
}

创建DAO接口
ここでは、データベースに関連する操作を実行するために2つの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("Excecption while saving admin Details : ");　+　exception.getMessage());
			return　0;
		}
		finally
		{
			session.flush();
		}
	}
	public int adminLogin(String emailId, String password) {
		Session session = null;
		try
		{
			session = sessionFactory.getCurrentSession();
			Query query = session.createQuery("from AdminDetail where emailId=:emailId and password=:password");
			query.setParameter("emailId", emailId);
			query.setParameter("password", password);
			List<AdminDetail> list = query.list();
			int size = list.size();
			if(size ==　1)}}
			{
				return list.get(0).getAdminID();
			}
			else
			{
				return　-1;
			}
		}
		catch(Exception　exception)
		{
			System.out.println("Excecption while saving admin Details : ");　+　exception.getMessage());
			return　0;
		}
		finally
		{
			session.flush();
		}
	}
	public List<AdminDetail> getAdminData() {
		Session session = null;
		try
		{
			session = sessionFactory.getCurrentSession();
			Query<AdminDetail> query = session.createQuery("from AdminDetail");
			List<AdminDetail> list = query.list();
			if(list.size() > 0)
			{
				return list;
			}
			else
			{
				return null;
			}
		}
		catch(Exception　exception)
		{
			System.out.println("Excecption while saving admin Details : ");　+　exception.getMessage());
			return null;
		}
		finally
		{
			session.flush();
		}
	}
}

TokenDAOImpl.java 

package com.w3codebox.LoginLogoutExample.DAO.implementation;
import java.util.List;
import org.hibernate.Session;
import org.hibernate.SessionFactory;
import org.hibernate.query.Query;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;
import com.w3codebox.LoginLogoutExample.DAO.interfaces.TokenDAO;
import com.w3codebox.LoginLogoutExample.entity.Token;
@Repository("tokenDAO")
public class TokenDAOImpl implements TokenDAO {
	@Autowired
	SessionFactory sessionFactory;
	public void saveUserEmail(String email, int adminId) {
		Session session = null;　
		try
		{
			session = sessionFactory.getCurrentSession();
			トークン t = new トークン();
			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);
	}
}

トークン作成クラス

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)　{
	　　　　//JWTの署名アルゴリズムを利用してトークンに署名するために使用する
	　　　　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.parseBase64バイナリ（secretKey）;
	　　　　
	　　　　キー　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;
	　　　　
	}
}

コントローラークラスの作成

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;
		//　ユーザーを認証します。
		status = adminService.adminLogin(adminDetail.getEmailId(), adminDetail.getPassword());
		/*
		　*　ユーザーが認証されている場合、認証タスクを実行します。
		　*/
		if (status > 0)　
		{
			/*
			　*　トークンを生成します。
			　*/
			String tokenData[] = generateToken.createJWT(adminDetail.getEmailId(), "w3codebox", "JWT Token",
					adminDetail.getRole(),　43200000);
			//　トークンを取得します。
			String token = tokenData[0];
			System.out.println("Authorization :: "　+　token);
			//　ヘッダーオブジェクトを作成します。
			httpHeader = new HttpHeaders();
			//　トークンをヘッダーに追加します。
			httpHeader.add("Authorization", token);
			//　トークンがすでに存在するか確認します。
			long isUserEmailExists = tokenService.getTokenDetail(adminDetail.getEmailId());
			/*
			　*　トークンが存在する場合、トークンを更新するか、トークンを作成して挿入します。
			　*/
			if (isUserEmailExists > 0)}　
			{
				1]
			}　
			else　
			{
				tokenService.saveUserEmail(adminDetail.getEmailId(), status);
				1]
			}
			return new ResponseEntity<Integer>(status, httpHeader, HttpStatus.OK);
		}　
		//　認証されていない場合、以下のステータスを返します。
		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;
		}
	}
}

属性ファイルの作成

ここでは、プロジェクトの src/main/resources 以下のファイルに休眠コネクション設定が含まれています。

persistence-mysql.properties 

## JDBC コネクションプロパティ#
jdbc.driver=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3306/loginlogoutexample?useSSL=false
jdbc.user=root
jdbc.password=
## コネクションプールプロパティ#
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.w3codebox.LoginLogoutExample.entity

Angularモジュール

Angularのディレクトリ構造を見てみましょう：

Angularプロジェクトを作成します。

以下のコマンドを使用してAngularプロジェクトを作成します：

ここでは、LoginLogoutExampleが名前です。

Bootstrap CSSフレームワークをインストールします。

以下のコマンドを使用してプロジェクトにBootstrapをインストールします。

npm install bootstrap @ 3.3.7 --save

今、style.cssファイルに以下のコードを含めます。

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

コンポーネントを生成します。
Visual Studioでプロジェクトを開き、以下のコマンドを使用して以下のAngularコンポーネントを生成します：
ng gcホームページ
ng gcログイン
ng gc登録
ng gc設定ファイル

以下のコマンドを使用してサービスクラスを作成します： -

ng gs services/Admin

編集 app.module.ts ファイル ルーティングを実装します。-ここでは、インポートします。 @angular/router のパッケージ内で RouterModule そして、インポート配列でパスを定義します。 ReactiveFormsModuleをインポートします。 -ここでは、インポートします。 ReactiveFormsModule 反応形式に使用し、imports配列で指定します。 HttpModuleをインポートします。 -ここでは、サーバー要求に対してインポートします。 HttpModule そして、import配列で指定します。 サービスクラスを登録します。-ここでは、提供者配列でサービスクラスについて触れました。

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 ファイル
これはアプリケーションのウェルカムページで、2つのリンクが含まれています。-"登録"と"ログイン"。

<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;
}

このクラスの目的は、指定されたフィールドをSpringエンティティクラスのフィールドにマッピングすることです。

編集 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()　
　　{　
　　　　//　localStorageからトークンを削除します。
　　　　localStorage.removeItem('token');
　　　　this.router.navigate(['']);
　　}
　　/*
　　*　ユーザーがログインしているかどうかを確認します。
　　*/
　　isLoggedIn() {　
　　　　//　JwtHelperクラスのインスタンスを作成します。
　　　　let jwtHelper = new JwtHelperService();
　　　　//　localStorageからトークンを取得します。なぜなら、このトークンで作業する必要があるからです。
　　　　let token = localStorage.getItem('token');
　　　　//　トークンが何かを持っているか、またはnullかどうかを確認します。
　　　　if(!token)
　　　　{
　　　　　　return false;
　　　　}
　　　　//　JwtHelperクラスのgetTokenExpirationDate(String)メソッドを呼び出して、トークンの有効期限を取得します。このメソッドは、単なるトークンである文字列値を受け取ります。
　　　　if(token)
　　　　{
　　　　　　let expirationDate = jwtHelper.getTokenExpirationDate(token);
　　　　　　//　JwtHelperクラスのisTokenExpired()メソッドを呼び出して、トークンが有効期限切れかどうかを確認します。
　　　　　　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　=>　{
　　　　　　　　　　　　alert("ユーザー登録中にエラーが発生しました。少し後に再試行してください。")
　　　　　　　　　　}
　　　　　　　　);
　　　　　　　　
　　　　　}
　　　　　else
　　　　　{
　　　　　　　　alert("パスワードと確認パスワードが一致しません。");
　　　　　}
　　}
　　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>サインアップフォーム</h2>
<form　[formGroup]="form"　#AdminInformation　(ngSubmit)="AdminForm(AdminInformation)">
　　<div class="row">
　　　　<div class="　col-md-offset-1　col-md-4">
　　　　　　　　<label　for="fullName">　名前　</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"> メールアドレス　</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"> パスワード　</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">　パスワードの確認　</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">　役割　</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"　　>保存</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("ログイン前に登録してくださいまたはメールアドレスとパスワードの組み合わせが無効です");
　　　　　　　　　　　　}
　　　　　　　　　　　
　　　　　　　　},
　　　　　　　　error　=>　{
　　　　　　　　　　　　console.log("認証中にエラー");
　　　　　　　　}
　　　　　　);
　　}
　　get Email(){
　　　　　　return this.form.get('email');
　　}
　　get Password(){
　　　　　　return this.form.get('password');
　　}
}

編集 login.component.html ファイル

<h2>ログインフォーム</h2>
<form [formGroup]="form" #LoginInformation (ngSubmit)="Login(LoginInformation)">
　　<div class="row">
　　　　<div class="　col-md-offset-1　col-md-4">
　　　　　　　　<label for="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"> パスワード　</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-右にアライメント; マージン-right:　40px;">
　　<h2>　　<a (click)=　"adminService.logout()">Logout</a>　<br>　</h2>
　　
</div>
<div style="text-中央にアライメント; マージン-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">
　　　　データがありません。
</div>

ユーザーは管理者詳細情報を取得リンクをクリックして管理者詳細情報を取得できます。

今、ユーザーはログアウト現在の状態を終了してください。

SpringAngular検索フィールドアプリケーションSpringAngularファイルアップロード