React Native Kakao
한글 문서: 한글 English Document: English
리엑트 네이티브 카카오 로그인
안드로이드 >= 4.1 iOS >= 10.0 React Native는 0.57 버전에서 테스트되었습니다.
소개
카카오 로그인 SDK를 사용한 리엑트 네이티브 모듈
설치
NPM
npm install --save react-native-kakaoreact-native link react-native-kakao
Yarn
yarn add react-native-kakaoreact-native link react-native-kakao
예제
ReactNativeKakaoExample 폴더를 참조하세요.
cd ReactNativeKakaoExample
npm install
or
yarn
사용법
;
Kakao Login
RNKakao
Example
kakaoLogin = async { try const result = await RNKakao; this; catch e this; } kakaoLogout = async { try const result = await RNKakao; this; catch e this; } getUserInfo = async { try const result = await RNKakao; this; catch e this; }
- 인증 타입
지원예정이며 현재 KakaoTalk 고정입니다.
RNKakaoKOAuthTypeTalkRNKakaoKOAuthTypeStoryRNKakaoKOAuthTypeAccount
- 유저 정보
로그인 후 받을 수 있는 유저정보입니다. 유저가 수락하지 않은 정보들은 null로 들어옵니다.
id: <user id> accessToken: <needed to access kakao API from the application> nickname: <user nickname> // nullable email: <user email> // nullable profileImage: <user picture profile url> // nullable profileImageThumnail: <user picture profile thumnail url> // nullable ageRange: <user age range> // nullable gender: <user gender> // nullable
프로젝트 셋업 및 초기 설정
iOS
-
카카오SDK 인스톨
-
최신 SDK 다운로드
-
드래그 앤 드롭을 해주세요.
-
타겟 세팅 체크
-
빌드 설정 추가
-all_load
inOther Linker Flags
.
-
-
카카오에 앱 등록 Official
-
새로운 앱 만들기 Make new app
-
iOS 플랫폼 추가
iOS bundle id must same with XCode project's Bundle Identifier.
-
-
프로젝트 앱 설정
-
URL types 추가
Add
kakao<yourappId>
in URL Schemes -
plist에 네이티브 앱 키 추가
-
-
AppDelegate.m
에 코드 추가
- BOOLapplication:UIApplication *application openURL:NSURL *url sourceApplication:NSString *sourceApplication annotation:idannotation ... if KOSession isKakaoAccountLoginCallback:url return KOSession handleOpenURL:url; return NO; - BOOLapplication:UIApplication *application openURL:NSURL *url options:NSDictionary<NSString *id> *options ... if KOSession isKakaoAccountLoginCallback:url return KOSession handleOpenURL:url; return NO; - voidapplicationDidBecomeActive:UIApplication *application KOSession handleDidBecomeActive;
안드로이드(Android)
안드로이드 소스는 helpkang 님의 소스를 기반으로 만들어졌습니다.
android/build.gradle
에 maven 추가
subprojects repositories maven url 'http://devrepo.kakao.com:8088/nexus/content/groups/public/'
android/app/build.gradle
에 디펜던시 추가 Gradle 버전에 따라compile
이나implementation
을 사용하면 됩니다.
dependencies implementation implementation "com.android.support:appcompat-v7:28.0.0" implementation "com.facebook.react:react-native:+" // From node_modules implementation // Check this line.
AndroidManifest.xml
에 앱키 등록.KakaoWebViewActivity
관련 설정은 추가하지 않아도 됩니다.
...
추가적으로, KakaoWebViewActivity
관련 설정을 추가해야 하는 경우도 있습니다. (그냥 추가해 놓더라도 문제는 없습니다.) #5
settings.gradle
은 자동설정 됩니다. 혹시나 react-native link 관련 중복이 발생하는 경우도 있으니 참고하세요.
include ':react-native-kakao'projectDir = rootProjectprojectDir '../node_modules/react-native-kakao/android'
키 해쉬
테스트를 위해 개발환경의 키 해쉬를 등록해야합니다. 공식문서
OS X, Linux
keytool -exportcert -alias androiddebugkey -keystore ~/android/debugkeystore -storepass android -keypass android | openssl sha1 -binary | openssl base64
TO DO
- dynamic agreement(https://developers.kakao.com/docs/android/user-management#동적동의)
- [v] TypeScript 적용
Troubleshooting
Recommend run ReactNativeKakaoExample.
IOS
Build Error: linker, arm64, x86_64
추가한 KakaoOpenSDK.framewrok 를 눌러 Target Membership 체크가 정상적으로 되어 있는지 확인한다.
Licence
(MIT)