deprecated
Javascript SDK V2 부터 팝업방식 로그인은 제공하지 않습니다. 각종 브라우저에서 점차 팝업을 제약하고 사용자 액션없는 스크립트 실행을 제약하므로
Redirect 방식 로그인을 사용 바랍니다.
Javascript SDK로 “카카오 로그인, 카카오링크, 채널추가” 테스트 해볼 수 있는 간단한 예제입니다.
kakao_javascriptSDK_example.html.zip (2.8 KB)
[실행방법]
- kakao_javascriptSDK_example.html.zip 파일을 받아 압축을 푼 후,구동가능한 웹서버 root폴더에 복사합니다.
- developers.kakao.com > 내 애플리케이션 > "애플리케이션 추가하기"로 앱을 생성합니다.
- 내 애플리케이션 > 앱 설정 > 요약 정보 > "JAVASCRIPT 키"를 복사해서 kakao_javascriptSDK_example.html 파일 Kakao.init에 설정합니다.
- http://localhost/kakao_javascriptSDK_example.html 에 접속합니다.
[실행결과]
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="utf-8" />
<title>Kakao JavaScript SDK example</title>
<script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
<script>
var CHANNEL_ID = "_GVVslslk"; // 수정 할 것 : https://center-pf.kakao.com/ 에서 _GVVslslk 형태의 ID 입력
// SDK를 초기화 합니다. 사용할 앱의 JavaScript 키를 설정해 주세요.
Kakao.init('ttttttttttttttttttttttttttt'); //★ 수정 할 것 : 내 애플리케이션>앱 설정>앱 키 : JAVASCRIPT KEY 입력하세요
// SDK 초기화 여부를 판단합니다.
console.log(Kakao.isInitialized());
</script>
<script type="text/javascript">
function loginWithKakao() {
Kakao.Auth.login({
success: function (authObj) {
alert("login :" + JSON.stringify(authObj));
//★ 추가 할 것 : 로그인 성공 후 처리
},
fail: function (err) {
alert(JSON.stringify(err))
},
})
}
function logoutWithKakao() {
if (!Kakao.Auth.getAccessToken()) {
console.log('Not logged in.');
return;
}
console.log(Kakao.Auth.getAccessToken()); //before Logout
Kakao.Auth.logout(function () {
alert("logout");
//★ 추가 할 것 : 로그아웃 성공 후 처리
});
}
function unlinkWithKakao() {
Kakao.API.request({
url: '/v1/user/unlink',
success: function (response) {
alert("unlink :" + JSON.stringify(response));
},
fail: function (error) {
console.log(error);
}
});
}
function profileWithKakao() {
Kakao.API.request({
url: '/v2/user/me',
success: function (response) {
console.log(response);
document.getElementById("userid").innerText = response.id;
document.getElementById("nickname").innerText = response.kakao_account.profile.nickname;
document.getElementById("thumbnail_image").src = response.properties.thumbnail_image;
},
fail: function (error) {
console.log(error);
}
});
}
function btn_link_send() {
Kakao.Link.createDefaultButton({
container: '#btn-link-send',
objectType: 'feed',
content: {
title: '디저트 사진',
description: '아메리카노, 빵, 케익',
imageUrl:
'http://mud-kage.kakao.co.kr/dn/NTmhS/btqfEUdFAUf/FjKzkZsnoeE4o19klTOVI1/openlink_640x640s.jpg',
link: {
mobileWebUrl: 'https://developers.kakao.com',
androidExecParams: 'test',
},
},
social: {
likeCount: 10,
commentCount: 20,
sharedCount: 30,
},
buttons: [
{
title: '웹으로 이동',
link: {
mobileWebUrl: 'https://developers.kakao.com',
},
},
{
title: '앱으로 이동',
link: {
mobileWebUrl: 'https://developers.kakao.com',
},
},
]
});
}
function btn_link_scrap(requestUrl) {
Kakao.Link.createScrapButton({
container: '#btn-link-scrap',
requestUrl: requestUrl
});
}
function btn_link_template(templateId) {
Kakao.Link.createCustomButton({
container: '#btn-link-template',
templateId: templateId,
templateArgs: {
'title': '제목 영역입니다.',
'description': '설명 영역입니다.'
}
});
}
function btn_story_share(url, text) {
Kakao.Story.createShareButton({
container: '#btn-story-share',
url: url,
text: text
});
}
function btn_channel_added() {
Kakao.Channel.createAddChannelButton({
container: '#btn-channel-added',
channelPublicId: CHANNEL_ID
});
}
function btn_channel_chat() {
Kakao.Channel.createChatButton({
container: '#btn-channel-chat',
channelPublicId: CHANNEL_ID
});
}
</script>
</head>
<body>
<table border="1">
<tr>
<td>Login (PopUp)</td>
<td>
<a id="custom-login-btn" href="javascript:loginWithKakao()">
<img src="//k.kakaocdn.net/14/dn/btqCn0WEmI3/nijroPfbpCa4at5EIsjyf0/o.jpg" width="222" />
</a>
</td>
<td>
<pre>
* KOE004 : "내 애플리케이션>카카오 로그인"에서 카카오 로그인 기능을 활성화합니다.
* "내 애플리케이션>제품 설정>카카오 로그인>동의항목"에서 "프로필 정보(닉네임/프로필 사진)"를 필수 동의로 변경합니다.
* 도메인 추가 : 테스트용 웹서버 도메인, 메시지에 사용할 도메인
ex) http://localhost, https://devtalk.kakao.com
</pre>
</td>
</tr>
<tr>
<td>Logout</td>
<td>
<Button onclick="javascript:logoutWithKakao()">Logout</Button>
</td>
</tr>
<tr>
<td>Unlink</td>
<td>
<Button onclick="javascript:unlinkWithKakao()">Unlink</Button>
</td>
</tr>
<tr>
<td>Profile</td>
<td>
<Button onclick="javascript:profileWithKakao()">Profile</Button>
<p id="userid"></p>
<p id="nickname"></p>
<img id="thumbnail_image" />
</td>
</tr>
<tr>
<td>Kakao Link</td>
<td>
<p id="btn-link-send"><button class="btn btn-primary">기본 메세지 보내기</button></p>
<script>btn_link_send();</script>
<p id="btn-link-scrap"><button class="btn btn-primary">스크랩 메세지 보내기</button></p>
<script>btn_link_scrap('https://devtalk.kakao.com');</script>
<p id="btn-link-template"><button class="btn btn-primary">템플릿 메세지 보내기</button></p>
<script>btn_link_template(41666);</script>
</td>
<td>
<pre>
* 템플릿 메세지 보내기는 https://developers.kakao.com/tool/template-builder/app 에서 메시지 템플릿 등록
</pre>
</td>
</tr>
<tr>
<td>Kakao Story</td>
<td>
<p id="btn-story-share"></p>
<script>btn_story_share('https://devtalk.kakao.com', '카카오 데브톡');</script>
</td>
</tr>
<tr>
<td>KakaoTalk Channel</td>
<td>
<p id="btn-channel-added"></p>
<script>btn_channel_added();</script>
<p id="btn-channel-chat"></p>
<script>btn_channel_chat();</script>
</td>
<td>
<pre>
* https://business.kakao.com/info/kakaotalkchannel 에서 채널 생성하고 CHANNEL_ID 설정
</pre>
</td>
</tr>
</table>
</body>
</html>
로그인에 관한 가이드 : https://developers.kakao.com/docs/latest/ko/kakaologin/js
카카오톡 공유 가이드 : https://developers.kakao.com/docs/latest/ko/message/js-link
카카오스토리 가이드 : https://developers.kakao.com/docs/latest/ko/kakaostory/js
카카오톡채널 가이드 : https://developers.kakao.com/docs/latest/ko/kakaotalk-channel/js