Skip to content

raccoondev85/cordova-plugin-kakao-sdk

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

31 Commits
src
src
 
 
www
www
 
 
.gitattributes
.gitattributes
 
 
LICENSE
LICENSE
 
 
README.md
README.md
 
 
package.json
package.json
 
 
plugin.xml
plugin.xml
 
 

Repository files navigation

cordova-plugin-kakao-sdk

Kakao Cordova SDK Plugin (카카오 코르도바 SDK 플러그인)

Version is updated to 3.0.0

  • cordova-android compatibility between 6.4.0 and ^7.0.0 fixed
  • android SDK version changed from 1.12.0 to 1.16.0 (Google Play warning: Your app contains a Cross-App Scripting Vulnerability issue fixed)
  • ios SDK version changed from 1.9.0 to 1.11.1
  • new functions added updateScopes(targetScopes: any), checkScopeStatus(targetScopes: any), requestSendMemo(builder: any), addPlusFriend(params: any), chatPlusFriend(params: any), chatPlusFriendUrl(params: any)

*Kakao Official Documents

**Android:

**iOS:

Development Environment and ETC

type version
ionic (Ionic CLI) 3.19.1
cordova (Cordova CLI) 8.0.0
Cordova Platforms Android 7.1.4
Cordova Platforms IOS 4.5.4
Ionic Framework ionic-angular 3.9.2
KakaoCommon.framework(ios) 1.11.1
KakaoLink.framework(ios) 1.11.1
KakaoMessageTemplate.framework(ios) 1.11.1
KakaoOpenSDK.framework(ios) 1.11.1
KakaoPlusFriend.framework(ios) 1.11.1
KakaoS2.framework(ios) 1.11.1
com.kakao.sdk:kakaotalk(android) 1.16.0
com.kakao.sdk:kakaolink(android) 1.16.0
com.kakao.sdk:plusfriend(android) 1.16.0

How to install

install cordova plugin

// KAKAO_APP_KEY: the app key that you got assigned as a native key in the kakao development console
$ cordova plugin add cordova-plugin-kakao-sdk --variable KAKAO_APP_KEY=YOUR_KAKAO_APP_KEY

install wrapper for kakao cordova sdk plugin to interface

$ npm install --save kakao-sdk

then import KakaoCordovaSDK module into app.module.ts

import { KakaoCordovaSDK } from 'kakao-sdk';

@NgModule({
  providers: [
    KakaoCordovaSDK
  ]
})

IONIC 3 DEMO

Environment

type version
cordova-plugin-kakao-sdk 3.0.0
kakao-sdk 3.0.0

Link: https://github.com/raccoondev85/cordova-plugin-kakao-sdk-example

Login

Login Methods

login(loginOptions)

import { KakaoCordovaSDK, AuthTypes } from 'kakao-sdk';

  constructor(public _kakaoCordovaSDK: KakaoCordovaSDK) {
    let loginOptions = {};
    loginOptions['authTypes'] = [
                                  AuthTypes.AuthTypeTalk, 
                                  AuthTypes.AuthTypeStory,
                                  AuthTypes.AuthTypeAccount
                                ];
    
    this._kakaoCordovaSDK.login(loginOptions).then((res) => {
        console.log(res);
      }
    );
  }

There is an optional parameter you can pass in to give users to choose various login ways through: now it is mandatory, if you send with null object, it will be same as default as follows:

options type default iOS Android description
authTypes any[] [AuthTypes.AuthTypeTalk, AuthTypes.AuthTypeStory, AuthTypes.AuthTypeAccount] yes yes Types of Authentication: "AuthTypes.AuthTypeTalk", "AuthTypes.AuthTypeStory", "AuthTypes.AuthTypeAccount", multiple values in this option will show the popup window to choose among the login methods unless one of those apps are not yet installed in the device(except AuthTypeAccount)

Return values are "id", "accessToken", "email", "emailVerified", "nickname", "profileImagePath", "thumbnailImagePath", and etc(basically everthing that SDK gives but it might be slightly different depending on OS, AuthType, or user's setting, for example "profileImagePath" or "thumbnailImagePath" not be given if user doesn't set up, or "email" might not exist if you did not set up as mandatory parameter in the kakao development console )

