매뉴얼

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

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

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

 

 

 

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

 

 

 

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

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

서비스 url 및 도메인에 www가 누락되는 경우 정상적으로 적용이 되지 않으니,

도메인을 설치한 경우 반드시 www를 붙여서 등록해주세요.

오류가 가장 많이 발생하는 경우이니 반드시 등록한 도메인과 동일하게 기재를 해주세요.

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

마찬가지로 www가 포함된 도메인이라면 www를 붙여서 등록해주세요.

 

 

 

주의! 네이버 로그인 연동하려면 실제 홈페이지 주소와 위 사이트 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>



 

네이버 버튼을 삽입한 후 검수 정보를 제출해야하는데요.

Application > 네아로 검수상태 페이지로 접속합니다.

 

1. 네이버 아이디로 로그인 사용처에 단순로그인 인증만 활용에 체크

2. 회원가입 시 사용자에게 입력받는 정보의 항목은 '없음'으로 기재를 해주셔야합니다.

여기까지 설정 후 하단의 첨부파일을 보시면, 네이버 로그인 버튼이 적용된 화면+로그인 화면, 로그인 시 개인정보동의 화면, 회원정보 수정화면

총 3개의 첨부파일을 캡쳐해서 보내야합니다.

 

 

1. 네이버로그인 버튼이 적용된 화면 + 로그인버튼시 팝업

아래 이미지 처럼 로그인 페이지에서 네이버로그인 버튼 과 해당 버튼을 클릭했을때 팝업되는 창이 같이 나오도록 캡쳐합니다.

 

2. 로그인 시 개인정보 동의 화면 캡쳐

 

 

3. 동의 후 홈페이지 > 마이페이지의 회원정보 수정 화면

 

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

 

6. 테스트가 완료되면 Application > 내 애플리케이션 > 개요에서 "네아로 검수요청"을 클릭해주세요.

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

 

 

 

 

 

 

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

 

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

신경써서 입력하시기 바랍니다.

 

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

 

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

 

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

 

 

수고하셨습니다.

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

열기 닫기

댓글작성
top