@react-native-seoul/kakao-login

React Native 카카오 로그인 라이브러리 입니다. @react-native-seoul/kakao-login < 3.0 이하 버전을 쓰시는 분들은 DEPRECATED README를 참고해주세요.

세부 예제는 KakaoLoginExample 폴더 안의 예제 프로젝트를 확인해주세요. 해당 라이브러리는 flow와 typescript를 지원합니다.

Changelogs

Changelogs 링크

Demo

카카오 로그인 Example Project 데모 화면

위 프로젝트는 KakaoLoginExample 폴더에서 확인 가능합니다.

Tutorial

라이브러리를 더욱 편리하게 사용하기 위해서 Youtube 영상을 제작했습니다.

Getting started

해당 라이브러리는 3.0.0 이후 부터는 react-native 0.61이상을 지원합니다. 카카오 라이브러리 지원이 아래 버전부터는 지원이 끊길 예정이므로 참고해주시기 바랍니다. 과거에는 카카오 라이브러리 레거시 iOS와 카카오 라이브러리 레거시 Android 버전을 쓰고 있었습니다.

Installation

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

React Native 0.60.X이상부터는 Auto linking을 지원합니다. 따라서 설치는 매우 간편합니다.

iOS의 경우 yarn add @react-native-seoul/kakao-login 이후 npx pod-install 명령어로 pod 라이브러리만 추가로 설치해주시면 됩니다.

Post Installation

설치가 제대로 되지 않는다면 example project의 설정을 참고하세요 👍

iOS

Pod에서 iOS deployment target이 11.0 이상이어야 합니다.
ios 카카오 sdk 설치 후의 설정과 관련해서는 공식문서 - 카카오 로그인 > 설정하기를 참고해주세요. 해당 가이드를 통해 카카오 개발자 페이지에서 본인의 어플리케이션을 생성해주세요.

공식문서 - 개발 프로젝트 설정 을 참고하여 info.plist, URL Types 및 커스텀 스킴 추가 등 기타 필요한 세팅들을 프로젝트에 추가해줍니다. 아래카카오 네이티브앱 아이디를 적어주세요 문구를 잘 확인하시여 본인의 Kakao App Key로 변경해주세요.

 <key>CFBundleURLTypes</key>
 <array>
+ <dict>
+   <key>CFBundleTypeRole</key>
+   <string>Editor</string>
+   <key>CFBundleURLSchemes</key>
+   <array>
+     <string>kakao{카카오 네이티브앱 아이디를 적어주세요}</string>
+   </array>
+ </dict>
 </array>
 <key>CFBundleVersion</key>
 <string>1</string>
+ <key>KAKAO_APP_KEY</key>
+ <string>{카카오 네이티브앱 아이디를 적어주세요}</string>
+ <key>LSApplicationQueriesSchemes</key>
+ <array>
+   <string>kakaokompassauth</string>
+   <string>storykompassauth</string>
+   <string>kakaolink</string>
+ </array>

3.0.0 버전부터는 swift 버전의 kakao sdk를 활용하므로 Swift Bridging Header를 추가해야할 수 있습니다.
AppDelegate.m 파일에 해당 부분을 추가해주세요. 이는 카카오톡 앱이 깔려 있을시 올바로 데이터를 받아오기 위함입니다 #193.
Project => Targets 아래 앱 선택 => General 탭으로 이동해서 Bundle Identifier가 본인의 카카오 앱과 동일한지 확인해주세요.
여러 라이브러리에서 동일한 버전의 SDK를 써야 하는 경우 Podfile에 아래와 같이 추가하여 SDK 버전을 강제로 지정할 수 있습니다.
```
# 없는 경우에는 package.json의 sdkVersions.ios.kakao를 따릅니다.
$KakaoSDKVersion=YOUR_KAKAO_SDK_VERSION
```

Android

키 해시 등록을 진행해주세요. 자바 코드로 구하는 방법이 제일 확실합니다.
```
AUTHORIZATION_FAILED: invalid android_key_hash or ios_bundle_id or web_site_url
```
React Native 0.60.x 부터 기본적으로 포함되는 디버깅 키의 해시는 다음과 같고 ../project/android/app에 디버그용 키스토어가 존재합니다

ex: Xo8WBi6jzSxKDVR4drqm84yr9iU=
- React Native에서는 개발시 android/app/debug.keystore의 해시를 추가해주시면 됩니다.
```
keytool -exportcert -alias androiddebugkey -keystore ~./android/app/debug.keystore -storepass android -keypass android | openssl sha1 -binary | openssl base64
```

