Skip to content
react-native native module for Kakao sign in.
Java Objective-C JavaScript TypeScript Ruby Python
Branch: master
Clone or download

README.md

@react-native-seoul/kakao-login

npm version

React Native 카카오 로그인 라이브러리 입니다. 세부 예제는 KakaoLoginExample 폴더 안의 예제 프로젝트를 확인해주세요. 해당 라이브러리는 flowtypescript를 지원합니다.

Getting started

  • RN >= 0.60 (최신 버전)
$ npm install @react-native-seoul/kakao-login
# OR
$ yarn add @react-native-seoul/kakao-login
  • RN < 0.60 (1.3.8 버전 이하로 설치 해주세요)
$ npm install react-native-kakao-logins@1.3.8
# OR
$ yarn add react-native-kakao-logins@1.3.8

Automatic installation

RN >= 0.60

React Native 0.60.X이상부터는 Auto linking을 지원합니다. 수동으로 설치를 원하시면 아래의 Manual installation를 참조하세요

RN < 0.60

$ react-native link react-native-kakao-logins 또는 아래의 Manual installation를 참조하세요

Manual installation

[RN >= 0.60] Manual installation을 원한다면 다음 설정을 먼저 해주세요

react-native.config.js 파일을 root디렉토리에 생성하고 다음처럼 설정합니다

// react-native.config.js
module.exports = {
  dependencies: {
    "@react-native-seoul/kakao-login": {
      // Set null on platform that you want manual installation
      platforms: {
        ios: null,
        android: null
      }
    }
  }
};

iOS

1.cocoapods 또는 카카오 홈페이지 Download 를 통한 iOS KakaoOpenSDK 설치

  • cocoapods 을 통한 설치 ios/Podfile에 다음처럼 추가 해주세요

    target 'yourApp' do
        ...
        pod 'KakaoOpenSDK', '~> 1.20.0' # append this line
    end
  • 카카오 홈페이지 Download 를 통한 설치

  1. Xcode를 열고, project main navigator, Libraries 폴더 우클릭 ➜ Add Files to [your project's name] 클릭
  2. 프로젝트의 node_modules 폴더 ➜ @react-native-seoul/kakao-login 그리고 RNKakaoLogins.xcodeprojLibraries폴더에 추가합니다
  3. Xcode navigator에서 원하는 Target을 선택하고, libRNKakaoLogins.a파일을 Build PhasesLink Binary With Libraries에 추가합니다
  4. Post installation를 참고하세요

Android

  1. android/app/src/main/java/[...]/MainApplication.java 파일을 열고 다음처럼 추가합니다

       import com.facebook.soloader.SoLoader;
    +  import com.dooboolab.kakaologins.RNKakaoLoginsPackage;
    • RN < 0.60
     @Override
       protected List<ReactPackage> getPackages() {
         return Arrays.<ReactPackage>asList(
             new MainReactPackage(),
    +        new RNKakaoLoginsPackage()
         );
       }
    • RN >= 0.60
    @Override
      protected List<ReactPackage> getPackages() {
        @SuppressWarnings("UnnecessaryLocalVariable")
        List<ReactPackage> packages = new PackageList(this).getPackages();
        // Packages that cannot be autolinked yet can be added manually here, for example:
        // packages.add(new MyReactNativePackage());
    +      packages.add(new RNKakaoLoginsPackage());
        return packages;
    }
  1. android/settings.gradle에 다음을 추가합니다:
    +  include ':react-native-seoul-kakao-login'
    +  project(':react-native-seoul-kakao-login').projectDir = new File(rootProject.projectDir,     '../node_modules/@react-native-seoul/kakao-login/android')
  2. android/app/build.gradle의 dependencies block 에 다음을 추가합니다:
      implementation "com.facebook.react:react-native:+"  // From node_modules
    + implementation project(':react-native-seoul-kakao-login')

Post installation

iOS

  1. 프로젝트의 ios 폴더에서 $ pod install 명령어를 실행합니다. (KaKao SDK를 직접 다운받아서 설치한 경우는 제외)

  2. ios 카카오 sdk 설치 후의 설정과 관련해서는 공식문서 - 앱생성 을 참고해주세요. 앱생성 가이드를 따라하고 성공적으로 build가 되는 것을 확인하시면 아래를 진행하시면 됩니다.

  3. Project => Targets 아래 앱 선택 => General 탭으로 이동해서 Bundle Identifier가 본인의 카카오 앱과 동일한지 확인해주세요.

  4. 공식문서 - 개발 프로젝트 설정 을 참고하여 info.plist, URL Types 및 커스텀 스킴 추가 등 기타 필요한 세팅들을 프로젝트에 추가해줍니다.

  5. 공식문서 - 로그인 을 참고하여 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];
    }
    
  6. Expo Kit을 사용하여 개발하는 경우 RNKakaoLogin.xcodeproj의 Build Settings => Header Search Paths에 $(SRCROOT)/../../../ios/Pods/Headers/Publicrecursive로 추가해주셔야 합니다.

  7. 잘 안되시면 Example Project를 확인하여 비교해보시면 되겠습니다.

