김쥬르에 개발일지

Amazone EC2 DB연동(Linux)

김쥬르 — Fri, 19 Jan 2024 18:55:53 +0900

이번엔 EC2 서버를 Linux 환경으로 생성한 뒤

공용 DB를 생성해보록 하겠습니다.

EC2 화면에서 인스턴스 시작을 눌러줍니다.

이름은 자유롭게 기재해주세요.

OS에 경우 Ubuntu로 진행할 예정이지만

RedHat,SUSE,Debian 등 정말 많은 Linux OS가 존재하는데
https://secretpoten.tistory.com/31

참고하여 차이점을 알고 공부하셔도 좋을거같습니다.

키 페어는 윈도우 구축때 사용하였던 test를 사용합니다.

나머지 사항은 디폴트 값으로 둔후 인스턴스 시작을 클릭합니다.

새로 생성된 Linux 인스턴스를 확인할 수 있습니다.

다음은 Linux 인스턴스 접속을 위해 일반적인 SSH 접속용 프로그램이 필요하며

MobaXterm 이라는 SSH 툴을 다운받아 사용하겠습니다.

https://mobaxterm.mobatek.net/download-home-edition.html

다운받아 실행해줍니다.

먼저 초기설정으로 한글 인코딩 설정을 해줍니다.

순서대로 눌러 진행해주세요.

다음은 Linux 인스턴 SSH에 접속하기 위해 설정해보겠습니다.

순서대로 진행해주세요.

3번은 AWS에서 인스턴스한 Linux 서버에 퍼블릭 IPv4를 넣어주세요.

4번은 ubuntu 라고 써주세요.

5번은 인스턴스를 생성하면서 설정한 pem 파일을 업로드 해주시면됩니다.

오류없이 위 화면처럼 나오면 접속이 완료된것입니다.

이제 MySQL 설치를 해보겠습니다.

sudo apt update
sudo apt install mysql-server

MySQL 포트 설정

sudo ufw allow mysql

MySQL 접속을 위한 준비

1. MySQL에 접근하기 위한 유저 만들기

EC2 인스턴스 서버에서 root계정으로 접속해서 계정을 만듭니다.

$ sudo mysql

mysql> create user 'admin'@'%' identified by '비밀번호';

//만든 계정 확인
mysql> use mysql;
mysql> select user, host from user;

그리고 admin계정으로 조회할 수 있는 데이터베이스 및 테이블을 생성합니다.

mysql> create database test;
mysql> use test;
mysql> create table ttest(test1 varchar(100), test2 varchar(100));
mysql> insert into ttest(test1,test2) values('10','20');
mysql> insert into ttest(test1,test2) values('20','30');

2. 데이터베이스 접근 권한 주기

mysql> grant all privileges on test.* to 'admin'@'%';
mysql> flush privileges;
mysql> show grants for 'admin'@'%';

test라는 데이터베이스에 대한 모든 권한을 admin 계정에게 준 것입니다.
그리고 flush privileges는 grant라는 테이블을 즉시 리로드해서 변경 사항을 즉시 반영하게 하는 명령어입니다.
이로써 admin은 test에 대한 모든 권한을 가지게 되었습니다.

3. MySQL 외부 접속 설정

원격 접속하기 위한 계정 설정은 끝났고 이제 원격 접속을 가능하게 MySQL 설정 파일을 변경하여야합니다.

sudo vi /etc/mysql/mysql.conf.d/mysqld.cnf

안에 bind-address가 127.0.0.1로 되어있는데, 외부 접속을 허용해주기 위해 이를 0.0.0.0으로 바꿔줍니다.

(i를 누르면 편집이 가능하고 편집이 완료되면 ESC버튼을 누릅니다)

(그후 :wq 를 입력해준후 Enter를 눌러 저장하면서 편집기를 나와줍니다.)

AWS EC2 인스턴스에서도 인바운드 규칙을 설정해주어야합니다.

AWS EC2에 Linux 인스턴스에 보안그룹에 인바운드 규칙에 들어가 MySQL에 대한 규칙을 추가해줍니다.

이제 서버에서 생성한 데이터베이스를 로컬에서 접속하도록 하겠습니다.

mysql workbench에 접속해줍니다.

순서대로 진행해줍니다.

1번 : 눌러 Connction를 진행해줍니다.

2번 : 알아볼수 있게 이름을 정해줍니다.

3번 : 인스턴스에 퍼블릭 IPv4 주소를 입력해줍니다.

4번 : 생성하고 권한을 줬던 admin으로 등록해줍니다.

5번 : 계정 생성에 설정한 비밀번호를 입력해줍니다.

6번 : 테스트 커넥션을 통해 위와 같은 화면이 나와야합니다.

7번 : OK를 눌러 최종적으로 커넥션을 진행합니다.

셀렉트문을 통해 계정 생성과 같이 생성했던 테이블과 내용들이 정상적으로 조회되는것을 확인할 수 있습니다.

Spring Boot AWS 배포

김쥬르 — Thu, 11 Jan 2024 14:00:01 +0900

지금까지 만든 웹 서비스를 AWS Elastic Beanstalk를 이용하여 배포해보도록하겠습니다.

Elastic Beanstalk?

서버 구축 및 배포에 필요한 EC2 RDS를 한 번에 설정하는 AWS 서비스입니다.

서버 업로드용 코드 작성만으로 서버를 쉽게 올릴 수 있고, 그외의 기능들

로드 밸런싱, 오토 스케일링, 모니터링, 배포 등을 일래스틱 빈스토크 메뉴 안에 직접 구성하거나

설정 파일로 자동 처리할 수 있습니다. 일래스틱 빈스토크는 추가 비용 없이 애플리케이션을 저장 및 실행하는데 필요한 AWS 리소스에 대해서만 요금을 지불하게됩니다.

(AWS 계정 생성 과정은 생략합니다)

https://ap-northeast-2.console.aws.amazon.com/elasticbeanstalk/home?region=ap-northeast-2#/welcome

애플리케이션 생성 버튼을 클릭해줍니다.

자유롭게 애플리케이션 이름을 설정해줍니다.

저희는 JAVA를 사용하니 플랫폼을 JAVA로 설정해주고 나머지는 JAVA로 설정하였을때 디폴트값으로 둡니다.

외에 사항들은 전부 디폴트 값으로 두고 다음 버튼을 눌러줍니다.

새 서비스 역할 생성 및 사용을 눌러주고

EC2 인스턴스 프로파일에 권한 세부정보 보기를 눌러줍니다.

위와 같은 화면이 나오면 IAM 콘솔을 눌러

IAM 대시보드 화면으로 이동합니다.

저는 이미 만들어둔 역할이 있어 9로 나오고 AWS 사용여부에 따라 숫자는 달라집니다.

역할에 숫자를 눌러줍니다.

역할 생성을 눌러줍니다.

사용 사례에 "서비스 또는 사용 사례" 를 EC2로 선택해주고 다음을 눌러줍니다.

AWSElasticBeanstalk 를 검색해준후

AWSElasticBeanstalkWebTier

AWSElasticBeanstalkWorkerTier

AWSElasticBeanstalkMulticontainerDocker

3개를 찾아 선택해주고 다음 버튼을 눌러줍니다.

역할 이름에 aws-elasticbeanstalk-ec2-role 를 적어주고

나머지는 디폴트 값으로 둔 후 스크롤을 내려 역할 생성을 눌러줍니다.

화면이 전환되면 설정하던 ElaticBeanstalk 화면으로 이동해서

EC2 인스턴스 프로파일 오른쪽에 새로고침 버튼을 눌러줍니다.

IAM에서 생성 해준 역할 이름으로 설정해준뒤 검토 단계로 건너뛰기를 눌러준 후

다음 화면이 나오면 스크롤을 내려서 제출 버튼을 누릅니다.

제출이 완료되면 이러한 화면이 나오며 서버를 자동으로 세팅하는 중이니

작업이 완료될 때 까지 기다려줍니다.

상단에 환경이 성공적으로 시작되었습니다. 또는 상태에 OK표시가 되면

도메인에 링크를 눌러 접속이 잘 되는지 확인해줍시다.

이제 데이터베이스를 생성해줍니다.

처음 화면으로 돌아와 왼쪽 카테고리에 구성을 눌러줍니다.

네트워킹 및 데이터베이스 에 편집 버튼을 눌러줍니다.

스크롤을 내려 데이터베이스 부분에 데이터베이스 활성화 버튼을 눌러주고

사용자 이름과 암호를 자유롭게 기입합니다.

나머지 설정은 디폴트로 둔후 적용 버튼을 눌러줍니다.

해당 작업도 어느정도에 소요시간이 있으므로 기다려준 후

다시 카테고리에 구성을 누르고 다시 데이터베이스 편집에 들어갑니다.

스크롤을 내려보면 데이터베이스 엔드포인트 라는것이 생겼을겁니다.

엔드포인트 주소를 복사해줍니다.

구성 화면으로 돌아와 이번에는

업데이트 , 모니터링 및 로깅에 편집을 눌러줍니다.

스크롤을 쭉 내려 환경 속성에 해당 내용을 입력 후 적용 버튼을 눌러줍니다.

RDS_HOSTNAME : 복사해두었던 엔드포인트 숫자4개와 : 을 지우고 입력해줍니다.

RDS_PORT : 지웠던 엔드포인트 맨 뒤에 숫자 4개 (3306)

RDS_DB_NAME : ebdb 고정입니다.

RDS_USERNAME : DB 설정할 때 적은 ID

RDS PASSWORD : DB 설정할 때 적은 PW

이제 RDS 로 이동하여 DB 인스턴스를 눌러줍니다.

방금 생성된 DB 식별자를 눌러줍니다.

VPC 보안 그룹에 링크를 눌러줍니다.

Security group ID 에 링크를 클릭합니다.

인바운드 규칙 편집을 눌러줍니다.

규칙 추가 버튼을 누른후 유형은 MYSQL/Aurora로 선택해주고

소스는 Anywhere-IPv4로 해준 뒤에 저장해주고 먼저 있던 TCP 유형의 인바운드 규칙은 삭제해주고 규칙 저장을 눌러줍니다.

이제 인텔리제이를 열어 DB를 연결해주겠습니다.

먼저 application.properties 파일을 연뒤 해당 내용을 지워줍니다.

ctrl + shift + A 를 누른후 Plugins 를 검색후 Database Navigator를

다운받고 다시 시작해줍니다.

왼쪽 DB Brower를 누른 후 플러스 버튼을 누르고 MySQL을 선택해줍니다.

내용을 적어준 후 TEST CONNECTION를 눌러 위와 같이 나오면 성공입니다.

적용된 스프링 부트 DB에서 sql 콘솔 창을 추가해준 후 SQL 문을 작성하고

순서대로 실행시켜줍니다.

create database blog;

use blog;

create table article (
    id bigint not null AUTO_INCREMENT,
    author varchar(255) not null,
    content varchar(255) not null,
    title varchar(255) not null,
    created_at timestamp,
    updated_at timestamp,
    primary key (id)
);

create table refresh_token (
    id bigint not null AUTO_INCREMENT,
    refresh_token varchar(255) not null,
    updated_at timestamp,
    primary key (id)
);

create table users (
    id bigint not null AUTO_INCREMENT,
    email varchar(255) not null,
    nickname varchar(255),
    password varchar(255),
    updated_at timestamp,
    primary key (id)
);

이제 오른쪽에 Gradle 탭에서 Tasks -> build -> build를 더블클릭해줍니다.

이렇게 나오면 성공입니다.

프로젝트 구성에서 build -> libs -> SNAPSHOT.jar -> open in -> explorer

를 눌러 파일에 위치를 기억해주고 다시 Elastic Beanstalk로 돌아가

업로드 및 배포를 누르고 파일선택을 눌러 파일을 업로드합니다.

배포가 완료되었다면 다시 구성에

업데이트 , 모니터링 및 로깅 편집에 들어가

내용을 추가해줍니다.

SERVER.PORT : 5000

JWT_SECRET_KEY : study-springboot

SPRING_SECURITY_OAUTH2_CLIENT_REGISTRATION_GOOGLE_ CLIENT_ID

＜구글 OAuth2에서 발급받은 클라이언트 아이디＞

SPRING_SECURITY_0AUTH2_CLIENT_REGISTRATI0N_G00GLE_ CLIENT_SECRET

SPRING_SECURITY_0AUTH2_CLIENT_REGISTRATI0N_G00GLE_ SCOPE : email,profile

여기서 설정한 값은 배포 파일에 비밀키를 보호해줍니다.

이제 구글 클라우드 콘솔로 이동하여

elastic beanstalk 주소 + /login/oauth2/code/google 을 승인된 리디렉션 ID로 추가해줍니다

이제 본인 서버에 도메인 주소로 접속해보면

로컬 환경에서 와 같은 화면이 나오는걸 볼수 있고

구글 로그인을 통해 홈페이지 접속도 문제없이 되는걸 확인할수 있습니다.

위는 EC2 서버로 접속한 화면이며 다른 PC에서도 접속이 잘되는걸 확인할수 있습니다.

다음 포스팅은 CI/CD에 대해서 포스팅해보도록 하겠습니다.

Amazone EC2 DB구축(Windows)

김쥬르 — Wed, 10 Jan 2024 08:28:25 +0900

저번 포스팅에 이어 EC2 를 사용하여 서버를 하나 빌리고

빌린 서버에 외부 환경과 공용으로 사용할 DB를 생성해보겠습니다.

AWS EC2 인스턴스에 접속한 후 종료해 두었던 인스턴스를 시작해준 후

저번에 설치해둔 원격 데스크톱 파일을 실행하고 암호키도 해독후 넣어준후 서버를 시작합니다.

콘솔을 사용한 구축은 Linux를 진행하며 할것이기 때문에

windows는 GUI툴로 진행하겠습니다.

그후 https://dev.mysql.com/downloads/workbench/

에 접속하여 mysql을 다운받아줍니다.

(자세한 다운로드 방법은 생략합니다.)

mysql에 성공적으로 접속하셨다면 스키마를 만들기 위해 1~4번까지 순서대로 눌러줍니다.

2번에 스키마 네임은 test로 하겠습니다.

스키마가 만들어졌다면 아래 쿼리문을 작성하고 순서대로 실행합니다.

이제 root 계정은 host가 local이므로 외부접근이 불가능하니

외부접근이 가능한 새 계정을 만들어주겠습니다.

Navigator -> Users and Privileges -> Add Account 를 눌러준후

Name 과 PW 를 설정하고 Limit to hosts Matching 에는 %(클라이언트 서버 ip주소)를 입력해줍니다.

이 계정에 root 데이터베이스에 접근할 수 있도록 권한을 부여해야합니다.

Schema Privileges -> Add Entity -> Selected schema 에서

공유하고자 하는 스키마를 선택한후 OK를 눌러줍니다.

스키마가 등록이되고 권한들을 체크할수 있게됩니다.

저는 테스트이기에 Select "ALL"을 눌러 모두 체크한후 Apply를 눌러줍니다.

윈도우 검색창에 cmd를 검색한후 명령 프롬포트를 실행해주고

ipconfig를 입력한후 IPv4에 대한 값을 확인합니다.

이제 클라이언트 PC로 돌아와 MySQL를 켜줍니다.

+버튼을 누르면 해당 창이 나오며

Connection Name : 자유롭게 기입

Hostname : 서버 ip주소

Username : 서버 DB에서 지정한 Login Name

Password : 서버 DB에서 지정한 Password

Test Connection 을 눌러보면 연결이 잘되었을때 아래와 같이 나옵니다.

이렇게 나왔다면 OK를 눌러 위와 같은 창을 닫아주고

OK를 눌러주면 서버 DB와 연결이 완료된것입니다.

위 코드를 입력하여 서버에서 만들었던 테이블이 조회되는지 확인하고

데이터를 추가하여 서버에서도 추가된 데이터가 잘 조회되는지 확인해봅니다.

서버 DB에서도 클라이언트 DB에서 입력한 데이터가 잘 조회되는걸 확인이 되었네요.

다음 포스팅엔 Linux 서버를 구축하고 Linux 서버에서 공용 DB를 만들어보겠습니다.

Spring Boot OAuth2 구글

김쥬르 — Mon, 8 Jan 2024 08:24:57 +0900

구글 소셜 로그인을 구현해보도록 하겠습니다.

구글 클라우드 콘솔 https://cloud.google.com/cloud-console 로 접속 후

우측 상단에 "콘솔" 버튼을 클릭합니다.

이동 후 좌측 상단에 "프로젝트 선택" -> "새 프로젝트" 를 클릭합니다.

(저의 경우 이미 다른 프로젝트에 적용중이기에 "프로젝트 선택" 이 아닌 프로젝트 명으로 나옵니다)

프로젝트 이름은 자유롭게 사용하고 프로젝트 이름 설정 후 "만들기" 버튼을 클릭합니다.

좌측 상단에 햄버거 메뉴에서 "API 및 서비스" -> "사용자 인증 정보"

