스프링 소셜 로그인 구현하기(네이버, 카카오, OAuth2.0)

안녕하세요!! 이번시간에는 스프링 OAUTH_2를 활용한 소셜로그인을 구현해보겠습니다!

 

개념

먼저 개념에 대해 명확히 이해해보자 

 

OAuth 란?

Open Authorization으로 인터넷 사용자들이 비밀번호를 제공하지 않고 다른 웹 사이트 상의 자신들의 정보에 대해 웹사이트나 에플리케이션의 접근 권한을 부여할 수 있는 공통적인 수단으로서 사용되는 접근 위임을 위한 개방형 표준이다.

 

OAuth2.0 란?

OAuth2.0 서비스를 제공하고 Resource를 관리하는 서버이다. 

즉 클라이언트는 서버로 하여금 인증 서버에서 발급받은 Toekn을 넘겨 개인 정보를 받을 수 있다.

 

출처: https://velog.io/@yuureru/OAuth2-%EC%84%B8%EC%85%98-%EB%B0%A9%EC%8B%9D%EC%9C%BC%EB%A1%9C-%EA%B5%AC%ED%98%84-%ED%95%B4%EB%B3%B4%EA%B8%B0-Google-Naver

 

 

우리 프로젝트 구조를 위 사진과 빗대어 설명을 해보겠다.

 

1. 먼저 사용자 즉 클라이언트는 네이버 및 카카오로 로그인 버튼을 누르면

/oauth2/authorization/naver(kakao) 해당 url이 서버로 로그인 요청을 한다.

 

2. 그럼 서블릿 컨테이너에서 OAuth2AuthorizationRequestRedirectFilter가 동작을 하게 된다. 

 

3. 그런 다음 등록된 외부 소셜 로그인 인증 서버로 리다이렉션되면서 전달이 된다. 

(네이버면 네이버 로그인 인증 서버, 카카오면 카카오 로그인 인증서버!)

 

4. 그런 다음 사용자는 해당 폼에서 로그인을 진행하고 확인을 누른다.

 

5. 성공시 인증서버에 등록된 우리 서버의 주소로 리다이렉션 이동한다! 

(/login/oauth2/code/naver or kakao) 로!!!

 

6. OAuth2LoginAuthenticationFilter 에서 해당 요청을 받게 되고 OAuth2LoginAuthenticationProvider 로  해당 토큰 값을 넘겨주게 된다.

 

// OAuth2 로그인 설정
http.oauth2Login(oauth2 -> oauth2
        .loginPage("/login")
        .userInfoEndpoint(userInfoEndpointConfig -> userInfoEndpointConfig
                .userService(customOAuth2UserService))
        .successHandler(authenticationSuccessHandler())  // 인증 성공 시 핸들러 설정
);

 

즉 이부분!!

 

7.  그럼 다음 값을 저장해서 세션 부여하면 끝!!!!

 

근데 이 부분은 좀 보완해서 쓰겠다... 

 

의존성 주입 및 application.properties 설정

//소셜
implementation 'org.springframework.boot:spring-boot-starter-oauth2-client'

implementation 'org.springframework.boot:spring-boot-starter-security'

위와 같이 build.gradle에 추가를 해야됩니다! 

 

네이버 

spring.security.oauth2.client.registration.naver.client-id=
spring.security.oauth2.client.registration.naver.client-secret=
spring.security.oauth2.client.registration.naver.client-name=Naver
spring.security.oauth2.client.registration.naver.authorization-grant-type=authorization_code
spring.security.oauth2.client.registration.naver.redirect-uri={baseUrl}/login/oauth2/code/naver
spring.security.oauth2.client.registration.naver.scope=profile
spring.security.oauth2.client.provider.naver.authorization-uri=https://nid.naver.com/oauth2.0/authorize
spring.security.oauth2.client.provider.naver.token-uri=https://nid.naver.com/oauth2.0/token
spring.security.oauth2.client.provider.naver.user-info-uri=https://openapi.naver.com/v1/nid/me
spring.security.oauth2.client.provider.naver.user-name-attribute=response

