目次
初めに
1.開発環境の確認
2.HTML・CSSで簡単なログイン画面を作る
3.ログイン画面の動作確認
最後に

初めに
1.開発環境の確認
使用するエディター
Visual Studio Codeにインストールする拡張機能
使用する技術一覧とバージョン
Spring Initializrで追加するモジュール
動作確認
1. SpringBootの起動確認
2. Live Serverの起動確認
3.ログイン画面の動作確認
最後に

初めに

本記事では、Spring Securityを使用したログイン機能の実装方法について解説します。ログイン機能の実装方法には主に2つのアプローチがあります。

Formログイン:
- 特徴: これは、サーバー側でHTMLをレンダリング(描画処理)し、通常のWebページとして提供されるログインフォームを使用してユーザー認証を行う方法です。ユーザーが情報を入力し送信すると、サーバー側で認証を行い、結果を返します。
- 利点: シンプルで直感的な実装が可能。SPAに比べて初期の学習コストが低い。
SPA (Single Page Application) ログイン:
- 特徴: JavaScriptフレームワーク（例: React, Angular, Vue.jsなど）を使用して、フロント側でHTMLをレンダリング(描画処理)し、ページの再読み込みなしに動的にユーザー認証を行う方法です。通常はAPIを使用してバックエンドと通信します。
- 利点: ユーザー体験が向上し、ページの再読み込みが不要なので応答速度が速い。

このパートでは、Formログインを中心に解説していきます。Part1では開発環境の確認と簡単なログイン画面の実装をします。以下の手順で行っていきます。

手順
1.開発環境の確認
2.HTML・CSSで簡単なログイン画面を作る
3.ログイン画面の動作確認

1.開発環境の確認

以下のものを準備してください。

使用するエディター

本記事では、Visual Studio Codeを使用して開発を行っていきます。よくJavaの開発で使用するEclipseを使用しても問題ないんですが画面の起動でこの後確認する「Visual Studio Codeにインストールする拡張機能」の「Live Server」を使いたいのでVisual Studio Codeと「Live Server」の拡張機能のインストールだけは行ってください。

Visual Studio Codeにインストールする拡張機能

以下の拡張機能をインストールしてください。

Live Server
Extension Pack for Java
Gradle for Java
Spring Boot Extension Pack

もし、Eclipseを使用する場合は1の「Live Server」だけインストールしてください。

使用する技術一覧とバージョン

本記事では、以下のプログラミング言語を使用しますので「Java」と「PostgreSQL」のインストールを行なってください。

Java (以下は使用バージョン)

openjdk version "17.0.4.1" 2022-08-12
OpenJDK Runtime Environment Temurin-17.0.4.1+1 (build 17.0.4.1+1)
OpenJDK 64-Bit Server VM Temurin-17.0.4.1+1 (build 17.0.4.1+1, mixed mode, sharing)

HTML
CSS
JavaScript
PostgreSQL (以下は使用バージョン)
```
psql (PostgreSQL) 15.0
```

もしEclipseを使用する場合、Eclipseに組み込まれているJavaを使用しても本記事の内容には問題ありません。

Spring Initializrで追加するモジュール

Spring Initializrを使用して以下のプロジェクトの設定やモジュールを追加してください。(Visual Studio Codeの拡張機能のものやEclipseプロジェクトを作成するのでも問題ないです。)

Project：使用するビルドツールを決めます。
- Gradle-Groovy
Language：使用する言語を決めます。
- Java
Spring Boot：使用するSpring Bootのバージョンを決めます。
- 3.1.3
Project Metadata：
- Group：通常、プロジェクトまたは組織の逆ドメイン名を設定します。
  - com.study
- Artifact：プロジェクトの名前を設定します。
  - loginpractice
- Name：プロジェクトの読みやすい名前を設定します。
  - loginpractice
- Description：プロジェクトの短い説明を設定します。
  - A project created for studying and practicing the implementation of a login functionality using Spring Boot.
- Package name：Javaのソースコードのパッケージ名を設定します。
  - com.study.loginpractice
- Packaging：Javaのアーカイブファイルの形式を設定します。
  - Jar
- Java：使用するJavaのバージョンを設定します。
  - 17
Dependencies：使用するモジュールを設定します。
- Spring Boot Dev Tools
- Lombok
- Spring Web
- Spring Session
- Spring Security
- MyBatis Framework
- PostgreSQL Driver
- Validation

