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

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




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




# 소스코드

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

                    , success : function( res ) {


                        // console.log( res );


                        // @breif 아이디

                        document.getElementById( "kakaoIdentity" ).innerHTMLres.id;


                        // @breif 닉네임

                        document.getElementById( "kakaoNickName" ).innerHTMLres.properties.nickname;


                        // @breif 프로필 이미지

                        document.getElementById( "kakaoProfileImg" ).srcres.properties.profile_image;


                        // @breif 썸네일 이미지

                        document.getElementById( "kakaoThumbnailImg" ).srcres.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="kakaoNickName"></span></div>

    <div>프로필 이미지 : <img id="kakaoProfileImgsrc=""/></div>

    <div>썸네일 이미지 : <img id="kakaoThumbnailImgsrc=""/></div>

    <br/>

    <a id="kakao-login-btn"></a>

</body>

</html> 




# 출력결과







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

[Kakao] Kakao 계정으로 Login 하기  (0) 2020.01.31
[Kakao] KakaoTalk으로 링크 공유하기 API  (5) 2018.08.31

Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[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
[Kakao] KakaoTalk으로 링크 공유하기 API  (5) 2018.08.31
  1. D
    많은 도움 되었습니다. 썸네일 이미지 저장공간은 개인 웹서버나 ftp 등을 사용하여 올린 후 해당 url을 입력하는 것인가요?
    궁금한 것이, 예시로 올려주신 소스코드 14번째 줄에는 파일명만 되어 있는 것이 궁금합니다.
  2. 추어탕
    혹시 썸네일 이미지 사이즈가 지정되어 있을까요?
  3. 썸네일 아래 버튼을 두가지로 만들때 2개의 다른 링크를 각각의 버튼에 지정할 수 있나요?
    CGV앱에서 카톡으로 공유하면 1. 앱으로 보기 | 2. 웹으로 보기 두가지 버튼이 나오는데
    1. A주소로 이동 | 2. B주소로 이동으로 되는지 궁금합니다!

Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기