카카오

spring.security.oauth2.client.registration.kakao.client-name=Kakao
spring.security.oauth2.client.registration.kakao.client-id=
spring.security.oauth2.client.registration.kakao.client-secret=
spring.security.oauth2.client.registration.kakao.redirect-uri={baseUrl}/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
spring.security.oauth2.client.registration.kakao.client-authentication-method=client_secret_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

 

위와 같이 application.properties에 다음과 같이 추가를 한다!! 

 

이때 client-id 랑 client-secret는 네이버 및 카카오에서 API를 발급 받아야지 쓸 수 있다. 아래를 차근차근 보자!

 

 

네이버 소셜 로그인 신청 

 

https://developers.naver.com/main/

NAVER Developers

 

위 사이트로 들어간다! 

 

들어갔으면 위 사진과 같이 Application을 들어가서 Application 등록을 누른다!! 

아 참고로 저기 AMCN은 필자가 미리 만든거!! 

 

 

그럼 위 사진과 같이 에플리케이션의 이름을 정하고 사용자의 정보를 받을게 있으면 필수에 추가해주면된다! 

 

 

 

서비스 URL은 본인의 해당 프로젝트의 URL이다!! 

필자는 로컬환경이라서 http//localhost:8080 이라고 하였다. 만약 AWS에 배포를 하면 해당 URL로 하면 된다!! 

 

CallbackURL은 http//localhost:8080/login/oauth2/code/naver 이렇게 입력하면된다. 

즉 서비스 URL 뒤에 /login/oauth2/code/naver 이거를 붙이면 된다!

 

그럼 이젠 등록이 됐다 만든 애플리케이션을 들어가면 ClientID 와 Client Secret가 있는게 

복붙해서 application.properties에 해당 칸에 복붙하면 끝이다!!!

 

 

네이버는 간단.... 근데 카카오는

 

카카오 소셜 로그인 신청

 

https://developers.kakao.com/

 

 해당 사이트에 들어간다!! 

 

 

내 애플리케이션에 들어가서 애플리케이션 추가하기를 누른다! 

 

 

그럼 위와 같이 본인이 설정하고 싶은대로 설정을 하면된다!! 그리고 들어가면 

 

 

이제 해당 페이지로 오게된다!!! 여기서부터 중요하다.

 

 

위 사진과 같이 앱 키를 눌러서 REST API 키를 확인하자! 

 

 

위 사진과 같이 카카오 로그인을 눌러서 모두다 ON으로 활성해준다.

그 후 Redirect URL 등록을 하여 URL은 네이버와 동일하게

http://localhost:8080/login/oauth2/code/kakao 이렇게 해주면된다!!

 

 

 

그리고 이젠 동의항목에 들어가서 설정을 해줘야된다!!

네이버와 다르게 좀 복잡하다.... 

이메일이나 이름 등을 사용하고 싶으면 아마 비즈 앱을 신청해야될거다!!! 이렇게 동의항목에서 설정을 해두자!!

 

 

자 이젠 보안에 들어가서 위와 같이 Client Secret 발급 받는다.

이때 활성화 상태를 사용함으로 바꿔야된다. 

 

kauth.kakao.com/oauth/authorize?client_id={REST_API_KEY}&redirect_uri={REDIRECT_URI}&response_type=code

 

이젠  개인정보를 가져오는 프로세스를 진행해야된다. 위 URL처럼 본인의 REST_API_KEY 그리고 REDIRECT_URL을 넣어주면 된다!! 

 

잘 들어가지면 성공한거다!!

 

그럼 application.properites에  Client-id는 이전에 앱키에서 확인한 REST_API_KEY로 설정하면 되고 

Client_secret는 방금 발급받은 코드를 넣어주면 된다.

 

그럼 이젠 설정은 끝났다 코드를 보자.

 

코드 

package amcn.amcn.config;

import amcn.amcn.member.web.session.SessionConst;
import amcn.amcn.oauth.CustomOAuth2UserService;
import lombok.RequiredArgsConstructor;
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 org.springframework.security.web.authentication.SimpleUrlAuthenticationSuccessHandler;
import org.springframework.security.web.authentication.logout.LogoutSuccessHandler;

