React Native cli Kakao 로그인 연동하기

Expo가 아닌 React Native cli 환경에서 SNS로그인 기능을 구현해야하는데, 생각보다 다양한 오류들이 있고 한번에

된 케이스가 없어서 다른 공유해주신 분들 처럼 나도 나의 방법을 공유하려고 한다. 

( 누군가에게 도움이 되길... ) 

 

작업 환경은 iOS( Macbook )으로 작업했다. 

환경 설치 

환경을 설치하는 것은 따로 올리지 않으려고 했지만 첫 환경을 구성하는 단계에서 달라질 수 있을 것 같아서 올린다. 

공식 사이트에서 without Framework에서 내용을 보고 설치하였다. 

npx @react-native-community/cli@latest init [프로젝트명]

 

프로젝트 구성이 끝나면 바로 카카오 로그인 라이브러리를 설치하였다. 

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

 

설치가 끝나면 iOS환경에서도 로그인이 필요하므로 npx pod-install 명령어를 바로 사용해서 pod 라이브러리를

추가로 설치해준다. 

npx pod-install

 

여기까지 설치가 끝나면 프로젝트에서 설치할 부분은 끝이다. 

지금까지의 버전을 공유하자면 

"dependencies": {
  "@react-native-seoul/kakao-login": "^5.4.1",
  "react": "18.2.0",
  "react-native": "0.74.2"
},
"devDependencies": {
  "@babel/core": "^7.20.0",
  "@babel/preset-env": "^7.20.0",
  "@babel/runtime": "^7.20.0",
  "@react-native/babel-preset": "0.74.84",
  "@react-native/eslint-config": "0.74.84",
  "@react-native/metro-config": "0.74.84",
  "@react-native/typescript-config": "0.74.84",
  "@types/react": "^18.2.6",    
  "@types/react-test-renderer": "^18.0.0",
  "babel-jest": "^29.6.3",
  "eslint": "^8.19.0",
  "jest": "^29.6.3",
  "prettier": "2.8.8",
  "react-test-renderer": "18.2.0",
  "typescript": "5.0.4"
},

 

다음과 같다. 

 

환경 설정 - iOS

개발 환경이 끝나면 이제 환경 설정을 진행할 차례이다. 

 

1. Pod에서 iOS deployment target이 13.0 이상이어야 한다

platform :ios, min_ios_version_supported
==> 
platform :ios, "13.0"

 

pod 설정을 위해서 ios 폴더 안에 있는 Podfile의 platform을 수정한다. 

cra로 설치하면 min_ios_version_supported로 되어있는데, 이걸 13.0으로 변경하였다. 

 

2. info.plist 수정 

ios폴더 안에 프로젝트명칭으로 구성된 폴더가 있을 것이다. 그 안에 있는  info.plist파일을 수정한다. 

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleTypeRole</key>
    <string>Editor</string>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>kakao[카카오 네이티브앱 키]</string>
    </array>
  </dict>
</array>
<key>KAKAO_APP_KEY</key>
<string>[카카오 네이티브앱 키]</string>
<key>LSApplicationQueriesSchemes</key>
<array>
  <string>kakaokompassauth</string>
  <string>storykompassauth</string>
  <string>kakaolink</string>
</array>

 

위 코드를 추가해준다. [카카오 네이티브앱 키] 부분은 카카오 개발자 센터에서 네이티브 앱 키를 넣어주면 된다. 

 

3.  Swift Bridging 추가 

3.0.0 버전부터는 swift버전의 카카오 sdk를 사용해서 필요하다고 한다. 

 

xcode에서 파일을 만들 수 있는데, file => new => file을 통해서 파일을 생성해준다. 

창이 나오면 Swift File을 선택해서 만들어주면 된다. 

 

ios폴더안에 SwiftBridge명칭으로 파일을 만들어주면 된다. 

 

4. AppDelegate.m 파일 수정 

// ...
#import <RNKakaoLogins.h>

@implementation AppDelegate

- (BOOL)application:(UIApplication *)app
     openURL:(NSURL *)url
     options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options {
 if([RNKakaoLogins isKakaoTalkLoginUrl:url]) {
    return [RNKakaoLogins handleOpenUrl: url];
 }

 return NO;
}

// ...

 

info.plist와 동일한 위치에 있는 AppDelegate.mm파일에 위 코드를 추가해주면 된다. 

카카오톡 앱이 깔려 있으면 바로 데이터를 불러올 수 있게 해주는 코드라고 한다. 

 

5. Bundle Identifier 확인 

카카오톡 개발자 센터에 iOS 로그인을 위해서 둥록을 해줘야 한다. 

이때 Bundle Identifier를 확인하려면 xcode를 사용하면 쉽게 확인할 수 있다. 

xcode로 프로젝트의 ios폴더 안에 들어가면 있는 [프로젝트명].xcworkspace 폴더를 열어주면 

가운데에 있는 Bundle Identifier가 해당 정보이다. 

이것을 등록해주면 된다. 

 

6. main.jsbundle

특이 케이스로 5번까지 설정하고 실행하면 번들에서 다음과 같은 오류가 발생했다. 

Make sure you're running a packager server or have included a .jsbundle file in 
your application bundle.

 

다른 사람들 환경에선 ios폴더 안에 main.jsbundle이 있어서 문제가 없다는데 나는 해당 파일이 없었다. 

그래서 찾아보니 번들을 만들어주는 명령어가 있어서 다음과 같은 명령어를 입력하면 해결이 가능하다. 

yarn react-native bundle --entry-file='index.js' --bundle-output='./ios/main.jsbundle' --dev=false --platform='ios'

 

6번까지 설정이 끝나면 iOS에서 로그인을 할 수 있다. 

 

환경 설정 - android

android는 ios보다 작업이 간단하다. 

 

1. 해시 키 등록 

React Native 0.60.x 버전부턴 템플릿에 기본적으로 디버그 키스토어가 존재한다고 한다. 

해당 키스토어의 key hash는 다음과 같다 : 

Xo8WBi6jzSxKDVR4drqm84yr9iU=

 

기본으로 제공되는 것 외에 명령어를 통해서도 만들 수 있다. 

( 이건 각자 알아봐주세... )

 

2. Redirect URI 설정 

카카오 로그인 기능을 구현하기 위해서 리다이렉션을 통해 Request Code를 받아야 한다. 

그러기 위해서 android폴더 아래의 app폴더 아래 src폴더 아래에 있는 main폴더의 AndroidManifest.xml에 입력해준다 : 

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    // ...

    <application
      android:name=".MainApplication"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:roundIcon="@mipmap/ic_launcher_round"
      android:allowBackup="false"
      android:theme="@style/AppTheme">
      
      // ...
      
      <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" />
            <data android:host="oauth"
               android:scheme="kakao[카카오 네이티브앱 키]" />
         </intent-filter>
      </activity> 
    </application>
</manifest>

 

<activity ... > </active> 코드를 넣어주면 된다. 

이때, [카카오 네이티브앱 키] 부분은 ios설정과 동일하게 개발자센터의 네이티브앱 키를 넣어준다. 

 

3. strings.xml 수정 

main 폴더 안에 있는 res, values폴더의 strings.xml 파일을 수정해야 한다. 

코드는 간단하게 아래와 같이 넣어주면 된다. 

<string name="kakao_app_key">[카카오 네이티브앱 키]</string>

 

android는 특별하게 작업하면 발생한 문제는 없었으며, 3번까지만 작업하면 바로 연동이 가능했다. 

혹시 더 많은 설정 및 패키지 자체를 보고 싶다면 아래 링크를 들어가면 된다.