XE독학하기 그 36번째 걸음-카카오톡 아이디로 로그인을 만들기 part1

안녕하세요?

이번 포스팅에서는 지난번에 네이버 아이디로 로그인을 만들어 둔 것은 좋았는데, 한가지 문제가 있는 것을 발견하였습니다.

일부 사용자들이 네이버 아이디로 로그인이 불가능한 현상이 발생한 것입니다. 사실 이건 제가 찾아보니까, 네이버 개발자 포럼에서도 윈도 10을 사용하는 일부 유저들에게서 이런 현상이 발생을 한다고 합니다. 문제는 이걸 제 레벨에서는 어떻게 할 수는 없기 때문에, 하는 수 없이 이번에는 사용자가 많을 것으로 예상이 되는 다른 SNS로그인을 구현하고자 생각했습니다.

기본적으로 소셜XE라는 모둘에서 제공하는 다른 SNS 중에서 카카오가 있는 것을 발견할 수 있었습니다. 그래서 이를 구현하고자 마음을 먹고, 먼저 카카오 개발자 홈페이지로 갔습니다.

카카오 개발자 페이지를 보면, 여기서 카카오계정 로그인이라는 항목이 있는 것을 볼 수 있습니다. 이 항목을 클릭해서 다음 화면으로 넘어가면, 먼저 아래와 같은 화면이 뜹니다.

우선 저는 이름을 간편 로그인이라고 이름을 지은 다음 아이콘 사진을 임의의 사진으로 입력하였습니다. 그 다음에는 앱 만들기 버튼을 눌러서 다음 단계로 나아가고자 했습니다.

먼저 앱 정보 설정을 눌러서 아래와 같은 화면을 불러 오도록 합니다.

먼저 서비스를 할 사이트 도메인을 입력하도록 하고, 여기서 아래에 있는 Redirect path에는 아래의 스크린샷과 같이 소셜XE에 나와있는 Redirect Path URL을 입력하도록 합니다.

다시 XE관리자 화면으로 와서, 위 스크린샷에 가려놓은 Client ID항목에서는 카카오 개발자 페이지에서 본 REST API값을 복사해서 붙여넣기 하도록 합니다. 이제 XE 홈페이지상에서 제대로 나오는 지 여부를 확인해 보도록 합니다.

일단 로그인 화면창에서는 제대로 카카오 로그인을 지원하는 것이 나오고 있습니다. 하지만 문제는 이 다음에 발생을 하였습니다.

먼저 소셜XE를 개발한 개발자의 사이트에서 얻은 정보입니다. 카카오 계정 로그인은 기본적으로 이메일 주소를 가져올 수는 없기 때문에, 자체적으로 이메일 인증을 해야만 하는 불편함이 있다는 것입니다.

그 다음으로는 시험을 해보니, XE 공식 홈페이지에서 나온 위 스크린샷과 같은 에러 메세지가 뜨는 것을 볼 수 있었습니다. 이 에러 메세지가 뜨는 이유는 필요한 html파일이 m.skins폴더에 없어서 생기는 에러 메세지입니다. 그래서 이 메세지를 해결하고자 먼저 알FTP로 접속을 하여서 modules폴더 안에 있는 member/skins/default항목에 있는 모든 html파일을 하드 디스크 드라이브에 다운로드 받았습니다.

다음으로 skins폴더 안에 있던 default폴더안에 있는 html파일을 모두 m.skins폴더안의 default폴더 안으로 업로드 시킵니다. 물론 이때는 덮어 씌우기가 아니라 같은 이름의 파일은 건너뛰는 것으로 하고, 업로딩이 다 끝난 다음에는 이제 카카오 계정으로 로그인을 다시 시도해 보았습니다.

하지만 이번에는 인증메일이 발송되지 않는 문제점이 발생하였습니다. 그래서 다음 포스팅에서는 이 문제를 해결하는 방향으로 포스팅을 하고자 합니다.