MintState WebLog

네아로 (네이버 아이디로 로그인) PHP 연동 본문

Develop/PHP

네아로 (네이버 아이디로 로그인) PHP 연동

MintState 2018. 6. 28. 20:11


홈페이지에 네이버 로그인(네아로)를 연동하는 방법입니다.

하나 하나 따라 하시면 성공하실 수 있을 것입니다.


1. 네이버 API 신청
우선 네이버 계발자 페이지에서 새로운 애플리케이션 등록 하셔야 합니다.

우선 애플리케이션 이름을 적으시고
사용 API에서 네아로 (네이버 아이디로 로그인) 선택하십시오.
필요하신 권한을 선택하시고 아래 로그인 오픈 API 서비스 환경에서 PC웹을 선택하여 주십시오.
서비스 URL 연동하시고자 하는 홈페이지 URL을 적어 주시고 아래 콜백 주소에(Callback URL) 임의의 주소를 적어 주시면 됩니다.

정확히 입력 하셨으면 Client ID와 Client Secret를 확인 할 수 있습니다.


2. 로그인 버튼
이제 로그인 버튼을 달아 보겠습니다.

버튼에 링크를 걸어 주시면 됩니다. 

<?php
session_start();
// NAVER LOGIN
define('NAVER_CLIENT_ID', '클라언트 아이디');
define('NAVER_CLIENT_SECRET', '클아이언트 시크릿');
define('NAVER_CALLBACK_URL', 'http://yesyo.com/naver_callback.php');

// 네이버 로그인 접근토큰 요청 예제
$naver_state = md5(microtime() . mt_rand());
$_SESSION['naver_state'] = $naver_state;
$naver_apiURL = "https://nid.naver.com/oauth2.0/authorize?response_type=code&client_id=".NAVER_CLIENT_ID."&redirect_uri=".urlencode(NAVER_CALLBACK_URL)."&state=".$naver_state; ?> <a href="<?=$naver_apiURL;?>"><img src="sns_naver.png"></a>

$naver_state 부분은 callback을 받았을 때 검증하기 위한 값입니다. 
네이버에서 임으로 넘겨 받는 값이 이것 밖에 없기 때문에 적절히 임의의 변수를 사용하여 응용하시면 됩니다.

또한 경우에 따라선 팝업으로 네이버 로그인을 호출 하시면 됩니다. PC일 경우는 팝업으로 모바일 경우에는 링크로 걸어 주시면 좋을 것 같네요. 


3. 콜백 받기
위의 로그인 버튼을 클릭하면 네이버 로그인페이지가 뜨고 로그인 하면 동의 페이지가 뜹니다. 동의 하기를 누르시면 위에서 설정한 CALLBACK URL로 아래와 같이 code 값과 state가 넘어 옵니다.
naver_callback.php?code=FVF6bIMP77jylRr4&state=514474879f63ecf802c1fe9836ba7b74

state 값으로 검증하고 code값으로 토큰값을 가져와 네이버 회원 정보를 요청하시면 됩니다.

<?php
session_start();
// NAVER LOGIN
define('NAVER_CLIENT_ID', '클라언트 아이디');
define('NAVER_CLIENT_SECRET', '클아이언트 시크릿');
define('NAVER_CALLBACK_URL', 'http://yesyo.com/naver_callback.php');

if ($_SESSION['naver_state'] != $_GET['state']) {
	// 오류가 발생하였습니다. 잘못된 경로로 접근 하신것 같습니다.
}

$naver_curl = "https://nid.naver.com/oauth2.0/token?grant_type=authorization_code&client_id=".NAVER_CLIENT_ID."&client_secret=".NAVER_CLIENT_SECRET."&redirect_uri=".urlencode(NAVER_CALLBACK_URL)."&code=".$_GET['code']."&state=".$_GET['state'];

