네이버 아이디로 로그인(네아로) 연동법 + 커스텀 이미지로 버튼 만드는법

카톡, 페북 로그인 연동과는 다르게 네이버 아이디로 로그인(이하 네아로)은 

요청을 보내는 파일과 해당 요청을 통해 값을 받는 콜백 파일로 반드시 구성해주어야 한다.

카톡은 콜백 페이지가 있다고 해도 강제성을 띄진 않는데, 네이버는 콜백에서만 값이 받아진다.

카톡과 페북은 해당 로그인을 하는 페이지에서 값을 받아 hidden input 박스에 값을 넣어 form submit을 해주었다면,

네이버는 해당 로그인 페이지(로그인페이지A) -> 네이버 팝업 호출 -> 콜백페이지(B)인 별도의 프로세스를 태움(팝업형태로) -> 콜백페이지(B)에서 값을 부모페이지(로그인페이지A)로 전달 (opener.메소드명~~)로 전달 -> 콜백페이지(B) 에서 self.close(); 하여 팝업창 종료.

하는 방식으로 로그인페이지A에서 값을 hidden input 박스에 넣어 form submit 해주면 된다.

새로운 콜백페이지를 만드는것은 컨트롤러, 서비스 단을 새롭게 따줘야하기때문에 이보다 더 효율적인 방법을 찾았지만, 상단의 방식이 현재로서는 최선의 방식인것 같다.

---------------------------------------------------------------------------------------------------------------

(추가)

이번엔 네아로 버튼을 내가 만든 이미지 (커스텀 이미지)로 바꾸는 방법이다.

1) naverLogin_implicit-1.0.3.js 파일을 다운받는다. 

2) 해당 js 파일을 원하는 위치에 저장한 후, init_naver_id_login() 메소드에 가서, 하단 내용을 추가

else if (this.button_type == 10) { //네이버 회원가입(인증)_커스텀 이미지로 버튼을 만들기 위해 추가 naver_id_login_contents="<a href='"+naver_id_login_url+"' "+naver_id_popup_option+" id='naver_id_login_anchor'><img src='이미지소스' border='0' title='네이버 로그인'></a> "; }

3) this.button_type 은 임의대로 고쳐서 분기를 원하는 대로 태울 수 있는데, 그것은 init_naver_id_login() 메소드가 호출되는 부분에 보면 임의로 내가 원하는 값으로 넣어줄 수 있다. 

이 방법을 통해서 페이지별로 원하는 이미지로 각 각 다르게 줄 수 있다.

naver_id_login.setButton("white", 10,40);