React Native 카카오 로그인 (최신 버전. RN 0.77 이상)

📌 서론

https://www.npmjs.com/package/@react-native-seoul/kakao-login

@react-native-seoul/kakao-login

 

@react-native-seoul/kakao-login 라이브러리는 React Native 에서 카카오 로그인을 구현해주도록 하는 라이브러리이다. 문서에도 과정이 잘 나와 있어서 이대로만 따라하면 구현에는 문제가 없다. 나 또한 약 반 년 전에 이를 통해 RN환경에서 카카오 로그인을 구현했었다. 그러나 현 RN 버전이 업데이트 되면서 iOS 설정 과정 중 일부가 호환되지 않게 됨에 따라 공식 문서를 따를 수 없게 되었다. 

따라서 내가 다시 이를 구현할 때를 대비하고, 남들도 이를 봤으면 해서 작성해본다.

 

 

 

📌라이브러리 설치 및 KakaoDevelopers 앱 만들기

//yarn 사용시
yarn add @react-native-seoul/kakao-login

//npm 사용시
npm i @react-native-seoul/kakao-login

먼저 프로젝트에서 라이브러리를 설치한다. 

 

cd ios
pod install
cd ..

iOS에서 사용하기 위해 pod install을 진행해야 한다. terminal에서 다음 명령어를 진행한다.

 

 

https://developers.kakao.com

Kakao Developers

이제 Kakao Developers에서 앱을 등록해야한다.

 

 

위 사이트로 들어가서 로그인을 한 뒤 상단의 내 애플리케이션에 들어간다.

 

 

 애플리케이션 추가하기 버튼을 눌러 정보를 입력하여 만든다. 

 

 

 

이제 앱을 들어가면 다음과 같이 대시보드가 나온다.

 

 

카카오 로그인을 사용하기 위해서 카카오 로그인 탭에 들어가 모든 기능을 활성화 시킨다. 아래 Redirect Url은 그냥 놔둬도 된다.

 

 

📌 iOS 설정

왼쪽에서 플랫폼을 선택하고 iOS 등록을 누른다. 여기에서 앱 번들 ID를 입력한다. 이는 xcode에서 찾아볼 수 있는데, 

 

 

xcode에서 프로젝트 파일을 열고 (이때 iOS파일을 열어야 한다.), ROOT의 프로젝트 명을 클릭하고, TARGETS에서 프로젝트를 선택한다.  그러면 General 탭에 Bundle Identifier에 있는 것을 그대로 등록하면 된다.

 

 

//ios/PROJECT_NAME/Info.plist	

<!-- 추가된 부분 -->
<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>$(CURRENT_PROJECT_VERSION)</string>
<!-- 기존에 있던 부분 -->

<!-- 추가된 부분 -->
<key>KAKAO_APP_KEY</key>
<string>{카카오 네이티브앱 아이디를 적어주세요}</string>
<key>LSApplicationQueriesSchemes</key>
<array>
    <string>kakaokompassauth</string>
    <string>storykompassauth</string>
    <string>kakaolink</string>
</array>
<!-- 추가된 부분 -->

 

이제 코드로 돌아와서, Info.plist 를 수정한다. vscode에서 수정하는 걸 추천하고 위치는 ios/PROJECT_NAME/Info.plist 이다. 

Info.plist 코드를 보다보면 중간에 CFBundleVersion 부분이 보일건데 나는 그 위 아래로 코드를 추가했다.

꼭 자세히 확인하고 추가하길 바란다.

 

 

 

카카오 네이티브 앱 아이디를 입력해야하는데 kakao developers에서 앱 키 > 네이티브 앱 키 를 복사하여 붙여 넣어주면 된다.

 

{카카오 네이티브앱 아이디를 적어주세요} 이 부분에 넣으면 되는데 이때 중괄호 {} 까지 다 지우고 입력해야한다.

 

 

 

❗️문제 상황

이제부터가 핵심인데, 이 부분에서 공식 문서와 달라진 부분이다.

 

 

기존 React Native에서는 앱을 생성하면 AppDelegate.h와 AppDelegate.mm 두 개의 파일이 생성된다. 공식 문서는 이를 따르고 있다. 

그러나 최신 React Native 버전에서는 이 파일이 하나로 바뀌어 AppDelegate.swift가 되었다.

이는 RN가 기존 Obj-C 템플릿에서 .swift 템플릿으로 바뀜에 따라 생긴 변화이다. 하필 이 부분에서 카카오 로그인이 걸려 라이브러리 문서를 따를 수 없게 되었다. 

 

 

최근에 바뀐 내용이고, kakao login은 주로 한국에서만 사용되는 것이기에 인터넷을 아무리 찾아봐도 정보를 찾을 수 없었다.

깃허브 페이지에 누군가 Appdelegate.swift 지원 방식을 찾는 issue를 올린 것 뿐... 심지어 이는 Expo 버전이라 CLI 환경인 나는 맞지 않다.

 

 

❗️해결 과정