버튼을 눌러 사용자 인증을 관리하는 페이지로 이동합니다.

사용자 인증 정보를 만들려면 OAuth 동의 화면을 먼저 구성해야 합니다.

"동의 화면 구성" 버튼을 누르고 User Type을 외부용으로 선택 후 "만들기" 버튼을 클릭합니다.

그러면 앱 정보에 관한 화면이 나타납니다. 앱 이름은 자유롭게 기입하고

이메일 , 개발자 연락처를 입력 후 "저장 후 계속" 버튼을 클릭합니다.

(나머지 칸은 빈칸으로 둡니다)

범위 설정 화면에서는 "범위 추가 또는 삭제" 버튼을 클릭 후 openid 와 이메일 주소를 추가하고

"업데이트" 버튼을 클릭 한후 "저장 후 계속" 버튼을 누릅니다.

테스트 사용자 화면에서는 따로 추가하지 않고 "저장 후 계속" 버튼을 클릭합니다.

요약 화면이 나오면 "대시보드로 돌아가기" 버튼을 클릭합니다.

대시보드에서 "사용자 인증 정보" -> "사용자 인증 정보 만들기" -> "OAuth 클라이언트 ID"를 클릭합니다.

애플리케이션 유형 : 웹 애플리케이션

이름 : springbootOAuth

승인 리디렉션 URI : http://localhost:8080/login/oauth2/code/google

을 입력한 뒤 "만들기"를 클릭합니다.

그 후 나오는 클라이언트 ID 와 클라이언트 보안 비밀번호는

애플리케이션에서 사용하는 값이므로 따로 메모해둡니다.

생성된 OAuth 인증값은 추후에 리소스 오너의 정보에 접근할 때 사용합니다.

이제 스프링 부트에 관한 설정과 구현을 해보겠습니다.

OAuth 설정값을 스프링 부트 애플리케이션 설정 파일에서 사용하기 위해

application-oauth.properties 파일을 열고 코드를 추가합니다.

spring.security.oauth2.client.registration.google.client-id = 클라이언트 ID
spring.security.oauth2.client.registration.google.client-secret = 클라이언트 보안 비밀번호
spring.security.oauth2.client.registration.google.scope = profile, email

application.properties 파일에 코드를 추가합니다.

spring.profiles.include=oauth

인증값은 깃허브 같은 외부 사이트에 절대로 노출되면 안되기에

.gitignore 파일에 application-oauth.properties을 등록해줍니다.

OAuth2를 사용하기 위해 build.gradle 파일에 의존성을 추가합니다.

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

OAuth2 인증 플로우를 구현하며 쿠키를 사용할 일이 생기는데 그때마다 쿠리를 생성하고 삭제하는

로직을 추가하면 불편하므로 유틸리티로 사용할 쿠키 관리 클래스를 구현합니다.

util 패키지를 새로 만들고 CookieUtil.java 파일을 생성하고 코드를 작성합니다.

public class CookieUtil {

    // 요청값 (이름 , 값 , 만료 기간) 을 바탕으로 쿠키 추가
    public static void addCookie(HttpServletResponse response, String name, String value, int maxAge) {
        Cookie cookie = new Cookie(name, value);
        cookie.setPath("/");
        cookie.setMaxAge(maxAge);

        response.addCookie(cookie);
    }

    // 쿠키의 이름을 입력받아 쿠키 삭제
    public static void deleteCookie(HttpServletRequest request, HttpServletResponse response, String name) {
        Cookie[] cookies = request.getCookies();

        if (cookies == null) {
            return;
        }

        for (Cookie cookie : cookies) {
            if (name.equals(cookie.getName())) {
                cookie.setValue("");
                cookie.setPath("/");
                cookie.setMaxAge(0);
                response.addCookie(cookie);
            }
        }
    }

    // 객체를 직렬화해 쿠키의 값으로 변환
    public static String serialize(Object obj) {
        return Base64.getUrlEncoder()
                .encodeToString(SerializationUtils.serialize(obj));
    }

    // 쿠키를 역직렬화해ㅔ 객체로 변환
    public static <T> T deserialize(Cookie cookie, Class<T> cls) {
        return cls.cast(
                SerializationUtils.deserialize(
                        Base64.getUrlDecoder().decode(cookie.getValue())
                )
        );
    }
}

addCookie

요청값(이름,값,만료 기간)을 바탕으로 HTTP 응답에 쿠키를 추가합니다.

deleteCookie

쿠키 이름을 입력받아 쿠키를 삭제합니다.

실제로 삭제하는 방법은 없으므로 파라미터로 넘어온 키의 쿠키를

빈 값으로 바꾸고 만료 시간을 0으로 설정해 쿠키가 재생성 되자마자 만료 처리합니다.

serialize

객체를 직렬화해 쿠키의 값으로 들어갈 값으로 변환합니다.

deserialize

쿠키를 역직렬화 객체로 변환합니다.

사용자 정보를 조회해 users 테이블에 사용자 정보가 있다면 리소스 서버에서 제공해주는

이름을 업데이트하고 없다면 users 테이블에 새 사용자를 생성해 데이터베이스에 저장하는 서비스를 구현합니다.

domain 패키지의 User.java 파일에 사용자 이름과 OAuth 관련 키를 저장하는 코드를 추가합니다.

    // 사용자 이름
    @Column(name = "nickname", unique = true)
    private String nickname;

    // 생성자에 nickname 추가
    @Builder
    public User(String email, String password, String nickname) {
        this.email = email;
        this.password = password;
        this.nickname = nickname;
    }

    // 사용자 이름 변경
    public User update(String nickname) {
        this.nickname = nickname;

        return this;
    }

config 패키지에 oauth 패키지를 만들고 OAuth2UserCustomService.java 파일을 생성한 다음

리소스 서버에서 보내주는 사용자 정보를 불러오는 메서드인 loadUser()를 통해

사용자를 조회하고 사용자가 users 테이블에 사용자 정보가 있다면 이름을 업데이트하고

없다면 saveOrUpdate() 메서드를 실행해 users 테이블에 회원 데이터를 추가합니다.

@RequiredArgsConstructor
@Service
public class OAuth2UserCustomService extends DefaultOAuth2UserService {

    private final UserRepository userRepository;

    @Override
    public OAuth2User loadUser(OAuth2UserRequest userRequest) throws OAuth2AuthenticationException {
        OAuth2User user = super.loadUser(userRequest); // ❶ 요청을 바탕으로 유저 정보를 담은 객체 반환
        saveOrUpdate(user);

        return user;
    }

    // ❷ 유저가 있으면 업데이트, 없으면 유저 생성
    private User saveOrUpdate(OAuth2User oAuth2User) {
        Map<String, Object> attributes = oAuth2User.getAttributes();

        String email = (String) attributes.get("email");
        String name = (String) attributes.get("name");

        User user = userRepository.findByEmail(email)
                .map(entity -> entity.update(name))
                .orElse(User.builder()
                        .email(email)
                        .nickname(name)
                        .build());

        return userRepository.save(user);
    }
}

부모 클래스인 DefaultOAuth2UserService에서 제공하는 정보를 기반으로 유저 객체를 만들어주는

loadUser() 메서드를 사용해 사용자 객체를 불러옵니다.

사용자 객체는 식별자, 이름, 이메일, 프로필 사진 링크 등의 정보를 담고 있습니다.

saveOrUpdate() 메서드는 사용자가 user 테이블에 있으면 업데이트하고 없으면

사용자를 새로 생성해서 데이터베이스에 저장합니다.

OAuth2와 JWT를 함께 사용하려면 기존 스프링 시큐리티를 구현하며 작성한 설정이 아니라 다른 설정을 사용해야 합니다.

기존의 폼 로그인 방식을 사용하기 위해 구성했던 설정 파일인 webSecurityConfig.java 내용을 모두 주석처리합니다.

("ctrl + A" + "ctrl + /" 을 누르면 모두 주석 처리됩니다)

config 패키지에 WebOAuthSecurityConfig.java 파일을 생성하고 코드를 작성합니다.

@RequiredArgsConstructor
@Configuration
public class WebOAuthSecurityConfig {

    private final OAuth2UserCustomService oAuth2UserCustomService;
    private final TokenProvider tokenProvider;
    private final RefreshTokenRepository refreshTokenRepository;
    private final UserService userService;


    @Bean
    public WebSecurityCustomizer configure() { // 스프링 시큐리티 기능 비활성화
        return (web) -> web.ignoring()
                .requestMatchers("/img/**", "/css/**", "/js/**");
    }

    @Bean
    public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
        // 토큰 방식으로 인증을 하기 때문에 기존에 사용하던 폼로그인, 세션 비활성화
        http.csrf(AbstractHttpConfigurer::disable)
                .httpBasic(AbstractHttpConfigurer::disable)
                .formLogin(AbstractHttpConfigurer::disable)
                .logout(AbstractHttpConfigurer::disable);

        http.sessionManagement(sessionManagement -> sessionManagement
                .sessionCreationPolicy(SessionCreationPolicy.STATELESS));
    
        // 헤더를 확인할 커스텀 필터 추가
        http.addFilterBefore(tokenAuthenticationFilter(), UsernamePasswordAuthenticationFilter.class);
    
        // 토큰 재발급 URL은 인증 없이 접근 가능하도록 설정. 나머지 API URL은 인증 필요
        http.authorizeHttpRequests(request -> request
                .requestMatchers("/api/token").permitAll()
                .requestMatchers("/api/**").authenticated()
                .anyRequest().permitAll());

        http.oauth2Login(oauth2Login -> oauth2Login
                .loginPage("/login")
                .authorizationEndpoint(authorizationEndpoint -> authorizationEndpoint
                        // Authorization 요청과 관련된 상태 저장
                        .authorizationRequestRepository(oAuth2AuthorizationRequestBasedOnCookieRepository()))
                .successHandler(oAuth2SuccessHandler()) // 인증 성공시 실행할 핸들러
                .userInfoEndpoint(userInfoEndpoint -> userInfoEndpoint
                        .userService(oAuth2UserCustomService)));

        http.logout(logout -> logout
                .logoutSuccessUrl("/login"));

        // /api로 시작하는 url인 경우 401 상태 코드를 반환하도록 예외 처리
        http.exceptionHandling(exceptionHandling -> exceptionHandling
                .defaultAuthenticationEntryPointFor(new HttpStatusEntryPoint(HttpStatus.UNAUTHORIZED),
                        new AntPathRequestMatcher("/api/**")));


        return http.build();
    }

    @Bean
    public AuthenticationSuccessHandler oAuth2SuccessHandler() {
        return new OAuth2SuccessHandler(tokenProvider,
                refreshTokenRepository,
                oAuth2AuthorizationRequestBasedOnCookieRepository(),
                userService
        );
    }

    @Bean
    public TokenAuthenticationFilter tokenAuthenticationFilter() {
        return new TokenAuthenticationFilter(tokenProvider);
    }

    @Bean
    public AuthorizationRequestRepository<OAuth2AuthorizationRequest> oAuth2AuthorizationRequestBasedOnCookieRepository() {
        return new OAuth2AuthorizationRequestBasedOnCookieRepository();
    }

    @Bean
    public BCryptPasswordEncoder bCryptPasswordEncoder() {
        return new BCryptPasswordEncoder();
    }
}

filterChain()

토큰 방식으로 인증을 하므로 기존 폼 로그인, 세션 기능을 비활성화합니다.

addFilterBefore()

헤더값을 확인할 커스텀 필터를 추가합니다.

authorizeRequest()

토큰 재발급 URL은 인증 없이 접근하도록 설정하고 나머지 API들은 모두 인증을 해야 접근하도록 설정합니다.

oauth2Login()

OAuth2에 필요한 정보를 세션이 아닌 쿠키에 저장해서 쓸 수 있도록 인증 요청과 관련된 상태를

저장할 저장소를 설정합니다. 인증 성공시 실행할 핸들러도 설정합니다.

해당 클래스는 아직 구현하지 않았기에 에러가 발생합니다.

exceptionHandling()

/api로 시작하는 url인 경우 인증 실패 시 401 상태 코드, 즉 Unauthorized를 반환합니다.

OAuth2에 필요한 정보를 세션이 아닌 쿠키에 저장해서 쓸 수 있도록 인증 요청과

관련된 상태를 저장할 저장소를 구현합니다.

config/oauth 패키지에 OAuth2AuthorizationRequestBasedOnCookieRepository.java 파일을 생성합니다.

권한 인증 흐름에서 클라이언트의 요청을 유지하는데 사용하는 AuthorizationRequestRepository 클래스를

구현해 쿠키를 사용해 OAuth의 정보를 가져오고 저장하는 로직을 작성합니다.

public class OAuth2AuthorizationRequestBasedOnCookieRepository implements AuthorizationRequestRepository<OAuth2AuthorizationRequest> {

    public final static String OAUTH2_AUTHORIZATION_REQUEST_COOKIE_NAME = "oauth2_auth_request";
    private final static int COOKIE_EXPIRE_SECONDS = 18000;

    @Override
    public OAuth2AuthorizationRequest removeAuthorizationRequest(HttpServletRequest request, HttpServletResponse response) {
        return this.loadAuthorizationRequest(request);
    }

    @Override
    public OAuth2AuthorizationRequest loadAuthorizationRequest(HttpServletRequest request) {
        Cookie cookie = WebUtils.getCookie(request, OAUTH2_AUTHORIZATION_REQUEST_COOKIE_NAME);
        return CookieUtil.deserialize(cookie, OAuth2AuthorizationRequest.class);
    }

    @Override
    public void saveAuthorizationRequest(OAuth2AuthorizationRequest authorizationRequest, HttpServletRequest request, HttpServletResponse response) {
        if (authorizationRequest == null) {
            removeAuthorizationRequestCookies(request, response);
            return;
        }

        CookieUtil.addCookie(response, OAUTH2_AUTHORIZATION_REQUEST_COOKIE_NAME, CookieUtil.serialize(authorizationRequest), COOKIE_EXPIRE_SECONDS);
    }

    public void removeAuthorizationRequestCookies(HttpServletRequest request, HttpServletResponse response) {
        CookieUtil.deleteCookie(request, response, OAUTH2_AUTHORIZATION_REQUEST_COOKIE_NAME);
    }
}

인증 성공 시 실행할 핸드러를 구현합니다. 해당 빈을 구현할 때 사용할 메서드를 만들기 위해

service 패키지의 UserService.java 파일을 수정합니다

BCryptPasswordEncoder를 삭제하고 BCryptPasswordEncoder 생성자를 사용해

직접 생성해서 패스워드를 암호화할 수 있게 코드를 수정하고 findByEmail() 메서드를 추가합니다.

@RequiredArgsConstructor
@Service
public class UserService {

    private final UserRepository userRepository;

    public Long save(AddUserRequest dto) {
        BCryptPasswordEncoder encoder = new BCryptPasswordEncoder();

        return userRepository.save(User.builder()
                .email(dto.getEmail())
                .password(encoder.encode(dto.getPassword()))
                .build()).getId();
    }
	
    // 메서드 추가
    public User findById(Long userId) {
        return userRepository.findById(userId)
                .orElseThrow(() -> new IllegalArgumentException("Unexpected user"));
    }

    public User findByEmail(String email) {
        return userRepository.findByEmail(email)
                .orElseThrow(() -> new IllegalArgumentException("Unexpected user"));
    }
}

findByEmail() 메서드는 이메일을 입력받아 users 테이블에서 유저를 찾고 없으면 예외를 발생합니다.

config/oauth 패키지에 OAuth2SuccessHandler.java 파일을 생성하고 코드를 작성합니다.

@RequiredArgsConstructor
@Component
public class OAuth2SuccessHandler extends SimpleUrlAuthenticationSuccessHandler {

    public static final String REFRESH_TOKEN_COOKIE_NAME = "refresh_token";
    public static final Duration REFRESH_TOKEN_DURATION = Duration.ofDays(14);
    public static final Duration ACCESS_TOKEN_DURATION = Duration.ofDays(1);
    public static final String REDIRECT_PATH = "/articles";

    private final TokenProvider tokenProvider;
    private final RefreshTokenRepository refreshTokenRepository;
    private final OAuth2AuthorizationRequestBasedOnCookieRepository authorizationRequestRepository;
    private final UserService userService;
    
    // 리프레시 토큰 생성 -> 저장 -> 쿠키에 저장
    @Override
    public void onAuthenticationSuccess(HttpServletRequest request, HttpServletResponse response, Authentication authentication) throws IOException {
        OAuth2User oAuth2User = (OAuth2User) authentication.getPrincipal();
        User user = userService.findByEmail((String) oAuth2User.getAttributes().get("email"));

        String refreshToken = tokenProvider.generateToken(user, REFRESH_TOKEN_DURATION);
        saveRefreshToken(user.getId(), refreshToken);
        addRefreshTokenToCookie(request, response, refreshToken);
    
        // 엑세스 토큰 생성 -> 패스에 엑세스 토큰을 추가
        String accessToken = tokenProvider.generateToken(user, ACCESS_TOKEN_DURATION);
        String targetUrl = getTargetUrl(accessToken);
        
        // 인증 관련 설정값 , 쿠키 제거
        clearAuthenticationAttributes(request, response);
        // 리다이렉트
        getRedirectStrategy().sendRedirect(request, response, targetUrl);
    }
    
