[React-Native] Kakao Login

이번 노트에서는 앱에 기능 구현한 kakao oauth login에 대해 작성해 보려 한다.

---

📌 kakao login 세팅

카카오 로그인을 구현하기 위해서는 kakao developers에 로그인을 적용할 앱을 등록해야한다.

kakao developer > 내 애플리케이션 > 애플리케이션 추가하기 를 선택하면 다음과 같은 정보 입력창이 나온다.

앱에 대한 정보를 입력 후 저장을 선택한다.

방금전 입력한 앱이 kakao developer에 등록된 것을 볼 수 있다.

제품 설정 > 간편 가입 탭에서 kakao login 시 사용자가 동의해야 할 항목들을 설정할 수 있다.

---

📌 kakao login

나는 @react-native-seoul/kakao-login을 사용했다.

먼저 해당 라이브러를 설치해 준다.

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

이제 kakao developer 에서 아래 이미지와 같이 네이티브 앱 키가 필요하다.

iOS 설정

project / ios / projectName / 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 등록
   kakao login android 설정을 위해서는 key hash가 필요하다.

글로벌 debug keystore 에서 key hash 추출

keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore -storepass android -keypass android | openssl sha1 -binary | openssl base64입력하세요

특정 경로의 keystore 에서 key hash 추출

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 developer에 등록한다.

2. Redirect URI설정
   android kakao login은 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" />

      <!-- Redirect URI: "kakao{NATIVE_APP_KEY}://oauth“ -->
      <data android:host="oauth"
          android:scheme="kakao{카카오 네이티브 앱 key를 입력해주세요}" />
  </intent-filter>
</activity>

3. app/src/main/res/values/strings.xml에 다음을 추가한다.

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

이렇게 하면 모든 세팅은 끝났다. 이제 RN 코드로 가 라이브러리를 적용해 카카오 로그인을 구현한다.

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

나는 kakao login 기능을 하는 함수들을 따로 정의해 screen에서 불러서 사용하도록 구현하였다. 다음은 @react-native-seoul/kakao-login 라이브러리를 사용하여 로그인, 프로필 가져오기 이다. 더 많은 함수들은 여기의 Methods를 참고 바란다.

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

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

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

---

📌 error report

1. 우리 앱에선 기존 kakao login을 사용하고 있었다. 그런데 Android 12 (Target 31) 이상 부터 kakao login이 동작하지 않았다. 알고보니 기존엔 @react-native-seoul/kakao-login 버전을 2.x.x를 사용하고 있어 동작하지 않았던 것이다. 그래서 이번에 @react-native-seoul/kakao-login 버전을 5.x.x까지 올려 버렸다. 그랬더니 2번과 같은 문제가 발생 했다.

2. @react-native-seoul/kakao-login의 버전을 5.x.x로 올리고 나니 기존의 코드가 돌지 않았다. 열심히 구글링해 확인해 본 결과 @react-native-seoul/kakao-login 라이브러리의 3.0 미만에서는 KakaoOpenSDK를 사용하고 그 이상의 버전에서는 KakaoOpenSDK를 사용하지 않는다고 하고 DEPRECATED 예정이라고 한다.
   더불어 3.0이상 버전은 response를 Promise형태로 전달해 준다고 한다.

   DEPRECATED README (관련 내용)

이 모든 고난과 역경을 이겨내고 이제는 잘 동작한다. 그런데 앱이 QA를 돌던 중 3번의 이슈가 나타난다.

3. 앱을 검증하기 위해 QA 테스트 진행 중 Android에서 kakao login 시도 시 아무 반응이 일어나지 않는 이슈가 발생한다. 분명 내가 테스트할 때엔 잘 됐는데.. 왜 안되지...생각하며.. 또 열심히 원인을 파악해 보니...
   앞서 kakao login시 필요한 세팅을 했을 때, kakao developer에 android key hash가 debug용 key hash만 등록되어 일어난 문제였다. 그러니 내가 테스트할 때엔 잘됐지...
   kakao developer에 release용 key hash를 추가 등록했더니 정상 동작 한다.!!

이상 끗...!

📌 참조

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