카페24 SSO 연동하면서 SNS(카카오, 네이버) 로그인 해결방안(해결완료)

제목에 앞서 그냥 끄적입니다...

 

앞으로 자바스크립트 조금씩 알아갈예정이다... 하...

 

나의 고민은 이거였다

 

카페24 SSO 연동... 어떻게하는지 모르겠다...

 

어찌저찌 문서보고 카페24 개발자센터에 물어보고 개발 상담원 바지가랑이 붙잡고 카페24 SSO 구현 하였다...

 

처음 생각 : 어떻게 카페24에다가 우리의 데이터베이스 정보를 주지? 라고했는데 알고나니 생각보다 쉬웠다...

 

우선 카페24 SSO로그인하는방식을 알아보자.

 

이건 문서에도 안나오는 내용이다...

 

시작은 카페24 디자인센터에서 디자인 수정 로그인페이지로 이동한다음 밑에 있는 코드를 입력하자.

 

<a href="#none" class="btnSSO" onclick="{$sso_func_login}">SSO로그인</a>

 

그러면 우선 카페24 프론트단에서 설정은 끝난다.(CSS로 버튼 꾸미는건 자유)

 

이제 카페24 관리자 창으로 가자

 

좌측 하단 쇼핑몰 설정 -> 고객 설정 -> SSO로그인연동관리 신규 연동등록 을하게되면 

 

이런 창이 뜨는데 

 

이것은 위에서부터 1번으로 알려주겠습니다.

 

1번 : 그냥 내가 적고싶은 서비스명

2번 : 카페24 개발자센터에 앱을 등록한 후 클라이언트 ID 받아 입력

3번 : 카페24 개발자센터에 앱을 등록한 후 클라이언트 시크릿 번호 받아 입력

4번 : 내가만든 로그인페이지 주소

5번 : POST로 받는 API (코드를 받고 확인 후 엑세스토큰을 반환하는 API)

6번 : POST로 받는 API (엑세스토큰을 받고 확인 후 유저정보를 반환한는 API) name, email, id 이 세가지를 반환해줘야한다. 꼭

 

이렇게 만들고 나면 카페24 SSO는 끝난다.

 

리엑트로 로그인페이지를 만들었으며 

 

카카오, 네이버 로그인은 패키지가 있어 쉽게 구현할 수 있었다.

 

이제 SNS인증 후 카페24에 로그인정보를 보내주면 SSO로그인이 끝난다.

 

일이 생겼다. 카카오는 CallBack함수가 페이지 내에서 이루어지는데 

 

네이버는 새로운 팝업창을 띄운다음에 끝난다. 콜백함수라고 있지만 안먹힌다.

 

여기서 문제이다. 카페24 SSO로그인을 마무리할려면 

 

카페24에서 보내주는 리다이렉션 URL과 기타정보가 필요한데 네이버는 팝업창 후 돌아오게되었을 때 무었으로 받을 수 있는가?

 

고민이 많았다 한 2틀 동안 그냥 멍텅구리처럼 안되는거 붙잡고있었다... 검색해서 비슷한것을 만들어도 지랄맞게 다 실패했다...

 

그러다가 새벽 1시 가볍게 마음 놓고 검색하면서 찾아보던 중 그럴싸한걸 찾아서 했다... 정보를 받는다!!!

 

쉬운것일 수도 있겠지만 혹은 사용하면 안되는것일 수도 있겠지만

 

해결된 방안을 가르켜주겠다.

 

네이버 콜백URL에서 입력
window.opener.{내가정한단어}({data});

=========================================

내가만든 로그인창
window.{내가정한단어} = (event)=>{
    console.log(event);
}

 

위의 방법이 해결방안이다.

 

아래는 실패했던 방안

const navigate = useNavigate();

if(로그인완료){
	navigate(-1,data);
    // 어떻게 받을건데...?
}

 

 

 

네이버 콜백URL에서 입력
window.opener.message(data);

=================================

내가만든 로그인화면
window.addEventListener("message",(event)=>{
	console.log("메세지 읽기");
    // 오 그럴싸해~~ 근데 안되...왜... 작동을한함
})

 

 

내가만든 로그인 화면
window.addEventListener('beforeunload', function(event) {
  // 특정 작업
});

 

마지막방법은 자식 팝업창이 닫힐 때 반응하는 이벤트란다...

 

근데 찾아보니 그냥 내가 닫힐 때 반응하는 이벤트라고 하는것 같다... 뭐지...

 

아무튼 해결방법으로 네이버로그인 후 콜백창에서 로그인창으로 정보를 입력하는 방법 때문에 거희 2틀을 고생하고 조금 놀다 1시간만에 해결한 나자신을 보고 이길이 내길이 맞나 본다...