XE 독학하기 그 35번째 걸음-드디어 완성된 네이버 아이디 로그인

안녕하세요?

지난번 포스팅에서 약간은 헛걸음을 했습니다만, 그래도 이번에는 그럭저럭 네이버 아이디로 로그인이 되는 기능을 어떻게 구현하는데 성공해서, 그 내용을 포스팅하고자 합니다.

우선 XE Town으로 가서, 소셜XE2015를 발견했습니다. 일단 지난번 SocialXE와 무엇이 다른지는 모르지만, 그래도 이걸 하드 디스크 드라이브에 최신버전으로 다운로드 받도록 했습니다. 다음은 이게 모듈이기 때문에 알FTP를 이용해서 xe의 modules폴더 안에다가 업로드 시켰습니다.

그 다음에는 XE 관리자 페이지를 통해서 들어간 다음, 고급탭에서 [설치된 모듈]항목으로 들어가도록 합니다. 그러면 소셜XE라는 것이 설치가 되어 있는 것을 볼 수 있습니다. 여기까지만 보면 지난번 socialXE와 별 차이는 없어 보입니다만, 그래도 확인을 위해서 일단 소셜XE를 눌러서 설정하는 화면으로 들어가 보도록 하겠습니다.

그래도 API설정하는 부분을 내려가니, 이번에는 네이버 API가 제대로 있는 것을 확인할 수 있었습니다. 그래서 이번에는 적용이 어떻게 가능하다고 판단을 해서, 우선 네이버 개발자 페이지로 갔습니다.

여기 네이버 개발자 페이지에서 지난번 포스팅에서 발급을 받은 네이버 아이디로 로그인을 가능하게 해주는 API가 있는 것을 보셨을 것입니다. 그래서 위 스크린샷에 보시다 시피 API상태라는 항목으로 가서, 지난번에 생성한 웹 애플리케이션이 잘 있는지를 보러 갑니다.

내 애플리케이션 항목에서 네이버아이디로 로그인 이라는 것이 있는 것을 볼 수 있습니다. 여기서 나와잇는 Client ID와 Client Secret을 각각 복사하도록 합니다. 그리고 앞서 나왔는 Naver API항목에 있는 Client ID와 Client Scret항목에 각각 붙여넣기를 하도록 합니다.

덤으로 Callback URL을 소셜XE에서 기본적으로 제공하는 URL로 설정을 한 다음에 이를 네이버 개발자 페이지에 있는 위 스크린샷과 같은 항목에다가 붙여넣기를 하도록 합니다. 혹시나 해서 callback URL이 실제로 가는 URL과 네이버에 등록된 URL이 달라져서 생기는 불이익을 피하기 위함입니다.

다음으로는 XE관리자 페이지로 돌아가서, 소셜XE페이지의 설정을 세세하게 바꾸도록 합니다. 먼저 레이아웃을 기존의 홈페이지에서 사용하고 있는 것으로 바꾸도록 합니다. 그리고 나서 SNS로그인의 설정도 위 스크린샷과 같이 바꾸고, SNS연동모듈 제외에 해당되는 모듈이 하나도 없도록 바꾸어 줍니다.

그런데 어떻게 된 것인지 모바일 홈페이지에서만 네이버 로그인이 뜰뿐, PC버젼의 로그인 홈페이지에서는 전혀 네이버 아이디로 로그인이 뜨지를 않았습니다. 그래서 다시 한번 더 XE 관리자 페이지로 가서, 사이트 레이아웃에 무언가 수정해야 하는 부분이 있는지를 알아보았습니다.

여기서 소셜XE를 simplestrap 레이아웃이 기본적으로 지원을 하고 있는데, 사용하지 않음으로 되어 있는 것을 발견할 수 있었습니다. 그래서 이를 사용하는 것으로 바꾸도록 하고, 다시 한번 PC버젼의 홈페이지 화면에서 이게 제대로 나오는 지 여부를 확인해 보았습니다.

홈페이지 버젼의 로그인창에서 제대로 소셜 로그인이 뜨는 것을 확인할 수 있었습니다. 이로서 일단 네이버 아이디로 로그인을 띄우는 것 까지는 문제없이 적용이 가능하다는 것을 알 수 있었습니다.