npm.io
6.1.0 • Published 4 years ago

@floydkim/react-native-kakao-login

Licence
MIT
Version
6.1.0
Deps
1
Size
147 kB
Vulns
0
Weekly
0
DeprecatedThis package is deprecated
SummaryDependencyVersions

@react-native-seoul/kakao-login

VERSION DOWNLOAD LICENSE CI publish-package

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

  1. Pod에서 iOS deployment target이 11.0 이상이어야 합니다.

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

  3. 공식문서 - 개발 프로젝트 설정 을 참고하여 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>

  4. 3.0.0 버전부터는 swift 버전의 kakao sdk를 활용하므로 Swift Bridging Header를 추가해야할 수 있습니다.

    1

  5. AppDelegate.m 파일에 해당 부분을 추가해주세요. 이는 카카오톡 앱이 깔려 있을시 올바로 데이터를 받아오기 위함입니다 #193.

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

  7. 여러 라이브러리에서 동일한 버전의 SDK를 써야 하는 경우 Podfile에 아래와 같이 추가하여 SDK 버전을 강제로 지정할 수 있습니다.

    # 없는 경우에는 package.json의 sdkVersions.ios.kakao를 따릅니다.
$KakaoSDKVersion=YOUR_KAKAO_SDK_VERSION
Android

  1. 키 해시 등록을 진행해주세요. 자바 코드로 구하는 방법이 제일 확실합니다.

    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

  2. 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>

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

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

  4. 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"
  }
...

  5. 공식문서-토큰관리 에서 참고할 수 있듯이 Android 카카오 SDK는 액세스 토큰을 자동 갱신해줍니다.

  6. 컴파일 에러가 나면 build.gradle에서 android sdk compile version 등 빌드 sdk 버전을 맞춰주세요.

  7. (Optional) 앱 배포 시, 코드 축소, 난독화, 최적화를 하는 경우, 카카오 SDK를 제외해야 하기 때문에 ProGuard 규칙 파일에 다음 코드를 추가해주세요.

    -keep class com.kakao.sdk.**.model.* { <fields>; }
-keep class * extends com.google.gson.TypeAdapter

  8. 여러 라이브러리에서 동일한 버전의 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",
          ],
        ],
      ])
    }

Methods

Func Param 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[] 사용자로 부터 받은 권한

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

  1. clone 받은 레포에서 KakaoLoginExample 폴더로 이동합니다

    cd KakaoLoginExample

  2. 필요한 모듈을 설치 합니다(preinstall이 실행됩니다)

    yarn

  3. 프로젝트 실행

  • 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로 이용하셔도 무방합니다.

Keywords

react-nativekakaologinkakao-loginreact-native-seouldooboolab