    // 생성된 리프레시 토큰을 전달받아 데이터베이스에 저장
    private void saveRefreshToken(Long userId, String newRefreshToken) {
        RefreshToken refreshToken = refreshTokenRepository.findByUserId(userId)
                .map(entity -> entity.update(newRefreshToken))
                .orElse(new RefreshToken(userId, newRefreshToken));

        refreshTokenRepository.save(refreshToken);
    }
    
    // 생성된 리프레시 토큰을 쿠키에 저장
    private void addRefreshTokenToCookie(HttpServletRequest request, HttpServletResponse response, String refreshToken) {
        int cookieMaxAge = (int) REFRESH_TOKEN_DURATION.toSeconds();

        CookieUtil.deleteCookie(request, response, REFRESH_TOKEN_COOKIE_NAME);
        CookieUtil.addCookie(response, REFRESH_TOKEN_COOKIE_NAME, refreshToken, cookieMaxAge);
    }
    
    // 인증 관련 설정값, 쿠키 제거
    private void clearAuthenticationAttributes(HttpServletRequest request, HttpServletResponse response) {
        super.clearAuthenticationAttributes(request);
        authorizationRequestRepository.removeAuthorizationRequestCookies(request, response);
    }
    
    // 엑세스 토큰을 패스에 추가
    private String getTargetUrl(String token) {
        return UriComponentsBuilder.fromUriString(REDIRECT_PATH)
                .queryParam("token", token)
                .build()
                .toUriString();
    }
}

스프링 시큐리티의 기본 로직에서는 별도의 authenticationSuccessHandler를 지정하지 않으면

로그인 성공 이후 SimpleUrlAuthenticationSuccessHandler를 사용합니다.

일반적인 로직은 동일하게 사용하고 , 토큰과 관련된 작업만 추가로 처리하기 위해

SimpleUrlAuthenticationSuccessHandler을 상속받은 뒤에

onAuthenticationSuccess()메서드를 오버라이드합니다.

리프레시 토큰 생성, 저장, 쿠키에 저장

토큰 제공자를 사용해 리프레시 토큰을 만든 뒤에 saveRefreshToken() 메서드를 호출해

해당 리프레시 토큰을 데이터베이스에 유저 아이디와 함께 저장합니다.

그 이후에는 클라이언트에서 액세스 토큰이 만료되면 재발급 요청하도록 addRefreshTokenToCookie()

메서드를 호출해 쿠키에 리프레시 토큰을 저장합니다.

엑세스 토큰 생성, 패스에 엑세스 토큰 추가

토큰 제공자를 사용해 엑세스 토큰을 만든 뒤에 쿠키에서

리다이렉트 경로가 담긴 값을 가져와 쿼리 파라미터에 엑세스 토큰을 추가합니다.

인증 관련 설정값, 쿠키 제거

인증 프로세스를 진행하면서 세션과 쿠키에 임시로 저장해둔 인증 관련 데이터를 제거합니다.

기본적으로 제공하는 메서드인 clearAuthenticationAttributes() 은 그대로 호출하고

removeAuthorizationRequestCookies()를 추가로 호출해 OAuth 인증을 위해 저장된 정보도 삭제합니다.

OAuth를 위한 로직이 모두 완료되었으니 글에 글쓴이를 추가하는 작업을 진행합니다.

domain 패키지의 Article.java 파일을 연 다음 author 변수를 추가합니다.

이후에 빌더 패턴에서도 author를 추가해 객체를 생성할 때 글쓴이를 입력받을 수 있게 변경합니다.

@Column(name = "author" , nullable = false)
private String author;


    @Builder
    public Article(String author, String title , String content){
        this.author = author;
        this.title = title;
        this.content = content;
    }

기존 글을 작성하는 API에서 작성자를 추가로 저장하기 위해 DTO 패키지의

AddArticleRequest.java 파일을 열고 toEntity() 메서드를 수정해 author 값도 추가 저장하도록 변경합니다.

    public Article toEntity(String author) {
        return Article.builder()
                .title(title)
                .content(content)
                .author(author)
                .build();
    }
}

service 패키지의 BlogService.java 파일을 연 다음 save() 메서드에서 유저 이름을

추가로 입력받고 toEntity()의 인수로 전달받은 유저 이름을 반환하도록 코드를 수정합니다.

public Article save(AddArticleRequest request, String userName) {
    return blogRepository.save(request.toEntity(userName));
}

controller 패키지의 BlogApiController.java 파일을 연 다음 현재 인증 정보를 가져오는

principal 객체를 파라미터로 추가합니다. 인증 객체에서 유저 이름을 가져온 뒤 save() 메서드로 넘겨줍니다.

@PostMapping("/api/articles")
public ResponseEntity<Article> addArticle(@RequestBody AddArticleRequest request, Principal principal){
    Article savedArticle = blogService.save(request, principal.getName());

    return ResponseEntity.status(HttpStatus.CREATED)
            .body(savedArticle);
}

글 상세 페이지에서도 글쓴이의 정보가 보여야 하므로

dto 패키지의 ArticleViewResponse.java 파일을 수정합니다.

author 필드를 추가합니다.

    private Long id;
    private String title;
    private String content;
    private LocalDateTime createdAt;
    private String author;

    public ArticleViewResponse(Article article) {
        this.id = article.getId();
        this.title = article.getTitle();
        this.content = article.getContent();
        this.createdAt = article.getCreatedAt();
        this.author = article.getAuthor();
    }
}

새로 추가한 author 컬럼을 추가하기 위해 기존에 있던 데이터를 지우고 다시 생성해줍니다.

insert into article (title, content, author, created_at, update_at)
values ('제목1', '내용1', "user1", Now(),Now());
insert into article (title, content, author, created_at, update_at)
values ('제목2', '내용2', "user2", Now(),Now());
insert into article (title, content, author, created_at, update_at)
values ('제목3', '내용3', "user3", Now(),Now());

뷰에서 글쓴이의 정보를 알 수 있게 뷰를 수정합니다.

article.html 파일을 열어 글쓴이의 정보를 가져올수 있게 코드를 수정합니다.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>블로그 글</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<body>
<div class="p-5 mb-5 text-center</> bg-light">
    <h1 class="mb-3">My Blog</h1>
    <h4 class="mb-3">블로그에 오신 것을 환영합니다.</h4>
</div>

<div class="container mt-5">
    <div class="row">
        <div class="col-lg-8">
            <article>
                <input type="hidden" id="article-id" th:value="${article.id}">
                <header class="mb-4">
                    <h1 class="fw-bolder mb-1" th:text="${article.title}"></h1>
                    <!-- 수정된 부분 -->
                    <div class="text-muted fst-italic mb-2" th:text="|Posted on ${#temporals.format(article.createdAt, 'yyyy-MM-dd HH:mm')} By ${article.author}|"></div>
                    <!-- ------ -->
                </header>
                <section class="mb-5">
                    <p class="fs-5 mb-4" th:text="${article.content}"></p>
                </section>
                <button type="button" id="modify-btn"
                        th:onclick="|location.href='@{/new-article?id={articleId}(articleId=${article.id})}'|"
                        class="btn btn-primary btn-sm">수정</button>
                <button type="button" id="delete-btn"
                        class="btn btn-secondary btn-sm">삭제</button>
            </article>
        </div>
    </div>
</div>

<script src="/js/article.js"></script>
</body>

모든 비즈니스 로직이 만들어졌으니 OAuth의 뷰를 구성합니다.

controller 패키지의 UserViewController.java 파일을 연 다음

@GetMapping("/login")
public String login() {
    return "oauthlogin";
}

로그인 화면에서 사용할 이미지를 첨부해둔 이미지를 다운받아

/resoureces/static/img 디렉터리를 만들고 그곳에 붙여넣기합니다.

(이미지 이름이 google.png가 아닌경우 google.png로 변경합니다)

이제 이 이미지를 활용하여 로그인 화면에서 OAuth 연결 버튼을 생성합니다.

templates 디렉터리에 oauthLogin.html 파일을 생성하고 코드를 작성합니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">

    <style>
        .gradient-custom {
            background: #6a11cb;
            background: -webkit-linear-gradient(to right, rgba(106, 17, 203, 1), rgba(37, 117, 252, 1));
            background: linear-gradient(to right, rgba(106, 17, 203, 1), rgba(37, 117, 252, 1))
        }
    </style>
</head>
<body class="gradient-custom">
<section class="d-flex vh-100">
    <div class="container-fluid row justify-content-center align-content-center">
        <div class="card bg-dark" style="border-radius: 1rem;">
            <div class="card-body p-5 text-center">
                <h2 class="text-white">LOGIN</h2>
                <p class="text-white-50 mt-2 mb-5">서비스 사용을 위해 로그인을 해주세요!</p>

                <div class = "mb-2">
                    <a href="/oauth2/authorization/google">
                        <img src="js/img/google.png">
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>
</body>
</html>

HTML 파일과 연결할 자바스크립트 파일을 만듭니다.

resources/js 디렉터리에 token.js 파일을 만들고 코드를 작성합니다.

이 코드는 파라미터로 받은 토큰이 있다면 토큰을 로컬 스토리지에 저장합니다.

const token = searchParam('token')

if (token) {
    localStorage.setItem("access_token", token)
}

function searchParam(key) {
    return new URLSearchParams(location.search).get(key);
}

articleList.html에 token.js를 가져올 수 있도록 코드를 추가합니다.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>블로그 글 목록</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<body>
<div class="p-5 mb-5 text-center</> bg-light">
    <h1 class="mb-3">My Blog</h1>
    <h4 class="mb-3">블로그에 오신 것을 환영합니다.</h4>
</div>

<div class="container">
    <button type="button" id="create-btn"
            th:onclick="|location.href='@{/new-article}'|"
            class="btn btn-secondary btn-sm mb-3">글 등록</button>
    <div class="row-6" th:each="item : ${articles}">
        <div class="card">
            <div class="card-header" th:text="${item.id}">
            </div>
            <div class="card-body">
                <h5 class="card-title" th:text="${item.title}"></h5>
                <p class="card-text" th:text="${item.content}"></p>
                <a th:href="@{/articles/{id}(id=${item.id})}" class="btn btn-primary">보러가기</a>
            </div>
        </div>
        <br>
    </div>

    <button type="button" class="btn btn-secondary" onclick="location.href='/logout'">로그아웃</button>
</div>

<script src="/js/article.js"></script>
<!-- token.js 추가 -->
<script src="/js/token.js"></script>
</body>

resources/js 패키지에 있는 article.js 파일을 열어 기존 createButton 관련 코드를 추가합니다.

// 삭제 기능
const deleteButton = document.getElementById('delete-btn');

if (deleteButton) {
    deleteButton.addEventListener('click', event => {
        let id = document.getElementById('article-id').value;
        function success() {
            alert('삭제가 완료되었습니다.');
            location.replace('/articles');
        }

        function fail() {
            alert('삭제 실패했습니다.');
            location.replace('/articles');
        }

        httpRequest('DELETE',`/api/articles/${id}`, null, success, fail);
    });
}

// 수정 기능
const modifyButton = document.getElementById('modify-btn');

if (modifyButton) {
    modifyButton.addEventListener('click', event => {
        let params = new URLSearchParams(location.search);
        let id = params.get('id');

        body = JSON.stringify({
            title: document.getElementById('title').value,
            content: document.getElementById('content').value
        })

        function success() {
            alert('수정 완료되었습니다.');
            location.replace(`/articles/${id}`);
        }

        function fail() {
            alert('수정 실패했습니다.');
            location.replace(`/articles/${id}`);
        }

        httpRequest('PUT',`/api/articles/${id}`, body, success, fail);
    });
}

// 생성 기능
const createButton = document.getElementById('create-btn');

if (createButton) {
    // 등록 버튼을 클릭하면 /api/articles로 요청을 보낸다
    createButton.addEventListener('click', event => {
        body = JSON.stringify({
            title: document.getElementById('title').value,
            content: document.getElementById('content').value
        });
        function success() {
            alert('등록 완료되었습니다.');
            location.replace('/articles');
        };
        function fail() {
            alert('등록 실패했습니다.');
            location.replace('/articles');
        };

        httpRequest('POST','/api/articles', body, success, fail)
    });
}


// 쿠키를 가져오는 함수
function getCookie(key) {
    var result = null;
    var cookie = document.cookie.split(';');
    cookie.some(function (item) {
        item = item.replace(' ', '');

        var dic = item.split('=');

        if (key === dic[0]) {
            result = dic[1];
            return true;
        }
    });

    return result;
}

// HTTP 요청을 보내는 함수
function httpRequest(method, url, body, success, fail) {
    fetch(url, {
        method: method,
        headers: { // 로컬 스토리지에서 액세스 토큰 값을 가져와 헤더에 추가
            Authorization: 'Bearer ' + localStorage.getItem('access_token'),
            'Content-Type': 'application/json',
        },
        body: body,
    }).then(response => {
        if (response.status === 200 || response.status === 201) {
            return success();
        }
        const refresh_token = getCookie('refresh_token');
        if (response.status === 401 && refresh_token) {
            fetch('/api/token', {
                method: 'POST',
                headers: {
                    Authorization: 'Bearer ' + localStorage.getItem('access_token'),
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    refreshToken: getCookie('refresh_token'),
                }),
            })
                .then(res => {
                    if (res.ok) {
                        return res.json();
                    }
                })
                .then(result => { // 재발급이 성공하면 로컬 스토리지값을 새로운 액세스 토큰으로 교체
                    localStorage.setItem('access_token', result.accessToken);
                    httpRequest(method, url, body, success, fail);
                })
                .catch(error => fail());
        } else {
            return fail();
        }
    });
}

이 코드는 POST 요청을 보낼 때 엑세스 토큰도 함께 보냅니다.

만약 응답에 권한이 없다는 에러 코드가 발생하면 리프레시 토큰과 함께

새로운 엑세스 토큰을 요청하고 , 전달받은 엑세스 토큰으로 다시 API를 요청합니다.

삭제,수정 기능 또한 httpRequest() 함수를 사용하도록 코드를 수정합니다.

이제 글을 수정하거나 삭제할 때 요청 헤더에 토큰을 전달하므로 사용자 자신이

작성한 글인지 검증할 수 있습니다. 본인 글이 아닌데 수정 , 삭제를 시도하는 경우

예외를 발생시키도록 코드를 수정합니다. BlogService.java 파일을 열어 코드를 수정합니다.

package com.example.springboot.service;

import com.example.springboot.domain.Article;
import com.example.springboot.dto.AddArticleRequest;
import com.example.springboot.dto.UpdateArticleRequest;
import com.example.springboot.repository.BlogRepository;
import jakarta.transaction.Transactional;
import lombok.RequiredArgsConstructor;
import org.springframework.security.core.context.SecurityContextHolder;
import org.springframework.stereotype.Service;

import java.util.List;

@RequiredArgsConstructor // final이 붙거나 @NotNull이 붙은 필드의 생성자 추가
@Service // 빈으로 등록
public class BlogService {

    private final BlogRepository blogRepository;

    // 블로그 글 추가 메서드
    public Article save(AddArticleRequest request, String userName) {
        return blogRepository.save(request.toEntity(userName));
    }

    public List<Article> findAll() {
        return blogRepository.findAll();
    }

    public Article findById(long id) {
        return blogRepository.findById(id)
                .orElseThrow(() -> new IllegalArgumentException("not found : " + id));
    }

    public void delete(long id) {
        Article article = blogRepository.findById(id)
                .orElseThrow(() -> new IllegalArgumentException("not found : " + id));

        authorizeArticleAuthor(article);
        blogRepository.delete(article);
    }

    @Transactional // 트랜잭션 메서드
    public Article update(long id, UpdateArticleRequest request) {
        Article article = blogRepository.findById(id)
                .orElseThrow(() -> new IllegalArgumentException("not found : " + id));

        authorizeArticleAuthor(article);
        article.update(request.getTitle(), request.getContent());

        return article;
    }

    // 게시글을 작성한 유저인지 확인
    private static void authorizeArticleAuthor(Article article) {
        String userName = SecurityContextHolder.getContext().getAuthentication().getName();
        if (!article.getAuthor().equals(userName)) {
            throw new IllegalArgumentException("not authorized");
        }
    }
}

수정, 삭제 메서드는 작업을 수행하기 전 authorizeArticleAuthor() 메서드를 실행해

현재 인증 객체에 담겨 있는 사용자의 정보와 글을 작성한 사용자의 정보를 비교합니다.

만약 서로 다르면 예외를 발생시켜 작업을 수행하지 않습니다.

이제 스프링부트 서버를 실행한 다음

http://localhost:8080/login 에 접속하고 "구글로 로그인하기" 버튼을 클릭합니다.

