Kakao Login API_진짜 최종
헤이베이지 HeyBeige
·2020. 8. 9. 14:54
Kakao Developers
카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.
developers.kakao.com
1. kakao developers에서 애플리케이션을 만들고 앱 키를 부여받는다.
->이 앱키를 이용하여 토큰을 얻을 수 있다.
2. 카카오 로그인 항목에서 [Redirect URI]에서 에서 토큰을 사용할 사이트 주소를 추가&수정해준다.
(ex->http://localhost:8080)
3. kakao API를 이용해서 사용자 정보를 가져올 항목에 대해 [카카오 로그인-동의 항목]에서 권한 동의를 체크해준다.
<code>
|
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
|
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=ege"/>
<meta nmae="viewport" content="user-scalable=no,inital-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,width=device-width">
<title>:: Custom Login Demo - Kakao JavaScript SDK ::</title>
<script type="text/javascript" src="https://developers.kakao.com/sdk/js/kakao.min.js"></script>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
// @details 카카오톡 Developer API 사이트에서 발급받은 JavaScript Key
Kakao.init( "발급받은 JavaScript Key" );
// @breif 카카오 로그인 버튼을 생성합니다.
Kakao.Auth.createLoginButton({
container : "#kakao-login-btn"
, success : function( authObj ) {
// console.log( authObj );
Kakao.API.request({
url : "/v2/user/me" // v1에서 v2로 업데이트 되었음
, success : function( res ) {
// console.log( res );
// @breif 아이디
document.getElementById( "kakaoIdentity" ).innerHTML = res.id;
// @breif 이메일
document.getElementById( "kakaoEmail" ).innerHTML = res.kaccount_email;
// @breif 닉네임
document.getElementById( "kakaoNickName" ).innerHTML = res.properties.nickname;
// @breif 프로필 이미지
document.getElementById( "kakaoProfileImg" ).src = res.properties.profile_image;
// @breif 썸네일 이미지
document.getElementById( "kakaoThumbnailImg" ).src = res.properties.thumbnail_image;
}, fail : function( error ) {
alert( JSON.stringify( error ) );
}
});
}
, fail : function( error ) {
alert( JSON.stringify( error ));
}
});
});
</script>
</head>
<body>
<div>카카오 아이디 : <span id="kakaoIdentity"></span></div>
<div>카카오 이메일: <span id="kakaoEmail"></span></div>
<div>닉네임 : <span id="kakaoNickName"></span></div>
<div>프로필 이미지 : <img id="kakaoProfileImg" src=""/></div>
<div>썸네일 이미지 : <img id="kakaoThumbnailImg" src=""/></div>
<br/>
<a id="kakao-login-btn"></a>
</body>
</html>
|
cs |
<실행 결과>
'개발 일지 > API' 카테고리의 다른 글
| Kakao Login API(2) (0) | 2020.08.02 |
|---|---|
| Kakao Login API (0) | 2020.07.31 |
