2019年9月 – 2019年度Webアプリ

9月30日

チーム開発

これから12月までチーム開発を行い、1月に作ったものを発表してもらう。

チーム開発ではツールとしてBacklogを使う。

チームリーダーは、Backlogスペースを作る
Backlogフリープラン
チーム全員を「管理者」権限で招待する。
詳細されたら確認のメールが届くのでそこからログインする
チームで作るWebアプリケーションを話し合って決める
チームリーダーはプロジェクトを作成する
pom.xmlにhsqldbやspring-securityの依存関係を追加する。
作成するサイトのロバストネス図を作成する。
作成したロバストネス図をWikiにアップロードする。
ロバストネス図をもとにクラス図を作成する。
作成したクラス図をWikiにアップロードする。

どういうアプリケーションを作るか話し合おう！

LINE
掲示板
Wiki
ネットショップ
ブログ
診断メーカー
TODO管理

などなど。

9月26日

課題の採点

9月19日

課題

tweeterプロジェクトに以下の機能を実装する。

ログイン認証の基本動作： 60点
ツイートの投稿： 10点
プロフィール編集: 10点
ツイート削除: 10点
マイページの表示内容： 10点
トップページに全ユーザーのツイート表示: 10点
ツイートのデザイン: 10点

ログイン認証の基本動作

トップページ・マイページ・新規ユーザー登録ページ・ログインページを適切に行き来できること。

トップページはログイン無しでアクセス可能
新規ユーザー登録ページはログイン無しでアクセス可能
新規ユーザー登録ができる
ログインページはログイン無しでアクセス可能
マイページはログインしないとアクセスできない
ログインできる
ログインしないでマイページにアクセスするとログインページを表示

トップページ

ログインページとマイページのリンクを作成。

ツイートの投稿

ログインしているユーザーのアカウントで投稿できる。

プロフィールの編集

ログインしているユーザーが、自分のプロフィールを編集できる。

ツイートの削除

自分で投稿したツイートを削除できる。

マイページの表示内容

プロフィールと、自分の投稿だけを表示する。

トップページに全ユーザーのツイートを表示

トップページにアクセスしたら全ユーザーのすべてのツイートを時系列（新しい順）で表示する。

ツイートのデザイン

トップページとマイページでのツイート一覧で、ツイートの見た目をTwitterっぽくする。

9月12日

ツイートを投稿する処理の実装

MyController.java

	@RequestMapping(value = "/tweet", method = RequestMethod.POST)
	public ModelAndView tweet(ModelAndView mav,
			@ModelAttribute("tweet") @Validated Tweet tweet,
			Errors errors,
			Principal p) {
		if (errors.hasErrors()) {
			mav.setViewName("mypage");
			mav.addObject("msg", "エラーです");
			return mav;
		}

		return new ModelAndView("redirect:/mypage");
	}

どのような情報がTweetに入っているかを確認するため、TweetにtoString()メソッドを追加する。

Tweet.java

	@Override
	public String toString() {
		StringBuilder builder = new StringBuilder();
		builder
			.append("Tweet [id=").append(id)
			.append(", content=").append(content)
			.append(", time=").append(time)
			.append(", profile=").append(profile)
			.append("]");
		return builder.toString();
	}

コントローラからTweetをコンソールに出力してみる。

MyContoller.java

	@RequestMapping(value = "/tweet", method = RequestMethod.POST)
	public ModelAndView tweet(ModelAndView mav,
			@ModelAttribute("tweet") @Validated Tweet tweet,
			Errors errors,
			Principal p) {
		if (errors.hasErrors()) {
			mav.setViewName("mypage");
			mav.addObject("msg", "エラーです");
			return mav;
		}
		System.out.println(tweet);
		return new ModelAndView("redirect:/mypage");
	}