Redirect URI 설정

카카오 로그인 기능을 구현하기 위해서는 리다이렉션(Redirection)을 통해 Request Code를 받아야 합니다. 그러기 위해서는 아래 코드를 AndroidManifest.xml에 추가해주세요. 그리고 카카오 네이티브 앱 key를 입력해주세요 텍스트를 본인의 카카오 네이티브 키로 변경해주시면 됩니다. (Android 12(API 31) 이상을 타깃으로 하는 앱인 경우, exported 요소를 반드시 "true"로 선언해야 합니다.)

<activity
   android:name="com.kakao.sdk.auth.AuthCodeHandlerActivity"
   android:exported="true">
  <intent-filter>
      <action android:name="android.intent.action.VIEW" />
      <category android:name="android.intent.category.DEFAULT" />
      <category android:name="android.intent.category.BROWSABLE" />

      <!-- Redirect URI: "kakao{NATIVE_APP_KEY}://oauth“ -->
      <data android:host="oauth"
          android:scheme="kakao{카카오 네이티브 앱 key를 입력해주세요}" />
  </intent-filter>
</activity>

app/src/main/res/values/strings.xml 을 열어 다음을 추가합니다

<resources>
    <string name="app_name">KakaoLoginExample</string>
+   <string name="kakao_app_key">your_app_key</string>
</resources>

kotlin을 프로젝트에서 해석가능하도록 설치해줍니다. android/build.gradle 파일에 아래 변경사항을 적용해주세요.

