ExpoKit Android 카카오 로그인

7 min readSep 25, 2019

ExpoKit Android 카카오 로그인을 정리하겠습니다. 네이티브 모듈은 장효찬님의 react-native-kakao-login을 사용하겠습니다.

모듈을 설치합니다.

npm install react-native-kakao-logins — savereact-native link react-native-kakao-logins

안드로이드 스튜디오에서 ~/build.gralde 파일을 열어서 아래 내용을 붙여넣기 합니다.

subprojects {
  repositories {
    mavenCentral()
    maven { url 'http://devrepo.kakao.com:8088/nexus/content/groups/public/' }
  }
}

Gradle Sync로 카카오 모듈을 다운받습니다.

~/app/src/main/AndroidManifest.xml 을 열어서 allowBackup의 값을 true로 설정합니다.

~/app/src/main/res/values 폴더에 kakao_strings.xml 파일을 만들고 아래의 내용을 넣습니다. 카카오 네이티브 앱 키는 본인의 네이티브 앱 키로 바꿔주세요. 네이티브 앱 키를 모르시는 분은 링크를 참고합니다.

<resources>
  <string name="kakao_app_key">카카오 네이티브 앱 키</string>
</resources>

~/app/src/main/java/host.exp.exponent/MainApplication.java 파일을 열어서 getPackage()에 new RNKakaoLoginPackage() 추가합니다.

import com.dooboolab.kakaologins.RNKakaoLoginsPackage;new RNKakaoLoginsPackage(),

컴파일 에러가 나면 빌드버전을 조절해줍니다.

저는 빌드에러가 발생해서 buildToolsVersion을 28.0.0에서 28.0.3으로 변경했습니다.

이제 Debug용 키 해시를 등록하겠습니다.

keytool -exportcert -alias androiddebugkey -keystore <debug_keystore_path> -storepass android -keypass android | openssl sha1 -binary | openssl base64

디버그용 키 해시 파일은 프로젝트 경로에 android/debug.keystore 입니다. <debug_keystore_path>에 debug.keystore 파일의 경로를 입력하고 키 해시를 등록합니다. 등록이 완료되면 키 해시값이 추출됩니다. 키 해시를 복사합니다.

복사한 키 해시를 카카오 개발 사이트- 내 애플리케이션에 등록합니다.

여기까지 셋팅을 완료하였습니다. 다음은 예제 소스를 확인해 보겠습니다.

import RNKakaoLogins from 'react-native-kakao-logins';

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.toString());
        return;
      }
      Alert.alert('result', result);
    });
  }

  kakaoLogout() {
    console.log('   kakaoLogout   ');
    RNKakaoLogins.logout((err, result) => {
      if (err) {
        console.log(err.toString());
        return;
      }
      Alert.alert('result', result);
    });
  }

  // 로그인 후 내 프로필 가져오기.
  getProfile() {
    console.log('getKakaoProfile');
    RNKakaoLogins.getProfile((err, result) => {
      if (err) {
        console.log(err.toString());
        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>
    );
  }
}

다음 시간에는 Android Release APK 생성 방법에 대해서 알아보겠습니다^^

ExpoKit Android 카카오 로그인

Written by Gale Lee

Responses (1)