react-native-kakao
Version:
Kakao login module(package) for React Native
292 lines (208 loc) • 7.5 kB
Markdown
# React Native Kakao
한글 문서: [한글](https://github.com/JeffGuKang/react-native-kakao)
English Document: [English](https://github.com/JeffGuKang/react-native-kakao/blob/master/README_en.md)
리엑트 네이티브 카카오 로그인
안드로이드 >= 4.1
iOS >= 10.0
React Native는 0.57 버전에서 테스트되었습니다.
## 소개
카카오 로그인 SDK를 사용한 리엑트 네이티브 모듈
## 설치
NPM
```js
npm install --save react-native-kakao
react-native link react-native-kakao
```
Yarn
```js
yarn add react-native-kakao
react-native link react-native-kakao
```
## 예제
ReactNativeKakaoExample 폴더를 참조하세요.
```
cd ReactNativeKakaoExample
npm install
or
yarn
```
## 사용법
```js
import RNKakao from 'react-native-kakao';
```
### Kakao Login
[Official documentations](https://developers.kakao.com/docs/ios#사용자-관리-로그인).
```js
RNKakao.login(authTypes)
```
Example
```js
kakaoLogin = async () => {
try {
const result = await RNKakao.login();
this.setState({
userInfo: JSON.stringify(result)
});
} catch (e) {
this.setState({
userInfo: `Error: ${e}`
});
}
}
kakaoLogout = async () => {
try {
const result = await RNKakao.logout();
this.setState({
userInfo: JSON.stringify(result)
});
} catch (e) {
this.setState({
userInfo: `Error: ${e}`
});
}
}
getUserInfo = async () => {
try {
const result = await RNKakao.userInfo();
this.setState({
userInfo: JSON.stringify(result)
});
} catch (e) {
this.setState({
userInfo: `Error: ${e}`
});
}
}
```
#### - 인증 타입
지원예정이며
현재 KakaoTalk 고정입니다.
```js
RNKakao.KOAuthTypeTalk,
RNKakao.KOAuthTypeStory,
RNKakao.KOAuthTypeAccount
```
#### - 유저 정보
로그인 후 받을 수 있는 유저정보입니다. 유저가 수락하지 않은 정보들은 null로 들어옵니다.
```js
{
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
[Officail Kakao](https://developers.kakao.com/docs/ios#시작하기-개발환경)
- 카카오SDK 인스톨
1. 최신 SDK [다운로드](https://developers.kakao.com/sdk/latest-ios-sdk)
2. 드래그 앤 드롭을 해주세요.
3. 타겟 세팅 체크
4. 빌드 설정 추가 `-all_load` in `Other Linker Flags`.
- 카카오에 앱 등록 [Official](https://developers.kakao.com/docs/ios#시작하기-앱-생성)
1. 새로운 앱 만들기 [Make new app](https://developers.kakao.com/apps/new)
2. iOS 플랫폼 추가
iOS bundle id must same with XCode project's Bundle Identifier.
- 프로젝트 앱 설정
1. URL types 추가
Add `kakao<yourappId>` in URL Schemes
2. plist에 네이티브 앱 키 추가
- `AppDelegate.m`에 코드 추가
```js
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
sourceApplication:(NSString *)sourceApplication
annotation:(id)annotation {
...
if ([KOSession isKakaoAccountLoginCallback:url]) {
return [KOSession handleOpenURL:url];
}
return NO;
}
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
options:(NSDictionary<NSString *,id> *)options {
...
if ([KOSession isKakaoAccountLoginCallback:url]) {
return [KOSession handleOpenURL:url];
}
return NO;
}
- (void)applicationDidBecomeActive:(UIApplication *)application
{
[KOSession handleDidBecomeActive];
}
```
### 안드로이드(Android)
안드로이드 소스는 [helpkang](https://github.com/helpkang/react-native-kakao-login) 님의 소스를 기반으로 만들어졌습니다.
[공식 설정](https://developers.kakao.com/docs/android/getting-started#%EA%B0%9C%EB%B0%9C%ED%99%98%EA%B2%BD-%EA%B5%AC%EC%84%B1)
1. `android/build.gradle`에 maven 추가
```js
subprojects {
repositories {
mavenCentral()
maven { url 'http://devrepo.kakao.com:8088/nexus/content/groups/public/' }
}
}
```
2. `android/app/build.gradle`에 디펜던시 추가
Gradle 버전에 따라 `compile`이나 `implementation`을 사용하면 됩니다.
```js
dependencies {
implementation fileTree(include: ['*.jar'], dir: 'libs')
implementation "com.android.support:appcompat-v7:28.0.0"
implementation "com.facebook.react:react-native:+"
// From node_modules
implementation project(':react-native-kakao') // Check this line.
}
```
3. `AndroidManifest.xml`에 앱키 등록. `KakaoWebViewActivity` 관련 설정은 추가하지 않아도 됩니다.
```xml
<application>
<meta-data
android:name="com.kakao.sdk.AppKey"
android:value="YOUR_APP_KEY" />
...
```
추가적으로, `KakaoWebViewActivity` 관련 설정을 추가해야 하는 경우도 있습니다. (그냥 추가해 놓더라도 문제는 없습니다.) [#5](https://github.com/JeffGuKang/react-native-kakao/issues/5)
```xml
<activity
android:name="com.kakao.auth.authorization.authcode.KakaoWebViewActivity"
android:launchMode="singleTop"
android:exported="false"
android:windowSoftInputMode="adjustResize">
</activity>
```
`settings.gradle`은 자동설정 됩니다. 혹시나 react-native link 관련 중복이 발생하는 경우도 있으니 참고하세요.
```js
include ':react-native-kakao'
project(':react-native-kakao').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-kakao/android')
```
#### 키 해쉬
테스트를 위해 개발환경의 키 해쉬를 등록해야합니다. [공식문서](https://developers.kakao.com/docs/android/getting-started#키해시-등록)
OS X, Linux
```js
keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore -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)