// 토큰값 가져오기
$is_post = false;
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $naver_curl);
curl_setopt($ch, CURLOPT_POST, $is_post);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$response = curl_exec ($ch);
$status_code = curl_getinfo($ch, CURLINFO_HTTP_CODE);
curl_close ($ch);
if($status_code == 200) {
	$responseArr = json_decode($response, true);

	$_SESSION['naver_access_token'] = $responseArr['access_token'];
	$_SESSION['naver_refresh_token'] = $responseArr['refresh_token'];

	// 토큰값으로 네이버 회원정보 가져오기
	$me_headers = array(
		'Content-Type: application/json',
		sprintf('Authorization: Bearer %s', $responseArr['access_token'])
	);
	$me_is_post = false;
	$me_ch = curl_init();
	curl_setopt($me_ch, CURLOPT_URL, "https://openapi.naver.com/v1/nid/me");
	curl_setopt($me_ch, CURLOPT_POST, $me_is_post);
	curl_setopt($me_ch, CURLOPT_HTTPHEADER, $me_headers);
	curl_setopt($me_ch, CURLOPT_RETURNTRANSFER, true);
	$me_response = curl_exec ($me_ch);
	$me_status_code = curl_getinfo($me_ch, CURLINFO_HTTP_CODE);
	curl_close ($me_ch);

	$me_responseArr = json_decode($me_response, true);

	if ($me_responseArr['response']['id']) {
		// 회원아이디(naver_ 접두사에 네이버 아이디를 붙여줌)
		$mb_uid = 'naver_'.$me_responseArr['response']['id'];
		// 회원가입 DB에서 회원이 있으면(이미 가입되어 있다면) 토큰을 업데이트 하고 로그인함
		if (회원정보가 있다면) {
			// 멤버 DB에 토큰값 업데이트 $responseArr['access_token']
			// 로그인
		}
		// 회원정보가 없다면 회원가입
		else {
			// 회원아이디 $mb_uid
			$mb_nickname = $me_responseArr['response']['nickname']; // 닉네임
			$mb_email = $me_responseArr['response']['email']; // 이메일
			$mb_gender = $me_responseArr['response']['gender']; // 성별 F: 여성, M: 남성, U: 확인불가
			$mb_age = $me_responseArr['response']['age']; // 연령대
			$mb_birthday = $me_responseArr['response']['birthday']; // 생일(MM-DD 형식)
			$mb_profile_image = $me_responseArr['response']['profile_image']; // 프로필 이미지
			
			// 멤버 DB에 토큰과 회원정보를 넣고 로그인
		}

	} else {
		// 회원정보를 가져오지 못했습니다.
	}

} else {
	// 토큰값을 가져오지 못했습니다.
}


4. 회원탈퇴(접근 토큰 삭제)

회원 탈퇴시 네이버 토큰을 삭제해 주시는것이 좋습니다.
네이버->내정보->보안설정->외부 사이트 연결에 접속하시면 연결된 앱을 보실 수 있습니다.
탈퇴 하였는데도 이곳에 자신의 사이트가 보이면 안되겠죠.
접근 토큰 삭제는 여기에서 사이트(앱)을 삭제하는 것입니다.

<?php
// NAVER LOGIN
define('NAVER_CLIENT_ID', '클라언트 아이디');
define('NAVER_CLIENT_SECRET', '클아이언트 시크릿');

// 네이버 접근 토큰 삭제
$naver_curl = "https://nid.naver.com/oauth2.0/token?grant_type=delete&client_id=".NAVER_CLIENT_ID."&client_secret=".NAVER_CLIENT_SECRET."&access_token=".urlencode($mb['mb_sns_token'])."&service_provider=NAVER";
$is_post = false;
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $naver_curl);
curl_setopt($ch, CURLOPT_POST, $is_post);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$response = curl_exec ($ch);
$status_code = curl_getinfo($ch, CURLINFO_HTTP_CODE);
curl_close ($ch);
if($status_code == 200) {
	$responseArr = json_decode($response, true);

	// 멤버 DB에서 회원을 탈퇴해주고 로그아웃(세션, 쿠키 삭제)
	if ($responseArr['result'] != 'success') {
		// 오류가 발생하였습니다. 네이버 내정보->보안설정->외부 사이트 연결에서 해당앱을 삭제하여 주십시오
	}
} 
else {
	// 오류가 발생하였습니다. 네이버 내정보->보안설정->외부 사이트 연결에서 해당앱을 삭제하여 주십시오.
}


주석을 달아 놓았으니 해당 부분은 상황에 맞게 수정하셔서 쓰시면 됩니다.

요즘 국내 사이트에는 네이버, 페이스북, 카카오, 구글, 트위터 순위로 외부로그인을 많이 쓰는것 같네요.



참고 : 네이버 아이디로 로그인 API 명세(https://developers.naver.com/docs/login/api/)

Comments