kakao developers 사이트에 가면 아주아주 친절하게 설명이 잘 되어있다.
어플리케이션 등록은 이미 되어있는 상태라 나는 SDK 설치부터 시작~!
1. SDK 설치하기
모듈 설명 : Kakao SDK
pod 'KakaoSDKCommon' // 공통 모듈
pod 'KakaoSDKUser' // 사용자 인증
pod 'KakaoSDKAuth' // 카카오 로그인, 사용자 관리
pod 'KakaoSDKTalk' // 친구, 메시지(카카오톡)
pod 'KakaoSDKLink' // 메시지(카카오링크)
이렇게가 카카오 링크로 피드 메시지 공유하는 데 필요한 모듈들.
하나하나 추가하기 귀찮으면 pod 'KakaoSDK'로 전체를 추가해줄 수도 있다.
이 친구들을 pod install 해주니 나는 오류 폭탄이 났다. 😡
카카오 SDK를 사용하려면 5.1 버전 이상의 Alamofire가 필요하다고 하여
기존에 '~> 4.9.1'로 설정이 되어 있던 Alamofire 버전을 5.1로 올려주었다.
+ Alamofire 버전 업그레이드 하면서 발생한 문제들과 변경사항들은 요기에 ☞ Alamofire 4 -> 5 changes
2. Info.plist 설정
[Info.plist - Information Property List]에 Array 타입 키(Key)인 LSApplicationQueriesSchemes를 추가
item 키의 값으로 'kakaokompathauth', 'kakaolink'를 추가
[TARGETS - Info - URL Types] 에서 URL Schemes 설정
네이티브 앱 키를 'kakao{NATIVE_APP_KEY}' 형식으로 등록
3. 초기화
iOS SDK를 사용하기 위해 네이티브 앱 키를 사용해 초기화 하는 과정이 필요하다고 한다. AppDelegate에 다음 코드를 추가해준다.
import KakaoSDKCommon
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
...
KakaoSDKCommon.initSDK(appKey: "NATIVE_APP_KEY")
...
}
4. 원하는 메시지 API 및 템플릿 선택
메시지 API 선택 - 카카오링크 vs 카카오톡 메시지
카카오링크
: 카카오톡 앱으로 넘어가 친구 선택하고 채팅방에서 카카오톡 메세지로 바로 보내짐.
예) 직방 카카오톡 공유하기
카카오톡 메시지
: 앱 넘어가지 않고 친구 목록만 가져와 메세지만 전송됨.
예) 네이버 지도 카카오톡 공유하기
메시지 템플릿 - 기능 및 종류
피드 / 리스트 / 위치 / 커머스 / 텍스트
이번에는 카카오 링크 형식의 피드템플릿으로 구현하기로.
5. 기본 템플릿으로 메시지 작성 및 보내기
다음과 같이 JSON 형식으로 메시지 템플릿을 만들어 준다.
let feedTemplateJsonStringData =
"""
{
"object_type": "feed",
"content": {
"title": "딸기 치즈 케익",
"description": "#케익 #딸기 #삼평동 #카페 #분위기 #소개팅",
"image_url": "http://mud-kage.kakao.co.kr/dn/Q2iNx/btqgeRgV54P/VLdBs9cvyn8BJXB3o7N8UK/kakaolink40_original.png",
"link": {
"mobile_web_url": "https://developers.kakao.com",
"web_url": "https://developers.kakao.com"
}
},
"social": {
"comment_count": 45,
"like_count": 286,
"shared_count": 845
},
"buttons": [
{
"title": "웹으로 보기",
"link": {
"mobile_web_url": "https://developers.kakao.com",
"web_url": "https://developers.kakao.com"
}
},
{
"title": "앱으로 보기",
"link": {
"android_execution_params": "key1=value1&key2=value2",
"ios_execution_params": "key1=value1&key2=value2"
}
}
]
}
""".data(using: .utf8)!그런 다음 다음과 같이 기본 템플릿으로 메시지를 전송할 수 있다.
if let templatable = try? SdkJSONDecoder.custom.decode(FeedTemplate.self, from: feedTemplateJsonStringData) {
LinkApi.shared.defaultLink(templatable: templatable) {(linkResult, error) in
if let error = error {
print(error)
}
else {
print("defaultLink() success.")
if let linkResult = linkResult {
UIApplication.shared.open(linkResult.url, options: [:], completionHandler: nil)
}
}
}
}이렇게 연결해주면 탐스런 딸기케잌이 담긴 템플릿 메시지를 보내 테스트해볼 수 있다. 짱신기 😆
잘 연결이 된다면 메시지 템플릿을 원하는 대로 변경하여 커스터마이징하면 된다!
여기까지는 아주 쉽다. 하라는 대로 하면 된다. 그치만 이게 끝이 아닌걸...
앱으로 보기를 눌렀을 때, 원하는 페이지로 이동을 시키고 싶은데 앱의 메인 화면이 떠버리는걸 🥲
여기서 다시 딥링크를 맞이하게 될 줄이야...
6. 앱으로 연결 시 특정 페이지 / URL 열기 (feat. Deep Link)
카카오에서 링크 연결 시 앱의 메인 화면이 아니라 원하는 페이지로 이동하도록 하기 위해서는 딥링크를 사용하거나 파라미터를 받아 페이지를 분기하면 된다고 한다. 음... 기본적으로 카카오 메시지 템플릿에서 버튼 링크로 파라미터를 보내주니깐 그걸 이용해서 url을 받아오고 딥링크를 참고해 application:openURL:options: 메서드에서 원하는 페이지로 이동하게끔 만들어주었다.
딥링크 사용법은 다음 사이트에 아주 잘 설명이 되어 있더라.
참고 : https://docs.mobile.sailthru.com/docs/deep-linking
Deep Linking · Sailthru Mobile Developer Documentation
Opening specific sections of your app right from Sailthru Mobile Messages
docs.mobile.sailthru.com
+ application:openURL:options: 메서드에서 페이지 이동까지 처리하니까 문제가 생겼다. 앱이 실행되고 있을 때는 작동이 잘 되는데, 앱이 꺼져있을 때 다시 실행하게 되면 앱 실행시 켜지는 페이지랑 충돌이 일어나서 그런지 뭔지 크래시가 나면서 꺼지더라.
그렇다면 앱이 백그라운드에서 실행되고 있다가 다시 넘어올 때만 페이지를 넘겨줄 수 있는 방법이 없을까? 생각을 했더니 역시나 그러한 메서드들이 앱딜리게이트에 존재를 하더라. 😆
applicationWillEnterForeground 메서드는 앱이 백그라운드에서 실행되다가 다시 활성화가 될 때 실행되는 메서드로, 다음과 같이 이 메서드 내에서 뷰를 reload 할 수 있도록 해주면 앱이 새로 켜질 때는 작동하지 않고 앱이 백그라운드에서 다시 넘어올 때만 실행이 된다.
func applicationWillEnterForeground(_ application: UIApplication) {
moveVC(nibName: "WebViewController")
}
7. 카카오톡 미설치시 카카오링크 메시지 처리방법
카카오 링크로 메시지를 보낼 때 카카오톡이 없으면 안드로이드에서는 자동으로 카카오 로그인 웹페이지가 뜬다는데 iOS 에서는 카카오 공유하기 버튼을 눌러도 아무런 변화가 없었다...
그래서 카카오 개발자 포럼에 질문을 올렸더니, 다음과 같은 답변을 주셨다.
"카카오 링크는 모바일기기에서 카카오톡이 설치되어있어야 하기 때문에 LoginClient.instance.isKakaoTalkLoginAvailable로 체크 하셔서 마켓 이동해주시면 됩니다."
https://developers.kakao.com/docs/latest/ko/getting-started/sdk-ios#apply-sdk
여기서 iOS API를 찾아보았더니 카카오 로그인 API는 KakaoSDKUser 모듈의 UserApi를 통해 호출되며, isKakaoTaklLoginAvailable() 메서드를 통해 카카오톡 설치 여부를 확인할 수 있다고 나와있었다.
그래서 카카오로 공유하기 버튼 클릭시 카카오 앱이 설치 되어 있을 경우 링크 메시지를 전송하고 미설치시 안드로이드처럼 카카오 로그인 웹페이지를 띄우도록 구현했다.
UIApplication.shared.open(linkResult.url, options: [:], completionHandler: nil)
if !UserApi.isKakaoTalkLoginAvailable() {
let kakaoUrl = URL(string: "https://accounts.kakao.com")
UIApplication.shared.open(kakaoUrl!, options: [:], completionHandler: nil)
}
8. 카카오링크 전송 성공 알림 설정 - 서버 콜백 기능 추가
카카오링크는 사용자가 카카오톡에서 메시지를 전송하므로 서비스에서 전송 성공 여부를 직접 확인할 수 없기 때문에 메시지 전송 성공 시 알림을 받는 서버 콜백(Callback) 기능을 제공한다.
1. 설정하기 > 카카오링크 전송 성공 알림 설정을 참고하여 콜백 URL과 요청 방법(Method) 설정
2. 카카오링크 API 호출 시 콜백 파라미터 전달
다음과 같이 딕셔너리 자료형의 serverCallbackArgs 를 설정해주고 LinkApi 요청시 파라미터로 전달해준다.
let serverCallbackArgs = ["user_id": userId, "banner_id": banner_id]
...
LinkApi.shared.defaultLink(templatable: templatable, serverCallbackArgs: serverCallbackArgs) {(linkResult, error) in
...
+ 기능 잘 구현되는거 테스트 다 하고 배포를 했는데, 갑자기 카카오 공유하기 기능이 작동이 안되는 것이 아닌가!!!
OMG... 퇴근 한시간 전에 발생한 문제라 첫 야근을 하게 되었다. ㅎㅎㅎ 아무리 코드를 살펴봐도 문제가 없고 서버도 문제가 없다는데 도대체 왜 작동이 안되는 것일까... 삽질을 하다 문제를 발견했다. 템플릿에 넣어주는 이미지 url에 한글이 포함 되어있어 디코딩이 안되고 그냥 넘어가는 것 같더라. url 주소에 들어있는 한글을 없애고 테스트 해봤더니 아주 잘 된다. 신기하고 다행이다.
참고 : - iOS SDK 설치하기,- iOS 카카오 메시지
혹시나 제 글이 도움이 되셨다면 하트 한번 눌러주시면 감사하겠습니다 🥰
iOS 개발자분들 모두 화이팅입니다👍🏻
'초보 iOS 개발자의 일상 > 개발 업무' 카테고리의 다른 글
| 딥 링크 (0) | 2021.06.15 |
|---|---|
| [Swift iOS] Alamofire 5 upgrade changes (0) | 2021.06.08 |
| Web View 통신 (0) | 2021.06.07 |
| [Swift iOS] Reachability 네트워크 체크 (0) | 2021.06.07 |
| [Swift iOS] Localizing 다국어 처리 (0) | 2021.06.04 |