Android

  1. 안드로이드에서는 카카오 SDK가 모듈의 gradle 경로에 잡혀있어서 별도로 sdk를 설치하지 않아도 됩니다.
  2. manifest 파일에서 allowBackup을 "true" 로 설정해주세요.
  3. android/build.gradle 에 아래 내용을 추가합니다.
subprojects {
    repositories {
        ...
        mavenCentral()
        maven { url 'http://devrepo.kakao.com:8088/nexus/content/groups/public/' }
    }
}
  1. 안드로이드 카카오 SDK 설치 후의 설정과 관련해서는 카카오 개발자 페이지 - 앱생성을 참고해주세요. 앱생성 가이드를 따라하고 성공적으로 build가 되는 것을 확인하시면 아래를 진행하시면 됩니다.
  2. app/src/main/res/values/strings.xml 을 열어 다음을 추가합니다
<resources>
    <string name="app_name">KakaoLoginExample</string>
+   <string name="kakao_app_key">your_app_key</string>
</resources>
  1. 컴파일 에러가 나면 build.gradle에서 android sdk compile version 등 빌드 sdk 버전을 맞춰주세요.
  2. 아래와 같은 에러가 발생할 경우 키 해시 등록을 진행해주세요. 자바 코드로 구하는 방법이 제일 확실합니다.
AUTHORIZATION_FAILED: invalid android_key_hash or ios_bundle_id or web_site_url

React Native 0.60.x 부터 기본적으로 포함되는 디버깅 키의 해시는 다음과 같고 ../project/android/app에 디버그용 키스토어가 존재합니다

ex: Xo8WBi6jzSxKDVR4drqm84yr9iU=

Changelogs

Changelogs 링크

Methods (callback is optional)

Func Param Return Description
login callback? (err: Error, result: Object) Promise{Object} 로그인.
getProfile callback? (err: Error, result: Object) Promise{Object} 프로필 불러오기.
logout callback? (err: Error, result: String) Promise{String} 로그아웃.

params in result when login

  • version > 1.3.8
iOS Android type Description
accessToken string 토큰
refreshToken string 리프레쉬 토큰
accessTokenExpiresAt yyyy-MM-ddThh:mm:ss 토큰 만료 시간
refreshTokenExpiresAt yyyy-MM-ddThh:mm:ss 리프레쉬 토큰 만료 시간
scopes string[] 사용자로 부터 받은 권한
  • version <= 1.3.8
iOS Android type Description
token string 토큰

params in result when getProfile

  • version > 1.3.8
iOS Android Description
id 카카오 고유 아이디
nickname 별칭
profile_image_url 프로필 이미지
thumb_image_url 썸네일 이미지
email 이메일 주소
display_id 별칭 id
phone_number 휴대폰 번호
is_email_verified 이메일 인증 여부
is_kakaotalk_user 카카오톡 유저 여부
has_signed_up 가입 여부

email / phone_number / display_id / is_email_verified / is_kakaotalk_user / has_signed_up 해당 값들은 사용자의 동의 혹은 제휴를 통해 권한이 부여된 특정 앱에서만 획득할 수 있습니다. 권한이 있다면 그에 맞는 값을 리턴하고, 권한이 없다면 null 값을 반환합니다.

  • version <= 1.3.8
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와 상이한 부분이 있습니다.

Error code support partially

KAKAO_ERROR 에러 코드
모든 에러코드가 등록되어있지는 않습니다, 숫자로 반환되는 에러코드는 아래의 링크를 참조하세요

Android Link

iOS Link

// SHARED   : 공통 에러코드
// IOS      : iOS 에러코드
// ANDROID  : Android 에러코드

// SHARED
E_UNKNOWN;
E_CANCELLED_OPERATION;
E_ILLEGAL_STATE;

// IOS
E_IN_PROGRESS_OPERATION;
E_TOKEN_NOT_FOUND;
E_DEACTIVATED_SESSION;
E_ALREADY_LOGINED;
E_HTTP_ERROR;
E_BAD_RESPONSE;
E_NETWORK_ERROR;
E_NOT_SUPPORTED;
E_BAD_PARAMETER;

// ANDROID
E_ILLEGAL_ARGUMENT;
E_MISS_CONFIGURATION;
E_AUTHORIZATION_FAILED;
E_JSON_PARSING_ERROR;
E_URI_LENGTH_EXCEEDED;
E_KAKAOTALK_NOT_INSTALLED;

Usage

@react-native-seoul/kakao-login/KakaoLoginExample/App.js

How to run example project

  1. clone 받은 레포에서 KakaoLoginExample 폴더로 이동합니다
  cd KakaoLoginExample
  1. 필요한 모듈을 설치 합니다(preinstall이 실행됩니다)
    npm install
    #OR
    yarn install
  1. 프로젝트 실행
  • KAKAO_APP_KEY등 필요한 SDK 연동 설정은 기본으로 되어 있습니다
  • npm run start
  • npm run ios or npm run android로 앱 실행
  • ios의 경우 ios폴더에서 pod install을 먼저 실행해 주세요 (충돌시 lock파일 삭제 후 설치)
You can’t perform that action at this time.