設定したら、「GENERATE CTRL + ↲」をクリックして、任意の場所に保存してください。

上記で保存したZipファイルを解凍してください。

動作確認

SpringBootの起動確認

データベース・スキーマ・テーブルの作成を行ってください。

postgresにログイン

psql -U postgres

データベースの作成

CREATE DATABASE login_db;

データベースの変更

\c login_db

スキーマの作成

CREATE SCHEMA auth;

テーブルの作成

CREATE TABLE auth.users (
    id SERIAL PRIMARY KEY,
    username VARCHAR(255) NOT NULL UNIQUE,
    password_hash VARCHAR(255) NOT NULL,
    email VARCHAR(255) UNIQUE,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

Visual Studio Codeを起動し、Spring Initializrで保存したフォルダを指定してください。

application.propertiesにDB接続の設定を追加

spring.datasource.url=jdbc:postgresql://localhost:5432/login_db?currentSchema=auth
spring.datasource.username=postgres
spring.datasource.password=password
spring.datasource.driver-class-name=org.postgresql.Driver

アプリを実行する
「LoginpracticeApplication.java」を開いて、「Run」をクリックしてください。
アプリを起動する
以下のURLにアクセスしてください。
```
http://localhost:8080/login
```

以下の画面が表示されれば成功です。

Live Serverの起動確認

「loginpractice」と同じ階層に「front」というフォルダを作成し、その直下に「index.html」を作成してください。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ホーム画面</title>
</head>
<body>
    <h1>Hello, World</h1>
</body>
</html>

右下の「Go Live」をクリックしてください。

以下のように変化します。
上記の変化と同時にブラウザが起動し、作成したHTMLの画面が表示されれば成功です。

上記のアクセスURL

http://127.0.0.1:5500/front/index.html

Port:5500をクリックするとサーバを停止します。

再び「Go Live」がサーバが停止しています。

2.HTML・CSSで簡単なログイン画面を作る

「index.html」と同じ階層に「login.html」を作成してください。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ログイン画面</title>
    <link rel="stylesheet" href="css/styles.css">
</head>

<body>
    <div class="login-container">
        <form action="http://localhost:8080/login" method="post">
            <input type="text" name="username" class="login-input" placeholder="Username">
            <input type="password" name="password" class="login-input" placeholder="Password">
            <button type="submit" class="login-btn">Login</button>
        </form>
    </div>
</body>

</html>

「index.html」と同じ階層に「css」というフォルダを作成し、その直下に「styles.css」を作成してください。

/* ベースとなるbodyのスタイル設定 */
body {
    font-family: 'Arial', sans-serif;  /* 使用するフォント */
    background-color: #f4f4f4;        /* 背景色 */
    display: flex;                    /* フレックスボックスを使用 */
    justify-content: center;          /* 中央揃え（水平方向） */
    align-items: center;              /* 中央揃え（垂直方向） */
    height: 100vh;                    /* ビューポートの高さを100%に設定 */
    margin: 0;                        /* 余白のリセット */
    padding: 0;                       /* パディングのリセット */
}

/* ログインフォームのコンテナのスタイル設定 */
.login-container {
    background-color: #fff;          /* 背景色 */
    padding: 2rem;                   /* 内側の余白 */
    border-radius: 5px;              /* 角の丸み */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); /* ボックスシャドウ */
    width: 300px;                    /* 幅 */
}

/* ログインの入力フィールドのスタイル設定 */
.login-input {
    width: 100%;                     /* 幅 */
    padding: 10px;                   /* 内側の余白 */
    margin-bottom: 15px;             /* 下側の余白 */
    border: 1px solid #ddd;          /* 枠線 */
    border-radius: 5px;              /* 角の丸み */
    font-size: 16px;                 /* フォントサイズ */
    outline: none;                   /* アウトラインの非表示 */
}

/* ログインボタンのスタイル設定 */
.login-btn {
    width: 100%;                     /* 幅 */
    padding: 10px;                   /* 内側の余白 */
    background-color: #3498db;       /* 背景色 */
    border: none;                    /* 枠線の非表示 */
    border-radius: 5px;              /* 角の丸み */
    color: #fff;                     /* 文字色 */
    cursor: pointer;                 /* カーソルをポインターに設定 */
    transition: background-color 0.3s; /* 背景色のアニメーション */
}

/* ログインボタンをホバーした時のスタイル設定 */
.login-btn:hover {
    background-color: #2980b9;       /* 背景色 */
}