Tweetに現在時刻とProfileを設定する。

	@RequestMapping(value = "/tweet", method = RequestMethod.POST)
	public ModelAndView tweet(ModelAndView mav,
			@ModelAttribute("tweet") @Validated Tweet tweet,
			Errors errors,
			Principal p) {
		if (errors.hasErrors()) {
			mav.setViewName("mypage");
			mav.addObject("msg", "エラーです");
			return mav;
		}
		Optional<Profile> data = repository.findByUsername(p.getName());
		tweet.setProfile(data.get());
		tweet.setTime(new Date());
		System.out.println(tweet);
		return new ModelAndView("redirect:/mypage");
	}

Tweetをデータベースに保存するために、リポジトリを作成する。

TweetRepository.java

package jp.abc;

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

public interface TweetRepository extends JpaRepository<Tweet, Long> {

}

リポジトリを作成したので、コントローラからデータベースに保存する。
リポジトリをインスタンス変数として追加し、@AutowiredアノテーションをつけてDIしてもらう。

MyController.java

@Controller
public class MyController {
	@Autowired
	private JdbcUserDetailsManager userManager;
	@Autowired
	private ProfileRepository repository;
	@Autowired
	private TweetRepository tweetRepository;

	@RequestMapping(value = "/tweet", method = RequestMethod.POST)
	public ModelAndView tweet(ModelAndView mav,
			@ModelAttribute("tweet") @Validated Tweet tweet,
			Errors errors,
			Principal p) {
		if (errors.hasErrors()) {
			mav.setViewName("mypage");
			mav.addObject("msg", "エラーです");
			return mav;
		}
		Optional<Profile> data = repository.findByUsername(p.getName());
		tweet.setProfile(data.get());
		tweet.setTime(new Date());
		System.out.println(tweet);
		tweetRepository.saveAndFlush(tweet);
		return new ModelAndView("redirect:/mypage");
	}

mypage にツイート一覧を表示できるように、コントローラからModelAndViewに渡しておく。

MyController.java

