Study/API사용법

Kakao Login/Register 사용법

ABCD 2023. 3. 10.

구현 코드

//카카오로그인
function kakaoLogin() {
	//로그인 요청(회원가입)
	Kakao.Auth.login({
		success: function (response) {
			//회원 정보 가져오기
			Kakao.API.request({
				url: '/v2/user/me',
				success: function (response) {
					$.ajax({
						url:'/user/kakaoLogin',
						type: 'post',
						data: {
							'user_name' : response.properties.nickname,
							'user_id' : response.id,
							'user_birthday' : response.kakao_account.birthday
						},
						success: function(result){
							console.log(result);
							window.location.href='/';
						}
					});
				},
				fail: function (error) {
					console.log(error);
				},
			})
			.then(function (response) {
				console.log(response);
			})
		},
		fail: function (error) {
			console.log(error);
		},
	})
}

//로그아웃
function Logout() {
	if (!Kakao.Auth.getAccessToken()) {
		alert('로그아웃 하였습니다.');
		window.location.href='/user/logout';
	}
  Kakao.Auth.logout(function (response) {
		alert('로그아웃 하였습니다.');
		window.location.href = '/user/logout';
	});
};

//카카오연결 끊기 및 회원 탈퇴
$("#delete").click(function(){
      if(confirm("정말 삭제하시겠습니까?")){
         Kakao.API.request({
            url: '/v1/user/unlink',
          })
         $("#register").attr({
         'method' : 'post',
         'action' : '/user/delete'
         });
         $("#register").submit();
      }
   });

Setting

SDK 다운링크에서 다운

SDK를 초기화하는 과정

Code

<script src="https://t1.kakaocdn.net/kakao_js_sdk/2.1.0/kakao.min.js" integrity="sha384-dpu02ieKC6NUeKFoGMOKz6102CLEWi9+5RQjWSV0ikYSFFd8M3Wp2reIcquJOemx" crossorigin="anonymous"></script>
<script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
<script>
			Kakao.init('${key}'); //발급받은 키 중 javascript키를 사용해준다.
			console.log(Kakao.isInitialized()); // sdk초기화여부판단
</script>

링크
Kakao Developers
이 문서는 Kakao SDK for JavaScript(이하 JavaScript SDK) 다운로드 링크와 버전별 레퍼런스를 제공합니다. 카카오 플랫폼 서비스를 이용하여 JavaScript 웹 페이지를 개발하기 위해서는 아래의 JavaScript SDK가 필요합니다. 복사 버튼으로 태그 전체 또는 Intergrity 값만 복사할 수 있습니다. 최신 버전의 JavaScript SDK를 다운로드 받으려면 아래 표에서 항목별 버전 을 클릭합니다.
https://developers.kakao.com/docs/latest/ko/sdk-download/js

logIn

Kakao.Auth.login() 메서드를 사용

{ }의 속상값은 parameter를 JSON형식으로 전달하는 것

속성값
```
function kakaoLogin(){
	Kakao.Auth.login({
		'속성값들 삽입'
	});
};
```
- scope(String) : 사용자가 동의하지 않은 사항에 대한 추가요청(기존에 동의항목에 있어야함)
```
function kakaoLogin(){
	Kakao.Auth.login({
		redirectUri: '',
		scope: 'account_email, gender'
	});
};
```
- throughTalk(Boolean) : 간편 로그인 사용 여부(default → true)
- prompts(String) : 카카오톡에서 자동 로그인, 기존 로그인 여부와 상관없이 로그인 요청
  - login → 무조건 로그인상황 진행(비밀번호, 패스워드 입력)
  - none → 인가 코드 발급을 요청할 때 사용(자동 로그인)
```
function kakaoLogin(){
	Kakao.Auth.login({
		redirectUri: '',
		prompts: 'none'
	});
};
```
- serviceTerms(String) : 약관 선택해 동의 받기 요청시 사용
  - 카카오 싱크 전용
- state(String) : Cross-Site Request Forgery 공격으로 부터 보호하기 위해 사용
- nonce(String) : OpenID Connect를 통해 ID토큰을 함께 발급받을 경우 공격방지하기 위해 사용

Kakao.Auth.authorize() → 현재창에서 로그인

Token

토큰의 종류

액세스 토큰(Access token)
→ 사용자 정보 가져오기를 호출해 회원가입 및 로그인에 필요한 사용자 정보를 요청할 수 있음
→ 서비스 클라이언트로 전달해 토큰 할당시 서비스 클라이언트에서도 SDK를 통한 API요청에 사용 가능

리프레시 토큰(Refresh token)

ID 토큰(ID token)
→ OpenID Connect 사용시에만 발급

토큰 할당하기

setAccessToken()

Kakao.Auth.setAccessToken('${ACCESS_TOKEN}');

LogOut

Kakao.Auth.logout( )메서드를 사용

함수를 호출하면 사용자의 엑세스 토큰이 만료됨

Kakao.Auth.logout( ) 은 Promise를 반환

서비스의 로그아웃은 직접 구현해야 함

토큰을 만료시키지만, 카카오계정의 로그아웃이나 서비스의 로그아웃에 영향을 주지 않음

function kakaoLogout(){
	Kakao.Auth.logout()
		.then(function(response){ //정상 응답시 처리
			console.log(Kakao.Auth.getAccessToken()); // 출력결과 : null
		)};
		.catch(function(error){ //오류 발생시 처리
			console.log('Not logged in');
		)};
};

Unlink

Kakao.API.request( )메서드를 사용

{ }의 속상값은 parameter를 JSON형식으로 전달하는 것

url → /v1/user/unlink

Kakao.API.request( )는 Promise를 반환