버튼을 클릭하면 구글 로그인 페이지가 나타나며 google 아이디를 통해 로그인해봅시다.

로그인이 완료되면 /articles로 리다이렉트되며 쿼리 파라미터에 token, 엑세스 토큰을 요청 헤더로 전달합니다.

그 뒤에 키보드에 "F12"버튼을 누르고 [Application] -> [Local Storage] 를 클릭하면 스프링 부트 애프리케이션으로부터

전달받은 액세스 토큰을 저장한다는 것을 확인할 수 있습니다.

리프레시 토큰도 잘 구현됐는지 확인해보겠습니다.

[Cookies]를 누르면 리프레시 토큰도 잘 저장된걸 확인할수 있습니다.

/new-article로 이동해 글을 등록해봅시다.

글 등록 시 엑세스 토큰이 유효하므로 인증 필터를 통과하고 글도 잘 등록되는걸 확인할 수 있습니다.

만약 액세스 토큰이 만료되거나 삭제되면 어떤 API 요청 흐름이 발생하는지 알기 위해

F12 버튼 [Application] -> [Local Storage]에 들어간 후 access_token를 우클릭하고

[Delete]를 눌러 값을 삭제해봅시다.

다시 /new-article로 이동한 뒤 글 등록을 시도해봅시다

액세스 토큰이 유효하지 않지만 리프레시 토큰이 있으므로 /token API를 호출해 새 엑세스 토큰을

발급받아 인증을 다시 요청해 인증 필터를 통과해 글이 잘 등록되는걸 확인할 수 있습니다.

이번에는 내가 작성하지 않은 글을 수정하거나 삭제하면 어떻게 되는지 확인해보겠습니다.

내가 작성한 글이 아닌 글을 삭제하려고 하면 삭제 실패 메시지가 나오고 삭제가 되지 않습니다.(수정도 똑같음)

다음 포스팅엔 AWS를 이용한 배포를 해보겠습니다.

Spring Boot OAuth2

김쥬르 — Mon, 8 Jan 2024 08:10:50 +0900

OAuth2?

제3의 서비스에 계정 관리를 맡기는 방식입니다.흔히 볼 수 있는 네이버,카카오톡,구글 등등

소셜 로그인하기 방법을 말합니다.OAuth를 이해하기 위해 관련 용어를 알아보겠습니다.

리소스 오너	자신의 정보를 사용하도록 인증 서버에 허가하는 주체입니다. 서비스를 이용하는 사용자가 리소스 오너에 해당합니다.
리소스 서버	리소스 오너의 정보를 가지며, 리소스 오너의 정보를 보호하는 주체를 의미합니다. 네이버 , 구글 , 카카오 등이 리소스 서버에 해당합니다.
인증 서버	클라이언트에게 리소스 오너의 정보에 접근할 수 있는 토큰을 발급하는 역할을 하는 애플리케이션을 의미합니다.
클라이언트 애플리케이션	인증 서버에게 인증을 받고 리소스 오너의 리소스를 사용하는 주체를 의미합니다.

OAuth를 사용하면 인증 서버에서 발급받은 토큰을 사용해서

리소스 서버에 리소스 오너의 정보를 요청하고 응답받아 사용할 수 있습니다.

클라이언트는 어떻게 리소스 오너의 정보를 취득할 수 있을까요?

리소스 오너 정보를 취득할 수 있는 방법은 4가지가 있습니다.

리소스 오너 정보를 취득하는 4가지 방법

권한 부여 코드 승인 타입	OAuth 2.0 에서 가장 잘 알려진 인증 방법입니다. 클라이언트가 리소스에 접근하는 데 사용하며 , 권한에 접근할 수 있는 코드와 리소스 오너에 대한 엑세스 토큰을 발급받는 방식입니다.
암시적 승인 타입	서버가 없는 자바스크립트 웹 애플리케이션 클라이언트에서 주로 사용하는 방법입니다. 클라이언트가 요청을 보내면 리소스 오너의 인증 과정 이외에는 권한 코드 교환 등의 별다른 인증 과정을 거치지 않고 엑세스 토큰을 제공받는 방식입니다.
리소스 소유자 암호 자격 증명 승인 타입	클라이언트의 패스워드를 이용해서 엑세스 토큰에 대한 사용자의 자격 증명을 교환하는 방식입니다.
클라이언트 자격증명 승인 타입	클라이언트가 컨텍스트 외부에서 엑세스 토큰을 얻어 특정 리소스에 접근을 요청할 때 사용하는 방식입니다.

구글, 카카오에서는 권한 부여 코드 승인 타입을 사용하고

서비스에서 가장 중요한 정보인 사용자 데이터가 외부로 전송되지 않아 안전하고

OAuth에서 가장 잘 알려진 인증 방법이기에 이 방법을 다뤄보겠습니다.

권한 부여 코드 승인 타입?

클라이언트 , 즉 스프링 부트 서버가 특정 사용자 데이터에 접근하기 위해

권한 서버 , 카카오나 구글 서버에 요청을 보냅니다.

요청 URI는 권한 서버마다 다르지만 보통은

클라이언트 ID , 리다이렉트 URI , 응답 타입 등을 파라미터로 보냅니다.

// 권한 요청을 위한 파라미터 예
GET spring-authorization-server.example/authorize?
    client_id=66a36b4c2&
    redirect_url=http://localhost:8080/myapp&
    responce_type=code&
    scope=profile

client_id

인증 서버가 클라이언트에 할당한 고유 식발자입니다.

이 값은 클라이언트 애플리케이션을 OAuth 서비스에 등록할 때 서비스에서 생성하는 값입니다.

redirect_url

로그인 성공 시 이동해야 하는 URI입니다.

response_type

클라이언트가 제공받길 원하는 응답 타입입니다.

인증 코드를 받을 때는 code값을 포함해야 합니다.

scope

제공받고자 하는 리소스 오너의 정보 목록입니다.

데이터 접근용 권한 부여

인증 서버에 요청을 처음 보내는 경우 사용자에게 보이는 페이지를 로그인 페이지로 변경하고

사용자의 데이터에 접근 동의를 얻습니다. 이 과정은 최초 1회만 진행하게됩니다.

이후에는 인증 서버에서 동의 내용을 저장하고 있기 때문에 로그인만 진행합니다.

로그인이 성공되면 권한 부여 서버는 데이터에 접근할 수 있게 인증 및 권한 부여를 수신합니다.

인증 코드 제공

사용자가 로그인에 성공하면 권한 요청 시에 파라미터로 보낸 redirect_uri로 리다이렉션됩니다.

이때 파라미터에 인증 코드를 함께 제공합니다.

// 인증 코드 예
GET http://localhost:8080/myapp?code=a1s2f3mcj2

엑세스 토큰 응답?

인증 코드를 받으면 엑세스 토큰으로 교환해야 합니다.

엑세스 토큰은 로그인 세션에 대한 보안 자격을 증명하는 식별 코드를 의미합니다.

보통 다음과 같이 /token POST 요청을 보냅니다.

// /token POST 요청 예
GET spring-authorization-server.example.com/token
{
    "client_id" : "66a36b4c2",
    "client_secret" : "aabb11dd44",
    "redirect_url" : "http://localhost:8080/myapp&",
    "grant_type" : "authorization_code" ,
    "code" : "a1b2c3d4e5f6g7h8"
}

client_secret

OAuth 서비스에 등록할 때 제공받는 비밀키입니다.

grant_type

권한 유형을 확인하는데 사용합니다. 이때는 authorization_code로 설정해야 합니다.

권한 서버는 요청 값을 기반으로 유효한 정보인지 확인하고,

유효한 정보라면 엑세스 토큰을 응답합니다.

{
    "access_token" : "aasdffb" ,
    "token_type" : "Bearer" ,
    "expires_in" : 3600  ,
    "scope" : "openid profile" ,
    //~~~~~~
}

엑세스 토큰으로 API응답 & 반환

이제 제공받은 엑세스 토큰으로 리소스 오너의 정보를 가져올 수 있습니다.

정보가 필요할 때마다 API 호출을 통해 정보를 가져오고 리소스 서버는

토큰이 유효한지 검사한 뒤에 응답합니다.

// 리소스 오너의 정보를 가져오기 위한 요청 예
GET spring-authorization-resource-server.example.com/userinfo
Header : Authorization: Bearer aasdffb

쿠키?

사용자가 어떠한 웹 사이트를 방문했을 때 웹사이트가 사용하는 서버에서 로컬 환경에 저장하는 데이터를 말합니다.

이 값이 있기에 이전에 방문한 적이 있는지 알 수 있고 이전에 로그인을 했다면 로그인 정보도 유지할 수 있습니다.

쿠키는 키와 값으로 이루어져 있으며 만료 기간, 도메인 등의 정보를 가지고 있습니다.

HTTP 요청을 통해 쿠키의 특정 키에 값을 추가할 수 있습니다.

클라이언트가 정보를 요청하면 서버에서 정보를 값으로 넣은 쿠키를 생성해서 요청한 정보,

즉 HTTP 헤더와 함께 돌려보냅니다. 그러면 클라이언트는 브라우저에 쿠키를 저장합니다.

이후 사이트에 재방문할 때는 사용자가 로컬 환경에 있는 쿠키와 함께 서버에 요청합니다.

이렇게 하면 클라이언트에 값을 저장할 수 있기 때문에 현재 사용자에 관련된 정보를 보여줄수 있습니다.

여기까지 OAuth2.0에 대해 알아보았고

다음 포스팅엔 구글 소셜 로그인을 구현해보록 하겠습니다.

Spring Boot JWT TestCode

김쥬르 — Sat, 6 Jan 2024 22:56:42 +0900

저번 포스팅에 이어서 JWT 테스트 코드를 통해

어떻게 동작하는지 살펴보고 구현이 잘되었는지 확인해보겠습니다.

test 디렉터리에 config.jwt 패키지를 만들고 JwtFactory.java 를 생성하고 코드를 작성합니다.

@Getter
public class JwtFactory {

    private String subject = "test@email.com";

    private Date issuedAt = new Date();

    private Date expiration = new Date(new Date().getTime() + Duration.ofDays(14).toMillis());

    private Map<String, Object> claims = emptyMap();
    
    // 빌더 패턴을 사용해 설정이 필요한 데이터만 선택 설정
    @Builder
    public JwtFactory(String subject, Date issuedAt, Date expiration,
                      Map<String, Object> claims) {
        this.subject = subject != null ? subject : this.subject;
        this.issuedAt = issuedAt != null ? issuedAt : this.issuedAt;
        this.expiration = expiration != null ? expiration : this.expiration;
        this.claims = claims != null ? claims : this.claims;
    }

    public static JwtFactory withDefaultValues() {
        return JwtFactory.builder().build();
    }
    
    
    // jjwt 라이브러리를 사용해 JWT 토큰 생성
    public String createToken(JwtProperties jwtProperties) {
        return Jwts.builder()
                .setSubject(subject)
                .setHeaderParam(Header.TYPE, Header.JWT_TYPE)
                .setIssuer(jwtProperties.getIssuer())
                .setIssuedAt(issuedAt)
                .setExpiration(expiration)
                .addClaims(claims)
                .signWith(SignatureAlgorithm.HS256, jwtProperties.getSecretKey())
                .compact();
    }
}

빌더 패턴을 사용해 객체를 만들 때 테스트가 필요한 데이터만 선택합니다.

빌더 패턴을 사용하지 않으면 필드 기본값을 사용합니다.

같은 위치에 TokenProviderTest.java 파일을 만들고 코드를 작성합니다.

@SpringBootTest
class TokenProviderTest {

    @Autowired
    private TokenProvider tokenProvider;

    @Autowired
    private UserRepository userRepository;

    @Autowired
    private JwtProperties jwtProperties;
    
    // generateToken() 검증 테스트
    @DisplayName("generateToken(): 유저 정보와 만료 기간을 전달해 토큰을 만들 수 있다.")
    @Test
    void generateToken() {
        // given
        User testUser = userRepository.save(User.builder()
                .email("user@gmail.com")
                .password("test")
                .build());

        // when
        String token = tokenProvider.generateToken(testUser, Duration.ofDays(14));

        // then
        Long userId = Jwts.parser()
                .setSigningKey(jwtProperties.getSecretKey())
                .parseClaimsJws(token)
                .getBody()
                .get("id", Long.class);

        assertThat(userId).isEqualTo(testUser.getId());
    }
    
    // vaildToken() 검증 테스트
    @DisplayName("validToken(): 만료된 토큰인 경우에 유효성 검증에 실패한다.")
    @Test
    void validToken_invalidToken() {
        // given
        String token = JwtFactory.builder()
                .expiration(new Date(new Date().getTime() - Duration.ofDays(7).toMillis()))
                .build()
                .createToken(jwtProperties);

        // when
        boolean result = tokenProvider.validToken(token);

        // then
        assertThat(result).isFalse();
    }


    @DisplayName("validToken(): 유효한 토큰인 경우에 유효성 검증에 성공한다.")
    @Test
    void validToken_validToken() {
        // given
        String token = JwtFactory.withDefaultValues()
                .createToken(jwtProperties);

        // when
        boolean result = tokenProvider.validToken(token);

        // then
        assertThat(result).isTrue();
    }

    
    // getAuthentication() 검증 테스트
    @DisplayName("getAuthentication(): 토큰 기반으로 인증정보를 가져올 수 있다.")
    @Test
    void getAuthentication() {
        // given
        String userEmail = "user@email.com";
        String token = JwtFactory.builder()
                .subject(userEmail)
                .build()
                .createToken(jwtProperties);

        // when
        Authentication authentication = tokenProvider.getAuthentication(token);

        // then
        assertThat(((UserDetails) authentication.getPrincipal()).getUsername()).isEqualTo(userEmail);
    }
    
    // getUserId() 검증 테스트
    @DisplayName("getUserId(): 토큰으로 유저 ID를 가져올 수 있다.")
    @Test
    void getUserId() {
        // given
        Long userId = 1L;
        String token = JwtFactory.builder()
                .claims(Map.of("id", userId))
                .build()
                .createToken(jwtProperties);

        // when
        Long userIdByToken = tokenProvider.getUserId(token);

        // then
        assertThat(userIdByToken).isEqualTo(userId);
    }
}

generateToken() 메서드는 토큰을 생성하는 메서드를 테스트합니다.

Given	토큰에 유저 정보를 추가하기 위한 테스트 유저를 만듭니다.
When	토큰 제공자의 generateToken() 메서드를 호출해 토큰을 만듭니다.
Then	jjwt 라이브러리를 사용해 토큰을 복호화합니다. 토큰을 만들때 클레임으로 넣어둔 id 값이 given 절에서 만든 유저 ID와 동일한지 확인합니다.

validToken_invalidToken() 메서드는 토큰이 유효한 토큰인지 검증하는 메서드인 validToken() 메서드를 테스트합니다.

검증 실패를 확인하는 validToken_invalidToken() 메서드와

검증 성공을 확인하는 validToken_validToken() 메서드가 있습니다.

Given	jjwt 라이브러리를 사용해 토큰을 생성합니다. 이때 만료 시간은 1970년 1월 1일부터 현재 시간을 밀리초 단위로 치환한 값(new Date().getTime())에 1000을 빼 , 이미 만료된 토큰으로 생성합니다.
When	토큰 제공자의 validToken() 메서드를 호출해 유효한 토큰인지 검증한 뒤 결괏값을 반환받습니다.
Then	반환값이 false(유효한 토큰이 아님)인 것을 확인합니다.

Given	jjwt 라이브러리를 사용해 토큰을 생성합니다. 만료 시간은 현재 시간으로부터 14일 뒤로 만료되지 않은 토큰으로 생성합니다.
When	토큰 제공자의 validToken() 메서드를 호출해 유효한 토큰인지 검증한 뒤 결괏값을 반환받습니다.
Then	반환값이 ture(유효한 토큰임)인 것을 확인합니다.

getAuthentication() 메서드는 토큰을 전달받아 인증 정보를 담은 객체

Authentication를 반환하는 메서드인 getAuthentication()를 테스트합니다.

Given	jjwt 라이브러리를 사용해 토큰을 생성합니다. 이때 토큰의 제목인 subject는 "user@email.com" 라는 값을 사용합니다.
When	토큰 제공자의 getAuthentication() 메서드를 호출해 인증 객체를 반환받습니다.
Then	반환받은 인증 객체의 유저 이름을 가져와 given절에서 설정한 subject값인 "user@email.com"과 같은지 확인합니다.

getUserId() 메서드는 토큰 기반으로 유저 ID를 가져오는 메서드를 테스트하는 메서드입니다.

토큰을 프로퍼티즈 파일에 저장한 비밀값으로 복호화한 뒤 클레임을 가져오는

private 메서드인 getClaims()를 호출해서 클레임 정보를 반환받아 클레임에서

id키로 저장된 값을 가져와 반환합니다.