	@RequestMapping(value = "/mypage")
	public ModelAndView top(ModelAndView mav, Principal p) {
		mav.setViewName("mypage");
		mav.addObject("username", p.getName());
		Optional<Profile> data = repository.findByUsername(p.getName());
		Profile profile;
		if (!data.isPresent()) {
			profile = new Profile();
			profile.setUsername(p.getName());
			repository.saveAndFlush(profile);
		} else {
			profile = data.get();
		}
		mav.addObject("profile", profile);
		List<Tweet> list = tweetRepository.findAll();
		mav.addObject("datalist", list);
		return mav;
	}

mypage にツイート一覧を表示する。

mypage.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" />
    <title>login</title>
</head>
<body>
<h1>マイページ</h1>
<p>ようこそ、<span th:text="${username}"></span>さん！</p>
<p th:text="${profile.username}"></p>
<form th:action="@{/tweet}" th:object="${tweet}" method="post">
	<textarea name="content" cols="40" rows="10"></textarea>
	<br />
	<input type="submit" value="ツイートする" />
</form>
<form th:action="@{/logout}" method="post">
	<input type="submit" value="ログアウト" />
</form>

<hr />
<table>
	<tr>
		<th>名前</th><th>日時</th><th>投稿内容</th>
	</tr>
	<tr th:each="obj : ${datalist}">
		<td th:text="${obj.profile.username}"></td>
		<td th:text="${obj.time}"></td>
		<td th:text="${obj.content}"></td>
	</tr>
</table>

</body>
</html>

9月9日

ACID特性

Atomicity・Consistency・Isolation・Durabilityを考慮してプログラミングしよう。

入力フィールドのチェックを username と password で分割する。(Atomicity）

$(function() {
	$('[type=submit]').attr('disabled', true);
	$('[name=username]').on('keyup', function() {
		checkUserNameField();
	});
	$('[type=password]').on('keyup', function() {
		checkPasswordField();
	});
});

function checkUserNameField() {
	var name = $('[name=username]').val();
	if (name.length == 0) {
		$('[type=submit]').attr('disabled', true);
		$('div.err').text('ユーザー名を入力してください。');
		return;
	}
	$('div.err').text('');
	$('[type=submit]').attr('disabled', false);
}

function checkPasswordField() {
	var p1 = $('[name=password]').val();
	var p2 = $('[name=password2]').val();
	if (p1 != p2) {
		$('div.err').text('パスワードが一致していません。');
		$('[type=submit]').attr('disabled', true);
		return;
	}
	$('div.err').text('');
	$('[type=submit]').attr('disabled', false);
}

ログインしたユーザー名を表示する

マイページでは、ログインしたユーザー名を表示してみよう。
メソッドに Principal 引数を追加すると、ログインしたユーザーに関する情報をもらえる。

MyController.java

	@RequestMapping(value = "/mypage")
	public ModelAndView top(ModelAndView mav, Principal p) {
		mav.setViewName("mypage");
		mav.addObject("username", p.getName());
		return mav;
	}

HTMLテンプレートで受け取った username を表示する。

mypage.html

<body>
    <h1>マイページ</h1>
    <p>ようこそ、<span th:text="${username}"></span>さん！</p>
    <form th:action="@{/logout}" method="post">
        <input type="submit" value="ログアウト" />
    </form>
</body>

ユーザーの情報を持たせるために Profile クラスを作成する。

Profile.java

package jp.abc;

import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.validation.constraints.NotEmpty;
import javax.validation.constraints.NotNull;

@Entity
public class Profile {
    @Id
    @GeneratedValue(strategy = GenerationType.AUTO)
    @Column
    @NotNull
    private long id;

    @Column(length = 200, nullable = false)
    @NotEmpty
    private String username;

    @Column
    private String profile;

	public long getId() {
		return id;
	}

	public void setId(long id) {
		this.id = id;
	}

	public String getUsername() {
		return username;
	}

	public void setUsername(String username) {
		this.username = username;
	}

	public String getProfile() {
		return profile;
	}

	public void setProfile(String profile) {
		this.profile = profile;
	}

}

エンティティを作ったので対応するリポジトリを作成する。

ProfileRepository.java

package jp.abc;

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

public interface ProfileRepository extends JpaRepository<Profile, Long> {

}

Principal からは username しか取得できないので、 username をもとに Profile を取得するメソッドをリポジトリに追加する。

package jp.abc;

import java.util.Optional;

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

public interface ProfileRepository extends JpaRepository<Profile, Long> {
	public Optional<Profile> findByUsername(String username);
}

コントローラで、Profileを検索してみて、なかったら新規登録する。

	@RequestMapping(value = "/mypage")
	public ModelAndView top(ModelAndView mav, Principal p) {
		mav.setViewName("mypage");
		mav.addObject("username", p.getName());
		Optional<Profile> data = repository.findByUsername(p.getName());
		Profile profile = data.get();
		if (profile == null) {
			profile = new Profile();
			profile.setUsername(p.getName());
			repository.saveAndFlush(profile);
		}
		mav.addObject("profile", profile);
		return mav;
	}

HTMLテンプレートでは、profile の情報も表示してみる。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" />
    <title>login</title>
</head>
<body>
    <h1>マイページ</h1>
    <p>ようこそ、<span th:text="${username}"></span>さん！</p>
    <p th:text="${profile.username}"></p>
    <form th:action="@{/logout}" method="post">
        <input type="submit" value="ログアウト" />
    </form>
</body>
</html>

コントローラのコードが悪かったようで、例外が発生した。

java.util.NoSuchElementException: No value present
	at java.util.Optional.get(Optional.java:135) ~[na:1.8.0_152]
	at jp.abc.MyController.top(MyController.java:59) ~[classes/:na]

値が存在しないときは Optional#get() を呼んではいけないらしいので、コードを書き換える。

	@RequestMapping(value = "/mypage")
	public ModelAndView top(ModelAndView mav, Principal p) {
		mav.setViewName("mypage");
		mav.addObject("username", p.getName());
		Optional<Profile> data = repository.findByUsername(p.getName());
		Profile profile;
		if (!data.isPresent()) {
			profile = new Profile();
			profile.setUsername(p.getName());
			repository.saveAndFlush(profile);
		} else {
			profile = data.get();
		}
		mav.addObject("profile", profile);
		return mav;
	}

Tweet クラスを作成する。

Tweet.java

package jp.abc;

import java.util.Date;

import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.ManyToOne;
import javax.validation.constraints.NotEmpty;
import javax.validation.constraints.NotNull;

@Entity
public class Tweet {
    @Id
    @GeneratedValue(strategy = GenerationType.AUTO)
    @Column
    @NotNull
    private long id;

    @Column(length = 200, nullable = false)
    @NotEmpty
    private String content;

    @Column(nullable = false)
    private Date time;

    @ManyToOne
    private Profile profile;

	public long getId() {
		return id;
	}

	public void setId(long id) {
		this.id = id;
	}

	public String getContent() {
		return content;
	}

	public void setContent(String content) {
		this.content = content;
	}

	public Date getTime() {
		return time;
	}

	public void setTime(Date time) {
		this.time = time;
	}

	public Profile getProfile() {
		return profile;
	}

	public void setProfile(Profile profile) {
		this.profile = profile;
	}
}

Profile と Tweet を連携する。

Profile.java

package jp.abc;

import java.util.List;

import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.OneToMany;
import javax.validation.constraints.NotEmpty;
import javax.validation.constraints.NotNull;

@Entity
public class Profile {
    @Id
    @GeneratedValue(strategy = GenerationType.AUTO)
    @Column
    @NotNull
    private long id;

    @Column(length = 200, nullable = false)
    @NotEmpty
    private String username;

    @Column
    private String profile;

    @OneToMany
    private List<Tweet> tweets;

	public long getId() {
		return id;
	}

	public void setId(long id) {
		this.id = id;
	}

	public String getUsername() {
		return username;
	}

	public void setUsername(String username) {
		this.username = username;
	}

	public String getProfile() {
		return profile;
	}

	public void setProfile(String profile) {
		this.profile = profile;
	}

	public List<Tweet> getTweets() {
		return tweets;
	}

	public void setTweets(List<Tweet> tweets) {
		this.tweets = tweets;
	}

}

HTMLテンプレートに投稿用フォームを追加する。

mypage.html

<body>
    <h1>マイページ</h1>
    <p>ようこそ、<span th:text="${username}"></span>さん！</p>
    <p th:text="${profile.username}"></p>
    <form th:action="@{/tweet}" th:object="${tweet}">
    	<textarea name="content" cols="40" rows="10"></textarea>
    	<br />
    	<input type="submit" value="ツイートする" />
    </form>
    <form th:action="@{/logout}" method="post">
        <input type="submit" value="ログアウト" />
    </form>
</body>

9月5日

ユーザー登録のバリデーション

パスワードは確認のために二回入力させる。
新規ユーザー登録で、登録できないときはエラーを表示する。

すでに登録済みのユーザー名の場合
パスワードが不一致の場合

以下のコードでパスワードの不一致のエラーを表示できる。
ただし、登録ボタンを押せるので、登録はできてしまう。
不一致のときは、登録ボタンを押せないようにする必要がある。

newuser.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" />
    <title>新規ユーザー登録</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
</head>
<style type="text/css">
.err {
	background: #ff8080;
}
</style>
<script type="text/javascript">
$(function() {
	$('[type=password]').on('change', function() {
		var p1 = $('[name=password]').val();
		var p2 = $('[name=password2]').val();
		if (p1 != p2) {
			$('div.err').text('パスワードが一致していません。');
		} else {
			$('div.err').text('');
		}
	});
})
</script>
<body>
    <h1>新規ユーザー登録</h1>
    <form th:action="@{/newuser}" method="post">
        <div><label>ユーザ名: <input type="text" name="username"/> </label></div>
        <div><label>パスワード: <input type="password" name="password"/> </label></div>
        <div><label>パスワード再入力: <input type="password" name="password2"/> </label></div>
        <div class="err"></div>
        <div><input type="submit" value="登録"/></div>
    </form>
    <a href="/">戻る</a>
</body>
</html>

ユーザーをデータベースに登録するときのエラー
データベース登録時のエラーはサーバーサイドでチェックする。

package jp.abc;

import javax.servlet.http.HttpServletRequest;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.security.core.userdetails.User;
import org.springframework.security.core.userdetails.User.UserBuilder;
import org.springframework.security.provisioning.JdbcUserDetailsManager;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;

@Controller
public class MyController {
	@Autowired
	private JdbcUserDetailsManager userManager;

	@RequestMapping(value = "/")
	public String index() {
		return "index";
	}

	@RequestMapping(value = "/login")
	public String login() {
		return "login";
	}

	@RequestMapping(value = "/newuser", method = RequestMethod.GET)
	public String newuser() {
		return "newuser";
	}

	@RequestMapping(value = "/newuser", method = RequestMethod.POST)
	public String register(@RequestParam("username") String username,
			@RequestParam("password") String password,
			HttpServletRequest req) {
		UserBuilder users = User.withDefaultPasswordEncoder();
		try {
			userManager.createUser(users.username(username).password(password).roles("USER").build());
		} catch (Exception e) {
			req.setAttribute("msg", "その名前は登録できません。");
			return "newuser";
		}
		return "login";
	}

	@RequestMapping(value = "/mypage")
	public String top() {
		return "mypage";
	}
}

HTMLテンプレートにエラーメッセージを表示するコードを追加する。

<body>
    <h1>新規ユーザー登録</h1>
    <form th:action="@{/newuser}" method="post">
        <div><label>ユーザ名: <input type="text" name="username"/> </label></div>
        <div><label>パスワード: <input type="password" name="password"/> </label></div>
        <div><label>パスワード再入力: <input type="password" name="password2"/> </label></div>
        <div class="err" th:text="${msg}"></div>
        <div><input type="submit" value="登録"/></div>
    </form>
    <a href="/">戻る</a>
</body>

パスワードの1文字を入力するたびに不一致のエラーを表示する。
newuser.html

<script type="text/javascript">
$(function() {
	$('[type=password]').on('keyup', function() {
		var p1 = $('[name=password]').val();
		var p2 = $('[name=password2]').val();
		if (p1 != p2) {
			$('div.err').text('パスワードが一致していません。');
		} else {
			$('div.err').text('');
		}
	});
})

パスワード不一致
パスワードの不一致の場合や、ユーザー名が空欄のときは登録ボタンを押せないようにする。

<script type="text/javascript">
$(function() {
	$('[type=password]').on('keyup', function() {
		var p1 = $('[name=password]').val();
		var p2 = $('[name=password2]').val();
		if (p1 != p2) {
			$('div.err').text('パスワードが一致していません。');
			$('[type=submit]').attr('disabled', true);
		} else {
			$('div.err').text('');
			var name = $('[name=username]').val();
			if (name != '') {
				$('[type=submit]').attr('disabled', false);
			}
		}
	});
})
</script>

パスワードが一致しているときにユーザー名を入力しても登録ボタンを押せないままなので、そこを改善する。

newuser.html

<script type="text/javascript">
$(function() {
	$('[type=submit]').attr('disabled', true);
	$('[name=username]').on('keyup', function() {
		checkFields();
	});
	$('[type=password]').on('keyup', function() {
		checkFields();
	});
});

function checkFields() {
	var name = $('[name=username]').val();
	if (name.length == 0) {
		$('[type=submit]').attr('disabled', true);
		$('div.err').text('ユーザー名を入力してください。');
		return;
	}
	var p1 = $('[name=password]').val();
	var p2 = $('[name=password2]').val();
	if (p1 != p2) {
		$('div.err').text('パスワードが一致していません。');
		$('[type=submit]').attr('disabled', true);
		return;
	}
	$('div.err').text('');
	$('[type=submit]').attr('disabled', false);
}
</script>

9月2日

ログイン認証

プロジェクト名: tweeter
パッケージ名: jp.abc

pom.xmlにTymeleafとJPAとHSQLDBの依存関係を追加する。
Spring Boot のバージョンを2.1.4にする。

<?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>2.1.4.RELEASE</version>
		<relativePath/> <!-- lookup parent from repository -->
	</parent>
	<groupId>jp.abc</groupId>
	<artifactId>tweeter</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<name>tweeter</name>
	<description>Tweeter</description>

	<properties>
		<java.version>1.8</java.version>
	</properties>

	<dependencies>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
			<scope>test</scope>
		</dependency>

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-thymeleaf</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-security</artifactId>
		</dependency>

		<dependency>
			<groupId>org.hsqldb</groupId>
			<artifactId>hsqldb</artifactId>
		</dependency>

	</dependencies>

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

</project>

HSQLDBを起動するBATファイルを修正する。tweeter インスタンスを追加する。

cd C:\pleiades\hsqldb-2.4.1\hsqldb\lib
java -cp hsqldb.jar org.hsqldb.Server --database.0 db/tweeter --dbname.0 tweeter

application.properties にHSQLDBの設定を追加する。

spring.datasource.url=jdbc:hsqldb:hsql://localhost/tweeter
spring.datasource.username=sa
spring.datasource.password=
spring.datasource.driver-class-name=org.hsqldb.jdbc.JDBCDriver
spring.jpa.properties.hibernate.dialect=org.hibernate.dialect.HSQLDialect
spring.jpa.hibernate.ddl-auto=update

Spring Boot でJDBCを使ってユーザー登録・ユーザー認証する方法

4つのHTMLテンプレートを作成する。

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>トップページ</title>
</head>
<body>
    <h1>トップページ</h1>
    <a href="/mypage">マイページ</a>
</body>
</html>

mypage.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" />
    <title>login</title>
</head>
<body>
    <h1>マイページ</h1>
    <form th:action="@{/logout}" method="post">
        <input type="submit" value="ログアウト" />
    </form>
</body>
</html>

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" />
    <title>login</title>
</head>
<body>
    <div th:if="${param.error}">
        エラー: ユーザ名・パスワードが違います。
    </div>
    <form th:action="@{/login}" method="post">
        <div><label>ユーザ名: <input type="text" name="username"/> </label></div>
        <div><label>パスワード: <input type="password" name="password"/> </label></div>
        <div><input type="submit" value="ログイン"/></div>
    </form>
    <div><a href="/newuser">新規ユーザー登録</a></div>
    <a href="/">戻る</a>
</body>
</html>

newuser.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" />
    <title>新規ユーザー登録</title>
</head>
<body>
    <h1>新規ユーザー登録</h1>
    <form th:action="@{/newuser}" method="post">
        <div><label>ユーザ名: <input type="text" name="username"/> </label></div>
        <div><label>パスワード: <input type="password" name="password"/> </label></div>
        <div><label>パスワード再入力: <input type="password" name="password2"/> </label></div>
        <div><input type="submit" value="登録"/></div>
    </form>
    <a href="/">戻る</a>
</body>
</html>

コントローラを作成する。
MyController.java

package jp.abc;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class MyController {
    @RequestMapping(value = "/")
    public String index() {
        return "index";
    }

    @RequestMapping(value = "/login")
    public String login() {
        return "login";
    }

    @RequestMapping(value = "/newuser")
    public String newuser() {
        return "newuser";
    }

    @RequestMapping(value = "/mypage")
    public String top() {
        return "mypage";
    }
}

WebSecurityConfig クラスを作成する。

package jp.abc;

import org.springframework.context.annotation.Configuration;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;

@Configuration
@EnableWebSecurity
public class WebSecurityConfig extends WebSecurityConfigurerAdapter{
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.authorizeRequests()
            .antMatchers("/", "/newuser").permitAll()
            .anyRequest().authenticated()
            .and()
            .formLogin()
            .loginPage("/login")
            .permitAll()
            .and()
            .logout()
            .permitAll();
    }
}

WebSecurityConfig にデータベース認証のコードを追加する。

package jp.abc;

import javax.sql.DataSource;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Configuration;
import org.springframework.security.config.annotation.authentication.builders.AuthenticationManagerBuilder;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;
import org.springframework.security.core.userdetails.User;
import org.springframework.security.core.userdetails.User.UserBuilder;

@Configuration
@EnableWebSecurity
public class WebSecurityConfig extends WebSecurityConfigurerAdapter{
	@Autowired
	private DataSource dataSource;

