xe 1.8 버전의 기본스킨 xedition이 너무 예뻐서 사이트에 적용하여 사용중인 유저입니다.

 

저번 2014콘테스트에 고퀄리티 작품들이 거의 쏟아시피 했죠.

덕분에 sweet mobile 레이아웃도 아주 감사하게 사용중입니다.

 

그런데 네이버 로그인을 사용하고는 싶은데, login xe 서버/클라이언트 다 깔았는데 html/css 손볼줄 몰라 못하시는 분들을 위해 xedition html 소스를 수정해서 간편하게 네이버 로그인 연동하는 방법을 끄적여볼까 합니다.

(login xe 개발자님 정말정말 감사합니다.)

 

일단 로그인 xe 서버와 클라이언트를 메뉴얼대로 설치 / 설정 해주세요.

http://server.loginxe.cf/ <-- 개발자님의 친절한 메뉴얼.

 

이제 네이버 BI를 받아야합니다.

https://nid.naver.com/devcenter/docs.nhn?menu=BI <-- 네이버BI 가이드 및 다운로드

 

마음에 드는 BI를 서버에 등록해 주세요.

(저의 경우에는 공지사항에 비밀글로 올렸습니다.)

 

올려진 BI의 이미지 주소를 복사해주세요. (이미지 오른쪽클릭 > 이미지 URL 복사(O) )

자 이제 xediton 소스수정입니다.

 

사이트 관리자로 들어간 후 좌측 [사이트 디자인 설정] 을 들어가서 xedition 을 클릭해주세요.

 

HTML/CSS 로 들어가 HTML 소스창에서

<h1>login</h1> 을 검색합니다.

 

 

여기가 바로 로그인 위젯 창입니다.

로그인 위젯창에 버튼을 추가하면 되는데요.

 

<button type="submit" class="btn_submit">{$lang->cmd_login}</button>

바로 아랫부분에 아까 복사해둔 네이버 로그인 이미지를 올리고, 앵커를 통해 네이버 로그인 창으로 넘어가게 만들어야 합니다.

저는 로그인 버튼과 약간 떨어지게 만들기 위해서 <p> 태그를 이용해 -OR- 이라는 문구를 넣었습니다.

 

<button type="submit" class="btn_submit">{$lang->cmd_login}</button>

<p style="text-align: center;"> - OR - </p>
<a href="http://사이트 주소/index.php?module=loginxeclient&act=dispLoginxeclientOAuth&provider=naver"><img width="320px;" height="auto;" src="아까 복사한 이미지 주소" /></a>

 

이렇게요.

사이트 주소부분와 복사한 이미지 주소를 넣어서 올려주세요.

xedition의 로그인 위젯의 로그인 버튼 가로크기가 320이라 전 320으로 맞추어 했습니다.

이미지 파일의 가로 크기를 조절하고 싶으시다면 width="320px" 부분을 수정하세요.

 

이제 하단의 저장 버튼을 누르면 끝!

(서브페이지에서도 똑같은 방법으로 입력해주세요!)

 

그리하여..

 

 

로그인 위젯 화면입니다.

 

버튼을 누르면 네이버 로그인 화면으로 넘어가고 여기서 네이버 아이디로 로그인하면~~

 

 

짜잔! 네이버 아이디로 로그인 성공!!!

 

고생하셨습니다~~

 

 

뭐... 저도 초짜라 거의 먼지 팁이긴 하지만 저같은 초급자 분들은 이런식으로 다른 레이아웃에서도 사용이 가능하시다는거..

혹여나 찾는분이 있을까봐 이렇게 포럼에 올려봅니다.

 

행복한 하루 되세요!!!

 

 

** xedition 소개페이지에 언뜻보면 모바일 레이아웃 처럼 보이는게 있는데 없어서 아쉽 엉엉...꺼이꺼이..

   그리고 welcome페이지에 나오는 것들... 위젯처럼 사용은 불가능한건가욥..ㅠㅜ