OAuth2 Social Login Template

사이드 프로젝트 시 소셜 로그인으로 구성을 많이 한다.

템플릿으로 사용할 수 있도록 다양한 스프링부트 버전으로 구현하였다.

구글, 네이버, 카카오 로그인 3가지 유형으로 만들어보았다.

우리 서버에서 jwt access token을 발급하여 클라이언트 쿠키에 담고, refresh token은 db에 저장하여

access토큰은 만료되었으나 refresh토큰은 만료되지 않았을 경우 재발급을 해주게끔 처리하였다.

부하관련이슈가 있을 시

refresh token을 저장하고 있는 rdb를 redis가 그 역할을 하게끔 변경해주면 된다.

소셜로그인 api key들은 깃허브 push를 위해 jasypt로 암호화하였다.

개발환경 - 해당 브랜치

• Spring boot 2.7.12
• oauth2
• jwt 0.11.5
• thymeleaf
• Java 17
• JPA & mysql 8.0.34
• lombok
• gradle

기본 셋팅

mysql 8.0.34 설치 후 아래의 쿼리문 차례로 실행

CREATE DATABASE notifycal CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
CREATE USER 'notifycal_user'@'localhost' IDENTIFIED BY '1234';
GRANT ALL PRIVILEGES ON notifycal.* TO 'notifycal_user'@'localhost';
FLUSH PRIVILEGES;

create table users (
    id bigint not null auto_increment,
    email varchar(255) not null,
    password varchar(255),
    name varchar(255),
    image_url varchar(255),
    provider varchar(255),
    provider_id varchar(255),
    unique_identifier varchar(255) not null,
    refresh_token TEXT,
    refreshTokenExpiryDate datetime(6),
    created_at datetime(6),
    updated_at datetime(6), primary key (id)
) engine=InnoDB;

alter table users add constraint UK_6dotkott2kjsp8vw4d0m25fb7 unique (email);
alter table users add constraint UK_1mh0m6c9yk2vkvm9wsnhnegb7 unique (unique_identifier);

1. 구글 로그인 (https://console.cloud.google.com/)

• 위 링크에 접속해서 구글 로그인을 해준다.

• 새 프로젝트를 클릭하여 적당한 이름으로 만들어준다.
  
  

• API 및 서비스 - OAuth 동의화면을 선택한다.

• External 선택 후 만들기

• 필수 항목만 넣어주면 된다. 항목 넣어준 후 나머지 step은 저장후 계속

• 사용자 인증 정보로 넘어간다

  사용자 인증 정보 만들기 - OAuth 클라이언트 ID 선택

• 제일 중요한 부분이다

  웹 애플리케이션 선택 후 아래의 URI를 승인된 리디렉션 URI에 추가해주자

  http://localhost:5050/login/oauth2/code/google

• client-id와 client-secret를 발급해준다. 스프링부트 yml쪽에 사용 할 것이니 잘 저장해두자

2. 네이버 로그인 (https://developers.naver.com/apps)

• 위 링크에 접속해서 네이버 로그인을 해준다.

• 애플리케이션 등록을 클릭하여 적당한 이름으로 만들어준다.
  
  

• 사용 API에 네이버 로그인을 클릭해준다

• 제공 정보를 선택해주고, 로그인 오픈 API 서비스환경을 PC웹으로 해준다

• 가장 중요한 서비스URL과 Callback URL을 써주고 저장을 누르자

http://localhost:5050
http://localhost:5050/login/oauth2/code/naver

• client-id와 client-secret를 발급해준다. 스프링부트 yml쪽에 사용 할 것이니 잘 저장해두자

3. 카카오 로그인 (https://developers.kakao.com/console/app)

• 위 링크에 접속해서 카카오 로그인을 해준다.

• 애플리케이션 추가하기를 클릭하여 적당한 이름으로 만들어준다.
  
  

• 만든 애플리케이션을 클릭해준다.

• 박스쳐둔 7곳을 참조하거나 설정을 하면된다

• 카카오로그인 활성화

• 동의항목 설정

• Redirect URI설정

http://localhost:5050/login/oauth2/code/kakao

• 설정은 끝났고 client-id와 client-secret를 복사만 하면된다

카카오에서 client-id는 앱키 탭에 REST API키가 이다.

카카오에서 client-secret는 보안탭에 들어가서 생성해줘야한다.

이제 개발자센터에서 설정할거는 끝났다.

소스를 clone받아보면 JasyptConfigTest.java 라는 테스트코드가 있을거다.

key부분에 원하는 key를 넣고, str부분에 아까 받았던 소셜로그인쪽의 비밀키를 넣어서 하나씩 암호화 시켜서 따로 저장해두자

application.yml 파일을 열어 암호화된 문자열들을 하나씩 ENC()로 감싸서 넣어주면 된다.

그리고 아까 지정해뒀던 jasypt 키설정은 아래와 같다

edit configuration을 클릭 - Modify Options 클릭 - Add VM Options 클릭

까지하면 입력칸이 하나 추가된다 거기에 아래처럼 아까 지정한 키를 추가해주면 완료다

-Djasypt.encryptor.password=key input