logout()

  constructor(public _kakaoCordovaSDK: KakaoCordovaSDK) {
    this._kakaoCordovaSDK.logout().then(() => {
        //do your logout proccess for your app
      }
    );
  }

return null

unlinkApp()

Unregister app for your app service.

  constructor(public _kakaoCordovaSDK: KakaoCordovaSDK) {
    this._kakaoCordovaSDK.unlinkApp().then(() => {
        //do your unregister proccess for your app
      }
    );
  }

getAccessToken()

Get current access token.

  constructor(public _kakaoCordovaSDK: KakaoCordovaSDK) {
    this._kakaoCordovaSDK.getAccessToken().then((res) => {
        console.log(res);
      }
    );
  }

it returns the current access token.

requestMe()

Get user's profile info

  constructor(public _kakaoCordovaSDK: KakaoCordovaSDK) {
  this._kakaoCordovaSDK
      .requestMe()
      .then(
        res => {
          console.log(res);
        },
        err => {
        }
      )
      .catch(err => {
      });
  }

checkScopeStatus(targetScopes)

Get required scopes

  constructor(public _kakaoCordovaSDK: KakaoCordovaSDK) {
    let values = {
    targetScopes: ['account_email', 'age_range', 'gender'],
  };

  this._kakaoCordovaSDK
    .checkScopeStatus(values)
    .then(
      res => {
      },
      err => {
      }
    )
    .catch(err => {
    });
  }

Parameter is mandatory, if you send with null object, it will be same as default as follows:

options type default iOS Android description
targetScopes any[] ["account_email", "phone_number", "is_kakaotalk_user","age_range","gender","birthday"] yes yes it checks target scopes, then returns required scopes that user does not yet agreed with

updateScopes(targetScopes)

Update target scopes unless it is agreed, then returns new user's profile info

  constructor(public _kakaoCordovaSDK: KakaoCordovaSDK) {
    let values = {
    targetScopes: ['account_email', 'age_range', 'gender'],
  };

  this._kakaoCordovaSDK
    .updateScopes(values)
    .then(
      res => {
      },
      err => {
      }
    )
    .catch(err => {
    });
  }

Parameter is mandatory, if you send with null object, it will be same as default as follows:

options type default iOS Android description
targetScopes any[] ["account_email", "phone_number", "is_kakaotalk_user","age_range","gender","birthday"] yes yes if target scopes are not yet agreed with, then asks to users to agrees with them, then returns new user's profile info

KakaoTalk

Talk API (for normal developers)

requestSendMemo(builder)

Send templated message to ME (only ME!! not the other friends). You need to set already the template message in the kakao developers' console, then use the template id and other arguments like custom link (names of arguments' keys might be different based on the template settings. just pass them as what you set. In the example, argument keys are "title", "description", and "like". These could be more or less)

  constructor(public _kakaoCordovaSDK: KakaoCordovaSDK) {
    //your template id and arguments
    let customTemplate: KLCustomTemplate = {
      templateId: '9570', 
      arguments: {
        title: 'title for test',
        description: 'description for description',
        like: '5000000',
      }, 
    };
    this._kakaoCordovaSDK
      .requestSendMemo(customTemplate)
      .then(
        res => {
        },
        err => {
        }
      )
      .catch(err => {
      });
  }

PlusFriend

PlusFriend API

addPlusFriend(params)

Opens "Add Plus Friend" in the browser(ios), then opens kakaoTalk in order to add. it requires plus-friend's id.

  constructor(public _kakaoCordovaSDK: KakaoCordovaSDK) {
      // your plus friend id
    let plusFriendTemplate = {
      plusFriendId: '_xcLqmC',
    };
    this._kakaoCordovaSDK
      .addPlusFriend(plusFriendTemplate)
      .then(
        res => {
        },
        err => {
        }
      )
      .catch(err => {
      });
  }

chatPlusFriend(params)