kakao login은 원래 Appdelegate.mm 파일을 수정하는 과정이 필요하다. 앞서 언급했듯 RN Obj-C 템플릿에서 Swift 템플릿으로 바뀌었다. 이 말은 무엇이냐. 

Obj-C 템플릿에서 사용하는 코드와 기타 설정을 Swift 템플릿에 적용시키면 문제가 없다는 뜻이다.

 

 

이는 두 단계가 필요하다.

• Bridging Header 준비
• AppDelegate.swift에 React 네이티브 초기화 코드 작성

차근차근 적용해보자

 

 

• Bridging Header 준비 

xcode에서 프로젝트를 연다.

왼쪽 PROJECT_NAME에서 우클릭을 눌러 New File From Template을 선택한다. 

Header File을 선택하고 이름은 꼭 YourProjectName-Bridging-Header.h로 저장한다. 

 

이제 Bridging Header의 경로를 설정해주어야한다. 

ROOT > Traget > Build Settings Swift Compiler-General > Object-C Bridging Header

 

ROOT - Traget에 들어가서 Build Settings 탭에 들어간다.

Basic으로 되어 있으면 All을 선택한다. 그 후 오른쪽 검색창에 swift compiler를 검색하고 찾다보면 Swift Compiler-General탭이 보일 것이다.

여기에서 Object-C Bridging Header를 설정할 것이다.

이 항목을 열어서 $(SRCROOT)/YourProjectName-Bridging-Header.h를 입력한다. 그러면 알아서 경로를 지정해준다.

 

 

#ifndef vttest_Bridging_Header_h
#define vttest_Bridging_Header_h

#import <React/RCTBridge.h>
#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>

#import <RNKakaoLogins.h>

 

이후 Bridging-Header.h파일에서 다음과 같이 import해준다. 이러면 Bridging Header는 끝이다.

 

 

• AppDelegate.swift에 React 네이티브 초기화 코드 작성

import UIKit
import React
import React_RCTAppDelegate
import ReactAppDependencyProvider
// RNKakaoLogins는 Bridging-Header에 import 되었다고 가정

@main
class AppDelegate: UIResponder, UIApplicationDelegate {
  var window: UIWindow?
  var reactNativeDelegate: ReactNativeDelegate?
  var reactNativeFactory: RCTReactNativeFactory?

  func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]? = nil
  ) -> Bool {
    let delegate = ReactNativeDelegate()
    let factory = RCTReactNativeFactory(delegate: delegate)
    delegate.dependencyProvider = RCTAppDependencyProvider()

    reactNativeDelegate = delegate
    reactNativeFactory = factory

    window = UIWindow(frame: UIScreen.main.bounds)
    factory.startReactNative(
      withModuleName: "YOUR_APP_NAME",
      in: window,
      launchOptions: launchOptions
    )

    return true
  }

  // 추가) 카카오 로그인 URL 처리
  func application(
    _ app: UIApplication,
    open url: URL,
    options: [UIApplication.OpenURLOptionsKey: Any] = [:]
  ) -> Bool {
    if RNKakaoLogins.isKakaoTalkLoginUrl(url) {
      return RNKakaoLogins.handleOpen(url)
    }
    return false
  }
}

 // 추가) 중요!! 
@objcMembers
class ReactNativeDelegate: RCTDefaultReactNativeFactoryDelegate {
  // 디버그/릴리즈 JS 번들 URL 반환
  override func bundleURL() -> URL? {
    #if DEBUG
      return RCTBundleURLProvider.sharedSettings()
               .jsBundleURL(forBundleRoot: "index", fallbackExtension: nil)
    #else
      return Bundle.main.url(forResource: "main", withExtension: "jsbundle")
    #endif
  }

  // RCTBridgeDelegate 용 메서드
  override func sourceURL(for bridge: RCTBridge) -> URL? {
    return bundleURL()
  }
}

 

그냥 이 코드를 그대로 넣어라. 중간에 본인 프로젝트 명은 그대로 넣고 나머지는 이대로만 해라. 제발.

 

이렇게만 하면 iOS 설정은 끝이다. 

 

 

 

 

📌 Android 설정

 

 

먼저 다음과 같이 키 해시, 패키지명을 입력해야한다. 

 

 

패키지명은 다음과 같이 찾을 수 있다.

android > app > build.gradle > applicationId

이를 패키지명에 입력한다.

 

keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore -storepass android -keypass android | openssl sha1 -binary | openssl base64

키 해시는 앱 루트 폴더에서 terminal에 다음과 같이 입력하면 나온다.

 

 

다음은 Redirect URI 을 앱 내에서 설정해야한다.

 

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

다음을 AndroidManifest.xml 파일에 추가해야한다.

위치는 android > app > AndroidManifest.xml 이다.
여기서도 아까 kakao developers에서 찾았던 네이티브 앱 키를 입력해야한다.

 

 

 

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

마지막으로 app/src/main/res/values/strings.xml 을 열어 다음을 추가한다.

 

 

이제 모든 사항이 끝났다. 이를 저장하고 빌드를 시작하면 된다