Given	jjwt 라이브러리를 사용해 토큰을 생성합니다. 이때 클레임을 추가합니다. 키는 "id" 값은 1이라는 유저 ID입니다.
When	토큰 제공자의 getUserId() 메서드를 호출해 유저 ID를 반환받습니다.
Then	반환받은 유저 ID가 given절에서 설정한 유저 ID값인 1과 같은지 확인합니다.

이제 테스트 코드를 실행하여 잘 동작하는지 확인합니다.

이번엔 리프레시 토큰에 대한 TestCode를 작성해보겠습니다.

test/.../controller 패키지에 TokenApiControllerTest.java를 생성하고

코드를 작성합니다.

@SpringBootTest
@AutoConfigureMockMvc
class TokenApiControllerTest {

    @Autowired
    protected MockMvc mockMvc;

    @Autowired
    protected ObjectMapper objectMapper;

    @Autowired
    private WebApplicationContext context;

    @Autowired
    JwtProperties jwtProperties;

    @Autowired
    UserRepository userRepository;

    @Autowired
    RefreshTokenRepository refreshTokenRepository;

    @BeforeEach
    public void mockMvcSetUp() {
        this.mockMvc = MockMvcBuilders.webAppContextSetup(context)
                .build();
        userRepository.deleteAll();
    }

    @DisplayName("createNewAccessToken: 새로운 액세스 토큰을 발급한다.")
    @Test
    public void createNewAccessToken() throws Exception {
        // given
        final String url = "/api/token";

        User testUser = userRepository.save(User.builder()
                .email("user@gmail.com")
                .password("test")
                .build());

        String refreshToekn = JwtFactory.builder()
                .claims(Map.of("id", testUser.getId()))
                .build()
                .createToken(jwtProperties);

        refreshTokenRepository.save(new RefreshToken(testUser.getId(), refreshToekn));

        CreateAccessTokenRequest request = new CreateAccessTokenRequest();
        request.setRefreshToken(refreshToekn);
        final String requestBody = objectMapper.writeValueAsString(request);

        // when
        ResultActions resultActions = mockMvc.perform(post(url)
                .contentType(MediaType.APPLICATION_JSON_VALUE)
                .content(requestBody));

        // then
        resultActions
                .andExpect(status().isCreated())
                .andExpect(jsonPath("$.accessToken").isNotEmpty());
    }

}

Given	테스트 유저를 생성하고 jjwt 라이브러리를 이용해 리프레시 토큰을 만들어 데이터베이스에 저장합니다. 토큰 생성 API의 요청 본문에 리프레시 토큰을 포함하여 요청 객체를 생성합니다.
When	토큰 추가 API에 요청을 보낸다 이때 요청 타입은 JSON이며 given절에서 미리 만들어둔 객체를 요청 본문으로 함께 보냅니다.
Then	응답 코드가 201 Created인지 확인하고 응답으로 온 엑세스 토큰이 비어있지 않은지 확인합니다.

테스트 코드를 실행하여 실제로 잘 동작하는지 확인합니다.

다음 포스팅엔 Oauth2를 사용하여 소셜 로그인을 구현해보겠습니다.

Spring Boot JWT

김쥬르 — Fri, 5 Jan 2024 08:13:41 +0900

JWT?

JSON Web Token 의 줄임말로 JSON 객체로 정보를 주고 받을때

토큰 기반 인증으로 안전하게 전송하기 위한 방식입니다.

토큰 기반 인증?

사용자가 서버에 접근할 때 이 사용자가 인증된 사용자인지 확인하는 방법은 다양합니다.

대표적인 사용자 인증 확인 방법에는 서버 기반 인증과 토큰 기반 인증이 있습니다.

스프링 시큐리티에서는 기본적으로 세션 기반 인증을 사용해

사용자마다 사용자의 정보를 담은 세션을 생성하고 저장해서 인증을 합니다.

토큰 기반 인증은 토큰을 사용하는 방법입니다.

토큰은 서버에서 클라이언트를 구분하기 위한 유일한 값인데

서버가 토큰을 생성해서 클라이언트에게 제공하면

클라이언트는 이 토큰을 갖고 있다가 여러 요청을 이토큰과 함께 신청합니다.

그럼 서버는 토큰만 보고 유효한 사용자인지 검증합니다.

클라이언트와 서버가 토큰을 주고받으며 통신하는 과정입니다.

1. 클라이언트가 아이디와 비밀번호를 서버에게 전달하면서 인증을 요청하면

2. 서버는 아이디와 비밀번호를 확인해 유효한 사용인지 검증합니다.

유요한 사용자면 토큰을 생성해서 응답합니다.

3. 클라이언트는 서버에서 준 토큰을 저장합니다.

4. 이후 인증이 필요한 API를 사용할 때 토큰을 함께 보냅니다.

5.서버는 토큰이 유요한지 검증합니다.

6. 토큰이 유효하다면 클라이언트가 요청한 내용을 처리합니다.

토큰 기반 인증의 특징

무상태성

무상태성은 사용자의 인증 정보가 담겨 있는 토큰이 서버가 아닌 클라이언트에 있으므로

서버에 저장할 필요가 없습니다. 서버가 뭔가 데이터를 유지하고 있으려면 그만큼 자원을

소비해야 하죠 그런데 토큰 기반 인증에서는 클라이언트에서 인증 정보가 담긴 토큰을

생성하고 인증합니다. 따라서 클라이언트에서는 사용자의 인증 상태를 유지하면서 이후

요청을 처리해야 하는데 이것을 상태 관리한다고 합니다. 이렇게 하면

서버 입장에서는 클라이언트의 인증 정보를 저장하거나 유지하지 않아도 되기 때문에

완전한 무상태로 효율적인 검증을 할 수 있습니다.

확장성

무상태성은 확장성에 영향을 줍니다. 서버를 확장할 때 상태 관리를 신켱 쓸 필요가 없으니

서버 확장에도 용이한 것이죠. 예를 들어 물건을 파는 서비스가 있고

결제를 위한 서버와 주문을 위한 서버가 분리되어 있다고 가정했을때

세션 인증 기반은 각각 API에서 인증을 해야되는것과는 달리

토큰 기반 인증에서는 토큰을 가지는 주체는 서버가 아니라 클라이언트이기

때문에 가지고 있는 하나의 토큰으로 결제 서버와 주문 서버에게 요청을 보낼 수 있습니다.

추가로 페이스북 , 구글 로그인 같이 토큰 기반 인증을 사용하는 다른 시스템에 접근해

로그인 방식을 확장할 수도 있고 이를 활용해 다른 서비스에 권한을 공유할 수도 있습니다.

무결성

토큰 방식은 HMAC 기법이라고도 부르며 토큰을 발급한 이후에는

토큰 정보를 변경하는 행위를 할 수 없습니다. 즉 토큰의 무결성이 보장됩니다.

만약 누군가 토큰을 한 글자라도 변경하면 서버에서는 유효하지 않은 토큰이라고 판단합니다.

JWT 구조

발급받은 JWT를 이용해 인증을 하려면 HTTP 요청 헤더중에 Authorization 키값에

Bearer + JWT 토큰값을 넣어 보내야 합니다.

JWT는 .을 기준으로 헤더 , 내용 , 서명 으로 이루어져 있습니다.

헤더

토큰의 타입과 해싱 알고리즘을 지정하는 정보를 담습니다.

토큰 타입과 해싱 알고리즘 지정 예

{
    "typ" : "JWT"
    "alg" : "HS256"
}

typ : 토큰의 타입을 지정하며 JWT라는 문자열이 들어가게됩니다.

alg : 해싱 알고리즘을 지정합니다.

(서명을 암호화합니다.)

해싱?

가장 많이 사용하는 암호화 방식 중 하나로 , 복호화가 가능한 다른 암호화 방식들과 달리

해싱은 암호화만 가능하며 대표적으로 HS256, RS256이 있다.

SHA256

HS256 , RS256 알고리즘에서 공통적으로 쓰이는 단어인 S256 이라는 단어는 SHA256

알고리즘을 의미하며 SHA256은 데이터 무결성을 위해 사용되는 암호화 해쉬 알고리즘입니다.

SHA256 알고리즘은 SHA 알고리즘의 한 종류로서 256비트로 구성되며

64자리 문자열을 반환합니다. SHA-256은 미국의 국립표준기술연구소에 읜해

공표된 표준 해시 알고리즘인 SHA-2 계열 중 하나이며 블록체인에서 가장 많이 채택하여 사용되고있습니다.

이름에 내포되어 있듯 2^256만큼 경우의 수를 만들 수 있고 개인용 컴퓨터로 무차별 대입을 수행해 해시 충돌 사례를

찾으려고 할 때 많은 시간이 소요될 정도로 큰 숫자이므로 충돌로부터 비교적 안전하다고 평가됩니다.

HS256

JWT 토큰의 암호화 알고리즘으로 많이 쓰이는 암호화 알고리즘으로

HS256에서 S256은 SHA256을 의미한다고 했습니다. H는 무엇일까요?

HMAC 알고리즘을 의미합니다. HMAC 알고리즘은 대칭키 암호화 알고리즘입니다.

대칭키 암호화는 암호화 , 복호화 키가 같은 암호화 방식입니다.

RS256

RS256에서 R은 RSA를 의미하며 RSA 알고리즘은 비대칭키 암호화 알고리즘입니다.

비대칭키 암호화 알고리즘은 공개키 (public key) 와 개인키 (private key) 를 이용해 암호화를 진행합니다.

RS256 알고리즘은 HS256 과는 달리 , secret값이 따로 필요하지 않습니다.

내용

토큰과 관련된 정보를 담습니다.

내용의 한 조각을 클레임이라고 부르며 클레임은 키값의 한 쌍으로 이루어져 있습니다.

클레임은 등록된 클레임, 공개 클레임, 비공개 클레임으로 나눠집니다.

등록된 클레임은 토큰에 대한 정보를 담는데 사용합니다.

등록된 클레임

이름	설명
iss	토큰 발급자(issuer)
sub	토큰 제목(subject)
aud	토큰 대상자(audience)
exp	토큰의 만료 시간, 시간은 NumericDate 형식으로 하며 항상 현재 시간 이후로 설정합니다.
nbf	토큰의 활성 날짜와 비슷한 개념으로 nbf는 Not Before를 의미합니다. NumericDate 형식으로 날짜를 지정하며 이 날짜가 지나기 전까지는 토큰이 처리되지 않습니다.
iat	토큰이 발급된 시간으로 iat은 issued at을 의미합니다.
jti	JWT의 고유 식별자로서 주로 일회용 토큰에 사용합니다.

공개 클레임은 공개되어도 상관없는 클레임을 의미합니다.

충돌을 방지할 수 있는 이름을 가져야하며, 보통 클레임 이름을 URI로 짓습니다.

비공개 클레임은 공개되면 안되는 클레임을 의미합니다. 클라이언트와 서버 간의 통신에 사용됩니다.

JWT 내용 예

{
    "iss" : "kimjure@naver.com", //등록된 클레임
    "iat" : 1622370878, //등록된 클레임
    "exp" : 1622372678, //등록된 클레임
    "https://kimjure.com/jwt_claims/is_admin" : true, //공개 클레임
    "email" : "kimjure@naevr.com", //비공개 클레임
    "hello" : "안녕하세요" //비공개 클레임
}

iss, iat, exp는 JWT 자체에서 등록된 클레임이고 , URI로 네이밍된

https://kimjure.com/jwt_claims/is_admin은 공개 클레임입니다.

그 외에 등록된 클레임은 비공개 클레임 값입니다.

서명

해당 토큰이 조작되었거나 변경되지 않았음을 확인하는 용도로 사용하며,

헤더의 인코딩 값과 내용의 인코딩값을 합친 후에 주어진 비밀키를 사용해 해시값을 생성합니다.

토큰 유효기간

토큰을 주고받는 환경이 보안에 취약해서 토큰 자체가 노출되면 어떻게 될까요?

이를테면 영화를 보기 위해 산 영화 티켓의 정보가 노출되어서 다른 사람이 이 티켓으로영화를 보려고 한다고 했을때 어떻게하면 이 문제를 막을 수 있을까요?토큰은 이미 발급되면 그 자체로 인증 수단이 되므로 서버는 토큰과함께 들어온 요청이 토큰을 탈취한 사람의 요청인지 확인할 수 없습니다.

리프레시 토큰

토큰의 유효기간이 하루라면 어떨까요? 하루 동안은 그 토큰으로 무엇이든 할 수 있을 테니큰일입니다. 그러면 토큰의 유효기간이 짧으면 되겠지만 토큰의 유효기간이 짧으면사용자 입장에서는 받은 토큰을 너무 짧은 시간만 활용할 수 있으니 불편합니다.이러한 불편한 지점을 해결하기 위해 리프레시 토큰이 등장했습니다.리프레시 토큰은 엑세스 토큰과 별개의 토큰입니다.사용자를 인증하기 위한 용도가 아닌 엑세스 토큰이 만료되었을 때 새로운 엑세스 토큰을 발급하기 위해 사용합니다.엑세스 토큰의 유효 기간은 짧게 설정하고 리프레시 토큰의 유효 기간은 길게 설정하여공격자가 엑세스 토큰을 탈취해도 몇 분 뒤에는 사용할 수 없는 토큰이 되므로 안전해집니다.

1. 클라이언트가 서버에게 인증을 요청합니다.

2. 서버는 클라이언트에서 전달한 정보를 바탕으로 인증 정보가 유효한지 확인한뒤

엑세스 토큰과 리프레시 토큰을 만들어 클라이언트에게 전달합니다. 클라이언트는 전달받은 토큰을 저장합니다.

3. 서버에서 생성한 리프레시 토큰은 DB에도 저장해둡니다.

4. 인증을 필요로 하는 API를 호출할 때 클라이언트에서 저장된 엑세스 토큰과 함께 API를 요청합니다.

5.서버에서 전달받은 엑세스 토큰이 유효한지 검사한 뒤에 유효하다면 클라이언트에서 요청한 내용을 처리합니다.

6. 시간이 지나고 엑세스 토큰이 만료된 뒤에 클라이언트에서 원하는 정보를 얻기 위해 서버에게 API 요청을 보냅니다.

7. 서버에서 엑세스 토큰이 유효한지 검사를합니다.

만료된 토큰이면 유효하지 않기 때문에 토큰이 만료되었다는 에러를 전달합니다.

8.클라이언트에서는 이 응답을 받고 저장해둔 리프레시 토큰과 함께 새로운 엑세스 토큰을 발급하는 요청을 전송합니다.

9. 서버에서는 전달받은 리프레시 토큰이 유효한지 DB에서 리프레시 토큰을 조회한 후

저장해둔 리프레시 토큰과 같은지 확인합니다.

10. 만약 유효한 리프레시 토큰이라면 새로운 엑세스 토큰을 생성한 뒤 응답합니다.

그 이후에 클라이언트는 4번과 같이 다시 API를 요청합니다.

이제 실제로 JWT를 생성하고 검증하는 서비스를 구현해보겠습니다.

build.gradle에 필요한 의존성을 추가합니다.

implementation 'io.jsonwebtoken:jjwt:0.9.1' // 자바 JWT 라이브러리
implementation 'javax.xml.bind:jaxb-api:2.3.1' // XML 문서와 Java객체 간 매핑을 자동화

JWT 토큰을 만들려면 이슈 발급자 , 비밀키를 필수로 설정해야합니다.

application.properties에 코드를 추가합니다.

# 본인 email
jwt.issuer=kjjproject1@gmail.com 
jwt.secret_key=study-springboot

해당 값들을 변수로 접근하는데 사용할 JwtProperties 클래스를 만듭니다.

config 패키지에 jwt 패키지를 만들고 JwtProperties.java 파일을 만들어 코드를 작성합니다.

@Setter
@Getter
@Component
@ConfigurationProperties("jwt")
public class JwtProperties {
    private String issuer;
    private String secretKey;
}

토큰을 생성하고 옳바른 토큰인지 유효성 검사를 하고,

토큰에서 필요한 정보를 가져오는 클래스를 작성합니다.

같은 위치에 TokenProvider.java 파일을 생성하고 코드를 작성합니다.

@RequiredArgsConstructor
@Service
public class TokenProvider {

    private final JwtProperties jwtProperties;

    public String generateToken(User user, Duration expiredAt) {
        Date now = new Date();
        return makeToken(new Date(now.getTime() + expiredAt.toMillis()), user);
    }

    // 1 jwt토큰 생성 메서드
    private String makeToken(Date expiry, User user) {
        Date now = new Date();

        return Jwts.builder()
                .setHeaderParam(Header.TYPE, Header.JWT_TYPE) // 헤더 typ : JWT
                .setIssuer(jwtProperties.getIssuer()) // 내용 iss : kjjproject1@gmail.com(properties 파일에서 설정한 값)
                .setIssuedAt(now) // 내용 iat : 현재 시간
                .setExpiration(expiry) // 내용 exp : expiry 멤버 변수값
                .setSubject(user.getEmail()) // 내용 sub : 유저의 이메일
                .claim("id", user.getId()) // 클레임 id : 유저 ID
                .signWith(SignatureAlgorithm.HS256, jwtProperties.getSecretKey())
                // 서명 : 비밀값과 함께 해시값을 HS256 방식으로 암호화
                .compact(); // JWT를 문자열로 압축
    }