@Configuration
@EnableWebSecurity
@RequiredArgsConstructor
public class SecurityConfig {

    private final CustomOAuth2UserService customOAuth2UserService;

    @Bean
    public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {

        // CSRF 보호 비활성화
        http.csrf(csrf -> csrf.disable());

        // 폼 로그인 비활성화
        http.formLogin(login -> login.disable());

        // HTTP Basic 인증 비활성화
        http.httpBasic(basic -> basic.disable());

        // OAuth2 로그인 설정
        http.oauth2Login(oauth2 -> oauth2
                .loginPage("/login")
                .userInfoEndpoint(userInfoEndpointConfig -> userInfoEndpointConfig
                        .userService(customOAuth2UserService))
                .successHandler(authenticationSuccessHandler())  // 인증 성공 시 핸들러 설정
        );

        // 로그아웃 설정
        http.logout(logout -> logout
                .logoutUrl("/logout")  // 로그아웃을 처리할 커스텀 URL 설정
                .logoutSuccessUrl("/")  // 로그아웃 후 리다이렉트할 URL 설정
                .invalidateHttpSession(true)  // 세션 무효화
                .deleteCookies(SessionConst.LOGIN_MEMBER)  // 쿠키 삭제
        );

        // 요청 허용 및 인증 설정
        http.authorizeHttpRequests(auth -> auth
                .requestMatchers("/oauth2/**", "/**").permitAll()
                .anyRequest().authenticated()
        );

        return http.build();
    }

    @Bean
    public SimpleUrlAuthenticationSuccessHandler authenticationSuccessHandler() {
        SimpleUrlAuthenticationSuccessHandler handler = new SimpleUrlAuthenticationSuccessHandler();
        handler.setDefaultTargetUrl("/");
        handler.setAlwaysUseDefaultTargetUrl(true);
        return handler;
    }
}

 

자 위와 같이 SecurityConfig를 만들어서 다음과 같이 복붙을 해주면 됩니다!! 

 

일단 필자는 로그인 관리를 토큰이 아닌 세션으로  진행할거다!!! 즉 로그인이 성공하면 세션을 부여하고 

로그아웃을 했을시에는 세션을 삭제할것이다. 

 

// 요청 허용 및 인증 설정
http.authorizeHttpRequests(auth -> auth
        .requestMatchers("/oauth2/**", "/**").permitAll()
        .anyRequest().authenticated()
);

 

추가로 이 코드는 O_AUTH2로만 인증됐을때만 위 해당 URL을 제외하고 들어간다는 것이다. 

즉 보안을 위해서 넣은것인데... 필자 프로젝트는 일반 유저도 있어서 모든 URL을 다 넣었다. 

만약 모든 URL을 안넣으면 일반 유저들은 서비스를 이용을 못한다.

 

 

@Bean
public SimpleUrlAuthenticationSuccessHandler authenticationSuccessHandler() {
    SimpleUrlAuthenticationSuccessHandler handler = new SimpleUrlAuthenticationSuccessHandler();
    handler.setDefaultTargetUrl("/");
    handler.setAlwaysUseDefaultTargetUrl(true);
    return handler;
}

 

위 메소드는 인증에서 성공할때 리다이렉트 되서 홈화면으로 이동하는 것이다. 기존 일반 유저와 다르게 Config에서 설정을 해두었다. 

 

package amcn.amcn.oauth;

import amcn.amcn.member.domain.member.Member;
import amcn.amcn.member.domain.member.RoleType;
import amcn.amcn.member.repository.MemberRepository;
import amcn.amcn.member.web.session.SessionConst;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpSession;
import lombok.RequiredArgsConstructor;
import lombok.extern.slf4j.Slf4j;
import org.springframework.security.oauth2.client.userinfo.DefaultOAuth2UserService;
import org.springframework.security.oauth2.client.userinfo.OAuth2UserRequest;
import org.springframework.security.oauth2.core.OAuth2AuthenticationException;
import org.springframework.security.oauth2.core.user.OAuth2User;
import org.springframework.stereotype.Service;
import org.springframework.web.context.request.RequestContextHolder;
import org.springframework.web.context.request.ServletRequestAttributes;

