첫 번째 SpringBoot5~ 로그인 기능: 사용자 정의~

개시하다


초면
모리타와 화입니다. 연수 중에 자바를 조금 배웠는데 스프링북을 사용하는 개발에 참가해서 장난이 심했습니다.
전혀 알 수 없는 사소한 조사가 실시되고 있지만, 자신의 공부를 위해 사전에 기사에 남겨두고 제작하고 있다.
참고할 수 있다면 이 점을 마음에 두고 참고해 주십시오.
제 기사를 읽고 이상한 점이 있다면 지적을 받을 수 있다면 기쁘겠습니다.
지난번까지의 기사가 여기 있습니다.
첫 SpringBoot1~ 프로젝트 제작~
첫 번째 SpringBoot2~DB 연결~
첫 번째 SpringBoot3~ 로그인 기능의 1~
첫 번째 SpringBoot4~ 로그인 기능의 2~

컨디션


SpringBoot 버전: 2.40
Java 버전: 8
DB:MySQL 8.0
IDE:eclipse

로그인 화면 사용자 정의


지난번까지는 기본 로그인 화면을 사용했지만, 실제 업무에서는 맞춤형 화면을 사용하는 경우가 많았다.
이번에는 로그인 화면을 사용자 정의하고 싶습니다.

로그인 화면 만들기


먼저 Username 및 암호를 입력할 수 있는 화면을 만듭니다.
이번에는 단지 맞춤형 물건을 검증하기 위해 간단한 form과 버튼만 만들었다.
login.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ログイン</title>
</head>
<body>
<p th:if="${ErrorMessage!=null}" th:text="${ErrorMessage}"> <!--ログインエラーの際はエラーメッセージを表示する -->
<p>ログイン</p>
    <form th:action="@{/login}" method="post">
      <div >ユーザー名</div>
        <input type="text" id="username" name="username" placeholder="ユーザ名" required autofocus>
      <div >パスワード</div>
	<input type="password" id="password" name="password" placeholder="パスワード" required>
      <div ><button type="submit">ログイン</button></div>
    </form>
</body>
</html>

로그인 화면의 기본값 변경


다음은 기본 로그인 화면에서 만든 화면으로 변경됩니다.
여기에는 이전 WebSecurity Config에서 보안 관련 설정이 추가됩니다.
WebSecurityConfig.java
package com.elpmas.test.controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Bean;
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.builders.WebSecurity;
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;
import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
import org.springframework.security.crypto.password.PasswordEncoder;

import com.elpmas.test.domain.service.UserDetailsServiceImpl;

/**
 * SpringSecurityを利用するための設定クラス
 * ログイン処理でのパラメータ、画面遷移や認証処理でのデータアクセス先を設定する
 */
@Configuration
@EnableWebSecurity
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {

    @Autowired
    private UserDetailsServiceImpl userDetailsService;

    @Bean
    public PasswordEncoder passwordEncoder() {
        return new BCryptPasswordEncoder();
    }

    /**
     * 認可設定を無視するリクエストを設定
     */
    @Override
    public void configure(WebSecurity web) throws Exception {
        web.ignoring()
        		.antMatchers("/resources/**");
    }

    /**
     * 認証・認可の情報を設定する
     */
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http
            .authorizeRequests()
            	.antMatchers("/login").permitAll()
                .anyRequest().authenticated();
        http
        	.formLogin()
        		.loginPage("/login") //ログインページとして使用するurlを設定する
        		.usernameParameter("username") //Usernameのパラメータとして使用する項目のnameを設定する
			.passwordParameter("password") //Passwordのパラメータとして使用する項目のnameを設定する
                .defaultSuccessUrl("/sample", true)
                .failureUrl("/eroor") //エラー発生時として使用するurlを設定する
			.permitAll(); //エラー発生画面も未認証でアクセス出来るようにしないといけない。(この記述がないと指定のurlに遷移せずloginにリダイレクトされる)
    }

    /**
     * 認証時に利用するデータソースを定義する設定メソッド
     * ここではDBから取得したユーザ情報をuserDetailsServiceへセットすることで認証時の比較情報としている
     */
    @Autowired
    public void configure(AuthenticationManagerBuilder auth) throws Exception{
        auth.userDetailsService(userDetailsService).passwordEncoder(passwordEncoder());
    }
}

Controller 만들기


사실 MVC 모드를 제대로 사용한 건 처음이에요.
Controller가 무엇을 재조사했는지.
Controller: 요청을 처리하고 Model 및 View 호출을 제어하는 구성 요소입니다.요청 처리의 절차를 제어합니다.
대충 설명하자면 브라우저 화면(view)이 요구하는 처리(Model)를 판별하고 제어하는 것처럼 느껴진다.
AuthenticationController.java
package com.elpmas.test.controller;

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


@Controller
public class AuthenticationController {

  @GetMapping("/login") //ログイン画面アクセス時はgetでリクエストが飛んでくる(デフォルト時も同様)
    public String getLogin(Model model) {
        return "login";
    }

    @GetMapping("/eroor") //errorが発生した際はエラーメッセージを表示したいので違う処理に入るように制御する
    public String getLoginError(Model model) {
    	model.addAttribute("ErrorMessage","*ユーザー名もしくはパスワードが一致しません");
        return "login";
    }

    //デフォルトではPostでリクエストが発生。カスタマイズ時はユーザーが指定したmethodに従う。
    @PostMapping("/login")
    public String postLogin(Model model) {
        return "sample";
    }
}

동작 확인


소스 준비는 여기까지.
그럼 동작을 확인해 봅시다.

로그인 화면이 순조롭게 제작되었습니다.
인증 성공 시

문제없이 돌아가다.
인증 실패 시

이쪽에도 오류가 발생했을 때의 화면이 무사히 표시되어 있다.

다음번


로그인 화면을 맞춤형으로 만들 수 있기 때문에 기본적인 로그인 기능으로 먼저 완성할 수 있을 것 같다.
다음 이후에는 그간 소스를 사실상 선뜻 추천했지만, 더 많은 학습 방법(DB로부터 기록을 얻는 방법, 시간엽과 파라미터 획득 등)을 추천하고 싶다.
하지만 저는 스프링, 웹 개발, 자바 자체(실제 업무에서)도 처음으로 병행 학습을 해야 하고 앞으로 자바와 화면 방면의 행위(>와 자바스크립트 등)도 동시에 진행해야 합니다.

참고 문헌


Spring Spring Framework의 자바 응용 개발에 철저히 입문(주식회사 NTT 데이터 저)
https://www.shoeisha.co.jp/book/detail/9784798142470

좋은 웹페이지 즐겨찾기