카카오 로그인

plugins { id 'java' id 'war' id 'org.springframework.boot' version '2.7.17' id 'io.spring.dependency-management' version '1.0.15.RELEASE' } group = 'com.aloha' version = '0.0.1-SNAPSHOT' java { sourceCompatibility = '17' } configurations { compileOnly { extendsFrom annotationProcessor } } repositories { mavenCentral() } dependencies { implementation 'org.springframework.boot:spring-boot-starter-oauth2-client' implementation 'org.springframework.boot:spring-boot-starter-security' implementation 'org.springframework.boot:spring-boot-starter-thymeleaf' implementation 'org.springframework.boot:spring-boot-starter-web' implementation 'org.thymeleaf.extras:thymeleaf-extras-springsecurity5' compileOnly 'org.projectlombok:lombok' developmentOnly 'org.springframework.boot:spring-boot-devtools' annotationProcessor 'org.projectlombok:lombok' providedRuntime 'org.springframework.boot:spring-boot-starter-tomcat' testImplementation 'org.springframework.boot:spring-boot-starter-test' testImplementation 'org.springframework.security:spring-security-test' } tasks.named('test') { useJUnitPlatform() }

#Kakao OAuth Settings spring.security.oauth2.client.registration.kakao.client-id=[REST API 키] spring.security.oauth2.client.registration.kakao.client-secret=[Client Secret 코드] spring.security.oauth2.client.registration.kakao.redirect-uri=http://localhost:8080/login/oauth2/code/kakao spring.security.oauth2.client.registration.kakao.authorization-grant-type=authorization_code spring.security.oauth2.client.registration.kakao.scope=profile_nickname, account_email, profile_image spring.security.oauth2.client.registration.kakao.client-name=Kakao spring.security.oauth2.client.registration.kakao.client-authentication-method=POST spring.security.oauth2.client.provider.kakao.authorization-uri=https://kauth.kakao.com/oauth/authorize spring.security.oauth2.client.provider.kakao.token-uri=https://kauth.kakao.com/oauth/token spring.security.oauth2.client.provider.kakao.user-info-uri=https://kapi.kakao.com/v2/user/me spring.security.oauth2.client.provider.kakao.user-name-attribute=id

#Kakao OAuth Settings # client-id : REST API KEY spring.security.oauth2.client.registration.kakao.client-id=[REST API 키] # client-secret : 내 애플리케이션 > 보안 > Client secret spring.security.oauth2.client.registration.kakao.client-secret=[Client Secret 코드] # redirect-uri : 사용자가 카카오로 로그인 후 돌아올 서버의 URL spring.security.oauth2.client.registration.kakao.redirect-uri=http://localhost:8080/login/oauth2/code/kakao # authorization-grant-type : 액세스 토큰 요청 시, 유형을 지정하는 헤더 속성 spring.security.oauth2.client.registration.kakao.authorization-grant-type=authorization_code # scope : 사용자 정보 요청 범위를 지정하는 속성 spring.security.oauth2.client.registration.kakao.scope=profile_nickname, account_email, profile_image # client-name : 클라이언트를 구분하기 위한 이름 spring.security.oauth2.client.registration.kakao.client-name=Kakao # client-authentication-method : 인증 서버로 요청 시, 지정할 요청 메소드 spring.security.oauth2.client.registration.kakao.client-authentication-method=POST # authorization-uri : 인가 코드 요청 URI (인증 서버) spring.security.oauth2.client.provider.kakao.authorization-uri=https://kauth.kakao.com/oauth/authorize # token-uri : 액세스 토큰 요청 URI (인증 서버) spring.security.oauth2.client.provider.kakao.token-uri=https://kauth.kakao.com/oauth/token # user-info-uri : 사용자 정보 요청 URI (리소스 서버) spring.security.oauth2.client.provider.kakao.user-info-uri=https://kapi.kakao.com/v2/user/me # user-name-attribute : 사용자 정보를 고유 식별가 키 속성 spring.security.oauth2.client.provider.kakao.user-name-attribute=id

# client-id : REST API KEY spring.security.oauth2.client.registration.kakao.client-id=[REST API 키]

application-[프로필이름].properties

application-oauth-kakao.properties

spring.profiles.include=[프로필이름]

spring.profiles.include=oauth-kakao

spring.application.name=kakao # profile 프로퍼티 파일 포함하기 # application-[프로필이름].properties # application-oauth-kakao.properties spring.profiles.include=oauth-kakao

