네이버 아이디 연동

[네이버 아이디 연동]

회원가입을 할때 네이버 아이디로 로그인하는 기능을 구현해보았습니다. 

아무것도 모르는 상태에서 시작하려니 조금 막막했습니다 ㅠㅠ

제가 했던 방법을 정리해보겠습니다.

1. 해당 사이트의 오픈 API 정보를 설정한다.

API를 사용하려면 이용신청을 해야합니다. 애플리케이션을 등록하는데 필요한 정보를 입력해주세요. 저는 웹사이트에서 사용하는거라 웹 애플리케이션 기준으로 정리하겠습니다.

저는 사진처럼 설정해주었습니다.

서비스 URL과 callback URL은 해당 사이트의 링크를 적어주시면 됩니다. 

링크 :   https://developers.naver.com/register

2. 로그인 폼 설정과 include 파일 연동

 로그인에서 사용될 HTML 을 작성해줍니다.

<a id="naver_id_login" style='display:none'></a>

        <button type='button' class='sns_login naver' data-object='naver'><img src='/image/site/index/naver.png' alt='네이버로 로그인' width='200'/></button>

a태그는 해당 페이지에 button이 여러개일수도 있기 때문에 단독으로 액션을 주기위해서 사용하는 태그입니다. 

그리고 include파일에는 네이버아이디 연동 스크립트를 넣어주어야 겠죠?

<script type="text/javascript" src="https://static.nid.naver.com/js/naverLogin_implicit-1.0.2.js" charset="utf-8"></script>

그리고 로그인처리를 해주는 스크립트가 들어있는 파일 (저는 app.js 파일을 생성하였습니다)을 연동해줍니다.

<script type='text/javascript' src="/main/member/app.js?v=<?=time()?>"></script>

3. 로그인 처리 스크립트 및 php 파일 작성 (app.js , ajax,php, sns_proc.php)

 네이버에서 제공받는 정보들로만 회원정보가 입력되지 않는 상황에서 홈페이지에 맞는 정보를 수집하려면 어떻게 해야할까요?

예를 들어 네이버에서는 생일을 12-31 형식으로 제공합니다. 

하지만 홈페이지에서 필요한 생일은 991231 이렇게 6자리 형식이라면

ajax.php 에서 업데이트할때 넣지 않고 update 파일로 연결해놓은 url로 이동합니다.

거기서 추가적으로 입력받을수 있는 폼을 생성하여 정보를 수집하면 되겠습니다~!