1588 words
8 minutes
Spring boot でWebアプリケーションを作成してみよう! ログイン機能編

Spring boot でWebアプリケーションを作成してみよう! ログイン機能編#

こんにちは、YAMAです。
前回はSpring bootを使用して簡単なWebアプリケーションを作成し、Tomcatで動かす方法についてお話しました。
今回は、Spring Securityを使用してログイン機能を追加してみようと思います。

Spring Securityとは?#

Spring Securityは、Springフレームワークの一部であり、認証と認可のための強力なセキュリティフレームワークです。
Webアプリケーションにセキュリティ機能を簡単に追加できるように設計されています。
Spring Securityは、ユーザーの認証(ログイン)と認可(アクセス制御)を管理し、セキュリティ上の脅威からアプリケーションを保護します。

Spring bootでのログイン機能の追加手順#

では、実際にSpring bootでログイン機能を追加していきましょう!

1. 依存関係の追加#

まず、pom.xmlファイルにSpring Securityの依存関係を追加します。

<?xml version="1.0" encoding="UTF-8"?>
<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 https://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>4.0.0</version>
		<relativePath/> <!-- lookup parent from repository -->
	</parent>
	<groupId>com.example</groupId>
	<artifactId>hello-spring</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<packaging>war</packaging>
	<name>hello-spring</name>
	<description>Demo project for Spring Boot</description>
	<url/>
	<licenses>
		<license/>
	</licenses>
	<developers>
		<developer/>
	</developers>
	<scm>
		<connection/>
		<developerConnection/>
		<tag/>
		<url/>
	</scm>
	<properties>
		<java.version>21</java.version>
	</properties>
	<dependencies>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter</artifactId>
		</dependency>
    
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-thymeleaf</artifactId>
		</dependency>
        <!-- ここから追加-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-security</artifactId>
        </dependency>

        <dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-data-jpa</artifactId>
		</dependency>
        <!-- ここまで追加-->
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
			<scope>test</scope>
		</dependency>
	</dependencies>

	<build>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
			</plugin>
		</plugins>
	</build>

</project>

この依存関係を追加することで、Spring Securityの機能がプロジェクトに組み込まれます。

2.セキュリティ設定クラスの作成#

次に、セキュリティ設定を行うためのクラスを作成します。

  .gitattributes
  .gitignore
  HELP.md
  mvnw
  mvnw.cmd
  pom.xml
  README.md
  Test.sql  # 追加したSQLファイル
  
├─.mvn
  └─wrapper
          maven-wrapper.properties

├─src
  ├─main
  ├─java
  └─com
      └─example
          └─Practice_spring
  DemoApplication.java

              ├─Controller #前回作成したコントローラーフォルダ
      HelloWorldController.java    # 前回作成したコントローラー
      LoginController.java         # 今回作成するログイン用コントローラー
      LogoutController.java        # 今回作成するログアウト用コントローラー

              ├─entity
      User.java                     # 今回作成するユーザーエンティティクラス

              └─repository
                      UserRepository.java          # 今回作成するユーザーリポジトリクラス

  └─resources
  application.properties

      └─templates
              index.html  # ホーム画面のテンプレート
              login.html  # 今回作成するログイン画面のテンプレート
              mypage.html # 今回作成するマイページのテンプレート

  └─test
      └─java
          └─com
              └─example
                  └─Practice_spring
                          DemoApplicationTests.java   

今回は、DBに既に入力されているユーザー情報を使用してログインをする機能を実装していきます。
前回作成したControllerフォルダ内に、LoginController.javaとLogoutController.javaという2つの新しいJavaクラスファイルを作成します。
さらに、entityフォルダ内にUser.java、repositoryフォルダ内にUserRepository.javaという2つの新しいJavaクラスファイルを作成します。

ではまず、LoginController.javaに以下のコードを追加します。

package com.example.Practice_spring.Controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;

import com.example.Practice_spring.repository.UserRepository;

import jakarta.servlet.http.HttpSession;
import lombok.RequiredArgsConstructor;

@Controller
@RequiredArgsConstructor
public class LoginController {

	private final UserRepository userRepository; // UserRepositoryのインスタンスを注入

	@GetMapping("/login")
	public String loginForm() {
		return "login";
	}

	@PostMapping("/login")
	public String login(@RequestParam String username, @RequestParam String password, HttpSession session) {
		return userRepository.findByUsername(username).filter(user -> user.getPassword().equals(password)).map(user -> {
			session.setAttribute("user", user); // セッションにユーザー情報を保存
			return "redirect:/mypage"; // ログイン成功時はマイページへリダイレクト
		})
				.orElse("redirect:/login?error"); // ログイン失敗時はエラーパラメータ付きでリダイレクト
	}

	@GetMapping("mypage")
	public String mypage(HttpSession session) {
		if (session.getAttribute("user") == null) {
			return "redirect:/login"; // ログインしていない場合はログインページへリダイレクト
		}
		return "mypage"; // マイページのビューを返す
	}
}