import java.util.Map;
import java.util.Optional;

@Service
@RequiredArgsConstructor
@Slf4j
public class CustomOAuth2UserService extends DefaultOAuth2UserService {

//    타 블로그 글을 보면 OAuth2UserService를 상속 받거나 직접 구현 하는 경우가 있는데
//    DefaultOAuth2UserService는 구현체이기에 이대로 진행 해도무관하다

    //DB 저장을 진행 하기 위해 유저 래퍼지토리 주입
    private final MemberRepository memberRepository;


    @Override
    public OAuth2User loadUser(OAuth2UserRequest userRequest) throws OAuth2AuthenticationException {
        OAuth2User oAuth2User = super.loadUser(userRequest);
        //부모 클래스 loadUser로 부터 유저 정보를 가지고 오는 메서드 ( OAuth2 공급업체로 부터 사용자 정보를 가져오는 것 )     ;
        log.info(oAuth2User.getAttributes().toString());
        String O_email="";
        String O_name="";
        String O_id="";

        String k_email="";
        String k_name="";
        String k_id="";

        String registrationId = userRequest.getClientRegistration().getRegistrationId();


        //네이버
        Object responseObj = oAuth2User.getAttributes().get("response");

        if (responseObj instanceof Map) {
            Map<String, Object> responseMap = (Map<String, Object>) responseObj;
            Object emailObj = responseMap.get("email");
            Object nameObj = responseMap.get("name");
            Object idObj = responseMap.get("id");

            if (emailObj != null && nameObj !=null && idObj !=null) {
                O_email = emailObj.toString();
                O_name=nameObj.toString();
                O_id=idObj.toString();
                log.info(O_email);
                log.info("zzzz");
            } else {
                log.error("Email not found in response");
            }
        } else {
            log.error("Invalid response object type");
        }


        //카카오
        Map<String, Object> attributes = oAuth2User.getAttributes();

        Object idObj = attributes.get("id");
        Map<String, Object> properties = (Map<String, Object>) attributes.get("properties");
        Object nicknameObj = properties != null ? properties.get("nickname") : null;
        Map<String, Object> kakaoAccount = (Map<String, Object>) attributes.get("kakao_account");
        Object emailObj = kakaoAccount != null ? kakaoAccount.get("email") : null;

        if (idObj != null && nicknameObj != null && emailObj != null) {
            k_id = idObj.toString();
            k_name = nicknameObj.toString();
            k_email = emailObj.toString();
        } else {
            log.error("Some required fields are missing in the response");
        }


        OAuth2Response oAuth2Response = null;

        String role = null;
        NaverResponse naverResponse=new NaverResponse();

        if (registrationId.equals("naver")) {

            Optional<Member> existData = memberRepository.findMemberId(O_id);


            if (existData.isEmpty()) {

                Member member1 = new Member();
                member1.setName(O_name);
                member1.setMemberId(O_id);
                member1.setEmail(O_email);
                member1.setRoleType(RoleType.OAUTH_USER);
                member1.setPoint(0L);
                member1.setProfile("basic2.png");


                memberRepository.save(member1);
            } else {

                log.info("기존 네이버 사용자");
            }



            naverResponse.setId(O_id);
            naverResponse.setName(O_name);
            naverResponse.setEmail(O_email);
            role="OAUTH_USER";

            //로그인 성공
            success(naverResponse);

        } else {

            Optional<Member> existData = memberRepository.findMemberId(k_id);


            if (existData.isEmpty()) {

                Member member1 = new Member();
                member1.setName(k_name);
                member1.setMemberId(k_id);
                member1.setEmail(k_email);
                member1.setRoleType(RoleType.OAUTH_USER);
                member1.setPoint(0L);
                member1.setProfile("basic2.png");

                memberRepository.save(member1);
            } else {
                log.info("기존 카카오 사용자");
            }



            naverResponse.setId(k_id);
            naverResponse.setName(k_name);
            naverResponse.setEmail(k_email);
            role="OAUTH_USER";

            //로그인 성공
            success(naverResponse);

        }


        return new CustomOAuth2User(naverResponse, role);
    }
    private static void success(NaverResponse naverResponse) {
        // 현재 요청 가져오기
        ServletRequestAttributes attributes = (ServletRequestAttributes) RequestContextHolder.getRequestAttributes();
        if (attributes != null) {
            HttpServletRequest request = attributes.getRequest();
            HttpSession session = request.getSession();

            Member member = new Member();
            member.setMemberId(naverResponse.getId());
            member.setName(naverResponse.getName());
            member.setEmail(naverResponse.getEmail());
            member.setRoleType(RoleType.OAUTH_USER);

            session.setAttribute(SessionConst.LOGIN_MEMBER, member);
        } else {
            log.error("Failed to get current HttpServletRequest");
        }
    }
}

 

 

