카카오 로그인 - 커스텀 로그인 페이지
이전 페이지
이전 페이지 내용에 이어서 진행합니다.
Code
Preview
작업 프로세스
1.
선수 프로젝트
2.
스프링 시큐리티 설정
•
~/config/SecufityConfig.java◦
/** 또는 /login 경로 모두 허용
◦
커스텀 로그인 페이지 경로 지정 : 
/login
/login3.
요청 경로 매핑
•
~/controller/HomeController.java◦
로그인 화면
▪
/login▪
login.html작업 프로세스
스프링 시큐리티 설정
•
/** 또는 /login 경로 모두 허용
•
커스텀 로그인 페이지 경로 지정 : /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.htmlHomeController
@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
복사