    // 2 jwt 토큰 유효성 검증 메서드
    public boolean validToken(String token) {
        try {
            Jwts.parser()
                    .setSigningKey(jwtProperties.getSecretKey()) // 비밀값으로 복호화
                    .parseClaimsJws(token);

            return true;
        } catch (Exception e) { // 복호화 과정에서 에러가 나면 유효하지 않은 토큰
            return false;
        }
    }


    // 3 토큰 기반으로 인증 정보를 가져오는 메서드
    public Authentication getAuthentication(String token) {
        Claims claims = getClaims(token);
        Set<SimpleGrantedAuthority> authorities = Collections.singleton(new SimpleGrantedAuthority("ROLE_USER"));

        return new UsernamePasswordAuthenticationToken(new org.springframework.security.core.userdetails.User(claims.getSubject
                (), "", authorities), token, authorities);
    }

    // 4 토큰 기반으로 유저 ID를 가져오는 메서드
    public Long getUserId(String token) {
        Claims claims = getClaims(token);
        return claims.get("id", Long.class);
    }

    private Claims getClaims(String token) {
        return Jwts.parser() // 클레임 조회
                .setSigningKey(jwtProperties.getSecretKey())
                .parseClaimsJws(token)
                .getBody();
    }
}

1. 토큰을 생성하는 메서드입니다.

인자는 만료 시간, 유저 정보를 받습니다.

이 메서드에서는 set 계열의 메서드를 통해 여러값을 지정합니다.

헤더는 typ , 내용은 iss , iat , exp , sub , 클레임은 유저 ID를 지정합니다.

토큰을 만들때는 프로퍼티즈 파일에 선언해둔 비밀값과 함께 HS256 방식으로 암호화합니다.

2. 토큰이 유효한지 검증하는 메서드입니다.

프로퍼티즈 파일에 선언한 비밀값과 함께 토큰 복호화를 진행합니다.

만약 복호화 과정에서 에러가 발생하면 유효하지 않은 토큰이므로

false를 반환하고 아무 에러도 발생하지 않으면 true를 반환합니다.

3. 토큰을 받아 인증 정보를 담은 객체 Authentication를 반환하는 메서드입니다.

프로퍼티즈 파일에 저장한 비밀 값으로 토큰을 복호화한 뒤 클레임을 가져오는

private 메서드인 getClaims()를 호출해서 클레임 정보를 반환받아 사용자 이메일이 들어 있는

토큰 제목 sub와 토큰 기반으로 인증 정보를 생성합니다.

이때 UsernamePasswordAuthenticationToken의 첫 인자로 들어가는

User는 프로젝트에서 만든 User 클래스가 아닌 , 스프링 시큐리티에서 제공하는 객체인 User 클래스를 임포트합니다.

4. 토큰 기반으로 사용자 ID를 가져오는 메서드입니다.

프로퍼티즈 파일에 저장한 비밀값으로 토큰을 복호화한 다음 클레임을 가져오는

private 메서드인 getClaims()를 호출해서 클에임 정보를 반환받고

클레임에서 id 키로 저장된 값을 가져와 반환합니다.

리프레시 토큰 도멘인을 구현하겠습니다.

리프레시 토큰은 데이터베이스에 저장하는 정보이므로 엔티티와 리포지터리를 추가해야 합니다.

컬럼명	자료형	null 허용	키	설명
id	INT	N	기본키	일련번호_기본키
user_id	INT	N		유저 ID
refresh_token	VARCHAR(255)	N		토큰값

domain 디렉터리에 RefreshToken.java 파일을 추가한후 코드를 작성합니다.

@NoArgsConstructor(access = AccessLevel.PROTECTED)
@Getter
@Entity
public class RefreshToken {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    @Column(name = "id", updatable = false)
    private Long id;

    @Column(name = "user_id", nullable = false, unique = true)
    private Long userId;

    @Column(name = "refresh_token", nullable = false)
    private String refreshToken;

    public RefreshToken(Long userId, String refreshToken) {
        this.userId = userId;
        this.refreshToken = refreshToken;
    }

    public RefreshToken update(String newRefreshToken) {
        this.refreshToken = newRefreshToken;

        return this;
    }
}

repository 디렉터리에 RefreshTokenRepository.java 파일을 만든후 코드를 작성합니다.

public interface RefreshTokenRepository extends JpaRepository<RefreshToken, Long> {
    Optional<RefreshToken> findByUserId(Long userId);
    Optional<RefreshToken> findByRefreshToken(String refreshToken);
}

이제 토큰 필터를 구현할 차례입니다.

필터는 실제로 각종 요청이 요청을 처리하기 위한 로직으로

전달되기 전후에 URL 패턴에 맞는 모든 요청을 처리하는 기능을 제공합니다.

요청이 오면 헤더값을 비교해서 토큰이 있는지 확인하고 유효 토큰이라면

시큐리티 콘텍스트 홀더에 인증 정보를 저장합니다.

시큐리티 컨텍스트는 인증 객체가 저장되는 보관소입니다.

여기서 인증 정보가 필요할 때 언제든지 인증 객체를 꺼내 사용합니다.

이 클래스는 스레드마다 공간을 할당하는 스레드 로컬에 저장되므로

코드의 아무곳에서나 참조할 수 있고 다른 스레드와 공유하지 않으므로

독립적으로 사용할 수 있습니다. 이러한 시큐리티 컨텍스트 객체를 저장하는

객체가 시큐리티 컨텍스트 홀더 입니다.

config 디렉터리에 TokenAuthenticationFilter.java 파일을 만듭니다.

이 필터는 엑세스 토큰값이 담긴 Authorization 헤더값을 가져온 뒤 엑세스 토큰이 유효하다면 인증 정보를 설정합니다.

@RequiredArgsConstructor
public class TokenAuthenticationFilter extends OncePerRequestFilter {
    private final TokenProvider tokenProvider;

    private final static String HEADER_AUTHORIZATION = "Authorization";
    private final static String TOKEN_PREFIX = "Bearer ";

    @Override
    protected void doFilterInternal(
            HttpServletRequest request,
            HttpServletResponse response,
            FilterChain filterChain)  throws ServletException, IOException {
        
        // 요청 헤더의 Authorization 키의 값 조회
        String authorizationHeader = request.getHeader(HEADER_AUTHORIZATION);
       // 가져온 값에서 접두사 제거
        String token = getAccessToken(authorizationHeader);
        // 가져온 토큰이 유효한지 확인하고 , 유효한 때는 인증 정보를 설정
        if (tokenProvider.validToken(token)) {
            Authentication authentication = tokenProvider.getAuthentication(token);
            SecurityContextHolder.getContext().setAuthentication(authentication);
        }

        filterChain.doFilter(request, response);
    }

    private String getAccessToken(String authorizationHeader) {
        if (authorizationHeader != null && authorizationHeader.startsWith(TOKEN_PREFIX)) {
            return authorizationHeader.substring(TOKEN_PREFIX.length());
        }

        return null;
    }
}

요청 헤더에서 키가 Authorization인 필드의 값을 가져온 다음 토큰의 접두사 Bearer를 제외한 값을 얻습니다.

만약 값이 null이거나 Bearer로 시작하지 않으면 null을 반환합니다.

이어서 가져온 토큰이 유효한지 확인하고 , 유효하다면 인증 정보를 관리하는

시류키티 컨텍스트에 인증 정보를 설정합니다.

위에서 작성한 코드가 실행되며 인증 정보가 설정된 이후에 컨텍스트 홀더에서

getAuthentication() 메서드를 사용해 인증 정보를 가져오면 유저 객체가 반환됩니다.

유저 객체에는 유저 이름과 권한 목록과 같은 인증 정보가 포함됩니다.

리프레시 토큰을 전달받아 검증하고 , 유효한 리프레시 토큰이라면

새로운 엑세스 토큰을 생성하는 토큰 API를 구현합니다.

UserService.java 파일을 열어 전달받은 유저 ID로 유저를 검색해서 전달하는

findByid() 메서드를 추가로 구현합니다.

public User findById(Long userId) {
    return userRepository.findById(userId)
            .orElseThrow(() -> new IllegalArgumentException("Unexpected user"));
}

service 디렉터리에 RefreshTokenService.java 파일을 새로 만들어

전달받은 리프레시 토큰으로 리프레시 토큰 객체를 검색해서 전달하는

findByRefreshToken() 메서드를 구현합니다.

@RequiredArgsConstructor
@Service
public class RefreshTokenService {
    private final RefreshTokenRepository refreshTokenRepository;

    public RefreshToken findByRefreshToken(String refreshToken) {
        return refreshTokenRepository.findByRefreshToken(refreshToken)
                .orElseThrow(() -> new IllegalArgumentException("Unexpected token"));
    }
}

service 디렉터리에 TokenService.java 파일을 생성한후 코드를 입력합니다.

@RequiredArgsConstructor
@Service
public class TokenService {

    private final TokenProvider tokenProvider;
    private final RefreshTokenService refreshTokenService;
    private final UserService userService;

    public String createNewAccessToken(String refreshToken) {
        // 토큰 유효성 검사에 실패하면 예외 발생
        if(!tokenProvider.validToken(refreshToken)) {
            throw new IllegalArgumentException("Unexpected token");
        }

        Long userId = refreshTokenService.findByRefreshToken(refreshToken).getUserId();
        User user = userService.findById(userId);
        return tokenProvider.generateToken(user, Duration.ofHours(2));
    }
}

createNewAccessToken() 메서드는 전달받은 리프레시 토큰으로

토큰 유효성 검사를 진행하고 , 유효한 토큰인 때 리프레시 토큰으로 사용자 ID를 찾습니다.

마지막으로는 사용자 ID로 사용자를 찾은 후에 토큰 제공자의

generateToken() 메서드를 호출해서 새로운 엑세스 토큰을 생성합니다.

dto 패키지에 토큰 생성 요청 및 응답을 담당할

CreateAccessTokenRequest를 생성하고 코드를 작성합니다.

@Getter
@Setter
public class CreateAccessTokenRequest {
    private String refreshToken;
}

같은 위치에 CreateAccesTokenResponse.java 파일을 만들고 코드를 작성합니다.

@AllArgsConstructor
@Getter
public class CreateAccessTokenResponse {
    private String accessToken;
}

controller 패키지에 TokenApiController.java 파일을 만들고 코드를 작성합니다.

@RequiredArgsConstructor
@RestController
public class TokenApiController {
    private final TokenService tokenService;

    @PostMapping("/api/token")
    public ResponseEntity<CreateAccessTokenResponse> createNewAccessToken
            (@RequestBody CreateAccessTokenRequest request) {
        String newAccessToken = tokenService.createNewAccessToken(request.getRefreshToken());

        return ResponseEntity.status(HttpStatus.CREATED)
                .body(new CreateAccessTokenResponse(newAccessToken));
    }
}

/api/token POST 요청이 오면 토큰 서비스에서 리프레시 토큰을 기반으로

새로운 엑세스 토큰을 만들어줍니다.

코드가 많아 어떻게 동작하는지 감이 안올수 있는데

다음 포스팅엔 테스트 코드를 통해 실제로 어떻게 동작하는지 확인해보겠습니다.

Amazon EC2

김쥬르 — Thu, 4 Jan 2024 01:03:33 +0900

Amazon EC2?

Elastic Compute Cloud의 약자로 Amazon Web Servic 상에서

안정적이며 크기를 조정 가능한 컴퓨팅 파워를 제공하는 웹 서비스입니다.

이러한 가상화 서버를 인스턴스라 부르며 필요에 따라 한 개의 인스턴스에서

수천 개의 인스턴스로 손쉽게 컴퓨팅 파워를 확장할 수 있습니다.

EC2 특징

사용 목적과 비용을 지불하는 방식에 사용자가 원하는 유형을 선택하여

사용할 수 있도록 구성되어 있습니다.

Amazon EC2 인스턴스 유형

인스턴스의 유형은 크게 범용 , 컴퓨팅 최적화 , 스토리지 최적화 , GPU 최적화 , 메모리 최적화 로 나눌수있습니다.

이는 EC2를 이용하는 목적에 따라 인스턴스의 유형을 선택함으로써

최적화된 컴퓨팅 파워를 사용할 수 있도록 해줍니다.

또한 본인이 선택하는 EC2 인스턴스의 유형과 사이즈에 따라

최종으로 사용하게 될 인스턴스의 타입을 선택할 수 있으며

CPU core , 메모리 용량 , 네트워크 인터페이스의 속도 등을 필요에 따라 선택할 수 있습니다.

Amazon EBS?

Amazon EBS는 Elastic Bloc Storage의 약자로 EC2에 연결되는 Block Level의 스토리지 서비스입니다.

서버에 장착하는 서버용 하드디스크라고 생각하면됩니다.

EBS 특징

EBS는 서비스 타입에 따라 크게 5가지의 서비스로 분류됩니다.

유형	범용SSD	프로비저닝된 IOPS	처리량 최적화 HDD	콜드 HDD	마그네틱
설명	다양한 트랜잭션 워크로드 처리	지연 시간에 민감한 고성능 처리	자주 액세스, 처리량 집약적 HDD	액세스 빈도 낮은 저비용 HDD	빈도가 낮으며 성능 낮은 HDD
사례	부트 볼륨	I/O 집약적인 NoSQL, RDBMS	빅데이터 , 로그 처리	일별 스캔 횟수 작업 데이터	드문 데이터 엑세스
API 이름	gp2	io1	st1	sc1	standard
크기	1GB~16TB	4GB~16TB	500GB~16TB	500GB~16TB	1GB~1TB
최대 IOPS	10,000	32,000	500	250	200
최대 처리량	160MB/초	500MB/초	500MB/초	250MB/초	4~90MB/초

본인의 EC2 구성 목적에 따라 EBS의 유형중 하나를 선택하면 됩니다.

보통 범용성이 높고 가성비가 뛰어난 범용 SSD를 사용합니다.

다만 저렴한 비용으로 EC2의 서비스를 원한다면 마그네틱도 좋은 선택입니다.

EC2 와 EBS를 이용한 서버 만들기

https://aws.amazon.com/ko/

클라우드 서비스 | 클라우드 컴퓨팅 솔루션| Amazon Web Services

Amazon Q로 일하는 신세계에 오신 것을 환영합니다

aws.amazon.com

접속하여 로그인해줍니다.

(회원가입 과정은 생략합니다.)

우측 상단에 AWS 리전 선택 항목에서 아시아 태평양(서울) 로 선택해줍니다.

그 후 좌측 상단 검색창에 EC2를 검색하여 해당 페이지로 이동합니다.

자주 쓸 페이지이니 옆에 ☆를 눌러 즐겨찾기 해줍시다.

EC2 메인 페이지이며 현재 설정되있는 인스턴스를 확인할수있습니다.

인스턴스 시작 버튼을 눌러줍시다.

각자 웹 서버 이름을 정해주고 하단에 windows를 클릭후

Amazon Machine Image를 Microsoft Windows Server 2022 Base로 선택해줍니다.

인스턴스 유형은 t2.micro 로 선택합니다.

새 키 페어 생성을 클릭 후

이름은 원하는대로 입력후 키페어 생성을 누르시고

생성된 {이름}.pem 파일은 분실하는 경우 EC2에 접근할수 없으니 잘보관해줍시다.

나머지는 디폴트값으로 두시고 우측 하단에 인스턴스 시작을 누릅니다.

상단에 성공 이란 텍스트가 나오면 인스턴스에 연결을 클릭해줍니다.

세가지 종류가 나오는데 눌러보시면 사용할수 없기에

RDP 클라이언트를 사용하겠습니다.

원격 데스크톱 파일 다운로드를 클릭해서 파일을 다운로드 받은후

https://apps.microsoft.com/detail/9WZDNCRFJ3PS?hl=en-US&gl=US

Microsoft Remote Desktop - Official app in the Microsoft Store

Use the Microsoft Remote Desktop app to connect to a remote PC or virtual apps and desktops made available by your admin. The app helps you be productive no matter where you are. Getting Started Configure your PC for remote access first. Download the Remot

apps.microsoft.com

위 링크를 들어가셔서 Microsoft Remote Desktop을 설치해줍니다.

설치가 완료되면 방금 다운로드 받았던 원격 데스크톱 파일에 오른쪽 마우스를 눌러

Remote Desktop을 클릭해줍니다.

그러면 패스워드를 입력하라고 나오는데 패스워드는

RDP 클라이언트 페이지 하단에 암호가져오기 를 눌러보시면

페이지가 나오는데 프라이빗 키 파일 업로드를 눌러

인스턴스 시작할때 다운받아놨던 pem 파일을 불러와 암호해독을 해줍니다.

그럼 암호 가져오기가 해독된 암호로 바뀌며

