[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  (0) 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  (0) 2018.08.31

Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기