'API/Kakao' 카테고리의 글 목록

'API/Kakao'에 해당되는 글 2건

[Kakao] Kakao 계정으로 Login 하기[Kakao] Kakao 계정으로 Login 하기

Posted at 2020. 1. 31. 11:16 | Posted in API/Kakao

■ 카카오 계정으로 로그인 하기

# 소스코드

<html>

<head>

<title>:: Custom Login Demo - Kakao JavaScript SDK ::</title>

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 : "/v1/user/me"

, success : function( res ) {

// console.log( res );

// @breif 아이디

document.getElementById( "kakaoIdentity" ).innerHTML = res.id;

// @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>

<br/>

</body>

</html>

# 출력결과

저작자표시

'API > Kakao' 카테고리의 다른 글

[Kakao] KakaoTalk으로 링크 공유하기 API (5)	2018.08.31

[Kakao] KakaoTalk으로 링크 공유하기 API[Kakao] KakaoTalk으로 링크 공유하기 API

Posted at 2018. 8. 31. 01:17 | Posted in API/Kakao

■ 카카오 디벨로퍼 애플리케이션 생성

01. 카카오 디벨로퍼(https://developers.kakao.com/) 사이트에 접속한다.

카카오 디벨로퍼에 가입하지 않은 사람이라면 우선 여기서 가입을 하고 다음 작업을 진행한다.

02. 이제 내 애플리케이션(https://developers.kakao.com/apps) 페이지로 이동해서 앱 만들기 버튼을 클릭해 주자.

03. 제작할 앱의 아이콘과 이름을 작성하고, 앱 만들기 버튼을 클릭하면 앱이 생성된다.

04. 앱이 다 만들어지면 자바스크립트 키를 발급받게 되는데 이 키를 잘 기억해 두자.

05. 마지막으로 생성한 애플리케이션에 사이트 도메인을 입력한다.

① 위에서 생성한 애플리케이션을 선택한다.

② 좌측 카테고리의 설정 → 일반을 선택한다.

③ 사이트 도메인부분에 사용할 사이트 도메인을 입력한다.

(해당 포스팅은 http://localhost 를 사용하였다.)

④ 저장 버튼을 눌러 설정을 저장하면 사용할 준비가 완료되었다.

■ 카카오 톡 공유 템플릿 제작하기

#01. 카카오톡 피드 템플릿 제작

# 소스코드

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>:: 카카오톡 공유하기 ::</title>
<script type="text/JavaScript" src="https://developers.kakao.com/sdk/js/kakao.min.js"></script>
<script type="text/javascript">
    function shareKakaotalk() {
       Kakao.init("XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX");      // 사용할 앱의 JavaScript 키를 설정
       Kakao.Link.sendDefault({
              objectType:"feed"
           , content : {
                  title:"WARCRAFT3 THE REIGN OF CHAOS"   // 콘텐츠의 타이틀
               , description:"너흰아직 준비가 안되었다!"   // 콘텐츠 상세설명
               , imageUrl:"illidan_stormrage.jpg"   // 썸네일 이미지
               , link : {
                      mobileWebUrl:"http://magic.wickedmiso.com/"   // 모바일 카카오톡에서 사용하는 웹 링크 URL
                   , webUrl:"http://magic.wickedmiso.com/" // PC버전 카카오톡에서 사용하는 웹 링크 URL
               }
           }
           , social : {
                  likeCount:0       // LIKE 개수
                , commentCount:0    // 댓글 개수
                , sharedCount:0     // 공유 회수
           }
           , buttons : [
               {
                      title:"게시글 확인"    // 버튼 제목
                   , link : {
                        mobileWebUrl:"http://magic.wickedmiso.com/"   // 모바일 카카오톡에서 사용하는 웹 링크 URL
                      , webUrl:"http://magic.wickedmiso.com/" // PC버전 카카오톡에서 사용하는 웹 링크 URL
                   }
               }
           ]
       });
    }
</script>
</head>
<body>
    <h1>카카오톡 공유하기</h1>
    <input type="button" onClick="shareKakaotalk();" value="KAKOA Talk으로 공유하기"/>
</body>
</html>

# 출력결과

#02. 카카오톡 위치 템플릿 제작

# 소스코드

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>:: 카카오톡 공유하기 ::</title>
<script type="text/JavaScript" src="https://developers.kakao.com/sdk/js/kakao.min.js"></script>
<script type="text/javascript">
    function shareKakaotalk() {
        Kakao.init("XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX");      // 사용할 앱의 JavaScript 키를 설정
        Kakao.Link.sendDefault({
              objectType:"location"
            , address:"노스렌드"    // 공유할 위치의 주소
            , addressTitle:"얼음왕관의 성채"   // 카카오톡 내의 지도 뷰에서 사용되는 타이틀
            , content: {
                  title:"WARCRAFT3 THE FROZEN THRONE"   // 콘텐츠의 타이틀
                , description:"왕위를 계승하는 중입니다. 아버지" // 콘텐츠 상세설명
                , imageUrl:"arthas_menethil.jpg"    // 썸네일 이미지
                , link: {
                      mobileWebUrl:"http://magic.wickedmiso.com/"   // 모바일 카카오톡에서 사용하는 웹 링크 URL
                    , webUrl:"http://magic.wickedmiso.com/" // PC버전 카카오톡에서 사용하는 웹 링크 URL
                }
            }
            , social: {
                  likeCount:0       // LIKE 개수
                , commentCount:0    // 댓글 개수
                , sharedCount:0     // 공유 회수
            }
            , buttons: [
                {
                      title:"버튼 제목" // 버튼 제목
                    , link: {
                          mobileWebUrl:"http://magic.wickedmiso.com/"   // 모바일 카카오톡에서 사용하는 웹 링크 URL
                        , webUrl:"http://magic.wickedmiso.com/" // PC버전 카카오톡에서 사용하는 웹 링크 URL
                    }
                }
            ]
        });
    }
</script>
</head>
<body>
    <h1>카카오톡 공유하기</h1>
    <input type="button" onClick="shareKakaotalk();" value="KAKOA Talk으로 공유하기"/>
</body>
</html>

# 출력결과

저작자표시

'API > Kakao' 카테고리의 다른 글

[Kakao] Kakao 계정으로 Login 하기 (0)	2020.01.31

Prev Next

'API/Kakao'에 해당되는 글 2건

[Kakao] Kakao 계정으로 Login 하기[Kakao] Kakao 계정으로 Login 하기

'API > Kakao' 카테고리의 다른 글

[Kakao] KakaoTalk으로 링크 공유하기 API[Kakao] KakaoTalk으로 링크 공유하기 API

'API > Kakao' 카테고리의 다른 글

CategoryCategory

Recent PostRecent Post

Recent CommentRecent Comment

Recent TrackbackRecent Trackback

Tag CloudTag Cloud

ArchiveArchive

LinkLink

티스토리툴바