🦁

【1日1zenn - day13】Spring Bootで認証機能とか作ってみる

2024/12/29に公開

一旦GETとPOSTを作っていく

まずこちらの記事を参考にGETを作ってみました。

GET

Controller

DemoApplication.kt

package com.example.demo

import org.springframework.boot.autoconfigure.SpringBootApplication
import org.springframework.boot.runApplication
import org.springframework.web.bind.annotation.RequestMapping
import org.springframework.stereotype.Controller
import org.springframework.ui.Model
import org.springframework.web.bind.annotation.GetMapping
import org.springframework.web.bind.annotation.RequestParam

@Controller
@SpringBootApplication
class DemoApplication {

	@RequestMapping("/")
	fun home(): String {
		return "hello"
	}

	@GetMapping("/get-message")
	fun getMessage(@RequestParam(required = false, defaultValue = "未入力") message: String,
				   @RequestParam(required = false, defaultValue = "未入力") id: String,
				   model: Model
	): String{
		model.addAttribute("message",message)
		model.addAttribute("id",id)
		return "get_message"
	}
}

fun main(args: Array<String>) {
	runApplication<DemoApplication>(*args)
}

@RequestParamというアノテーションでパラメータを作る
- required = falseで任意項目にでき、defaultValueで入力されなかった場合の値を決められる
- そのアノテーションがついた要素としてString型のmessageを定義する
関数自体はString型にすることで、return内の文字列と一致するファイル名のHTMLファイルをTemplatesから拾いにいく
modelにパラメータ名と値をaddAttributeする
- そのためにコンストラクタでmodel: ModelとしてModelオブジェクトのインスタンスを作る(正確には依存性を注入する)

View

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
<p>Getで受け取った内容は下記です。</p>
<p th:text="'メッセージは ' + ${message} + ' です。'"></p>
<p th:text="'IDは ' + ${id} + ' です'"></p>
</body>
</html>

<html xmlns:th="http://www.thymeleaf.org" lang="ja">みたいにhtmlファイルをthymeleafに登録する
<p th:text="'メッセージは ' + ${message} + ' です。'"></p>みたいにpタグに受け取って表示する内容を書いておく
- thは動的にデータを扱うためのtymeleaf専用の要素

表示結果

たとえばhttp://localhost:8080/get-message?message=入力してるぜ！とリクエストを送ると以下みたいになる。

日本語も勝手にエンコードしてくれるっぽい。

POST

Controller

	@GetMapping("/post-message")
	fun postMessage(): String{
		return "post_message"
	}

	@PostMapping("/confirm-message")
	fun confirmMessage(
		@RequestParam(required = false) name: String,
		@RequestParam(required = false) message: String,
		model: Model
	): String{
		model.addAttribute("name", name)
		model.addAttribute("message", message)
		return "confirm_message"
	}

post_message.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
<form th:action="@{/confirm-message}" method="post">
    <label>
        ユーザー名:
        <input type="text" name="name">
        メッセージ:
        <input type="text" name="message">
    </label>
    <button type="submit">送信</button>
    <button type="reset">削除</button>
</form>
</body>
</html>

confirm_message.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
<p>Postで受け取ったメッセージは下記です。</p>
<p th:text="'送り主： ' + ${name}"></p>
<p th:text="'本文： ' + ${message}"></p>
</body>
</html>

流れ

フォーム送信用のHTMLページpost_message.htmlをGETする
post_message.htmlでは、th:actionというフォーム送信用のThymeleafの属性を指定
- submitボタンが押されると登録したaction（今回は/confirm-message）が実行されるのだが、試したらsubmitを付けてなくても動いたので、何かしらボタンを押されたら実行できそう
- ボタンが複数あると、submitをつけた要素がactionを実行しそう
confirm-messageでは、modelを通してpost_messageから渡された要素を表示する

なんとなく理解してきた気がするので、認証周りをやってみる。

認証周り

公式チュートリアル

まず公式をやります。

以下の資材を準備。

home.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="https://www.thymeleaf.org">
<head>
    <title>Spring Security Example</title>
</head>
<body>
<h1>Welcome!</h1>

<p>Click <a th:href="@{/hello}">here</a> to see a greeting.</p>
</body>
</html>

hello.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="https://www.thymeleaf.org">
<head>
    <title>Hello World!</title>
</head>
<body>
<h1>Hello world!</h1>
</body>
</html>

MvcConfig.kt

package com.example.securingweb

import org.springframework.context.annotation.Configuration
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer

@Configuration
class MvcConfig : WebMvcConfigurer {
    override fun addViewControllers(registry: ViewControllerRegistry) {
        registry.addViewController("/home").setViewName("home")
        registry.addViewController("/").setViewName("home")
        registry.addViewController("/hello").setViewName("hello")
        registry.addViewController("/login").setViewName("login")
    }
}

これで、/homeのリンクをクリックするとhello.htmlが開かれる、はずだったのですが、No static resource hello.というエラーで表示できない。
なんのミスだろこれ。ちょっと作り直します。

一旦閉める

そこからごちゃごちゃやって、結局動いたんだけど、理解は明日に回します。
長くなりそうなので、一旦締める

一旦GETとPOSTを作っていく

GET

Controller

View

表示結果

POST

Controller

post_message.html

confirm_message.html

流れ

認証周り

公式チュートリアル

home.html

hello.html

MvcConfig.kt

一旦閉める

Discussion