Springboot 리팩토링(1) 네이버로그인 change 팝업창+리다이렉트 with response.sendRedirect

궁금했던 기술이 있었다

예를 들어 네이버 로그인이면 

팝업창을 띄우고 그 팝업창에서 로그인이 이뤄지고 

팝업창이 꺼지고 부모창이 홈페이지로 가는 기능이었다

 

도저히 어떻게 하는 거지?

하던 순간 어..? 생각이 났고 

실행했다

 

문제는 이거였다

콜백 url에서 회원가입/로그인 처리 후 바로

index.html로 보내는 게 아니라 페이지를 거치게 하면 됐던 것이다

 

프런트 서버

loginPage.html

hidden으로 태그를 하나 만들어준다

html

js

서버와 통신을 해서 얻은 url

let naverLoginUrl=xhr.response;

hidden태그에 value 밀어 넣기

document.getElementById('oauthLoginUrl').value=naverLoginUrl;

자식창열기

child=window.open(naverLoginUrl,'width=500','height=500');

 

백엔드 서버 

restController

restController.java

여기서 이제 새로 만든 페이지로 

리다이렉트 해주면 된다

 

프런트 서버

doneNaverLogin.html

js

부모 창 index.html로 보내고

opener.document.location.href="index.html";

자식 창은 꺼진다

self.close();

 

테스트

 

네이버 로그인 클릭

http://localhost:3030/loginPage.html

결과

와우~~~~~

팝업창 다루는 법 알았다

다른 로그인/카카오페이도 적용해주자!

너무 신난다

핵심은 callurl에서 작업을 한뒤

그냥 자식창 꺼주는 로직이 있는 페이지로 리다이렉트 하면됐었다...

이쉬운걸..

 

callback이 왜 존재해야 하는지 알았고

리다이렉트/controller의 차이가 느껴지기 시작했다

리다이렉트가 참 좋다 

이로서 백엔드 기괴한 controller는 제거해주자

restcontroller

restcontroller.java

이제 다른곳에도 적용하러가자!