Opens "1:1 chat Plus Friend" in the browser(ios), then open kakaoTalk to chat with. it requires plus-friend's id.

  constructor(public _kakaoCordovaSDK: KakaoCordovaSDK) {
      // your plus friend id
    let plusFriendTemplate = {
      plusFriendId: '_xcLqmC',
    };
    this._kakaoCordovaSDK
      .chatPlusFriend(plusFriendTemplate)
      .then(
        res => {
        },
        err => {
        }
      )
      .catch(err => {
      });
  }

chatPlusFriendUrl(params)

Get plusFriend's URLs it requires plus-friend's id. it returns object as follows:

{
  "addFriendUrl":"https://pf.kakao.com/_xcLqmC/friend?app_key=4f4cd4e8784c29e753fdf2b6b45e63ca&api_ver=1.0&kakao_agent=sdk%2F1.11.1%20os%2Fios-12.1.2%20lang%2Fko-KR%20res%2F414x736%20device%2FiPhone10%2C5%20origin%2Fcom.example.admin.accountintergration.test%20app_ver%2F1.0.0",
  "chatUrl":"https://pf.kakao.com/_xcLqmC/chat?app_key=4f4cd4e8784c29e753fdf2b6b45e63ca&api_ver=1.0&kakao_agent=sdk%2F1.11.1%20os%2Fios-12.1.2%20lang%2Fko-KR%20res%2F414x736%20device%2FiPhone10%2C5%20origin%2Fcom.example.admin.accountintergration.test%20app_ver%2F1.0.0"
}

  constructor(public _kakaoCordovaSDK: KakaoCordovaSDK) {
      // your plus friend id
    let plusFriendTemplate = {
      plusFriendId: '_xcLqmC',
    };
    this._kakaoCordovaSDK
      .chatPlusFriendUrl(plusFriendTemplate)
      .then(
        res => {
        },
        err => {
        }
      )
      .catch(err => {
      });
  }

Link

Link Parameters

All the url properties(webURL or mobileWebURL) must be set in the domatin section in the Kakao developer console in order to work as expected.

Objects

KLContentObject

name type required
title string mandatory
link KLLinkObject mandatory
imageURL string mandatory
desc string optional
imageWidth string optional
imageHeight string optional

KLLinkObject

name type required
webURL string optional
mobileWebURL string optional
androidExecutionParams string optional
iosExecutionParams string optional

KLSocialObject

name type required
likeCount number optional
commentCount number optional
sharedCount number optional
viewCount number optional
subscriberCount number optional

KLCommerceObject

name type required
regularPrice number mandatory
discountPrice number optional
discountRate number optional
fixedDiscountPrice number optional

KLButtonObject

name type required
title string mandatory
link KLLinkObject mandatory

Templates

KLFeedTemplate

name type required
content KLContentObject mandatory
social KLSocialObject optional
buttonTitle string optional
buttons KLButtonObject[] optional

KLListTemplate

name type required
headerTitle string mandatory
headerLink KLLinkObject mandatory
contents KLContentObject[] mandatory
buttonTitle string optional
buttons KLButtonObject[] optional

KLLocationTemplate

name type required
address string mandatory
content KLContentObject mandatory
addressTitle string optional
social KLSocialObject optional
buttonTitle string optional
buttons KLButtonObject[] optional

KLCommerceTemplate

name type required
content KLContentObject mandatory
commerce KLCommerceObject mandatory
buttonTitle string optional
buttons KLButtonObject[] optional

KLTextTemplate

name type required
text string mandatory
link KLLinkObject mandatory
buttonTitlestring optional
buttonsKLButtonObject[] optional

KLScrapTemplate

name type required
url string mandatory

KLCustomTemplate

name type required
templateId string mandatory
title string optional
description string optional

Configs

KLUploadImageConfig

name type required
fileOrUrl 'file' or 'url' mandatory
url string optional(in case fileOrUrl property is 'url')

KLDeleteImageConfig

name type required
url string mandatory

KLPostStoryConfig

name type required
post string mandatory
appver string mandatory
appid string optional
appname string optional
urlinfo KLPostStoryUrlInfo optional

KLPostStoryUrlInfo

