$ npm install react-native-kakao-logins --save
$ react-native link react-native-kakao-logins
- In XCode, in the project navigator, right click
Libraries
➜Add Files to [your project's name]
- Go to
node_modules
➜react-native-kakao-logins
and addRNKakaoLogins.xcodeproj
- In XCode, in the project navigator, select your project. Add
libRNKakaoLogins.a
to your project'sBuild Phases
➜Link Binary With Libraries
- Run your project (
Cmd+R
)<
- Open up
android/app/src/main/java/[...]/MainActivity.java
- Add
import com.dooboolab.kakaologins.RNKakaoLoginsPackage;
to the imports at the top of the file - Add
new RNKakaoLoginsPackage()
to the list returned by thegetPackages()
method
- Append the following lines to
android/settings.gradle
:include ':react-native-kakao-logins' project(':react-native-kakao-logins').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-kakao-logins/android')
- Insert the following lines inside the dependencies block in
android/app/build.gradle
:compile project(':react-native-kakao-logins')
- xcode를 열고 library안에 있는 KakaoSDK를 project의
Framework
폴더 안으로 복사합니다. - ios 카카오 sdk 설치 후의 설정과 관련해서는 여기를 참고해주세요. 가이드를 따라하고 성공적으로 build가 되는 것을 확인하시면 아래를 진행하시면 됩니다.
- Project => Targets 아래 앱 선택 => Genarl 탭으로 이동해서 Bundle Identifier가 본인의 카카오 앱과 동일한지 확인해주세요.
- 잘 안되시면 Example Project를 확인하여 비교해보시면 되겠습니다.
- 안드로이드에서는 카카오 SDK가 모듈의 gradle 경로에 잡혀있어서 별도로 sdk를 설치하지 않아도 됩니다.
- 아래를
build.gradle
에 추가해주세요.subprojects { repositories { mavenCentral() maven { url 'http://devrepo.kakao.com:8088/nexus/content/groups/public/' } } }
- manifest 파일에서 allowBackup을 true로 설정해주세요.
- 안드로이드 카카오 SDK 설치 후의 설정과 관련해서는 여기를 참고해주세요. 성공적으로 build가 되는 것을 확인하시면 아래를 진행하시면 됩니다.
react-native-kakao-logins
에서string.xml
을 열어kakao_app_key
를 본인의 application key로 바꿔주세요.MainApplication.java
에서MainApplication
클래스를 다음과 같이 만들어주세요.com.dooboolab.kakaologins.GlobalApplication
를extend
받아야 합니다.public class MainApplication extends GlobalApplication implements ReactApplication {
- 컴파일 에러가 나면
build.gradle
에서 android sdk compile version 등 빌드 sdk 버전을 맞춰주세요.
- [0.3.0]
- 앱 깔려있을 때 튕기는 버그 수정. issue.
Func | Param | Return | Description |
---|---|---|---|
login | callback (err: string, result: JSONObject in string) |
로그인. | |
getProfile | callback (err: string, result: JSONObject in string) |
프로필 불러오기. | |
logout | callback (err: string, result: string) |
로그아웃. |
iOS | Android | Comment | |
---|---|---|---|
id |
✓ | ✓ | 카카오 고유 아이디 |
nickname |
✓ | ✓ | 별칭 |
email |
✓ | ✓ | 이메일 주소 |
display_id |
✓ | 별칭 id | |
phone_number |
✓ | 휴대폰 번호 | |
email_verified |
✓ | ✓ | 이메일 인증 여부 |
kakaotalk_user |
✓ | 카카오톡 유저 여부 | |
profile_image_path |
✓ | ✓ | 프로필 이미지 |
thumb_image_path |
✓ | ✓ | 썸네일 이미지 |
has_signed_up |
✓ | 가입 여부 |
- 4가지 attribute 대해 아직 ios에서 아직 어떻게 받는지 확인이 안되어
android
와 상이한 부분이 있습니다.
아래 예제는 KakaoLoginExample
프로젝트의 App.js
파일과 동일합니다. 로그인 후 result에 들어오는 결과값음 accessToken
입니다.
export default class App extends Component<{}> {
constructor(props) {
super(props);
this.state = {
isKakaoLogging: false,
token: 'token has not fetched',
};
}
// 카카오 로그인 시작.
kakaoLogin() {
console.log(' kakaoLogin ');
RNKakaoLogins.login((err, result) => {
if (err){
console.log(err);
return;
}
Alert.alert('result', result);
});
}
kakaoLogout() {
console.log(' kakaoLogout ');
RNKakaoLogins.logout((err, result) => {
if (err){
console.log(err);
return;
}
Alert.alert('result', result);
});
}
// 로그인 후 내 프로필 가져오기.
getProfile() {
console.log('getKakaoProfile');
RNKakaoLogins.getProfile((err, result) => {
if (err){
console.log(err);
return;
}
Alert.alert('result', result);
});
}
render() {
return (
<View style={ styles.container }>
<View style={ styles.header }>
<Text>LOGIN</Text>
</View>
<View style={ styles.content }>
<NativeButton
isLoading={this.state.isNaverLoggingin}
onPress={() => this.kakaoLogin()}
activeOpacity={0.5}
style={styles.btnKakaoLogin}
textStyle={styles.txtNaverLogin}
>LOGIN</NativeButton>
<Text>{this.state.token}</Text>
<NativeButton
onPress={() => this.kakaoLogout()}
activeOpacity={0.5}
style={styles.btnKakaoLogin}
textStyle={styles.txtNaverLogin}
>Logout</NativeButton>
<NativeButton
isLoading={this.state.isKakaoLogging}
onPress={() => this.getProfile()}
activeOpacity={0.5}
style={styles.btnKakaoLogin}
textStyle={styles.txtNaverLogin}
>getProfile</NativeButton>
</View>
</View>
);
}
}