React Native 카카오 로그인 라이브러리 입니다.
세부 예제는 KakaoLoginExample 폴더 안의 예제 프로젝트를 확인해주세요.
해당 라이브러리는 flow와 typescript를 지원합니다.
- 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 [email protected]
# OR
$ yarn add [email protected]React Native 0.60.X이상부터는 Auto linking을 지원합니다
바로 PostInstall을 참고해서 설치를 진행하세요
$ react-native link react-native-kakao-logins 또는 아래의 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,
},
},
},
};1.cocoapods 또는 카카오 홈페이지 Download 를 통한 iOS KakaoOpenSDK 설치
-
cocoapods을 통한 설치ios/Podfile에 다음처럼 추가 해주세요target 'yourApp' do ... pod 'KakaoOpenSDK', '~> 1.21.0' # append this line end
-
카카오 홈페이지 Download 를 통한 설치
- 카카오 홈페이지 다운로드 링크
- 앱생성 가이드 전 까지 가이드대로
SDK Framework를 프로젝트에 import 해주세요
- Xcode를 열고, project main navigator,
Libraries폴더 우클릭 ➜Add Files to [your project's name]클릭 - 프로젝트의
node_modules폴더 ➜@react-native-seoul/kakao-login그리고RNKakaoLogins.xcodeproj를Libraries폴더에 추가합니다 - Xcode navigator에서 원하는 Target을 선택하고,
libRNKakaoLogins.a파일을Build Phases➜Link Binary With Libraries에 추가합니다 Post installation를 참고하세요
-
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; }
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')
android/app/build.gradle의 dependencies block 에 다음을 추가합니다:implementation "com.facebook.react:react-native:+" // From node_modules + implementation project(':react-native-seoul-kakao-login')
설치가 제대로 되지 않는다면 example project의 설정을 참고하세요 👍
-
프로젝트의 ios 폴더에서
$ pod install명령어를 실행합니다. (KaKao SDK를 직접 다운받아서 설치한 경우는 제외) -
ios 카카오 sdk 설치 후의 설정과 관련해서는 공식문서 - 앱생성 을 참고해주세요. 앱생성 가이드를 따라하고 성공적으로 build가 되는 것을 확인하시면 아래를 진행하시면 됩니다.
-
Project => Targets 아래 앱 선택 => General 탭으로 이동해서 Bundle Identifier가 본인의 카카오 앱과 동일한지 확인해주세요.
-
공식문서 - 개발 프로젝트 설정 을 참고하여
info.plist,URL Types및 커스텀 스킴 추가 등 기타 필요한 세팅들을 프로젝트에 추가해줍니다. -
공식문서 - 로그인 을 참고하여
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]; } -
Expo Kit을 사용하여 개발하는 경우
RNKakaoLogin.xcodeproj의 Build Settings => Header Search Paths에$(SRCROOT)/../../../ios/Pods/Headers/Public를recursive로 추가해주셔야 합니다. -
잘 안되시면 Example Project를 확인하여 비교해보시면 되겠습니다.
- 안드로이드에서는 카카오 SDK가 모듈의 gradle 경로에 잡혀있어서 별도로 sdk를 설치하지 않아도 됩니다.
- manifest 파일에서 allowBackup을 "true" 로 설정해주세요.
android/build.gradle에 아래 내용을 추가합니다.
allprojects {
repositories {
...
maven { url 'http://devrepo.kakao.com:8088/nexus/content/groups/public/' }
}
}- 안드로이드 카카오 SDK 설치 후의 설정과 관련해서는 카카오 개발자 페이지 - 앱생성을 참고해주세요. 앱생성 가이드를 따라하고 성공적으로 build가 되는 것을 확인하시면 아래를 진행하시면 됩니다.
app/src/main/res/values/strings.xml을 열어 다음을 추가합니다
<resources>
<string name="app_name">KakaoLoginExample</string>
+ <string name="kakao_app_key">your_app_key</string>
</resources>- 컴파일 에러가 나면
build.gradle에서 android sdk compile version 등 빌드 sdk 버전을 맞춰주세요. - 아래와 같은 에러가 발생할 경우 키 해시 등록을 진행해주세요. 자바 코드로 구하는 방법이 제일 확실합니다.
AUTHORIZATION_FAILED: invalid android_key_hash or ios_bundle_id or web_site_url
React Native 0.60.x 부터 기본적으로 포함되는 디버깅 키의 해시는 다음과 같고 ../project/android/app에 디버그용 키스토어가 존재합니다
ex: Xo8WBi6jzSxKDVR4drqm84yr9iU=
| 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} | 로그아웃 |
| unlink | callback? (err: Error, result: String) |
Promise{String} | 연결끊기 |
| updateScopes | callback? (err: Error, result: String) |
Promise{Object} | 추가 권한 요청 |
- version > 1.3.8
| iOS | Android | type | Description | |
|---|---|---|---|---|
accessToken |
✓ | ✓ | string |
토큰 |
refreshToken |
✓ | ✓ | string |
리프레쉬 토큰 |
accessTokenExpiresAt |
✓ | ✓ | yyyy-MM-ddThh:mm:ss |
토큰 만료 시간 |
refreshTokenExpiresAt |
✓ | ✓ | yyyy-MM-ddThh:mm:ss or null |
리프레쉬 토큰 만료 시간, 구버전 SDK로 이미 로그인이 되어있었다면 null이 반환될 수 있습니다. |
scopes |
✓ | string[] |
사용자로 부터 받은 권한 |
- version <= 1.3.8
| iOS | Android | type | Description | |
|---|---|---|---|---|
token |
✓ | ✓ | string |
토큰 |
- 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 |
✓ | ✓ | 가입 여부 |
gender |
✓ | ✓ | 성별 |
birthday |
✓ | ✓ | 생일 |
birthyear |
✓ | ✓ | 출생연도 |
email / gender / birthday / birthyear / 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와 상이한 부분이 있습니다.
KAKAO_ERROR 에러 코드
모든 에러코드가 등록되어있지는 않습니다, 숫자로 반환되는 에러코드는 아래의 링크를 참조하세요
// 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;@react-native-seoul/kakao-login/KakaoLoginExample/App.js
clone받은 레포에서KakaoLoginExample폴더로 이동합니다
cd KakaoLoginExample- 필요한 모듈을 설치 합니다(
preinstall이 실행됩니다)
npm install
#OR
yarn install- 프로젝트 실행
KAKAO_APP_KEY등 필요한 SDK 연동 설정은 기본으로 되어 있습니다npm run startnpm run iosornpm run android로 앱 실행- ios의 경우
ios폴더에서pod install을 먼저 실행해 주세요 (충돌시lock파일삭제 후 설치)