티스토리 뷰

728x90

카카오 로그인 API 간편로그인 연동 - REST API

카카오, 네이버, 구글, 페이스북 등에서 제공하는 간편로그인 기능에서 사용하는 

OAuth2(개방형 표준 프로토콜)을 이용하여 로그인 연동합니다.

※ OAuth2.0 이란?
Open Authorization 2.0 혹은 OAuth2.0은 웹 및 애플리케이션 인증 및 권한부여를 위한 개발형 표준프로토콜입니다. 이프로토콜에서 third-party 애플리케이션이 사용자의 리소스에 접근하기 위한 절차를 정의하고 서비스 제공자의 API를 사용할수 있는 권한을 부여합니다.

참고 : https://guide.ncloud-docs.com/docs/b2bpls-oauth2

 

1. 카카오 개발자센터(kakao Developers) 설정

 

Kakao Developers 

 

Kakao Developers

카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.

developers.kakao.com

 

1-1.  Kakao Developers 접속후 로그인후 내 애플리케이션에서 새로운 애플리케이션을 추가

- 애플리케이션 추가하기에서 앱이름, 사업자명, 카테고리 입력후 애플리케이션을 생성합니다.

- 애플리케이션 생성후 앱키를 확인합니다. (REST API키, JavaScript 키 필요)

kakao developers
kakao developers 접속후 로그인
애플리케이션 추가
새로운 애플리케이션 추가
애플리케이션 정보 입력
정보입력후 애플리케이션 생성
앱키확인
앱키 확인

 

1-2. 플랫폼 등록하기

- 웹사이트에 카카오 로그인 연동을 위해 Web 플랫폼 등록을 선택합니다.

- Web 플랫폼등록에 사이트 도메인 등록합니다.

플랫폼 등록
web 플랫폼 등록
사이트 도메인 등록
사이트 도메인등록

 

1-3. Redirect URI 등록하기

- 카카오 로그인후 토큰값을 이용하여 회원 프로필 정보를 처리할 주소를 입력합니다.

Redirect URI 등록
Redirect URI 등록하기
Redirect URI 등록
Redirect URI 등록하기
리턴 주소 입력
Redirect URI 입력

1-4. 동의항목 설정하기

- 카카오 로그인후 전달 받을 항목을 필수 및 선택동의로 설정합니다.

동의항목 설정
동의항목 설정
필수, 선택동의 등... 선택

1-5. 카카오 로그인 활성화 설정

- 모든 카카오 로그인 설정이 끝났으면 활성화설정에서 ON으로 설정합니다.

활설화 설정
카카오 로그인 활성화 설정

 

2. 카카오 로그인 API 연동 코드작성

카카오 로그인 화면 호출

 

// 웹사이트 자체팝업 오픈후 카카오 로그인화면으로 전환 //
var ka_popup = window.open("/Oauth2/ka_popup.php", "kakao", "location=0,status=0,scrollbars=1,width=480,height=660");
if(!ka_popup || ka_popup.closed || typeof ka_popup.closed=='undefined') {
	alert('브라우저에서 팝업이 차단되어 있습니다. 팝업 활성화 후 다시 시도해 주세요.');
}

// ka_popup.php 팝업 //
<script src="//developers.kakao.com/sdk/js/kakao.min.js"></script>
<script type="text/javascript">
var js_key = {YOUR_JAVASCRIPT_KEY};
var redirectUri = {YOUR_REDIRECTURI};

Kakao.init(js_key);
Kakao.Auth.authorize({
	redirectUri: redirectUri,
    prompts:'login'
});

 

카카오 토큰발급(리턴된 인가 코드를 이용)

 

// 접근 토큰 발급요청 //
$client_id = {YOUR_REST_API_KEY};	// REST API 키
$code = $_GET['code'];				// 인가 코드
$redirectURI	= {YOUR_REDIRECT_URI};	// Redirect URI
$url = "https://kauth.kakao.com/oauth/token?grant_type=authorization_code&client_id=".$client_id."&redirect_uri=".$redirectURI."&code=".$code;
$is_post = false;

$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_POST, $is_post);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$headers = array();
$response = curl_exec ($ch);
$status_code = curl_getinfo($ch, CURLINFO_HTTP_CODE);
curl_close($ch);
if($status_code == 200)
{
    $res = json_decode($response);
    $result = get_object_vars($res);
    $access_token = $result['access_token'];
}

 

카카오 사용자 프로필 조회

 

// 토큰값을 이용한 카카오 회원 프로필조회 //
$client_id	= {YOUR_REST_API_KEY};	// REST API 키
$token		= $access_token;		// 발급받은 토큰값
$header		= "Bearer ".$token;		// Bearer 다음에 공백 추가
$url		= "https://kapi.kakao.com/v2/user/me";
$is_post	= false;

$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_POST, $is_post);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$headers = array();
$headers[] = "Authorization: ".$header;
curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
$response = curl_exec ($ch);
$status_code = curl_getinfo($ch, CURLINFO_HTTP_CODE);
curl_close ($ch);
if($status_code == 200) {
	$res = json_decode($response);
    $kakao_profile = get_object_vars($res);
}

 

필수동의 정보가 없을경우 동의화면으로 이동

 

// 카카오 사용자 프로필정보에 필수 정보가 없을경우 동의화면으로 이동 //
var javascript_key	= {YOUR_JAVASCRIPT_KEY};
var redirectUri		= {YOUR_REDIRECTURI};
var rest_key		= {YOUR_REST_KEY};

<script src="//developers.kakao.com/sdk/js/kakao.min.js"></script>
<script type="text/javascript">
alert("이메일은 필수정보입니다. 정보제공을 동의해주세요.");
Kakao.init(javascript_key);
Kakao.Auth.authorize({
	redirectUri: redirectUri,
    scope: 'account_email,gender'
});
</script>

 

카카오 사용자 프로필 DB 저장

 

사용자 프로필정보 회원테이블에 저장 

728x90

'프로그램개발' 카테고리의 다른 글

[PHP] preg_match(), preg_match_all() 함수  (0) 2024.03.26
[PHP] preg_replae() 함수  (0) 2024.03.25
사이트 주소에 www 강제로 붙이기  (0) 2024.03.21
[Javascript] Location 객체  (0) 2024.03.20
@media print  (0) 2024.03.19
250x250
«   2025/06   »
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30
Total
Today
Yesterday