@mj-studio/kakao-login

v6.0.6

Published

2 years ago

React Native Module for Kakao Login

Downloads

310

0High
0Medium
0Low

mj_studio

react-native kakao login kakao-login react-native-seoul dooboolab

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

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