buildscript {
  ext {
      buildToolsVersion = "29.0.3"
      minSdkVersion = 21
      compileSdkVersion = 29
      targetSdkVersion = 29
+     kotlinVersion = '1.3.41'

      ndkVersion = "20.1.5948944"
  }
  repositories {
      google()
      jcenter()
  }
  dependencies {
      classpath("com.android.tools.build:gradle:4.1.0")
+     classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlinVersion"
  }
...

공식문서-토큰관리 에서 참고할 수 있듯이 Android 카카오 SDK는 액세스 토큰을 자동 갱신해줍니다.
컴파일 에러가 나면 build.gradle에서 android sdk compile version 등 빌드 sdk 버전을 맞춰주세요.
(Optional) 앱 배포 시, 코드 축소, 난독화, 최적화를 하는 경우, 카카오 SDK를 제외해야 하기 때문에 ProGuard 규칙 파일에 다음 코드를 추가해주세요.
```
-keep class com.kakao.sdk.**.model.* { <fields>; }
-keep class * extends com.google.gson.TypeAdapter
```

여러 라이브러리에서 동일한 버전의 SDK를 써야 하는 경우 프로젝트의 /android/build.gradle 파일에, 아래의 형태로 버전을 강제 지정할 수 있습니다.

project.ext {
  set('react-native', [
    versions: [
      // Overriding Build/Android SDK Versions
      android : [
        minSdk    : 19,
        targetSdk : 31,
        compileSdk: 31,
        buildTools: "30.0.3",
        kotlin: "1.6.21"
      ],
      
      // Overriding Library SDK Versions
      kakao: [
        // Override Kakao SDK Version
        sdk   : "2.10.0",
      ],
    ],
  ])
}

EXPO (EAS Build only, SDK 41 이상)

app.json 파일을 아래와 같이 수정합니다.

{
  "expo": {
    ...
    "plugins": [
      ...,
      [
        "@react-native-seoul/kakao-login",
        {
          "kakaoAppKey": "", // 필수
          "overrideKakaoSDKVersion": "2.9.0", // Optional, 
          "kotlinVersion": "1.5.10" // Android Only, Optional, Expo 내부 패키지들과의 충돌이 있어 테스트 결과 1.5.10은 문제가 없었습니다. 지정 안하면 1.5.10으로 설정됩니다.
        }
      ]
    ],
    ...
  }
}

EAS Build 이후 expo start --dev-client를 이용합니다.
(Optional) Android에서 proguard rules 등을 적용하실 경우, Expo BuildProperties 를 참고하세요

Methods

Func	Return	Description
login	Promise{KakaoOAuthToken}	로그인 (카카오톡에 접근할 수 없다면 loginWithKakaoAccount 호출)
loginWithKakaoAccount	Promise{KakaoOAuthToken}	카카오계정으로 로그인 (기본 웹 브라우저(CustomTabs)에 있는 카카오계정 cookie 로 사용자를 인증하고 OAuthToken 발급)
getProfile	Promise{KakaoProfile}	프로필 불러오기
logout	Promise{string}	로그아웃
unlink	Promise{string}	연결끊기
getAccessToken	Promise{KakaoAccessTokenInfo}	액세스 토큰 조회

프로필 가져오기 - `getProfile` => `KakaoProfile`

	iOS	Android	type	Description
`accessToken`	✓	✓	`string`	토큰
`refreshToken?`	✓	✓	`string`	리프레쉬 토큰
`idToken?`	✓	✓	`string`	OpenID Connect 확장 기능을 통해 발급되는 ID 토큰
`accessTokenExpiresAt?`	✓	✓	`Date`	토큰 만료 시간
`refreshTokenExpiresAt?`	✓	✓	`Date`	리프레쉬 토큰 만료 시간, 구버전 SDK로 이미 로그인이 되어있었다면 null이 반환될 수 있습니다.
`scopes`	✓	✓	`string[]`	사용자로 부터 받은 권한

React-native-web

1.RestApiKey랑 redirectUrl을 포함한 아래 링크로 href 링크를 열어서 code를 가져옵니다 const kakaoUrl = https://kauth.kakao.com/oauth/authorize?client_id=${restApiKey}&redirect_uri=${redirectUrl}&response_type=code;

redirectUrl이 http://localhost:3000 일때 아래와같이 redirectUrl에 code파라미터가 붙은 url이 들어와집니다

http://localhost:3000/?code=Ss32OM1_yUybn5dtEQ-XT8EZfV24BKC_GIeIvFPz7_wHorYXtij9JFQcMuGtGdzxQc3Vlwopb1UAAAGCizvuCw code= 뒤쪽부분을 split해서 토큰 발급시 필요한 code를 얻을 수 있습니다 react-native-web에서는 app과 다르게 restApikey, redirecturl을 code와 같이 직접 넣어줘야 합니다

Methods (Web)

Func	Param	Return	Description
login	restApiKeyWeb, redirectUrlWeb, codeWeb	Promise{KakaoOAuthWebToken}	로그인
loginWithKakaoAccount			웹 지원 x
getProfile	tokenWeb	Promise{KakaoProfile}	프로필 불러오기
logout	tokenWeb	Promise{string}	로그아웃
unlink	tokenWeb	Promise{string}	연결끊기
getAccessToken			웹 지원 x

Usage

Sample Code

const signInWithKakao = async (): Promise<void> => {
  const token: KakaoOAuthToken = await login();

  setResult(JSON.stringify(token));
};

const signOutWithKakao = async (): Promise<void> => {
  const message = await logout();

  setResult(message);
};

const getKakaoProfile = async (): Promise<void> => {
  const profile: KakaoProfile = await getProfile();

  setResult(JSON.stringify(profile));
};

const unlinkKakao = async (): Promise<void> => {
  const message = await unlink();

  setResult(message);
};

How to run example project

clone 받은 레포에서 KakaoLoginExample 폴더로 이동합니다
```
cd KakaoLoginExample
```
필요한 모듈을 설치 합니다(preinstall이 실행됩니다)
```
yarn
```
프로젝트 실행

KAKAO_APP_KEY등 필요한 SDK 연동 설정은 기본으로 되어 있습니다.
- 본인 앱의 키로 변경하고 테스트 하셔도 무방합니다. 단 PR을 날리실 때는 삭제하고 날려주세요.
yarn start
yarn ios or yarn android로 앱 실행
- iOS 앱이 실행되지 않을 때는 XCode를 열고 테스트 해주세요. 이는 RN 0.64.0에서 발생되고 있는 문제입니다.
ios의 경우 ios폴더에서 pod install을 먼저 실행해 주세요. 프로젝트 폴더에서 npx pod-install로 이용하셔도 무방합니다.

@mj-studio/kakao-login

@react-native-seoul/kakao-login

Changelogs

Demo

Tutorial

Getting started

Installation

Post Installation

iOS

Android

EXPO (EAS Build only, SDK 41 이상)

Methods

프로필 가져오기 - `getProfile` => `KakaoProfile`

React-native-web

Methods (Web)

Usage

Sample Code

How to run example project

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

Weekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

@mj-studio/kakao-login

@react-native-seoul/kakao-login

Changelogs

Demo

Tutorial

Getting started

Installation

Post Installation

iOS

Android

EXPO (EAS Build only, SDK 41 이상)

Methods

프로필 가져오기 - getProfile => KakaoProfile

React-native-web

Methods (Web)

Usage

Sample Code

How to run example project

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

프로필 가져오기 - `getProfile` => `KakaoProfile`

Weekly Downloads