이게 전체 코드이다. 필자는 타 블로그에서 코드를 가져왔는데 잘 안되서.... 좀 개조했다. 

차근차근 보자

 

OAuth2User oAuth2User = super.loadUser(userRequest);
//부모 클래스 loadUser로 부터 유저 정보를 가지고 오는 메서드 ( OAuth2 공급업체로 부터 사용자 정보를 가져오는 것 )     ;
log.info(oAuth2User.getAttributes().toString());

 

맨처음 이거를 보자 이거의 결과값은 

{resultcode=00, message=success, 

response {id=J00kXy7J4KDMRRKz0bQyNXqOsOljYZleRg2Shs52Svw, profile_image=https://ssl.pstatic.net/static/pwe/address/img_profile.png,

gender=M,

email=비밀@naver.com,

name=최승호,

birthday=05-22}}

 

이렇게 나온다!!! 즉  JSON 형식으로 나온다. 그래서 

 

//네이버
Object responseObj = oAuth2User.getAttributes().get("response");

if (responseObj instanceof Map) {
    Map<String, Object> responseMap = (Map<String, Object>) responseObj;
    Object emailObj = responseMap.get("email");
    Object nameObj = responseMap.get("name");
    Object idObj = responseMap.get("id");

    if (emailObj != null && nameObj !=null && idObj !=null) {
        O_email = emailObj.toString();
        O_name=nameObj.toString();
        O_id=idObj.toString();
        log.info(O_email);
        log.info("zzzz");
    } else {
        log.error("Email not found in response");
    }
} else {
    log.error("Invalid response object type");
}

 

네이버는 위와 같이해서 데이터를 저장하고 

 

//카카오
Map<String, Object> attributes = oAuth2User.getAttributes();

Object idObj = attributes.get("id");
Map<String, Object> properties = (Map<String, Object>) attributes.get("properties");
Object nicknameObj = properties != null ? properties.get("nickname") : null;
Map<String, Object> kakaoAccount = (Map<String, Object>) attributes.get("kakao_account");
Object emailObj = kakaoAccount != null ? kakaoAccount.get("email") : null;

if (idObj != null && nicknameObj != null && emailObj != null) {
    k_id = idObj.toString();
    k_name = nicknameObj.toString();
    k_email = emailObj.toString();
} else {
    log.error("Some required fields are missing in the response");
}

 

카카오는 위와 같이 해서 값을 저장한다.

if (registrationId.equals("naver")) {

    Optional<Member> existData = memberRepository.findMemberId(O_id);


    if (existData.isEmpty()) {

        Member member1 = new Member();
        member1.setName(O_name);
        member1.setMemberId(O_id);
        member1.setEmail(O_email);
        member1.setRoleType(RoleType.OAUTH_USER);
        member1.setPoint(0L);
        member1.setProfile("basic2.png");


        memberRepository.save(member1);
    } else {

        log.info("기존 네이버 사용자");
    }



    naverResponse.setId(O_id);
    naverResponse.setName(O_name);
    naverResponse.setEmail(O_email);
    role="OAUTH_USER";

    //로그인 성공
    success(naverResponse);

}

 

