매뉴얼

외부 API 네이버 아이디 로그인 연동하는 방법

1. 네이버에 로그인 후 https://developers.naver.com/apps/#/wizard/register에서 애플리케이션을 등록합니다.

애플리케이션을 등록하려면 휴대폰 인증과 회사이름을 작성하셔야 합니다.

 

 

 

2. 애플리케이션 등록란에서 (네아로 - 네이버 아이디로 로그인)을 선택하여 추가합니다.

 

 

 

추가 후 하단에 보시면 [환경 추가] 선택 박스가 있습니다. 해당 박스에서 PC웹, Mobile 웹을 선택하여 추가해 주세요.

서비스 URL에는 적용할 홈페이지의 도메인 주소를 적용해주세요.

Callback URL에는 적용할 홈페이지의 도메인주소와 /API/naver/login_exec.php를 이어서 적어주시면 됩니다.

 

 

 

주의! 네이버 로그인 연동하려면 실제 홈페이지 주소와 위 사이트 URL과 동일해야만 정상 작동 됩니다.

애니빌드 솔루션에서는 http://id.anybuild.co.kr 해도 접속 되고 도메인을 설치한 경우 http://www.mydomain.com 등 메인을 추가 설치 할수 있습니다.

예를들어 위 키발급시 사이트URL에 http://www.mydomain.com 으로 발급하는경우, http://www.mydomain.com 에서만 네이버 로그인 연동이 가능하지만 http://id.anybuild.co.kr 에서는 로그인 되지 않습니다.

CallBackURL은 http://자신의도메인/API/naver/login_exec.php 을 입력하시면 됩니다.

 

4. 등록이 완료되면 Application으로 이동하여 등록한 내 애플리케이션을 선택합니다. 개요란에 보시면 Client ID와 Client Cecret 키가 있습니다. 2개의 키를 작성해두시거나 복사해 주세요.

 

 

 

5. 애니빌드 솔루션 관리자 모드에서 "외부 API 연동" 모듈을 설치 합니다.

설치 방법은 [프로그램 SHOP > 프로그램 추가설치] 에서 찾아보시면 아래와 같이 설치 할수 있습니다. (자세한 설치방법은 애니빌드 본사로 별도 문의 바랍니다.)

 

 

6. 설치 후 [프로그램 SHOP > 프로그램 환경설정 > 외부 API 연동]으로 이동 후 위에서 복사해두었던 ClientID, ClientSecret 정보를 붙여 넣습니다. (Ctrl + V)

 

여기까지 작업 했다면 연동 작업은 모두 마무리 되었습니다.

실제 로그인 페이지를 만들어 보겠습니다.

 

 

5. [디자인관리 > 고급 디자인 관리 > 세부 화면 디자인] 으로 이동하고 아래와 같이 "로그인" 페이지를 선택 합니다.

 

소스 수정 모드에서 아래와 같이 네이버 로그인 버튼을 추가 합니다.

이때 임의로 로그인 버튼디자인을 수정하게 되면 네이버 규정상 승인 거절이 될 수 있으므로, 반드시 네이버 BI 디자인 그대로 사용할 것을 권장합니다.


<a href="javascript:naver_login_form()"><img src='/API/naver/img/naver_g_a_login.PNG' width=120 border=0></a>
<a href="javascript:naver_login_form()"><img src='/API/naver/img/naver_g_a_logout.PNG' width=120 border=0></a>
<a href="javascript:naver_login_form()"><img src='/API/naver/img/naver_g_b_login.PNG' width=70 border=0></a>
<a href="javascript:naver_login_form()"><img src='/API/naver/img/naver_g_c_login.PNG' width=200 border=0></a>
<a href="javascript:naver_login_form()"><img src='/API/naver/img/naver_w_a_login.PNG' width=120 border=0></a>
<a href="javascript:naver_login_form()"><img src='/API/naver/img/naver_w_a_logout.PNG' width=120 border=0></a>
<a href="javascript:naver_login_form()"><img src='/API/naver/img/naver_w_b_login.PNG' width=70 border=0></a>
<a href="javascript:naver_login_form()"><img src='/API/naver/img/naver_w_c_login.PNG' width=200 border=0></a>



 

 

이렇게 해서 네이버 로그인 연동 작업이 마무리 되었습니다.

사이트에서 테스트해보시기 바랍니다.

 

6. 테스트가 완료되면 Application > 내 애플리케이션 > API설정에서 "서비스 적용"을 선택해주세요.

개발중일 경우 로그인에 제한이 있습니다.

 

 

 

만약 아래와 같이 접근이 안되는경우 아래 사항을 점검 바랍니다.

 

1. 등록된 도메인 주소와 실제운영중인 도메인주소가 다른경우
예를들어 네이버에 등록된 주소가 http://abcd.anybuild.co.kr 이고 실제 운영되는 사이트 주소가 http://www.mydomain.com 이라면 안됩니다. 그리고 띄어쓰기 및 대문자가 들어가면 되므로, 신경써서 입력하시기 바랍니다.

 

2. 이미지 첨부시 사이즈가 140px * 140px , 용량 500k 이하로 첨부해야 합니다. 그렇지 않은경우 위와 같이 이용 제한 페이지가 출력 됩니다.

 

3. 휴대폰 인증을 하지 않은경우

 

그래도 안된다면, 해당 애플리케이션을 삭제 후 다시 처음부터 시도해보시기 바랍니다.

 

 

수고하셨습니다.

게시글 공유 URL복사 cyworld
댓글작성

열기 닫기

댓글작성
top