카카오 로그인 - 커스텀 로그인 페이지

카카오 로그인 - INDEX

이전 페이지

카카오 로그인 - 회원가입

이전 페이지 내용에 이어서 진행합니다.

Code

SPRING-SECURITY5/kakao-custom at main · ALOHA-CLASS/SPRING-SECURITY5

SPRING-SECURITY5. Contribute to ALOHA-CLASS/SPRING-SECURITY5 development by creating an account on GitHub.

https://github.com/ALOHA-CLASS/SPRING-SECURITY5/tree/main/kakao-custom

Preview

작업 프로세스

선수 프로젝트 

•

카카오 로그인 - 회원가입 

스프링 시큐리티 설정

•

 ~/config/SecufityConfig.java

◦

/** 또는 /login 경로 모두 허용

◦

커스텀 로그인 페이지 경로 지정 :  /login

요청 경로 매핑

•

 ~/controller/HomeController.java

◦

로그인 화면

▪

 /login

▪

 login.html

작업 프로세스

스프링 시큐리티 설정

•

/** 또는 /login 경로 모두 허용

•

커스텀 로그인 페이지 경로 지정 :  /login

/** 또는 /login 경로 모두 허용

http.authorizeRequests(requests -> requests
                                            .antMatchers("/**").permitAll()
                                            .anyRequest().authenticated());
Java
복사

http.authorizeRequests(requests -> requests
                                            .antMatchers("/").permitAll()
																						.antMatchers("/login").permitAll()
                                            .anyRequest().authenticated());
Java
복사

커스텀 로그인 페이지 경로 지정 : /login

http.oauth2Login(login -> login
                                    .loginPage("/login")
                                    .userInfoEndpoint() 
                                    .userService(oAuthService)
                                    );
Java
복사

~/config/SecufityConfig.java

package com.aloha.kakaocustom.config;

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.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
import org.springframework.security.web.SecurityFilterChain;

import com.aloha.kakaocustom.service.OAuthService;

@EnableWebSecurity
@Configuration
public class SecurityConfig {

    @Autowired
    private OAuthService oAuthService;

    /**
     * 🔐 스프링 시큐리티 설정 메소드
     * @param http
     * @return
     * @throws Exception
     */
    @Bean
    public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
        // 👩‍💼 인가 설정
        http.authorizeRequests(requests -> requests
                                            .antMatchers("/**").permitAll()
                                            .anyRequest().authenticated());
        // 👩‍💻🔐 OAuth2 로그인 
        // ✅ userInfoEndpoint()            : 사용자 정보 설정 객체 가져오기
        // ✅ userService(oAuthService)     : 사용자 정보 설정 객체로, 로그인 후 처리할 구현 클래스 등록
        // ✅ loginPage(경로)               : 커스텀 로그인 페이지 경로 지정
        http.oauth2Login(login -> login
                                    .loginPage("/login")
                                    .userInfoEndpoint() 
                                    .userService(oAuthService)
                                    );
        return http.build();
    }

    
}
Java
복사

요청 경로 매핑

•

 ~/controller/HomeController.java

◦

로그인 화면

▪

 /login

▪

 login.html

HomeController

@Slf4j
@Controller
public class HomeController {

    /**
     * 메인 화면
     * 🔗 [GET] - / 
     * 📄 index.html
     * @return
     */
    @GetMapping("/")
    public String home(@AuthenticationPrincipal OAuth2User oauth2User
                      ,Model model) {
        log.info(":::::::::: 메인 화면 ::::::::::");

        CustomUser customUser = (CustomUser) oauth2User;
        model.addAttribute("user", customUser);
        return "/index";
    }


    /**
     * 로그인 화면
     * 🔗 [GET] - /login 
     * 📄 login.html
     * @return
     */
    @GetMapping("/login")
    public String login() {
        return "/login";
    }
    
    
}
Java
복사

login.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OAuth</title>

    <!-- bootstrap css -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container col-12 col-lg-4">
        <div class="px-4 py-5 mt-5 text-center">
            <h1 class="display-5 fw-bold text-body-emphasis">로그인</h1>
        </div>

        <!-- 로그인 영역 -->
        <main class="w-100 m-auto">
            <form action="/login" method="post">
                <!-- CSRF TOKEN -->
                <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}">
                
                <div class="form-floating">
                    <input type="text" class="form-control" id="floatingInput" name="username" value="" placeholder="아이디"
                        autofocus th:value="${userId}">
                    <label for="floatingInput">아이디</label>
                </div>
                <div class="form-floating">
                    <input type="password" class="form-control" id="floatingPassword" name="password" placeholder="비밀번호">
                    <label for="floatingPassword">비밀번호</label>
                </div>
    
                <div class="form-check text-start my-3 d-flex justify-content-around">
                    <div class="item">
    
                        <input class="form-check-input" type="checkbox" name="remember-id" id="flexCheckDefault1" th:checked="${rememberId}">
    
                        <label class="form-check-label" for="flexCheckDefault1">아이디 저장</label>
                    </div>
                    <div class="item">
                        <input class="form-check-input" type="checkbox" name="remember-me" id="flexCheckDefault2">
                        <label class="form-check-label" for="flexCheckDefault2">자동 로그인</label>
                    </div>
    
                </div>

                <!-- 로그인 에러 -->
                <th:block th:if="${param.error}">
                    <p class="text-center text-danger">아이디 또는 비밀번호를 잘못 입력했습니다.</p>
                </th:block>
                <!-- 로그아웃 완료 -->
                <th:block th:if="${param.logout}">
                    <p class="text-center text-success">정상적으로 로그아웃 되었습니다.</p>
                </th:block>

                <div class="d-grid gap-2">
                    <button class="btn btn-lg btn-primary w-100 py-2" type="submit">로그인</button>
                    <a href="/join" class="btn btn-lg btn-success w-100 py-2">회원가입</a>
                    <hr>
                    <a href="/oauth2/authorization/kakao">
                        <img src="/img/kakao_login_large.png" width="100%" alt="카카오 로그인">
                    </a>
                </div>
            </form>
        </main>
       
    </div>

    <!-- bootstrap js -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
HTML
복사