이 암호를 복사해 Microsoft remote Desktop에 붙여넣습니다.

그러면 3분정도 부팅 시간을 가지고 윈도우 환경으로 서버가 실행되는걸 확인할수있습니다.

근데 정~~말 느리고 렉도 많이 걸립니다.

그 이유는 윈도우 UI가 무겁기 때문인데요.

아무것도 안했는데 벌써 메모리를 다 차지해있는걸 볼수있습니다.

(추후 Linux 환경 구축도 포스팅하겠습니다)

이제 사용 비용 발생을 방지하기 위해 인스턴스 정지를 해놓겠습니다.

서버에 왼쪽 하단 윈도우 키를 눌러 shut down 하여

서버를 종료시켜줍니다.

그 후 인스턴스 페이지를 확인해보면

인스턴스 상태가 중지된걸 확인할수 있고 다시 시작하고싶다면

우측 상단에 인스턴스 상태를 눌러

인스턴스 시작을 누르면 다시 시작하게 됩니다.

다음 포스팅엔 EC2만을 이용한 공용 DB 구축을 해보도록하겠습니다.

Spring Boot 스프링 시큐리티

김쥬르 — Mon, 1 Jan 2024 21:28:14 +0900

이번엔 스프링 시큐리티를 이용하여

로그인/로그아웃을 구현해보겠습니다.

스프링 시큐리티?

스프링 시큐리티는 스프링 기반의 애플리케이션 보안(인증,인가,권한)을 담당하는

스프링 하위 프레임워크입니다. 스프링 시큐리티를 이해하려면 인증과 인가에 대한

개념을 알아야합니다.

인증과 인가?

인증은 사용자의 신원을 입증하는 관정입니다.

예를 들어 사용자가 사이트에 로그인을 할 때 누구인지 확인하는 과정을 인증이라고 합니다.

인가는 사이트의 특정 부분에 접근할 수 있는지에 권한을 확인하는 작업입니다.

예를 들어 관리자는 관리자 페이지에 들어갈 수 있지만

일반 사용자는 관리자 페이지에 들어갈 수 없습니다.

이런 권한을 확인하는 과정을 인가라고 합니다.

스프링 시큐리티에 대해 더 알아보자면

보안 관련 옵션을 많이 제공합니다. 어너테이션으로 설정이 쉽고

CSRF 공격, 세션 고정 공격을 방어해주고 요청 헤더도 보안 처리를 해주어

개발자가 보안 관련 개발을 해야 하는 부담을 크게 줄여줍니다.

CSRF 공격?

사용자의 권한을 가지고 특정 동작을 수행하도록 유도하는 공격입니다.

예를 들어 커뮤니티 사이트에서 자신의 게시글에 좋아요를 늘리고 싶어서

나의 게시글을 보면 자동으로 좋아요가 눌리게 조작을 하는겁니다. 좋아요를 눌렀을때

url 값이 "http://community.com/like?post=[게시글 id]" 이였고 본인 게시글 id가 1111라고 했을때

게시글 안에 이미지 태그를 삽입하여 src 값에 "http://community.com/like?post=1111"를 넣어

게시글을 조회하면 자동으로 좋아요가 눌리게 되는것이죠.

세션 고정 공격?

사용자의 인증 정보를 탈취하거나 변조하는 공격입니다.

https://guleum-zone.tistory.com/163

Session Fixation(세션고정) 취약점

개요 Session Fixation(세션 고정) 이란 로그인 시 발급받은 세션 ID가 로그인 전/후 모두 동일하게 사용되어 악의적인 사용자가 피해자의 세션을 하이제킹 하여 정상적인 사용자로 위장하여 접근하

guleum-zone.tistory.com

스프링 시큐리티는 필터 기반으로 동작합니다.

스프링 시큐리티의 필터 구조를 살펴보겠습니다.

스프링 시큐리티는 이렇게 다양한 필터들로 나누어져 있으며

각 필터에서 인증 , 인가와 관련된 작업을 처리합니다.

위에서 아래로 순차적으로 필터를 거칩니다.

필터를 실행할 때는 화살표로 연결된 오른쪽 박스의 클래스를 거치며 실행합니다.

원하는 때에는 특정 필터를 제거하거나 필터 뒤에 커스텀 필터를 넣는 등의 설정도 가능합니다.

여기서 중요한 필터는 1번 표시가 된 UsernamePasswordAuthenticationFilter와

2번 표시가 된 FilterSecurityIntercepter입니다.

1번은 아이디와 패스워드가 넘어오면 인증 요청을 위임하는 인증관리자 역할을 합니다.

2번은 권한 부여 처리를 위임해 접근 제어 결정을 쉽게 하는 접근 결정 관리자 역할을 합니다.

각 필터별 역할 설명은 한번씩 보시기 바라겠습니다.

가장 많이 사용하는 아이디와 패스워드 기반 폼 로그인을 시동하면

스프링 시큐리티에서는 어떤 절차로 인증 처리를 하는지 알아보겠습니다.

1. 사용자가 폼에 아이디와 패스워드를 입력하면

HTTPServletRequest에 아이디와 비밀번호 정보가 전달됩니다.

2.유효성 검사가 끝나면 실제 구현체인

UsernamePasswordAuthenticationToken을 만들어 넘겨줍니다.

3.전달받은 인증용 객체인

UsernamePasswordAuthenticationToken 을 AuthenticationManager에게 보냅니다.

4.UsernamePasswordAuthenticationToken을 AuthenticationProvider에 보냅니다.

5. 사용자 아이디를 UserDetailService에 보냅니다.

UserDetailService는 사용자 아이디로 찾은 사용자의 정보를 UserDetails 객체로 만들어

AuthenticationProvider에게 전달합니다.

6.DB에 있는 사용자 정보를 가져옵니다.

7.입력 정보와 UserDetails의 정보를 비교해 실제 인증 처리를 합니다.

8~10까지 인증이 완료되면 SecurityContextHolder에 Authentication를 저장합니다.

인증 성공 여부에 따라 성공하면 AuthenticationSuccessHandler 실패하면

AuthenticationFailureHandler 핸들러를 실행합니다.

스프링 시큐리티 폼 로그인의 인증 흐름을 알아보았습니다.

스프링 시큐리티의 폼 로그인을 설정하는것은 간단하지만

실제로는 이러한 복잡한 내부 동작을 실행합니다.

물론 이 동작은 모두 외워야 하는것은 아니지만 어떠한 흐름으로 로그인이

동작하는지 이해하면 스프링 시큐리티를 더 잘 이해하고 활용할수 있을것입니다.

기본 지식을 알았으니 직접 인증 , 인가 기능을 구현해보겠습니다.

회원 정보를 저장할 테이블을 만들고 테이블과 연결할 도메인을 만든 다음,

이 테이블과 연결할 회원 엔티티를 만들고 , 회원 엔티티와 연결되어 데이터를 조회하게 해줄

리포지터리를 만든 후 마지막으로 시큐리티에서 사용자 정보를 가져오는 서비스를 만들겠습니다.

우선 스프링 시큐리티를 사용하기 위해 의존성을 추가하겠습니다.

implementation 'org.springframework.boot:spring-boot-starter-security'
implementation 'org.thymeleaf.extras:thymeleaf-extras-springsecurity6'
testImplementation 'org.springframework.security:spring-security-test'

해당 의존성을 추가해주시고 그레이들을 새로고침해주세요.

회원 엔티티와 매핑할 테이블의 구조를 참고해 회원 엔티티를 만들겠습니다.

컬럼명	자료형	null 허용	키	설명
id	INT	N	기본키(pk)	일련번호, 기본키
email	VARCHAR(255)	N		이메일
password	VARCHAR(255)	N		패스워드(암호화저장)
created_at	DATETIME	N		생성일자
updated_at	DATETIME	N		수정일자

domain 패키지에 User.java 파일을 생성하고 코드를 작성합니다.

@Table(name = "users")
@NoArgsConstructor(access = AccessLevel.PROTECTED)
@Getter
@Entity
public class User implements UserDetails { // UserDetails를 상속받아 인증 객체로 사용

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    @Column(name = "id", updatable = false)
    private Long id;

    @Column(name = "email", nullable = false, unique = true)
    private String email;

    @Column(name = "password")
    private String password;

    @Builder
    public User(String email, String password, String nickname) {
        this.email = email;
        this.password = password;
    }

    @Override //권한 반환
    public Collection<? extends GrantedAuthority> getAuthorities() {
        return List.of(new SimpleGrantedAuthority("user"));
    }

    @Override //사용자의 id를 반환(고유한 값)
    public String getUsername() {
        return email;
    }

    @Override // 사용자의 패스워드를 반환
    public String getPassword() {
        return password;
    }
	
    //계정 만료 여부 반환
    @Override
    public boolean isAccountNonExpired() {
    // 만료되었는지 확인하는 로직
        return true; 만료되지 않았음
    }
	
    // 계정 잠금 여부 반환
    @Override 
    public boolean isAccountNonLocked() {
        // 계정 잠금되었는지 확인하는 로직
        return true; // true -> 잠금되지 않았음
    }
	
    // 패스워드의 만료 여부 반환
    @Override 
    public boolean isCredentialsNonExpired() {
        // 패스워드가 만료되었는지 확인하는 로직
        return true; // true -> 만료되지 않았음
    }

    @Override // 계정 사용 가능 여부 반환
    public boolean isEnabled() {
        // 계정이 사용 가능한지 확인하는 로직
        return true; // true -> 사용 가능
    }
}

User 클래스가 상속한 UserDetails 클래스는

스프링 시큐리티에서 사용자의 인증정보를 담아두는 인터페이스입니다.

스프링 시큐리티에서 해당 객체를 통해 인증 정보를 가져오므로

필수 오버라이드 메서드가 있습니다.

메서드	반환 타입	설명
getAuthorities()	Collection<? extends GramtedAuthority>	사용자가 가지고있는 권한의 목록을 반환합니다. 현재 예제 코드에서는 사용자 이외의 권한이 없기 때문에 user 권한만 담아 반환합니다.
getUsername()	String	사용자를 식별할 수 있는 사용자 이름을 반환합니다. 이때 사용되는 사용자 이름은 반드시 고유해야 합니다. 현재 예제 코드는 유니크 속성이 적용된 이메일을 반환합니다.
getPassword()	String	사용자의 비밀번호를 반환합니다. 이때 저장되어 있는 비밀번호는 암호화해서 저장합니다.
isAccountNonExpired()	boolean	계정이 만료되었는지 확인하는 메서드입니다. 만약 만료되지 않은 때는 true를 반환합니다
isAccountNonLocked	boolean	계정이 잠금되었는지 확인하는 메서드입니다. 만약 잠금되지 않은 때는 true를 반환합니다
isCredentialsNonExpired()	boolean	비밀번호가 만료되었는지 확인하는 메서드입니다. 만약 만료되지 않은 때는 true를 반환합니다.
isEnabled()	boolean	계정이 사용 가능한지 확인하는 메서드입니다. 만약 사용 가능하다면 true를 반환합니다.

repository 디렉터리에 UserRepository.java 파일을 생성하고 인터페이스를 만들어줍니다.

public interface UserRepository extends JpaRepository<User, Long> {
    Optional<User> findByEmail(String email);
}

사용자를 식별하기 위해 이메일을 사용합니다.

사용자 정보를 가져오기 위해서는 스프링 시큐리티가 이메일을 전달받아야합니다.

스프링 데이터 JPA는 메서드 규칙에 맞춰 메서드를 선언하면 이름을 분석해 자동으로 쿼리를 생성해줍니다.

findByEmail() 메서드는 실제 데이터베이스에 회원 정보를 요청할 때 다음 쿼리를 실행합니다.

From users
        Where email = #{eamil}

로그인을 진행할 때 사용자 정보를 가져오는 코드를 작성하겠습니다.

service 디렉터리에 UserDetailService.java 파일을 생성하고 아래 코드를 입력합니다.

@RequiredArgsConstructor
@Service
// 스프링 시큐리티에서 사용자 정보를 가져오는 인터페인스
public class UserDetailService implements UserDetailsService {

    private final UserRepository userRepository;

    // 사용자 이름(email)으로 사용자의 정보를 가져오는 메서드
    @Override
    public User loadUserByUsername(String email) {
        return userRepository.findByEmail(email)
                .orElseThrow(() -> new IllegalArgumentException((email)));
    }

}

스프링 시큐리티에서 사용자의 정보를 가져오는 UserDetailService 인터페이스를 구현합니다.

필수로 구현해야 하는 loadUserByUsername() 메서드를 오버라이딩해서 사용자 정보를 가져오는 로직을 작성합니다.

인증 처리를 하는 시큐리티 설정 파일을 작성하겠습니다.

config 패키지를 새로 만들어 WebSecurityConfig.java 를 생성하고 아래 코드를 작성합니다.

@RequiredArgsConstructor
@Configuration

public class WebSecurityConfig {
    private final UserDetailService userService;

    // 1.스프링 시큐리티 기능 비활성화
    @Bean
    public WebSecurityCustomizer configure() {
        return (web) -> web.ignoring()
                .requestMatchers("/img/**", "/css/**", "/js/**");
    }
    
    // 2.특정 HTTP 요청에 대한 웹 기반 보안 구성
    @Bean
    public SecurityFilterChain filterChain(HttpSecurity http) throws Exception{
        http    
                // 3.인증 , 인가 설정
                .authorizeHttpRequests((auth) -> auth
                        .requestMatchers("/login", "/signup", "/user").permitAll()
                        .anyRequest().authenticated()
                )
                // 4.폼 기반 로그인 설정
                .formLogin((formLogin) -> formLogin
                        .loginPage("/login")
                        .defaultSuccessUrl("/articles"));

        http
                // 5.로그아웃 설정
                .logout((logout) ->
                        logout.logoutSuccessUrl("/login")
                                .invalidateHttpSession(true)
                );

        http.csrf((csrf) -> csrf.disable()); // 6.csrf 비활성화

        return http.build();
    }
    
    // 7.인증 관리자 관련 설정
    @Bean
    public DaoAuthenticationProvider daoAuthenticationProvider() throws Exception {
        DaoAuthenticationProvider daoAuthenticationProvider = new DaoAuthenticationProvider();

        daoAuthenticationProvider.setUserDetailsService(userService); // 8.사용자 정보 서비스 설정
        daoAuthenticationProvider.setPasswordEncoder(bCryptPasswordEncoder());

        return daoAuthenticationProvider;
    }
    
    // 9.패스워드 인코더로 사용할 빈 등록
    @Bean
    public BCryptPasswordEncoder bCryptPasswordEncoder() {

        return new BCryptPasswordEncoder();
    }
}

설명한 내용이 많아 번호를 붙여 설명하겠습니다.

1.스프링 시큐리티의 인증, 인가 서비스는 모든 곳에 적용하지 않습니다.

일반적으로 정적 리소스(HTML,이미지 등등)에 설정하는데

정적 리소스는 클라이언트 측에서 사용되므로 , 스프링 시큐리티의 강력한

인증 및 권한 부여 기능이 필요하지 않아서 입니다.

2. 특정 HTTP 요청에 대해 웹 기반 보안을 구성합니다.

인증/인가 및 로그인,로그아웃 관련 설정을 할수있습니다.

3. 특정 경로에 대한 엑세스 설정을 합니다.

.requestMatchers() : 특정 요청과 일치하는 url에 대한 엑세스를 설정합니다.

premitAll() : 누구나 접근이 가능하게 설정합니다.

"/login,/signup,/user" 로 요청이 오면 인증/인가 없이도 접근할수있습니다.

anyRequest() : 위에서 설정한 url 이외의 요청에 대해서 설정합니다.

authenticated() : 별도의 인가는 필요하지 않지만 인증이 접근할 수 있습니다.

4. 폼 기반 로그인 설정을 합니다.

loginPage() : 로그인 페이지 경로를 설정합니다.

defalutSuccessUrl() : 로그인이 완료되었을 때 이동할 경로를 설정합니다.

5. 로그아웃 설정을 합니다.

logoutSuccessUrl() : 로그아웃이 완료되었을 때 이동할 경로를 설정합니다.

invalidateHttpSession() : 로그아웃 이후에 세션을 전체 삭제할지 여부를 설정합니다.

6. CSRF 설정을 비활성화합니다.

CSRF 공격을 방지하기 위해서는 활성화하는게 좋지만 설정을

편리하게 하기 위해 비활성화합니다.

7. 인증 관리자 관련 설정입니다.

사용자 정보를 가져올 서비스를 재정의하거나 , 인증 방법

예를 들어 LDAP , JDBC 기반 인증 등을 설정합니다.

8. 사용자 서비스를 설정합니다.

userDetailService() : 사용자 정보를 가져올 서비스를 설정합니다.

서비스 클래스는 반드시 UserDetailService를 상속받은 클래스여야만 합니다.

9. 패스워드 인코더를 빈으로 등록합니다.

시큐리티 설정이 완료되었으니 회원가입을 구현하겠습니다.

