[React Native] Kakao Login

안녕하세요. 모리스입니다.😀

이번 포스트에서는 제가 예전에 RN을 개발하면서 구현했던 React Native에서 카카오 로그인에 대해 작성해 보려합니다.

 

자 그럼 시작해 보겠습니다.!

 

📌 Kakao Login 세팅

카카오 로그인을 구현하기 위해 먼저 Kakao Developers에서 로그인을 적용할 앱을 등록해야 해요.

Kakao Developers > 내 애플리케이션 > 애플리케이션 추가하기를 선택하면 아래와 같은 정보 입력창이 나와요.

앱 정보를 입력하고 저장을 누르면 돼요.

방금 입력한 앱이 Kakao Developers에 등록된 걸 확인할 수 있어요.

제품 설정 > 간편가입 탭에서는 카카오 로그인 시 사용자로부터 어떤 항목에 동의를 받을지 설정할 수 있어요.

📌 Kakao Login 구현

저는 @react-native-seoul/kakao-login 라이브러리를 사용했어요.

먼저 라이브러리를 설치해 주세요.

npm i @react-native-seoul/kakao-login

이제 Kakao Developers에서 아래 이미지처럼 네이티브 앱 키가 필요해요.

iOS 설정

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

Android 설정

1. Key Hash 등록
Android에서 카카오 로그인을 위해 key hash가 필요해요.

Global debug keystore에서 추출:

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

특정 keystore에서 추출:

keytool -exportcert -alias {my-app-key-alias} -keystore {your-key-path}/{my-app-key}.keystore -storepass android -keypass android | openssl sha1 -binary | openssl base64

이렇게 추출한 key hash는 Kakao Developers에 등록해 주세요.

2. Redirect URI 설정
Android에서 카카오 로그인을 사용할 때, Redirection을 통해 request code를 받아와야 해요.

AndroidManifest.xml 파일에 아래 내용을 추가해 주세요:

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

3. strings.xml 설정
app/src/main/res/values/strings.xml 파일에 다음을 추가해 주세요.

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

이제 모든 세팅이 끝났어요! 이제 React Native 코드로 넘어가서 카카오 로그인을 적용하면 돼요.

📌 @react-native-seoul/kakao-login 사용

저는 카카오 로그인 관련 함수들을 따로 정의해서 필요한 화면에서 불러서 사용하는 방식으로 구현했어요.
아래는 로그인과 프로필 가져오기 함수예요. 더 많은 기능은 공식 문서를 참고해 주세요.

import KakaoLogins, {login, getProfile} from '@react-native-seoul/kakao-login';

const signInWithKakao = async () => {
  return await login()
    .then((result) => result)
    .catch((error) => { throw error });
};

const getKakaoProfile = async () => {
  return await getProfile()
    .then((result) => result)
    .catch((error) => { throw error });
};

---

📌 Error Report

1. Android 12 이상에서 로그인 동작 안 함
기존에 @react-native-seoul/kakao-login의 2.x.x 버전을 사용하고 있었는데, Android 12(Target 31 이상)부터 작동하지 않았어요. 그래서 버전을 5.x.x로 올렸더니 새로운 문제가 생겼어요.

2. 기존 코드 호환 문제
5.x.x 버전에서는 KakaoOpenSDK를 사용하지 않고, response가 Promise 형태로 바뀌었더라고요.
이전 버전에서는 KakaoOpenSDK가 있었는데, 3.0 이상부터는 DEPRECATED 예정이라고 하네요.

DEPRECATED README 보기

3. QA 중 로그인 반응 없음
QA 중 Android에서 카카오 로그인 시 아무 반응이 없었어요. 테스트할 땐 잘 됐는데 이상하다 싶었죠. 원인을 찾고 보니, Kakao Developers에 등록된 key hash가 debug용만 있었더라고요. release용 key hash도 추가해주니까 정상 동작했어요!

---

📌 참고 링크

@react-native-seoul/kakao-login