카카오 API 사용해보기 2 (로그인)

카카오 로그인 API를 등록했다면 이제 사용해봅시다.

 

 

1. API에서 발급해준 JavaScript 키를 입력해줍니다.

// SDK를 초기화 합니다. 사용할 앱의 JavaScript 키를 설정
Kakao.init('JavaScript 키 입력');

 

 

 

2. 카카오 API 로그인 함수를 호출하여 로그인을 진행합니다.

Kakao.Auth.login({
	//카카오 로그인을 성공했다면
	success : function(authObj) {
	console.log(authObj); // 인증 성공 후 authObj 확인
	Kakao.Auth.setAccessToken(authObj.access_token); // access토큰값 저장
	//페이지 새로고침을 위해 로그인 페이지를 다시 요청
	location.href = 'kakao_login_Test.jsp';
	},//success : function(authObj) 종료
	//실행했다면 Error 내용 표시
	fail : function(err) {
		console.error(err); // 인증 실패 시 에러 처리
	}//fail : function(err) 종료
});

 

 

3. 카카오 로그인한 사용자의 정보를 확인해 봅시다.

Kakao.API.request({
	//현재 카카오 로그인이 되어있는 사용자의 정보를 요청합니다.
	url : '/v2/user/me',
	//사용자 정보를 불러왔다면
	success : function(res) {
		// 이메일, 성별, 닉네임, 프로필이미지
		//카카오 로그인 사용자 이메일 가져오기
		var email = res.kakao_account.email;

		//카카오 로그인 사용자 성별 가져오기
		//var gender = res.kakao_account.gender;

		//카카오 로그인 사용자 닉네임 가져오기
		var profile_nickname = res.kakao_account.profile.nickname;

		//카카오 로그인 사용자 프로필 이미지 가져오기
		var profile_image = res.kakao_account.profile.thumbnail_image_url;

		//카카오 로그인 사용자 생일 가져오기
		//var birthday = res.kakao_account.birthday;

		//카카오 로그인 토큰 확인
		var token = Kakao.Auth.getAccessToken();

		//받아온 닉네임, 프로필이미지, 이메일 로그
		console.log(profile_nickname, profile_image, email);
		document.getElementById('token-result').innerText = 'login 성공, token: '+ token;
		document.getElementById('email').innerText = 'email: '+ email;
		document.getElementById('profile_nickname').innerText = 'profile_nickname: '+ profile_nickname;
		document.getElementById('profile_image').src = profile_image;
		},//success : function(res)종료
		//정보를 불러오지 못했다면 아래 오류를 띄워줍니다.
		fail : function(error) {
			alert('카카오 로그인에 실패했습니다. 관리자에게 문의하세요.'+ JSON.stringify(error));
		}//fail : function(error) 종료
});//Kakao.API.request 종료

 

 

 

4. 카카오 API 로그아웃 함수를 호출하여 로그아웃을 진행해줍니다.

//카카오 토큰이 없다면 로그인한 것이 아니니 바로 반환해줍니다.
if (!Kakao.Auth.getAccessToken()) {
	return;
}
//카카오 로그인 토큰이 있다면
//카카오서버에 로그아웃을 실행하여 토큰을 삭제합니다.
Kakao.Auth.logout(function() {
	console.log('로그아웃 성공');
	//페이지를 다시 불러줍니다.
	location.href = 'kakao_login_Test.jsp';
});//Kakao.Auth.logout(function() 종료