React Native 카카오 로그인 연동하는 방법

1. 환경

react-native: 0.61.5

2. iOS 연동

먼저 아래의 명령어를 통해 라이브러리를 설치한다.

yarn add @react-native-seoul/kakao-login

다음으로 아래의 명령어를 통해 연동해준다.

cd ios && pod install

이전 RN은 link를 통해줘야했지만, 이젠 자동 링크를 지원하므로 ios폴더로 진입하여 pod install 명령어만 입력하면 알아서 설치된다.

아무런 이상없이 설치되었다면 위 화면과 같은 결과를 볼 수 있을 것이다. 다음으로 Xcode를 켜서 상단에 있는 File - Open을 누른다.

자신의 프로젝트 폴더 내부에 있는 ios폴더로 들어가면 프로젝트명.xcworkspace라는 파일이 존재한다. 해당 파일을 열어준다.

Info탭으로 들어간다음 가장 아래에 있는 URL Types를 펼치고 + 버튼을 누르면 위처럼 추가할 수 있는 상자가 생긴다. URL Schemes에 kakao네이티브 앱키를 적어준다.

다음으로 Info.plist를 열어주고 KAKAO_APP_KEY라는 키를 하나 생성한다. 그리고 Value에는 네이티브 앱 키를 적어준다. 여기서는 이전 단계와 다르게 앞에 kakao를 붙이지 말아야한다. 다음으로 Info.plist를 에디터로 열어준다음 아래의 내용을 넣는다.

  <key>LSApplicationQueriesSchemes</key>

  <array>

      <!-- 공통 -->

      <string>kakao네이티브앱키</string>

      <!-- 간편로그인 -->

      <string>kakaokompassauth</string>

      <string>storykompassauth</string>

      <!-- 카카오톡링크 -->

      <string>kakaolink</string>

      <string>kakaotalk-5.9.7</string>

      <!-- 카카오스토리링크 -->

      <string>storylink</string>

  </array>

위와 같은 형태로 넣어주면 된다. 이제 AppDelegate.m 파일을 열고 아래의 내용을 추가해준다.

#import <KakaoOpenSDK/KakaoOpenSDK.h>

- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation {
    if ([KOSession isKakaoAccountLoginCallback:url]) {
        return [KOSession handleOpenURL:url];
    }
    return false;
}
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url options:(NSDictionary<NSString *,id> *)options {
    if ([KOSession isKakaoAccountLoginCallback:url]) {
        return [KOSession handleOpenURL:url];
    }
    return false;
}
- (void)applicationDidBecomeActive:(UIApplication *)application {
    [KOSession handleDidBecomeActive];
}

마지막으로 빌드를 해주면 iOS는 연동이 완료된다.

3. Android 연동

프로젝트폴더/android/app/src/main/AndroidManifest.xml 파일을 열고 allowBackup부분을 true로 바꿔준다.

그리고 하단에 </application>이 닫히는 위라인에 아래의 코드를 추가한다.

<meta-data android:name="com.kakao.sdk.AppKey" android:value="@string/kakao_app_key" />

다음으로 프로젝트폴더/android/build.gradle파일을 열고 아래의 코드를 추가한다.

subprojects {

    repositories {

        mavenCentral()

        maven { url 'http://devrepo.kakao.com:8088/nexus/content/groups/public/' }

    }

}

다음으로 프로젝트폴더/android/app/src/main/res/values/strings.xml 파일을 열고 아래의 코드를 추가한다.

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

마지막으로 프로젝트폴더/android/gradle.properties 폴더를 열고 아래의 2줄을 추가해준다.

KAKAO_SDK_GROUP=com.kakao.sdk

KAKAO_SDK_VERSION=1.25.0

여기까지 하면 연동이 끝난다. 이제 https://github.com/react-native-seoul/react-native-kakao-login/blob/master/KakaoLoginExample/App.js 여기에 있는 코드를 그대로 사용하면 로그인/프로필 가져오기를 진행할 수 있다.