package com.aloha.kakao.config; 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; @Configuration @EnableWebSecurity public class SecurityConfig { // 스프링 시큐리티 설정 메소드 @Bean public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception { // OAuth 로그인 설정 http.oauth2Login(login -> login .loginPage("/login") ); return http.build(); } }

package com.aloha.kakao.controller; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.GetMapping; @Controller public class HomeController { @GetMapping({"/", ""}) public String home() { return "index"; } @GetMapping("/login") public String login() { return "login"; } }

<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5"> <head> <meta charset="UTF-8"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>카카오 로그인🔐 - ALOHA CLASS🌴</title> <!-- 파비콘 --> <link rel="icon" href="/img/logo.png" type="image/x-icon"> <!-- 썸네일 이미지 설정 --> <meta property="og:image" content="https://i.imgur.com/tXd2rVi.png"> <!-- 웹 페이지 설명 (선택 사항) --> <meta property="og:description" content="ALOHA CLASS🌴 - 소셜 로그인"> <!-- 웹 페이지 URL --> <meta property="og:url" content=""> <!-- 웹 페이지 제목 --> <meta name="title" content="카카오 로그인🔐 - ALOHA CLASS🌴"> <meta property="og:title" content="카카오 로그인🔐 - ALOHA CLASS🌴"> <!-- 웹 페이지 타입 (웹사이트, 기사, 제품 등) --> <meta property="og:type" content="website"> <!-- 검색어 --> <meta name="keywords" content="소셜 로그인자바 웹개발, ALOHA CLASS, 알로하 클래스"> <meta name="robots" content="index, follow"> <!-- 사이트 맵 --> <link rel="sitemap" href="/static/sitemap.xml"> <!-- bootstrap lib --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous"> <!-- Noto Sans font --> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Sans:400,700&amp;display=swap"> <!-- material design icon --> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"> </head> <body> <div class="container col-6 col-lg-4"> <div class="px-4 py-5 mt-5 text-center"> <h1 class="display-5 fw-bold text-body-emphasis">로그인</h1> </div> <!-- 비 로그인 시 --> <th:block sec:authorize="isAnonymous()"> <div class="d-grid gap-2"> <a href="/login" class="btn btn-lg btn-primary">로그인</a> </div> </th:block> <!-- 로그인 시 --> <th:block sec:authorize="isAuthenticated()"> <div class="card" th:if="${session.user != null}"> <div class="inner p-4"> <div class="d-flex flex-column align-items-center"> <div class="item my-2"> <!-- 프로필 사진 --> <th:block th:if="${session.user.profile == null}"> <img src="/img/profile.png" class="rounded-circle shadow-4 border" width="110" alt="프로필" > </th:block> <th:block th:if="${session.user.profile != null}"> <img th:src="${session.user.profile}" class="rounded-circle shadow-4 border" width="110" alt="프로필"> </th:block> </div> <div class="item my-2"> <!-- 닉네임 --> <h3 th:text="${session.user.name}"></h3> </div> <div class="item my-2"> <!-- 이메일 --> <h3 th:text="${session.user.email}"></h3> </div> </div> </div> </div> <form action="/logout" method="post"> <!-- CSRF TOKEN --> <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"> <div class="d-grid gap-2"> <button type="submit" class="btn btn-lg btn-primary">로그아웃</button> </div> </form> </th:block> </div> </body> </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 charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>카카오 로그인🔐 - ALOHA CLASS🌴</title> <!-- 파비콘 --> <link rel="icon" href="/img/logo.png" type="image/x-icon"> <!-- 썸네일 이미지 설정 --> <meta property="og:image" content="https://i.imgur.com/tXd2rVi.png"> <!-- 웹 페이지 설명 (선택 사항) --> <meta property="og:description" content="ALOHA CLASS🌴 - 소셜 로그인"> <!-- 웹 페이지 URL --> <meta property="og:url" content=""> <!-- 웹 페이지 제목 --> <meta name="title" content="카카오 로그인🔐 - ALOHA CLASS🌴"> <meta property="og:title" content="카카오 로그인🔐 - ALOHA CLASS🌴"> <!-- 웹 페이지 타입 (웹사이트, 기사, 제품 등) --> <meta property="og:type" content="website"> <!-- 검색어 --> <meta name="keywords" content="소셜 로그인자바 웹개발, ALOHA CLASS, 알로하 클래스"> <meta name="robots" content="index, follow"> <!-- 사이트 맵 --> <link rel="sitemap" href="/static/sitemap.xml"> <!-- bootstrap lib --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- Noto Sans font --> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Sans:400,700&amp;display=swap"> <!-- material design icon --> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"> </head> <body> <div class="container col-12 col-md-6 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="form-signin login-box 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> <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 --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"></script> </body> </html>