name type required
title string mandatory
desc string optional
imageURLs string[] optional
type ScrapType optional

ScrapType

name value
ScrapTypeNone 0
ScrapTypeWebsite 1
ScrapTypeVideo 2
ScrapTypeMusic 3
ScrapTypeBook 4
ScrapTypeArticle 5
ScrapTypeProfile 6

Link Methods

sendLinkFeed(feedTemplate: KLFeedTemplate)

Send a default feed template to kakao talk

  constructor(public _kakaoCordovaSDK: KakaoCordovaSDK) {
    let feedLink: KLLinkObject = {
      webURL: 'url that registered in the domain section in kakao developer console',
    };

    let feedSocial: KLSocialObject = {
      likeCount: 50,
    };

    let feedButtons1: KLButtonObject = {
      title: 'button1',
      link: {
        mobileWebURL: 'url that registered in the domain section in kakao developer console',
      },
    };

    let feedButtons2: KLButtonObject = {
      title: 'button2',
      link: {
        iosExecutionParams: 'param1=value1&param2=value2',
        androidExecutionParams: 'param1=value1&param2=value2',
      },
    };

    let feedContent: KLContentObject = {
      title: 'title',
      link: feedLink,
      imageURL: 'http://mud-kage.kakao.co.kr/dn/Q2iNx/btqgeRgV54P/VLdBs9cvyn8BJXB3o7N8UK/kakaolink40_original.png'
    };


    let feedTemplate: KLFeedTemplate = {
      content: feedContent,
      social: feedSocial,
      buttons: [feedButtons1, feedButtons2]
    };


    this._kakaoCordovaSDK
      .sendLinkFeed(feedTemplate)
      .then(
        res => {
          console.log(res);
          
        },
        err => {
          console.log(err);
        }
      )
      .catch(err => {
        console.log(err);
      });
  }

sendLinkList(listTemplate: KLListTemplate)

Send a default list template to kakao talk

  constructor(public _kakaoCordovaSDK: KakaoCordovaSDK) {

    let listHeaderLink: KLLinkObject = {
      webURL: 'url that registered in the domain section in kakao developer console',
      mobileWebURL: 'url that registered in the domain section in kakao developer console',
    };

    let listContent1: KLContentObject = {
      title: '자전거 라이더를 위한 공간',
      desc: '매거진',
      link: listHeaderLink,
      imageURL: 'http://mud-kage.kakao.co.kr/dn/QNvGY/btqfD0SKT9m/k4KUlb1m0dKPHxGV8WbIK1/openlink_640x640s.jpg'
    };

    let listContent2: KLContentObject = {
      title: '비쥬얼이 끝내주는 오레오 카푸치노',
      desc: '매거진',
      link: listHeaderLink,
      imageURL: 'http://mud-kage.kakao.co.kr/dn/boVWEm/btqfFGlOpJB/mKsq9z6U2Xpms3NztZgiD1/openlink_640x640s.jpg'
    };

    let listContent3: KLContentObject = {
      title: '감성이 가득한 분위기',
      desc: '매거진',
      link: listHeaderLink,
      imageURL: 'http://mud-kage.kakao.co.kr/dn/NTmhS/btqfEUdFAUf/FjKzkZsnoeE4o19klTOVI1/openlink_640x640s.jpg'
    };

    let listButtons1: KLButtonObject = {
      title: 'button1',
      link: {
        mobileWebURL: 'https://www.naver.com',
      },
    };

    let listButtons2: KLButtonObject = {
      title: 'button2',
      link: {
        iosExecutionParams: 'param1=value1&param2=value2',
        androidExecutionParams: 'param1=value1&param2=value2',
      },
    };

    let listTemplate: KLListTemplate = {
      headerTitle: 'List Template Test',
      headerLink: listHeaderLink,
      contents: [listContent1, listContent2, listContent3],
      buttonTitle: '',
      buttons: [listButtons1, listButtons2]
    };

    this._kakaoCordovaSDK
    .sendLinkList(listTemplate)
    .then(
      res => {
        console.log(res);
        
      },
      err => {
        console.log(err);
      }
    )
    .catch(err => {
      console.log(err);
    });
  }

