Jwt/Jwt 소셜 로그인

Springboot 네이버로그인+Jwt(1) with redirect,URLSearchParams

디비드킴 2021. 7. 23. 10:29

드디어.... 드디어 알아냈다

네이버 로그인구현은 이전에 했었다
https://cordingmonster.tistory.com/84?category=1034502

 

Springboot 네이버로그인!(!) code받기 state만들기

소스를 정리하기 전에 좀 아쉬움이 남았다 아임 포트로 api를 성공하고 나니까 너무 짜릿해서 한 번 더 해보고 싶었는데 무얼 할까 하다가 자주 사용할 거 같은 네이버 로그인을 선택했다! 네이

cordingmonster.tistory.com


저 코드에서
인증 부분 밑에
코드 발급 기능을 추가하면 된다

service

naverLoginService.java

리프레시 토큰이 db에 있나 검사하고
wtDto jwtDto=jwtService.getRefreshToken(userDto.getId());
(없다면 null이 들어간다)

액세스 토큰을 만들고
String jwt="Bearer "+jwtService.getJwtToken(dto.getId());
리프레시 토큰을 만들고
jwtService.getRefreshToken(jwtDto, userDto.getId())
쿠키에 리프레시 토큰을 담고
Cookie cookie=new Cookie("refreshToken", jwtService.getRefreshToken(jwtDto, userDto.getId()));
httponly와 path를 설정해주고
cookie.setHttpOnly(true);
cookie.setPath("/");
응답에 쿠키를 담는다
response.addCookie(cookie);

그리고 이제 리다이렉트를 해줘야 한다

리다이렉트 시 response/request가
초기화된다고 한다
그래서 고민했다...
음 액세스 토큰을 어떻게
프런트에게 줘야 하지.... 도대체...

그러다 이 글을 찾았다
https://blog.naver.com/1ilsang/221336589690

 

Spring 네이버 로그인 연동하기 + JWT 토큰 발급

http://1ilsang.blog.me/221336542296위의 프로젝트를 하며 내가 한 것들을 정리했다. 파일을 나누지 않고 ...

blog.naver.com

로그인하는 방식은 다르지만
마지막에 리다이렉트 url에
파라미터를 묻혀서 주는 방식이었다!
유레카! 저거였구나!!

여기서 잠깐 왜 리다이렉트를 써야 하냐면
우린 보통 로그인 후 브라우저가
홈페이지를 보여줄 것이다
그렇다면 url은
http://localhost:9090/front/home.jsp
나 홈페이지 url이 되어 있어야 하는데
네아로/카카오 로그인 뒤에
컨트롤러를 태워서 보내면
콜백 주소로 남는다
즉 새로고침 시 다시 소셜 로그인을
시도하며 에러가 터진다
그래서 리다이렉트 처리를 해줘야 한다!
(진짜 엄청 고생했다..)

controller

controller.java

리턴 받은 액세스 토큰은 url에 묻혀주고
return "redirect:http://localhost:9090/front/home.jsp?token="+token;

js

http://localhost:9090/front/home.jsp

? 뒤에 붙은 파라미터를 가져다준다
var search = location.search
URLSearchParams을 만들어준다
var params = new URLSearchParams(search);
(자체적으로 제공하는 기능)

이링크를 보면 쉽게 이해된다!
https://fun25.co.kr/blog/javascript-url-query-parameter-reading-updating-urlsearchparams/?page=4

 

[자바스크립트] url 에서 쿼리 파라미터를 가져오거나 수정할떄 사용되는 URLSearchParams | 퍼니오 호

[자바스크립트] url 에서 쿼리 파라미터를 가져오거나 수정할떄 사용되는 URLSearchParams javascript 에서 url 의 쿼리 파라미터들을 읽거나 수정할떄 사용하는 URLSearchParams 사용법입니다. URL 이 http://127.

fun25.co.kr

파라미터 이름으로 값을 찾아준다
var getType= params.get('token');
/home.jsp?token="+token;
(토큰이라는 파라미터의 값을 가져다준다)

local스토리지에 저장해준다
localStorage.setItem('Authorization', getType);


테스트
네이버 로그 인전

http://localhost:9090/front/home.jsp

널널하다!

네이버 로그인 후

http://localhost:9090/front/home.jsp

바뀐 url과
제대로 들어가 있는 액세스 토큰!

날 미친 듯이
괴롭혔던 새로고침 클릭!

http://localhost:9090/front/home.jsp

다시 소셜 로그인을
시도하지 않는다!
아주 정상적!

후아...
서버 테스트

vscode

입장 완료 ㅜㅠㅜㅜㅜㅜ
소셜 로그인 힘들었다...

 

+추가

시큐리시인증 주입방식

생성자 방식 대신 

빌더 패턴으로 나중에 바꿀 예정이다