react-native 에서 klip-sdk 를 이용할 수 있을까요?
(javascript는 지원한다고 돼 있습니다만…)
혹 가능하다면 간단한 예시 공유를 부탁드립니다.
감사합니다.
안녕하세요.
react-native가 공식 지원 항목에는 없지만, 내부 데모앱 제작 시 동작에 문제 없음을 확인하였습니다. 사용법은 react와 차이가 없다고 보시면 되겠습니다.
간단한 예제는 정리하여 다시 코멘트 드리겠습니다.
안녕하세요! 추가로 답변을 드려보자면, react-native에서 사용할 시 클립으로 넘어가는 request부분은 브라우저랑 작동이 달라 커스텀하게 Linking등을 사용하셔야 하지만 나머지 부분들은 klip-sdk를 사용할 수 있습니다. 아래는 auth request를 보내는 예시입니다.
import { Linking } from "react-native";
import { prepare, request, getResult } from 'klip-sdk'
const bappName = 'my app'
const successLink = 'myApp://...'
const failLink = 'myApp://...'
let requestKey
const prepareAuthRequest = async () => {
const res = await prepare.auth({ bappName, successLink, failLink })
if (res.err) {
// 에러 처리
} else if (res.request_key) {
requestKey = res.request_key
}
}
const sendRequest = () => {
Linking.openURL(`kakaotalk://klipwallet/open?url=https://klipwallet.com/?target=a2a?request_key=${requestKey}`) // 안드로이드 환경에서는 intent 사용을 더 추천드립니다 ex) intent://klipwallet/open?url=https://klipwallet.com/?target=/a2a?request_key=9892...4aeb#Intent;scheme=kakaotalk;package=com.kakao.talk;end
}
const getRequestResult = async () => {
const res = await getResult(requestKey)
// do something with res
}
1개의 좋아요
감사합니다.
말씀주신대로 적용을 했는데,
아이폰에서 runtime시 klip-sdk 내부에서 아래와 같은 이유로 에러가 발생합니다.
<< 아래 >>
2020-11-10 10:27:55.270005+0900 MyApp[3044:742625] [javascript] TypeError: undefined is not an object (evaluating ‘(t||window.navigator.userAgent).toString’)
2020-11-10 10:27:55.277528+0900 MyApp[3044:742621] [native] Unhandled JS Exception: TypeError: undefined is not an object (evaluating ‘(t||window.navigator.userAgent).toString’)
2020-11-10 10:27:55.278899+0900 MyApp[3044:742621] *** Terminating app due to uncaught exception ‘RCTFatalException: Unhandled JS Exception: TypeError: undefined is not an object (evaluating ‘(t||window.navigator.userAgent).toString’)’, reason: 'Unhandled JS Exception: TypeError: undefined is not an object (evaluating ‘(t||window.navigator.userAgent).toString’), stack:
<< 아래 끝. >>
userAgent 관련 내용이고 아마도 web을 지원하는 부분인 것 같은데,
가능한 방법이 있는지 문의드립니다.
감사합니다.
혹시 짜놓으신 코드를 좀 볼 수 있을까요?
저 위에 공유주신 내용을 그대로 호출해본 것 외에는 없습니다.
코드는 다음과 같습니다.
로그인 여부를 체크한 후 klip 연동하는 코드입니다.
npm install, pod install, 그리고 xcode로 build & 아이폰에서 구동.
참고로 당연하게도 klip code 적용 전에는 정상동작합니다.
<< 다음 >>
import { Linking } from “react-native”;
import { prepare, request, getResult, getCardList } from “klip-sdk”
// ~~~
// ~~~
AsyncStorage.getItem(“loggedInUser”)
.then(function (result) {
if (result) {
userInfo = JSON.parse(result);
// token
return AsyncStorage.getItem(“loggedInJWT”);
}
}).then(function() {
let bappName = ‘AppName’
let successLink = null;
let failLink = null;
let requestKey;
const prepareAuthRequest = async () => {
const res = await prepare.auth({ bappName, successLink, failLink })
if (res.err) {
// 에러 처리
console.log(err)
} else if (res.request_key) {
requestKey = res.request_key
console.log('Request Key : ' + requestKey);
}
}
const sendRequest = () => {
Linking.openURL(`kakaotalk://klipwallet/open?url=https://klipwallet.com/?target=a2a?request_key=${requestKey}`) // 안드로이드 환경에서는 intent 사용을 더 추천드립니다 ex) intent://klipwallet/open?url=https://klipwallet.com/?target=/a2a?request_key=9892...4aeb#Intent;scheme=kakaotalk;package=com.kakao.talk;end
}
const getRequestResult = async () => {
const res = await getResult(requestKey)
// do something with res
}
})
.catch(function (err) {
<< 다음 끝. >>
그럼 회신 부탁드립니다.
react-native에서 확인이 됐는지 알 수 있을런지요?
보니깐 klip sdk에서 내부적으로 사용하고있는 daumtools 라이브러리에서 RN을 지원하지 않는 것 같네요. 그렇다면 혹시 https://docs.klipwallet.com/rest-api/rest-api-a2a 여기 참고하셔서 (axios 등을 활용하셔서) rest api 호출로 바꾸어 보시면 어떨까요?
2개의 좋아요
답글이 좀 늦었습니다.
RN으로 간단하게 처리를 해보려고 했던터라,
정 안되면 그렇게 해보려고 했었습니다.
말씀주신 내용대로 진행해서 현재는 기능과 동작, 서비스 적용 flow 등 필요한 기능은 다 구현하여 처리 완료했습니다.
(여담입니다만 deep link를 호출하면 할수록 klip의 화면이 stack처럼 쌓입니다. ^^ 문제는 아니지만 자주 부르면 많이 쌓여서… 사용자가 하나씩 걷어내거나 ^^; 카카오톡 앱을 죽이고 다시 시작해야 하는… ^^;)
감사합니다.