sendLinkLocation(locationTemplate: KLLocationTemplate)

Send a default location template to kakao talk

  constructor(public _kakaoCordovaSDK: KakaoCordovaSDK) {

    let locationContent: KLContentObject = {
      title: '카카오 판교오피스',
      desc: '카카오 판교오피스 위치입니다.',
      link: {
        mobileWebURL: 'url that registered in the domain section in kakao developer console'
      },
      imageURL: 'http://mud-kage.kakao.co.kr/dn/bSbH9w/btqgegaEDfW/vD9KKV0hEintg6bZT4v4WK/kakaolink40_original.png'
    };

    let locationSocial: KLSocialObject = {
      likeCount: 50,
      sharedCount: 1234
    };

    let locationTemplate: KLLocationTemplate = {
      content: locationContent,
      address: '성남시 분당구 판교역로 235',
      addressTitle: '"카카오 판교오피스',
      social: locationSocial,
      buttonTitle: '웹으로 보자'
    }

    this._kakaoCordovaSDK
    .sendLinkLocation(locationTemplate)
    .then(
      res => {
        console.log(res);
        
      },
      err => {
        console.log(err);
      }
    )
    .catch(err => {
      console.log(err);
    });
  }

sendLinkCommerce(commerceTemplate: KLCommerceTemplate)

Send a default commerce template to kakao talk

  constructor(public _kakaoCordovaSDK: KakaoCordovaSDK) {
    let commerceContent: KLContentObject = {
      title: 'Ivory long dress (4 Color)',
      link: {
        mobileWebURL: 'url that registered in the domain section in kakao developer console'
      },
      imageURL: 'http://mud-kage.kakao.co.kr/dn/RY8ZN/btqgOGzITp3/uCM1x2xu7GNfr7NS9QvEs0/kakaolink40_original.png'
    };

    let commerceCommerce: KLCommerceObject = {
      regularPrice: 208800,
      discountPrice: 146160,
      discountRate: 30
    };

    let commerceButtons1: KLButtonObject = {
      title: '구매하기',
      link: {
        mobileWebURL: 'url that registered in the domain section in kakao developer console',
      },
    };

    let commerceButtons2: KLButtonObject = {
      title: '공유하기',
      link: {
        iosExecutionParams: 'param1=value1&param2=value2',
        androidExecutionParams: 'param1=value1&param2=value2',
      },
    };

    let commerceTemplate: KLCommerceTemplate = {
      content: commerceContent,
      commerce: commerceCommerce,
      buttons: [commerceButtons1, commerceButtons2],
      buttonTitle: '웹으로 보자'
    }

    this._kakaoCordovaSDK
    .sendLinkCommerce(commerceTemplate)
    .then(
      res => {
        console.log(res);
      },
      err => {
        console.log(err);
      }
    )
    .catch(err => {
      console.log(err);
    });
  }

sendLinkText(textTemplate: KLTextTemplate)

Send a default text template to kakao talk

  constructor(public _kakaoCordovaSDK: KakaoCordovaSDK) {
    let textLink: KLLinkObject = {
      webURL: 'url that registered in the domain section in kakao developer console',
      mobileWebURL: 'url that registered in the domain section in kakao developer console',
    };
    let textButtons1: KLButtonObject = {
      title: 'button1',
      link: {
        mobileWebURL: 'url that registered in the domain section in kakao developer console',
      },
    };

    let textButtons2: KLButtonObject = {
      title: 'button2',
      link: {
        iosExecutionParams: 'param1=value1&param2=value2',
        androidExecutionParams: 'param1=value1&param2=value2',
      },
    };

    let textTemplate: KLTextTemplate = {
      text: 'Text Template Test',
      link: textLink,
      buttonTitle: '',
      buttons: [textButtons1, textButtons2]
    };

    this._kakaoCordovaSDK
    .sendLinkText(textTemplate)
    .then(
      res => {
        console.log(res);
      },
      err => {
        console.log(err);
      }
    )
    .catch(err => {
      console.log(err);
    });
  }