그리고 이 부분은 네이버면 위 if 문으로 들어고 카카오면 아래 else로 들어가게된다!!!

 

만약 존재하지 않으면 해당 소셜 회원을 저장하고 존재하면 저장하지 않고 소셜로 로그인이 되는것이다!!

 

카카오도 동일!!!

 

private static void success(NaverResponse naverResponse) {
    // 현재 요청 가져오기
    ServletRequestAttributes attributes = (ServletRequestAttributes) RequestContextHolder.getRequestAttributes();
    if (attributes != null) {
        HttpServletRequest request = attributes.getRequest();
        HttpSession session = request.getSession();

        Member member = new Member();
        member.setMemberId(naverResponse.getId());
        member.setName(naverResponse.getName());
        member.setEmail(naverResponse.getEmail());
        member.setRoleType(RoleType.OAUTH_USER);

        session.setAttribute(SessionConst.LOGIN_MEMBER, member);
    } else {
        log.error("Failed to get current HttpServletRequest");
    }
}

 

그리고 이 코드는 세션을 부여하는 코드이다!!!

 

 

package amcn.amcn.oauth;

import lombok.RequiredArgsConstructor;
import org.springframework.security.core.GrantedAuthority;
import org.springframework.security.oauth2.core.user.OAuth2User;

import java.util.ArrayList;
import java.util.Collection;
import java.util.Map;


@RequiredArgsConstructor
public class CustomOAuth2User implements OAuth2User {

    private final NaverResponse naverResponse;
    private final String role;



    @Override
    public <A> A getAttribute(String name) {
        return OAuth2User.super.getAttribute(name);
    }

    @Override
    public Map<String, Object> getAttributes() {
        return null;
    }

    @Override
    public Collection<? extends GrantedAuthority> getAuthorities() {

        Collection<GrantedAuthority> collection = new ArrayList<>();
        collection.add(new GrantedAuthority() {
            @Override
            public String getAuthority() {
                return role;
            }
        });
        return collection;
    }

    @Override
    public String getName() {
        return naverResponse.getName();
    }

    public String username() {
        return naverResponse.getId();
    }
}

 

아무래도 필자가.... 아래 출처 블로그를 통해 참고하다 보니 오류가 났다.... 그래서 뜯어 고친건데 

이 클래스는 필요없는거 같다..... 기능상... 근데 없으면 오류나서 넣어주었다 ㅜㅜㅜ 

 

 

<button class="naver-btn" onclick="window.location.href = '/oauth2/authorization/naver';"><i class="fab fa-naver"></i> 네이버로 로그인하기</button>

<button class="kakao-btn" onclick="window.location.href = '/oauth2/authorization/kakao';"><i class="fab fa-naver"></i> 카카오로 로그인하기</button>

 

html 코드는 다음과 같다!! 

 

 

결과

 

우리가 만든 프로젝트에서 위와 같이 네이버 및 카카오 로그인을 누르면 

 

두 사진과 같이 뜨는 것을 확인할 수 있다. 그리고 계속누르면!!!

 

DB에 올바르게 저장된것을 확인할 수 있다!!!

 

 

출처

 

https://king-ja.tistory.com/106

SpringBoot 소셜 로그인 구현 - 카카오 로그인

 

 

https://jngsngjn.tistory.com/16

[Spring Security] OAuth2 소셜 로그인 (세션 방식)

 

 

https://velog.io/@yuureru/OAuth2-%EC%84%B8%EC%85%98-%EB%B0%A9%EC%8B%9D%EC%9C%BC%EB%A1%9C-%EA%B5%AC%ED%98%84-%ED%95%B4%EB%B3%B4%EA%B8%B0-Google-Naver

OAuth2 session 방식으로 구현 해보기( Google, Naver)

 

 

 

느낀점

 

좀 어려웠다.... 구현보다는 개념이 너무 빈약했다.  유튜브나 서적을 더 찾아보고 공부하면서 보충해야겠다.