	@Autowired
	public void configureGlobal(AuthenticationManagerBuilder auth) throws Exception {
		UserBuilder users = User.withDefaultPasswordEncoder();
		auth
		.jdbcAuthentication()
		.dataSource(dataSource)
		.withDefaultSchema()
		.withUser(users.username("user").password("password").roles("USER"));
	}

	@Override
	protected void configure(HttpSecurity http) throws Exception {
		http.authorizeRequests()
		.antMatchers("/", "/newuser").permitAll()
		.anyRequest().authenticated()
		.and()
		.formLogin()
		.loginPage("/login")
		.permitAll()
		.and()
		.logout()
		.permitAll();
	}
}

このコードで起動すると、1度目は正常に起動するが、再起動すると例外が発生して起動できなくなる。
例外の原因が withDefaultScheme() と withUser() なので、その部分を削除する。

WebSecurityConfig.java

	@Autowired
	public void configureGlobal(AuthenticationManagerBuilder auth) throws Exception {
		auth
		.jdbcAuthentication()
		.dataSource(dataSource);
	}

コントローラで新規ユーザー登録のPOSTメソッドを受け付けるようにする。

package jp.abc;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.security.core.userdetails.User;
import org.springframework.security.core.userdetails.User.UserBuilder;
import org.springframework.security.provisioning.JdbcUserDetailsManager;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;

@Controller
public class MyController {
	@Autowired
	private JdbcUserDetailsManager userManager;

