JWT
AuthenticationFilter는 하나의 필터가 아니라 많은 필터가 있음
spring security architecture와 구조는 동일하나 앞의 AuthenticationFilter와 token을 spring security가 자동으로 해주는 것을 막고 내가 생성한 필터와 토큰으로 중간에 가로채서 사용한다.
토큰은 보안에 취약 -> 중간에 가로챌 수 있음, 따라서 만료시간을 줌
토큰은 2개가 같이 다님
access token(만료시간 짧음)
refresh token(만료시간 김)
access token이 만료되면 access, refresh를 다시 만들어준다.
front가 login요청, back에서 access, refresh token줌
front가 user 정보를 필요로 할 때는 항상 access, refresh 와 같이 요청한다.
1. access token이 허용되면(refresh 안 봄) user정보를 준다.
2. access X, refresh token이 허용되면 access, refresh 다시 내려보내준다.(여기서 user 정보를 같이줄지는 선택)
3. access X, refresh X면 다시 로그인하라고 요청한다.
front에서 3가지 경우를 처리해야한다.
Cors : 외부 접속 허용, 권한, IP, 포트등 접속에 관련
spring security의 기본 기능을 활성화만 하고, 내가 필터를 가로채서 내가 만든 token을 끼워 넣는다.
postman으로 테스트 시 post방식의 fromdata로 전송
소셜 로그인(Kakao, Naver)
Back으로 Front에서 받은 Token인증
Front에서 Back으로 token을 줘서 User 정보 요청
-> 이후 Front에서 Jotai를 이용해 세션 스토리지에 User 정보 저장
프로젝트 구조
Auth
소셜로그인은 UserDetails 가 아니라 OAuth2User 타입으로 사용자 정보를 가져온다.
따라서 service 구현 시 DefaultOAuth2UserService를 상속 받는다.
일반 로그인은 UserDetails 타입이고, 소셜 로그인은 OAuth2User 타입으로 따로 가지고 있으므로
UserDetails를 상속받은 PrincipalDetails에 OAuth2User도 상속받아 메서드를 구현해준다.
Config
일반 로그인과 소셜 로그인으로 분리하여 요청을 가로챈다.
Jwt
일반 로그인 시 토큰을 생성하고 해당 토큰을 헤더에 넣어준다.
로그인이 들어오면 토큰을 보고 유효한지 확인
토큰에 관한 정보를 설정한다.
Controller
Entity
OAuth
인증 후 카카오, 네이버가 각각 보내는 방식대로 user 정보를 OAuth2UserInfo로 설정한다.
(일반 로그인에서는 PrincipalDetails)
DB에서 유효한지 확인하고 user 정보를 PrincipalDetails로 둘러싸서 보내준다.
소셜이면 결과가 OAuth2SuccessHandler로 간다.
Repository
해당 URL로 접속 후 로그인 하면 기존 DB에 있는 username은 업데이트하고, 없는 username은 삽입한다.
kakao 로그인 인증 URL
https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}
naver 로그인 인증 URL
Front로 일반 로그인(소셜X)
백앤드에서 token을 받아올 변수
로그인 시 프론트에서 access token과 refresh token을 주면 user로 해당 토큰을 넘긴다.
여기에서 token들을 오염시킬 시 user에서 결과가 달라지게 된다.
받은 token을 백앤드에 보내 인증을 받아야 한다.
access token 성공/ access token 실패, refresh token 성공(token 재발급)/ token 둘 다 실패
총 3가지 경우를 고려해야 한다.
access token 성공 시 백앤드에서 data에 User 정보를 보내주고,
access token 실패, refresh token 인증 성공 시 백앤드에서 data에 'token'과 재발급한 token을 다시 보내주므로 token 인증을 위해 다시 백앤드와 get통신을 하게 된다.(재귀 함수 호출)
이후 재발급한 token으로 다시 로그인하여 User 정보를 받는다.
로그인 창
token이 완전한 채로 로그인
-> access token 인증이 성공하면 로그인을 성공하여 user의 정보를 준다.
token 인증에 성공하며 User데이터를 받아온다.
access token을 오염시킨 후 로그인
-> access token 인증을 실패하고 refresh token 인증을 한다.
-> refresh token 인증을 성공하면 token을 재발급하여 다시 주고 로그인을 성공시켜 User 정보를 준다.
데이터 받기에 실패했으나 다시 토큰을 재발급 받아 data에 User 정보를 가져온다.
access token과 refresh token을 오염시킨 후 로그인
-> 두 token 모두 인증을 실패하여 다시 로그인하라는 메시지를 전달한다.
-> 로그인 창으로 다시 돌아가게한다.
데이터 받기에 실패한 후 에러 발생
Front 소셜 로그인하기
OAuth2SuccessHandler 클래스 추가
react로 소셜 로그인이 들어오면 token 생성 후 token이 담긴 url을 react로 바로 넘겨준다.
소셜 로그인 과정에서 위에서 생성한 OAuth2SuccessHandler를 붙여준다.
소셜 로그인이면 해당 클래스로 요청이 들어오게 된다.
프론트
소셜 로그인 버튼 추가하고 누르면 인증 URL로 가게 됨
URL에서 토큰을 가져와 다음 페이지로 보내주는 컴포넌트를 생성한다.
위의 컴포넌트를 login에 요소로 넣어준다.
개발 가이드 참고
kakao developers
https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api
naver developers
'Project > Spring' 카테고리의 다른 글
| Spring Scheduler (1) | 2024.11.11 |
|---|---|
| React.js와 SpringBoot 연동하기 (3) | 2024.10.30 |
| Spring Security 로그인 (1) | 2024.10.25 |
| JPA Query DSL (3) | 2024.10.22 |
| JPA Database (6) | 2024.10.16 |