회원 정보를 추가하는 서비스 메서드를 작성한 뒤에 회원 가입 컨트롤러를 구현합니다.

dto 디렉터리에 사용자 정보를 담고 있는 객체를 생성합니다.

AddUserRequest.java 파일을 추가하고 아래 코드를 작성합니다.

@Getter
@Setter
public class AddUserRequest {
    private String email;
    private String password;
}

이어서 AddUserRequest 객체를 인수로 받는 회원 정보를 추가하는 메서드를 작성합니다.

service 디렉터리에 UserService.java 파일을 생성하고 코드를 작성합니다.

@RequiredArgsConstructor
@Service
public class UserService {

    private final UserRepository userRepository;
	private final BCryptPasswordEncoder bCryptPasswordEncoder;
    
    public Long save(AddUserRequest dto) {
        return userRepository.save(User.builder()
                .email(dto.getEmail())
                // 패스워드 암호화
                .password(encoder.encode(dto.getPassword()))
                .build()).getId();
    }
}

패스워드를 저장할 때 시큐리티를 설정하며 패스워드 인코딩용으로 등록한

빈을 사용해서 암호화 한 후에 저장합니다.

회원 가입 폼에서 회원 가입 요청을 받으면 서비스 메서드를 사용해

사용자를 저장한 뒤 로그인 페이지로 이동하는 signup() 메서드를 작성합니다.

controller 디렉터리에 UserApiController.java 파일을 만든후 코드를 작성합니다.

@RequiredArgsConstructor
@Controller
public class UserApiController {

    private final UserService userService;

    @PostMapping("/user")
    public String signup(AddUserRequest request) {
        userService.save(request); // 회원 가입 메서드 호출
        return "redirect:/login"; // 회원 가입이 완료된 이후에 로그인 페이지로 이동
    }
}

회원 가입 처리가 된 다음 로그인 페이지로 이동하기 위해 redirect: 를 붙여

회원 가입 처리가 끝나면 강제로 /login URL에 해당하는 화면으로 이동합니다.

로그인 / 회원가입 경로로 접근하면 뷰 파일을 연결하는 컨트롤러를 생성합니다.

controller 디렉터리에 UserViewController.java 파일을 만든후 코드를 작성합니다.

@Controller
public class UserViewController {
    @GetMapping("/login")
    public String login() {
        return "login";
    }

    @GetMapping("/signup")
    public String signup(){
        return "signup";
    }
}

/login 경로로 접근하면 login() 메서드가 login.html을 불러오고

/signup 경로에 접근하면 signup() 메서드는 signup.html를 반환합니다.

templates 디렉터리에 login.html을 생성한후 아래 코드를 작성합니다.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>로그인</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">

    <style>
        .gradient-custom {
            background: linear-gradient(to right, rgba(106, 17, 203, 1), rgba(37, 117, 252, 1))
        }
    </style>
</head>
<body class="gradient-custom">
<section class="d-flex vh-100">
    <div class="container-fluid row justify-content-center align-content-center">
        <div class="card bg-dark" style="border-radius: 1rem;">
            <div class="card-body p-5 text-center">
                <h2 class="text-white">LOGIN</h2>
                <p class="text-white-50 mt-2 mb-5">서비스를 사용하려면 로그인을 해주세요!</p>

                <div class = "mb-2">
                    <form action="/login" method="POST">
                        <input type="hidden" th:name="${_csrf?.parameterName}" th:value="${_csrf?.token}" />
                        <div class="mb-3">
                            <label class="form-label text-white">Email address</label>
                            <input type="email" class="form-control" name="username">
                        </div>
                        <div class="mb-3">
                            <label class="form-label text-white">Password</label>
                            <input type="password" class="form-control" name="password">
                        </div>
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </form>

                    <button type="button" class="btn btn-secondary mt-3" onclick="location.href='/signup'">회원가입</button>
                </div>
            </div>
        </div>
    </div>
</section>
</body>
</html>

이어서 signup.html을 생성하여 로그아웃 뷰를 작성해줍니다.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>회원 가입</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">

    <style>
        .gradient-custom {
            background: linear-gradient(to right, rgba(254, 238, 229, 1), rgba(229, 193, 197, 1))
        }
    </style>
</head>
<body class="gradient-custom">
<section class="d-flex vh-100">
    <div class="container-fluid row justify-content-center align-content-center">
        <div class="card bg-dark" style="border-radius: 1rem;">
            <div class="card-body p-5 text-center">
                <h2 class="text-white">SIGN UP</h2>
                <p class="text-white-50 mt-2 mb-5">서비스 사용을 위한 회원 가입</p>

                <div class = "mb-2">
                    <form th:action="@{/user}" method="POST">
                        <!-- 토큰을 추가하여 CSRF 공격 방지 -->
                        <input type="hidden" th:name="${_csrf?.parameterName}" th:value="${_csrf?.token}" />
                        <div class="mb-3">
                            <label class="form-label text-white">Email address</label>
                            <input type="email" class="form-control" name="email">
                        </div>
                        <div class="mb-3">
                            <label class="form-label text-white">Password</label>
                            <input type="password" class="form-control" name="password">
                        </div>

                        <button type="submit" class="btn btn-primary">Submit</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>
</body>
</html>

이번엔 로그아웃 기능을 구현합니다.

로그아웃을 마지막으로 회원 가입 , 로그인 , 로그아웃 테스트를 진행하겠습니다.

UserApiController에 logout() 메서드를 추가합니다.

    @GetMapping
    public String logout(HttpServletRequest request, HttpServletResponse response) {
        new SecurityContextLogoutHandler().logout(request, response,
                SecurityContextHolder.getContext().getAuthentication());
        return "redirect:/login";
    }
}

/logout GET 요청을 하면 로그아웃을 담당하는 핸들러인

SecurityContextLogoHandler의 logout() 메서드를 호출해서 로그아웃합니다.

블로그 글 목록 뷰 파일 articleList.html에 로그아웃 버튼을 추가합니다.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>블로그 글 목록</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<body>
<div class="p-5 mb-5 text-center</> bg-light">
    <h1 class="mb-3">My Blog</h1>
    <h4 class="mb-3">블로그에 오신 것을 환영합니다.</h4>
</div>

<div class="container">
    <button type="button" id="create-btn"
            th:onclick="|location.href='@{/new-article}'|"
            class="btn btn-secondary btn-sm mb-3">글 등록</button>
    <div class="row-6" th:each="item : ${articles}">
        <div class="card">
            <div class="card-header" th:text="${item.id}">
            </div>
            <div class="card-body">
                <h5 class="card-title" th:text="${item.title}"></h5>
                <p class="card-text" th:text="${item.content}"></p>
                <a th:href="@{/articles/{id}(id=${item.id})}" class="btn btn-primary">보러가기</a>
            </div>
        </div>
        <br>
    </div>

    <button type="button" class="btn btn-secondary" onclick="location.href='/logout'">로그아웃</button>
</div> <!--로그아웃 버튼 추가 -->

<script src="/js/article.js"></script>
</body>

실행 테스트를 해보겠습니다.

서버를 실행하고 http://localhost:8080/articles에 접속합니다.

articles는 인증된 사용자만 들어갈 수 있는 페이지이기에 /login 으로 리다이렉트됩니다.

아직 아이디가 없기에 회원가입 버튼을 눌러 회원가입을 합니다.

Submit 버튼을 누르면 회원가입이 된후 다시 /login으로 리다이렉트됩니다.

DB를 확인해볼까요??

패스워드 인코딩을 통한 패스워드 암호화까지 정상적으로 된 상태로

회원가입이 된걸 확인할수있습니다.

회원가입이 됐으니 다시 로그인 시도를 해보면 정상적으로

/articles에 접근할수있는걸 확인할수있습니다.

왼쪽 하단에 추가했던 로그아웃 버튼을 클릭하여

제대로 로그아웃이 되는지 확인하겠습니다.

로그아웃 버튼을 누르니 다시 로그인 페이지로 이동하는걸 확인할수있었습니다.

다음 포스팅은 JWT를 이용한 로그인/로그아웃 구현을 해보겠습니다.

Spring Boot 각종 뷰

김쥬르 — Sun, 31 Dec 2023 05:38:53 +0900

이번엔 템플릿엔진을 이용하여

수정/삭제/생성 버튼을 추가하고

관련된 기능까지 코드를 작성해보겠습니다.

삭제기능 먼저 해보겠습니다.

삭제 코드는 자바스크립트로 작성을 해볼까요?

src/main/resources/static 디렉터리에 js 디렉터리를 만들고

article.js 파일을 생성한후 아래 코드를 작성합니다.

// 삭제 기능
const deleteButton = document.getElementById('delete-btn');

if (deleteButton) {
    deleteButton.addEventListener('click', event => {
        let id = document.getElementById('article-id').value;
        fetch(`/api/articles/${id}`, {
            method: 'DELETE'
        })
            .then(() => {
                alert('삭제가 완료되었습니다.');
                location.replace('/articles');
            });
    });
}

HTML에서 id를 delete-btn으로 설정한 엘리먼트를 찾아

그 엘리먼트에서 클릭 이벤트가 발생하면 fetch() 를 통해 /api/articles/ DELETE 요청을 보내줍니다

then() 메서드는 fetch()가 잘 완료되면 연이어 실행되는 메서드이며

alert() 메서드는 then() 메서드가 실행되는 시점에 웹 브라우저 화면으로

삭제가 완료되었음을 알리는 팝업을 띄워줍니다 location.replace() 메서드는 실행 시

사용자의 웹브라우저 화면을 현재 주소를 기반해 옮겨주는 역할을 합니다.

article.html 파일을 열어 방금 작성한 article.js를 임포트해줍니다.

(위치는 </body> 바로 위에 적어줍니다)

<script src="/js/article.js"></script>

서버를 실행 -> http://localhost:8080/articles/1 로 접속 -> 삭제 버튼 클릭

팝업창이 나타난 다음 확인을 누르면 삭제가 완료되고

글 목록 화면으로 이동한 다음 1번 글이 삭제되있는걸 확인할수 있습니다.

이번에는 글수정 과 생성 기능을 추가해보겠습니다.

수정 과 생성을 함께 개발하는 이유는

수정 과 생성은 같은 화면에서 벌어지는데요

생성을 하게되면 글 양식에 맞게 칸이 나눠져있고

안에 내용은 비어있습니다.

수정을 하게되면 생성과 동일하지만 안에 내용이

생성할때 입력했던 값으로 채워져있죠

그림을 보면 글을 생성할 때는 URL에 별도 쿼리 파라미터가 필요없습니다.

하지만 수정할 때는 URL에 ?id=123 과 같이 수정할 글의

id를 쿼리 파라미터에 추가해 요청합니다.

쿼리 파라미터?

HTTP요청에서 URL의 끝에 "?"로 시작하는 키 값으로 이루어진 문자열이며 "&"로 구분합니다.

예를 들어 ?id=123일 때에는 키는 id , 값은 123이 되는것이죠

즉 쿼리 파라미터가 있는 경우

컨트롤러 메서드는 수정을 해야 하므로 엔티티를 조회해 기존 글 데이터를 모델에 넣어

화면에 보여줘야합니다. 쿼리 파라미터가 없는 때에는 새 글이므로 화면에 아무것도 보여줄 필요가 없겠죠

또한 뷰에서는 쿼리 파라미터의 id 여부에 따라 다른 [수정] 과 [생성] 중 적절한 버튼을 보여줘야합니다.

수정 화면을 보여주기 위한 컨트롤러 메서드를 추가해보겠습니다.

BlogViewController.java 파일에 newArticle() 메서드를 추가합니다.

@GetMapping("/new-article")
public String newArticle(@RequestParam(required = false) Long id, Model model)
{
    if (id == null) {

        model.addAttribute("article", new ArticleViewResponse());
    } else {
        Article article = blogService.findById(id);
        model.addAttribute("article", new ArticleViewResponse(article));
    }

    return "newArticle";
}

쿼리 파타미터로 넘어온 id값은 newArticle() 메서드의 Long 타입 id 인자에 매핑되고

이 값은 없을수도 있습니다 id가 있으면 수정 없으면 생성이므로 id가 없는 경우 기본 생성자를 이용해

ArticleViewResponse 객체를 만들고 id가 있으면 기존값을 가져오는 findByid() 메서드를 호출합니다.

이제 컨트롤러 메서드에서 반환하는 newArticle.html 생성하여 아래 코드를 작성합니다.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>블로그 글</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<body>
<div class="p-5 mb-5 text-center</> bg-light">
    <h1 class="mb-3">My Blog</h1>
    <h4 class="mb-3">블로그에 오신 것을 환영합니다.</h4>
</div>

<div class="container mt-5">
    <div class="row">
        <div class="col-lg-8">
            <article>
                <input type="hidden" id="article-id" th:value="${article.id}">

                <header class="mb-4">
                    <input type="text" class="form-control" placeholder="제목" id="title" th:value="${article.title}">
                </header>
                <section class="mb-5">
                    <textarea class="form-control h-25" rows="10" placeholder="내용" id="content" th:text="${article.content}"></textarea>
                </section>
                <button th:if="${article.id} != null" type="button" id="modify-btn" class="btn btn-primary btn-sm">수정</button>
                <button th:if="${article.id} == null" type="button" id="create-btn" class="btn btn-primary btn-sm">등록</button>
            </article>
        </div>
    </div>
</div>

<script src="/js/article.js"></script>
</body>

수정할 때는 id가 필요하므로 input 엘리먼트의 type을 hidden으로 설정해 엘리먼트를 숨깁니다

th:value로 글의 id를 저장합니다 th:if로 id가 있을 때 수정버튼, 없을때 등록 버튼이 나타나도록 합니다.

실제 수정 , 생성 기능을 위한 API를 구현하기 위해

static 디렉터리의 article.js 파일을 열어 코드를 추가합니다.

// 수정 기능
const modifyButton = document.getElementById('modify-btn');

if (modifyButton) {
    modifyButton.addEventListener('click', event => {
        let params = new URLSearchParams(location.search);
        let id = params.get('id');

        fetch(`/api/articles/${id}`, {
            method: 'PUT',
            headers: {
                "Content-Type": "application/json",
            },
            body: JSON.stringify({
                title: document.getElementById('title').value,
                content: document.getElementById('content').value
            })
        })
            .then(() => {
                alert('수정이 완료되었습니다.');
                location.replace(`/articles/${id}`);
            });
    });
}

서버를 실행하고 http://localhost:8080/articles/2에 접속해

수정버튼을 누른후 기존에 게시글과 제목과 내용이 일치한지 확인해봅시다.

잘나오는건 확인이 됐고 이제 수정이 잘되는지 수정을 해봅시다

수정도 잘되네요

이어서 생성기능도 구현해봅시다.

article.ka 파일에 등록버튼을 누르면 데이터를 가져와 게시글을

생성하는 API 코드를 추가하겠습니다.

// 생성 기능
const createButton = document.getElementById('create-btn');

if (createButton) {
    createButton.addEventListener('click', event => {
        fetch('/api/articles', {
            method: 'POST',
            headers: {
                "Content-Type": "application/json",
            },
            body: JSON.stringify({
                title: document.getElementById('title').value,
                content: document.getElementById('content').value
            })
        })
            .then(() => {
                alert('등록 완료되었습니다.');
                location.replace('/articles');
            });
    });
}

id가 create-btn인 엘리먼트를 찾아 클릭 이벤트가 발생하면 id가 title,content인

엘리먼트의 값을 가져와 fetch() 메서드를 통해 /api/articles/ POST 요청을 보내줍니다.

계속해서 articleList.html 파일을 수정해 id가 create-btn 인 생성 버튼을 추가하겠습니다.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>블로그 글 목록</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<body>
<div class="p-5 mb-5 text-center</> bg-light">
    <h1 class="mb-3">My Blog</h1>
    <h4 class="mb-3">블로그에 오신 것을 환영합니다.</h4>
</div>

<div class="container">
    <button type="button" id="create-btn"
            th:onclick="|location.href='@{/new-article}'|"
            class="btn btn-secondary btn-sm mb-3">글 등록</button>
    <div class="row-6" th:each="item : ${articles}"> <!-- article 개수 만큼 반복 -->
        <div class="card">
            <div class="card-header" th:text="${item.id}"> <!-- item의 id 출력 -->
            </div>
            <div class="card-body">
                <h5 class="card-title" th:text="${item.title}"></h5>
                <p class="card-text" th:text="${item.content}"></p>
                <a th:href="@{/articles/{id}(id=${item.id})}" class="btn btn-primary">보러가기</a>
            </div>
        </div>
        <br>
    </div>
</div>

</body>

서버를 다시 실행해 http://localhost:8080/articles에 접속한뒤

글등록 버튼이 생성되었는지 확인해봅시다.

글등록을 눌러 내용을 입력해준후 게시글이 작성이 되는지 확인해보겠습니다.

게시글 생성까지 잘되는지 확인이되었네요.

다음 포스팅은 스프링 시큐리티로 찾아오겠습니다.