function KakaoDelete(){
	Kakao.API.request({
		url: '/v1/user/unlink',
	});
	.then(function(response){ //정상 응답시 처리
		console.log(response);
	};
	.catch(function(error){ //오류 발생시 처리
		console.log(error);
	};
}

사용자 정보 가져오기

Kakao.API.request( )메서드를 사용

{ }의 속상값은 parameter를 JSON형식으로 전달하는 것

url → /v2/user/me

data(Object) → API에 전달할 parameter
- property_keys ( String[ ] )
  - 가져오려는 데이터명

Kakao.API.request({
	url: '/v2/user/me',
});
	.then(function(response){ //정상 응답시 처리
		console.log(response);
	};
	.catch(function(error){ //오류 발생시 처리
		console.log(error);
	};

Kakao.API.request({
	url: '/v2/user/me',
	data: { //가져오려는 데이터 선택
		property_keys: ['kakao_account.email', 'kakao_account.gender'],
});
	.then(function(response){ //정상 응답시 처리
		console.log(response);
	};
	.catch(function(error){ //오류 발생시 처리
		console.log(error);
	};

사용자 정보 저장하기

Kakao.API.request( )메서드를 사용

{ }의 속상값은 parameter를 JSON형식으로 전달하는 것

url → /v1/user/update_profile

data(Object) → API에 전달할 parameter
- properties( Object )
  - 사용자 프로퍼티에 정보를 추가
  - ex) {’${CUSTOM_PROPERTY_KEY}’ : ‘${CUSTOM_PROPERTY_VALUE}’}

배송지 가져오기

Kakao.API.request( )메서드를 사용

{ }의 속상값은 parameter를 JSON형식으로 전달하는 것

url → /v1/user/shipping_address

data(Object) → API에 전달할 parameter
- address_id ( NUMBER )
  - 배송지 정보가 많은 경우, 특정 배송지 정보만 얻고 싶을 때 배송지 ID 지정
- from_updated_at ( NUMBER )
  - 여러 페이지에 걸쳐 응답이 제공될 때, 기준이 되는 배송지 updated_at 시각
  - 해당 시각(미포함) 이전에 수정된 배송지부터 조회
  - 이전 페이지의 마지막 배송지의 updated_at을 다음 페이지 input으로 사용
  - 값을 0으로 전달하면 처음부터 조회
- page_size ( NUMBER )
  - 2이상, 한 페이지에 포함할 배송지 개수(default : 10)

Kakao.API.request({
	url: '/v1/user/shipping_address',
});
	.then(function(response){ //정상 응답시 처리
		console.log(response);
	};
	.catch(function(error){ //오류 발생시 처리
		console.log(error);
	};

Kakao.API.request({
	url: '/v1/user/shipping_address',
	data: { //특정 배송지 정보만 요청
		address_id : ${ADDRESS_ID),
	}
});
	.then(function(response){ //정상 응답시 처리
		console.log(response);
	};
	.catch(function(error){ //오류 발생시 처리
		console.log(error);
	};

동의내역 확인하기

Kakao.API.request( )메서드를 사용

{ }의 속상값은 parameter를 JSON형식으로 전달하는 것

url → /v2/user/scopes

data(Object) → API에 전달할 parameter
- scopes( String[] )
  - 특정 동의 항목에 대한 상세 정보만 불러오려는 경우 사용하는 동의 항목의 ID목록
  - 동의항목 ID는 [내 애플리케이션] → [카카오 로그인] → [동의 항목] 참고

Kakao.API.request({
	url: '/v2/user/scopes',
});
	.then(function(response){ //정상 응답시 처리
		console.log(response);
	};
	.catch(function(error){ //오류 발생시 처리
		console.log(error);
	};

Kakao.API.request({
	url: '/v2/user/scopes',
	data: { //특정 항목만 확인하기
		scopes: ['account_email', 'gender'],
	}
});
	.then(function(response){ //정상 응답시 처리
		console.log(response);
	};
	.catch(function(error){ //오류 발생시 처리
		console.log(error);
	};

동의 철회하기

Kakao.API.request( )메서드를 사용

{ }의 속상값은 parameter를 JSON형식으로 전달하는 것

url → /v2/user/revoke/scopes

data(Object) → API에 전달할 parameter
- scopes( String[] )
  - 동의를 철회할 항목의 ID목록
  - 동의 내역 확인하기 API응답에서 true인 항목만 철회 가능
  - 동의항목 ID는 [내 애플리케이션] → [카카오 로그인] → [동의 항목] 참고

Kakao.API.request({
	url: '/v2/user/revokde/scopes',
	data: { //특정 항목 선택
		scopes: ['account_email', 'gender'],
	}
});
	.then(function(response){ //정상 응답시 처리
		console.log(response);
	};
	.catch(function(error){ //오류 발생시 처리
		console.log(error);
	};

동의한 약관 확인하기

카카오 싱크 전용

Kakao.API.request( )메서드를 사용

{ }의 속상값은 parameter를 JSON형식으로 전달하는 것

url → /v1/user/service/terms

data(Object) → API에 전달할 parameter
- extra( String )
  - 추가 동작을 요청하는 parameter

Kakao.API.request({
	url: '/v1/user/service/terms',
});
	.then(function(response){ //정상 응답시 처리
		console.log(response);
	};
	.catch(function(error){ //오류 발생시 처리
		console.log(error);
	};

Uploaded by N2T

728x90

Kakao Login/Register 사용법

Setting

logIn

Token

LogOut

Unlink

사용자 정보 가져오기

사용자 정보 저장하기

배송지 가져오기

동의내역 확인하기

동의 철회하기

동의한 약관 확인하기

댓글

💲 추천 글

티스토리툴바