[React Native] 리액트 네이티브에서 카카오 로그인 구현하기 (@react-native-seoul/kakao-login)

리액트 네이티브 (안드로이드, ios)에서 카카오 로그인을 하는 방법을 정리하고자 한다.

 

우선 카카오 로그인 방식에는 크게 웹뷰를 띄워 아이디, 비밀번호를 입력하는 Rest 방식과 카카오톡 어플을 실행하여 로그인하는 SDK 방식이 있다.

모바일에서는 UX상 후자를 선호하므로 오늘은 후자에 대해서만 이야기할 것이다.

 

우선 카카오 디벨로퍼 사이트에서 프로젝트를 생성해야 한다.

 

 

내 애플리케이션으로 이동하여 애플리케이션 추가하기를 누른다.

 

앱 이름과 회사명, 카테고리를 입력하고 저장한다. 아이콘은 나중에 설정해도 된다.

 

안드로이드

안드로이드 카카오 로그인을 구현할 때 가장 중요한 부분은 키 해시이다.

디버깅 버전 키 해시, 릴리즈 버전 키 해시 이렇게 2개가 필요하고, 구글로그인을 구현한 경우에는 추가적으로 1개가 더 필요하다. (나중에..)

 

우선 디버깅 버전 키는 리액트 네이티브 프로젝트 내에 생성이 이미 완료되어 있을 것이다.

myProject/android/app 폴더 안에 debug.keystore라는 파일이 생성되어 있는지 확인한다.

없다면 릴리즈 버전 키를 생성하는 방식과 같은 방식으로 생성하면 된다.

 

키 해시를 얻기 위해서는 bash에 다음 명령어를 입력해야 한다.

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

윈도우를 사용한다면 여러가지 우회하는 방법을 통해 리눅스 터미널에 입력해야 하지만, 맥북 유저의 경우 그냥 터미널에 입력해도 상관 없다.

 

명령어를 입력하면 키 해시가 나온다. 잘 복사해서 보관하자. 

 

배포용 keystore는 직접 생성해주어야 한다. bash에 다음 명령어를 입력한다.

keytool -genkeypair -v -keystore release.keystore -alias androidreleasekey -keyalg RSA -keysize 2048 -validity 10000

비밀번호와 별명은 잘 커스텀해서 입력하고, 생성된 keystore 파일은 잘 보관하자. (git에는 올리지 않는 것이 좋다.)

 

같은 방법으로 release용 키 해시를 얻어 보관하고, 키스토어를 생성할 때 입력한 비밀번호와 별명을 myProject/android/gradle.properties에 입력해주자.

 

네이티브 앱에서 release용 앱을 빌드할 때 이 비밀번호 등을 사용할 수 있게 myProject/android/app/build.gradle의 signingConfigs에 release를 추가해 준다.

signingConfigs {
        debug {
            storeFile file('debug.keystore')
            storePassword 'android'
            keyAlias 'androiddebugkey'
            keyPassword 'android'
        }
        release {
            if (project.hasProperty('MYAPP_RELEASE_STORE_FILE')) {
                storeFile file(MYAPP_RELEASE_STORE_FILE)
                storePassword MYAPP_RELEASE_STORE_PASSWORD
                keyAlias MYAPP_RELEASE_KEY_ALIAS
                keyPassword MYAPP_RELEASE_KEY_PASSWORD
            }
        
        }
    }

 

 

카카오 디벨로퍼 > 내 애플리케이션 > 애플리케이션 선택 > 앱 키에 들어가 네이티브 앱 키를 복사한다.

 

 

myProject/android/app/src/main/res/values/strings.xml에 방금 복사한 앱 키를 추가한다.

<string name="kakao_app_key">네이티브 앱 키</string>

 

 

카카오 디벨로퍼에서 이번엔 플랫폼에 들어가 안드로이드 플랫폼 등록을 선택한다.

 

우선 패키지명은 써 있는 것처럼 android/app/src/main/AndroidManifest.xml을 보면 알 수도 있지만, 없는 경우도 있으니 MainActivity.kt를 확인하자.

 

android/app/src/main/java/com/projectName/MainActivity.kt

 

 

 

맨 위에 패키지명이 있다.

 

키 해시에는 아까 keystore에서 찾아낸 키 해시(디버깅용, release용)를 등록한다.

 

안드로이드 설정 끝! 안드로이드만 구현하는 경우 맨 밑 공통 부분으로 넘어가자.

 

 

iOS

카카오 디벨로퍼 > 내 애플리케이션 > 애플리케이션 선택 > 앱 키에 들어가 네이티브 앱 키를 복사한다.

 

 

myProject/ios/myProject/Info.plist에 방금 복사한 앱 키를 추가한다.

 

 

2번 추가해야 하는데, CFBundleURLSchemes라는 키에 array 안의 string으로 한 번,

앱 키 앞에 kakao라는 문자열을 붙여 주자.

<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>kakao네이티브 앱 키</string>
        </array>
    </dict>
</array>

 

KAKAO_APP_KEY라는 키에 string으로 한 번 추가해 준다.

<key>KAKAO_APP_KEY</key>
<string>네이티브 앱 키/string>

 

 

이번엔 myProject/ios/myProject/AppDelegate.mm에서 코드를 추가해 준다.

// @implementation AppDelegate 밑에 추가해주면 된다.

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

  return NO;
}

이걸 해주지 않으면 카카오 앱이 깔려 있지 않은 경우에 웹뷰로 전환이 안 된다.

 

 

카카오 디벨로퍼에서 이번엔 플랫폼에 들어가 iOS 플랫폼 등록을 선택한다.

bundle identifier가 필요하다.
myProject/ios/myProject/Info.plist에 있으면 여기서 가져가고 없으면 project.pbxproj에서 검색한다.
ios/myPRoject.xcodeproj/project.pbxproj
검색: PRODUCT_BUNDLE_IDENTIFIER

 

 

 

만약 검색했는데 org.reactjs.native.example~ 이렇게 길게 뜬다면 xcode에 가서 변경해주면 된다.

 

 

 

참고로 identifier니까 당연한 소리 같지만 이 부분은 unique해야 한다.

보통 com.project나 com.project.app, com.project.service 이런 식으로 설정한다.

안드로이드의 package명과 ios의 bundle id는 반드시 같아야 할 필요는 없지만 헷갈리지 않으려면 같게 하는 게 좋다.

 

공통

.env로 가서 KAKAO_API_KEY를 저장한다. (카카오 디벨로퍼에서 복사해 온 네이티브 앱 키)

 

 

카카오 디벨로퍼 > 카카오 로그인에 들어가면 이렇게 OFF되어 있는 스위치가 있을 것이다.

ON으로 켜주면 설정은 끝났다. 코드로 돌아가자.

 

---

 

0. 콘솔에서 모듈을 설치해 준다.

npm i @react-native-seoul/kakao-login
cd ios
pod install

 

1. import한다.

import * as KakaoLogin from '@react-native-seoul/kakao-login';

 

2. token을 받아온다.

const token = await KakaoLogin.login();

 

받아온 token에는 accessToken, 만료시기, idToken, refreshToken 등이 온다.

 

3. token의 accessToken을 백엔드에 전송한다.

백엔드에서는 내가 보낸 accessToken을 카카오 서버에 한번 더 검증하고 다른 정보들을 받아올 것이다.