このコードは、ログインフォームの表示、ログイン処理、マイページの表示を担当するコントローラーを定義しています。
次に、LogoutController.javaに以下のコードを追加します。

package com.example.Practice_spring.Controller;

import com.example.Practice_spring.entity.User;
import com.example.Practice_spring.repository.UserRepository;
import jakarta.servlet.http.HttpSession;
import lombok.RequiredArgsConstructor;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;

@Controller
@RequiredArgsConstructor
public class LogoutController {
	@GetMapping("/logout")
	public String logout(HttpSession session) {
		session.invalidate(); // セッションを無効化してログアウト
		return "redirect:/login"; // ログアウト後にログインページへリダイレクト
	}
}

このコードは、ログアウト処理を担当するコントローラーを定義しています。
次に、User.javaに以下のコードを追加します。


package com.example.Practice_spring.entity;

import jakarta.persistence.Column;
import jakarta.persistence.Entity;
import jakarta.persistence.GeneratedValue;
import jakarta.persistence.GenerationType;
import jakarta.persistence.Id;
import jakarta.persistence.Table;
import lombok.Data;

@Entity
@Data
@Table(name = "users")
public class User {
	@Id
	@GeneratedValue(strategy = GenerationType.IDENTITY)
	private Long id;

	@Column(nullable = false, unique = true)
	private String username;

	@Column(nullable = false)
	private String password;
}

このコードは、ユーザー情報を表すエンティティクラスを定義しています。
最後に、UserRepository.javaに以下のコードを追加します。

package com.example.Practice_spring.repository;

import java.util.Optional;

import org.springframework.data.jpa.repository.JpaRepository;

import com.example.Practice_spring.entity.User;

public interface UserRepository extends JpaRepository<User, Long> {
	Optional<User> findByUsername(String username); // ユーザー名でユーザーを検索するメソッド
}

このコードは、ユーザー情報をデータベースから取得するためのリポジトリインターフェースを定義しています。

3. ビューの作成#

次に、ビューを作成します。
src/main/resources/templatesディレクトリ内に、login.htmlとmypage.htmlという2つの新しいHTMLファイルを作成します。
login.htmlに以下のコードを追加します。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		    <meta charset="UTF-8">
		        <title>Login</title>
	</head>
	<body>
		<h2>Login</h2>

		<form method="post" action="/login">
			    <label>Username: <input type="text" name="username"></label><br/>
			        <label>Password: <input type="password" name="password"></label><br/>
				    <button type="submit">Login</button>
		</form>

		<div th:if="${param.error}">
			    <p style="color:red;">ログインに失敗しました</p>
		</div>

	</body>
</html>

次に、mypage.htmlに以下のコードを追加します。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		    <meta charset="UTF-8">
		        <title>Mypage</title>
	</head>
	<body>
		<h2>マイページ</h2>

		<a href="/logout">logout</a>

	</body>
</html>

これで、ログイン機能が追加されたWebアプリケーションの基本的な構成が完成しました。

4. DBの準備#

最後に、ユーザー情報を格納するためのデータベースを準備します。
今回は、MariaDBを使用します。
以下のSQLを実行して、usersテーブルを作成し、サンプルユーザーを追加します。

-- データベースの作成
CREATE DATABASE IF NOT EXISTS SpringDB;

-- データベースの選択
USE SpringDB;

-- usersテーブルの作成
CREATE TABLE users (
    id BIGINT AUTO_INCREMENT PRIMARY KEY,
    username VARCHAR(255) NOT NULL UNIQUE,
    password VARCHAR(255) NOT NULL
);

-- サンプルユーザーの挿入(オプション)
INSERT INTO users (username, password) VALUES 
    ('testuser', 'password123'),
    ('admin', 'admin123');

このSQLを実行することで、usersテーブルが作成され、2つのサンプルユーザーが追加されます。

5.Application.propertiesの設定#

最後に、src/main/resources/application.propertiesファイルにデータベース接続の設定を追加します。

spring.application.name=demo
server.port=8080
spring.datasource.url=jdbc:mariadb://localhost:3306/SpringDB
spring.datasource.username=<your-username>
spring.datasource.password=<your-password>
spring.datasource.driver-class-name=org.mariadb.jdbc.Driver
spring.jpa.hibernate.ddl-auto=update
spring.jpa.properties.hibernate.dialect=org.hibernate.dialect.MariaDBDialect

<your-username><your-password>の部分は、MariaDBのユーザー名とパスワードに置き換えてください。

これで、Spring bootアプリケーションにログイン機能が追加されました。
アプリケーションを起動し、http://localhost:8080/loginにアクセスして、ログイン機能を試してみてください。

これで、Spring bootでのログイン機能の追加手順は完了です。

おわりに#

最後に作成したWarファイルをTomcatにデプロイして動作確認を行いましょう。
これにて、Spring bootを使用したログイン機能付きWebアプリケーションの作成は終了です!
次回は、ユーザ登録機能と掲示板機能の追加について解説していきます。
以上、YAMAでした!