[ API ] 소셜 로그인 연동 API - Naver

네이버의 로그인 연동 서비스를 이용해 볼 것이다.

네이버 디벨로퍼

위 사이트에 들어가 회원가입을 하고 로그인을 해줍니다.

그 후, 어플리케이션 등록에 들어가 어플리케이션 정보를 등록하여줍니다.

등록 후, 어플리케이션 목록을 누르면
다음과 같이 어플리케이션 정보가 보이며, Client ID와 Client Secret을 볼 수 있습니다.

그 후, 코드를 작성합니다.

<a id="naver_id_login" onclick=""><img src="images/social/naver.png"></a>

저는 다음과 같이 a 태그에 아이디를 주고 이미지 파일을 넣었습니다.

네이버 로그인 버튼을 만들 때, 네이버에서는 네이버의 아이덴티티가 효과적으로 강조되는 녹색 배경의 버튼을 권장하며 금지 조약이 있습니다.

사용하시기 전,

네이버 로그인 버튼 사용 가이드 및 규제

위 링크를 꼭 한 번 읽어보세요.

[ 코드 작성 ]

https://developers.naver.com/docs/login/web/web.md

다음 개발 가이드 링크를 타고 들어가 작성해줍니다.

var naver_id_login = new naver_id_login("[발급 받은 Client KEY]", "http://127.0.0.1:3000/login.html");
var state = naver_id_login.getUniqState();
// naver_id_login.setButton("white", 5,40);
naver_id_login.setDomain("http://127.0.0.1:3000");
naver_id_login.setState(state);
// naver_id_login.setPopup();
naver_id_login.init_naver_id_login();

naver_id_login.get_naver_userprofile("naverSignInCallback()")
function naverSignInCallback() {
        console.log('id : ' + naver_id_login.getProfileData('id'));
        console.log("profile_image : " +  naver_id_login.getProfileData('profile_image'));
        console.log("email : " +  naver_id_login.getProfileData('email'));
        console.log("name : " + naver_id_login.getProfileData('name'));
        console.log("gender : " + naver_id_login.getProfileData('gender'));
        console.log("age : " + naver_id_login.getProfileData('age'));
        console.log("nickname : " + naver_id_login.getProfileData('nickname'));
        console.log("birthday : " + naver_id_login.getProfileData('birthday'));
}

이제 네이버 버튼을 누르면,

연동이 되고, 동의하고 로그인을 하면,

제 로그인 데이터를 가져옵니다.