	@RequestMapping(value = "/")
	public String index() {
		return "index";
	}

	@RequestMapping(value = "/login")
	public String login() {
		return "login";
	}

	@RequestMapping(value = "/newuser", method = RequestMethod.GET)
	public String newuser() {
		return "newuser";
	}

	@RequestMapping(value = "/newuser", method = RequestMethod.POST)
	public String register(@RequestParam("username") String username,
			@RequestParam("password") String password) {
		UserBuilder users = User.withDefaultPasswordEncoder();
		userManager.createUser(users.username(username).password(password).roles("USER").build());
		return "login";
	}

	@RequestMapping(value = "/mypage")
	public String top() {
		return "mypage";
	}
}

この状態で起動しようとするとエラーが発生して起動に失敗する。

***************************
APPLICATION FAILED TO START
***************************

Description:

Field userManager in jp.abc.MyController required a bean of type 'org.springframework.security.provisioning.JdbcUserDetailsManager' that could not be found.

The injection point has the following annotations:
	- @org.springframework.beans.factory.annotation.Autowired(required=true)


Action:

Consider defining a bean of type 'org.springframework.security.provisioning.JdbcUserDetailsManager' in your configuration.

JdbcUserDetailManager のビーンを設定に用意しろと言われているので、その設定を追加する。

WebSecurityConfig.java

	@Bean
	public JdbcUserDetailsManager jdbcUserDetailsManager() throws Exception {
		JdbcUserDetailsManager jdbcUserDetailsManager = new JdbcUserDetailsManager();
		jdbcUserDetailsManager.setDataSource(dataSource);
		return jdbcUserDetailsManager;
	}

設定を追加した後に再起動すると、エラーなく起動できる。
ユーザー登録とログインもできるようになっていて、ログインすればマイページにアクセスできる。