네이버 로그인 API를 활용한 소셜로그인 구현 과정(with. Spring Security, JWT) - 1. 사전 설정

Sia Hwang·2022년 11월 11일

Backend JWT Java Spring boot gradle oAuth spring security 네이버로그인API 소셜로그인

Spring Boot 소셜로그인

목록 보기

1/7

Before start

최근 진행중인 토이 프로젝트에서 네이버 로그인 API를 활용해 소셜 로그인 기능을 구현했다. 구현하면서 생각외로 이슈를 많이 겪었는데 재직 중에 진행하다 보니 물리적인 시간이 여유롭지 못해 최종 구현에 많은 시간이 걸렸다. 그렇지만 결국 목표했던 구현에 성공했기 때문에! 다음에 참고할 수 있게 그 과정을 작성해 보고자 한다.
나는 백엔드 개발 담당이기 때문에 백엔드 부분만 포스팅 할 예정이다.
프론트엔드 부분도 필요하다면 https://hoestory.tistory.com/32 이 블로그글을 참고하면 좋다.

What is the OAuth?

인터넷 사용자들이 비밀번호를 제공하지 않고 구글, 카카오, 네이버, 페이스북 등에 저장되어있는 자신들의 정보에 대해 웹사이트나 애플리케이션의 접근 권한을 부여할 수 있는 공통적인 수단으로써 사용되는 접근 위임을 위한 개방형 표준 프로토콜이다.
요약하면 SNS에 가입된 정보를 이용해 다른 서비스에도 회원 가입을 하고 로그인을 할 수 있도록 하는 프로토콜이라는 것

Why use the OAuth?

OAuth를 사용하면 내가 직접 구현한 보안 로직보다 훨씬 안전하게 사용자 정보를 지켜낼 가능성이 크다. 아무래도 대기업에서 많은 리소스와 인력을 투입해서 만드니까 당연한 것이겠지만...
그리고 사용자 입장에서도 기존에 가지고 있던 SNS 계정을 사용하면 되기 때문에 훨씬 편하고 서비스에 대한 진입장벽을 낮출 수 있다. 나만 해도 새로운 서비스를 이용할 때 따로 회원가입하라고 하면 귀찮아서 끄지만 소셜로그인 선택지가 있으면 이용하기 때문에 사용자와 개발자 모두에게 이득이 많은 선택지라 할 수 있다.

Flow of the OAuth

이미지 출처 : https://hoestory.tistory.com/32

OAuth를 검색하면 가장 많이 볼 수 있는, 유명한 흐름도이다. 여기서 중요한 것은 6번이다.
OAuth 과정 중 네이버에서 발급해주는 토큰이 있기 때문에 이 토큰을 그대로 쓰면 되지 굳이 JWT 토큰을 따로 발급해야 하나 싶을 수 있다.(내가 처음에 그랬음)
그런데 네이버에서 발급해주는 토큰은 네이버에서 만들었기 때문에 네이버 서비스에 접근할 때만 유효한 것이다. 우리 서버 입장에서는 초면이고 무엇보다 우리 서버는 아직 이 사용자가 우리 서비스에서 활동을 해도 되는 것인지 검증하는 어떤 행위를 한 적이 없다. 그러면 우리 서버는 현재 접근 중인 사용자를 어떻게 검증할까?
이를 위해서 JWT 토큰을 사용한다. 사용자에게 우리 서버에서 만든 JWT 토큰을 발급해주고, 이 토큰을 이용해 우리 서비스에 접근 시켜도 되는 것인지 검증하는 것이다. 그래서 우리 서버 전용 토큰을 발급하는 6번 과정이 필요하다.
이제 이걸 참고해서 소셜 로그인 기능을 구현해 보자.

Gradle

먼저 build.gradle에 아래와 같이 의존성을 추가해 준다.

implementation 'org.springframework.boot:spring-boot-starter-security'
implementation 'com.auth0:java-jwt:4.2.1'
implementation 'org.apache.commons:commons-lang3'
implementation 'com.google.guava:guava:31.1-jre'
implementation 'net.pwall.json:jsonutil:5.0'
implementation 'com.googlecode.json-simple:json-simple:1.1.1'

NAVER Developers에 애플리케이션 등록

네이버 로그인 공식 문서
네이버 로그인 공식 문서를 참고하면 API 적용에 앞서 애플리케이션 정보를 먼저 등록하라고 한다.

네이버 아이디로 로그인 후 만들고자 하는 애플리케이션 정보를 등록한다.

사용 API의 드롭다운 메뉴에서 네이버 로그인을 선택하면 사용자에게서 제공받고 싶은 정보들을 선택할 수 있다.

우리 프로젝트는 웹뷰로 만드는 안드로이드 앱이기 때문에 모바일 웹을 선택했다. 본인의 프로젝트 상황에 맞는 서비스 환경을 선택한 뒤 서비스 URL과 네이버 로그인 Callback URL을 입력한다.
Callback URL은 네이버 회원정보 요청에 사용할 접근 토큰 발급에 사용될 code와 state값을 리턴하는 데 사용된다. 네이버 로그인 인증 요청 API 호출 후 사용자의 네이버 로그인과 정보 제공 동의가 완료되면 Callback URL에 http://콜백URL/redirect?code={code값}&state={state값}와 같은 형태로 데이터가 담겨 전송된다.
지금은 테스트 환경이기 때문에 로컬호스트와 포트번호를 입력했다. 소셜로그인 과정 중 네이버와 주로 통신하는 쪽은 프론트엔드 쪽이기 때문에 프론트엔드 개발자가 사용하기 편한 주소를 사용하는 것이 좋은 것 같다.
나머지 설정들이 완료되면 생성 버튼을 눌러 애플리케이션을 생성한다.

[OAuth] Spring Boot + React + OAuth2.0 이용한 네이버, 카카오 로그인
네이버에서 토큰을 받아오는 과정은 이 블로그에 설명이 잘 되어 있다.

application.yml

jwt:
  token:
    header: api_key
    issuer: soil_server
    clientSecret: /* 임의의 값 */
    expirySeconds: 0

JWT 토큰 사용을 위한 정보를 설정한다.

Create package : configure

package com.august.soil.api.configure;

각종 설정정보를 저장하고 처리할 클래스들을 모아 놓을 패키지를 configure라는 이름으로 만든다.

JwtTokenConfigure class

configure 패키지 아래에 application.yml로부터 JWT 설정 정보를 읽어올 클래스를 JwtTokenConfigure라는 이름으로 만든다.

import lombok.Getter;
import lombok.Setter;
import org.apache.commons.lang3.builder.ToStringStyle;
import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.stereotype.Component;

import static org.apache.commons.lang3.builder.ToStringBuilder.reflectionToString;

/**
 * application.yml 에서 JWT 설정 정보를 읽어온다.
 */
@Component
@ConfigurationProperties(prefix = "jwt.token")
@Getter @Setter
public class JwtTokenConfigure {
  
  private String header;
  
  private String issuer;
  
  private String clientSecret;
  
  private int expirySeconds;
  
  @Override
  public String toString() {
    return reflectionToString(this, ToStringStyle.JSON_STYLE);
  }
}