kakao-sdk

cordova-plugin-kakao-sdk

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

Version is updated to 3.1.0

• support ionic 4 (thanks for @Golapadeog)

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:

• Login: https://developers.kakao.com/docs/android/user-management
• Link: https://developers.kakao.com/docs/android/kakaotalk-link
• Talk: https://developers.kakao.com/docs/android/kakaotalk-api
• PlusFriend: https://developers.kakao.com/docs/android/plusfriend

**iOS:

• Login: https://developers.kakao.com/docs/ios/user-management
• Link: https://developers.kakao.com/docs/ios/kakaotalk-link
• Talk: https://developers.kakao.com/docs/ios/kakaotalk-api
• PlusFriend: https://developers.kakao.com/docs/ios/plusfriend

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);
    });
  }