sendLinkScrap(scrapTemplate: KLScrapTemplate)

Send a scrap template to kakao talk

  constructor(public _kakaoCordovaSDK: KakaoCordovaSDK) {
    let scrapTemplate: KLScrapTemplate = {
      url: 'url that registered in the domain section in kakao developer console'
    };

    this._kakaoCordovaSDK
    .sendLinkScrap(scrapTemplate)
    .then(
      res => {
        console.log(res);
      },
      err => {
        console.log(err);
      }
    )
    .catch(err => {
      console.log(err);
    });
  }

sendLinkCustom(scrapTemplate: KLCustomTemplate)

Send a custom template to kakao talk. You need to make a template in the kakao developer console in order to get templateId. and if you would like to change title and description dynamically, it is also required to put ${title} and ${description} as value in the template See above "requestSendMemo()". same parameter.

  constructor(public _kakaoCordovaSDK: KakaoCordovaSDK) {
    //your template id and arguments
    let customTemplate: KLCustomTemplate = {
      templateId: '9570', 
      arguments: {
        title: 'title for test',
        description: 'description for description',
        like: '5000000',
      }, 
    };


    this._kakaoCordovaSDK
    .sendLinkCustom(customTemplate)
    .then(
      res => {
        console.log(res);
      },
      err => {
        console.log(err);
      }
    )
    .catch(err => {
      console.log(err);
    });
  }

uploadImage(uploadImageConfig: KLUploadImageConfig)

While Kakao doesn't allow you to upload image files themselves, Kakao supports to generate a new url, which saved in kakao server for 20 days, so that you could use in the templates as url values.

  constructor(public _kakaoCordovaSDK: KakaoCordovaSDK) {
    let uploadImageConfig: KLUploadImageConfig = {
      fileOrUrl: fileOrUrl?fileOrUrl:'file',
      url: url?url:''
    }
    this._kakaoCordovaSDK
    .uploadImage(uploadImageConfig)
    .then(
      res => {
        console.log(res);
      },
      err => {
        console.log(err);
      }
    )
    .catch(err => {
      console.log(err);
    });
  }

deleteUploadedImage(deleteImageConfig: KLDeleteImageConfig)

Delete the uploaded image from kakao server.

  constructor(public _kakaoCordovaSDK: KakaoCordovaSDK) {
    let deleteImageConfig: KLDeleteImageConfig = {
      url: 'uploadImageUrl',

    }
    this._kakaoCordovaSDK
    .deleteUploadedImage(deleteImageConfig)
    .then(
      res => {
        console.log(res);
      },
      err => {
        console.log(err);
      }
    )
    .catch(err => {
      console.log(err);
    });
  }

postStory(postStoryConfig: KLPostStoryConfig)

post contents on Kakao Story

  constructor(public _kakaoCordovaSDK: KakaoCordovaSDK) {
    let postStoryUrlInfo: KLPostStoryUrlInfo = {
      title: 'Sample',
      desc: 'Sample 입니다.',
      imageURLs: ['http://mud-kage.kakao.co.kr/dn/RY8ZN/btqgOGzITp3/uCM1x2xu7GNfr7NS9QvEs0/kakaolink40_original.png']
      type: ScrapType.ScrapTypeVideo
    }
    let postStoryConfig: KLPostStoryConfig = {
      post: 'Sample Story Posting https://www.youtube.com/watch?v=XUX1jtTKkKs',
      appver: '1.0',
      urlinfo: postStoryUrlInfo
    }
    this._kakaoCordovaSDK
    .postStory(postStoryConfig)
    .then(
      res => {
        console.log(res);
      },
      err => {
        console.log(err);
      }
    )
    .catch(err => {
      console.log(err);
    });
  }

About

Kakao Cordova SDK Plugin

Topics

cordova angular4 cordova-android cordova-plugin cordova-ios kakao kakao-api kakao-login ionic3 kakao-account

Resources

Readme

License

MIT license
Activity

Stars

18 stars

Watchers

4 watching

Forks

21 forks
Report repository

Releases

No releases published

Packages

No packages published

Languages