[ReactNative] 카카오 로그인을 쉽게 구현해보자

 

https://github.com/react-native-seoul/react-native-kakao-login

GitHub - react-native-seoul/react-native-kakao-login: react-native native module for Kakao sign in.

 

카카오 로그인은 위의 라이브러리를 사용해 쉽게 구현할 수 있다.

 

먼저 카카로 로그인을 구현할 프로젝트를 하나 생성한다.

 

// typescript 를 사용하지 않는다면 --template 이후는 생략해도 됨
npx react-native init kakao_login_exam --template react-native-template-typescript

 

그리고 구현에 앞서 우선 카카오 개발자 페이지에서 애플리케이션을 생성 및 몇 가지 작업을 더 해준다.

 

내 애플리케이션 생성 하기

https://developers.kakao.com/console/app

카카오계정

 

1. 내 애플리케이션 -> 애플키케이션 추가하기로 앱 생성

2. 좌측 탭 플랫폼 -> Android 와 iOS 에 각각 패키지명 번들 ID 를 입력 해준다.

  - Android 키 해시는 일단 기본 디버그 키의 해시인 Xo8WBi6jzSxKDVR4drqm84yr9iU 을 넣어준다.

 

3. 좌측 탭 [동의항목] > [개인정보] 중 필요한 항목을 골라 동의 설정을 해준다.

4. 좌측 탭 [카카오 로그인] > [활성화 설정] 에서 상태를 ON 으로 해준다.

 

설치 및 세팅

1. 라이브러리 인스톨

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

2. iOS 설정의 위해 XCODE 를 실행

3. 커스텀 스킴을 Info.plist 에 추가해 준다. 빨간색으로 된 부분만 추가해주면 된다.

<key>CFBundleURLTypes</key>  <array>   <dict>   <key>CFBundleTypeRole</key>   <string>Editor</string>   <key>CFBundleURLSchemes</key>   <array>    <string>kakao{카카오 네이티브앱 아이디를 적어주세요}</string>   </array>  </dict>  </array>  </dict>  </array>  <key>CFBundleVersion</key>  <string>1</string>  <key>KAKAO_APP_KEY</key>  <string>{카카오 네이티브앱 아이디를 적어주세요}</string>  <key>LSApplicationQueriesSchemes</key>  <array>   <string>kakaokompassauth</string>   <string>storykompassauth</string>   <string>kakaolink</string>  </array>

- 카카오 개발자 페이지에서 네이티브 앱 키를 복사해 { } 부분에 붙여넣기 한다. 

- 만약 앱 키가 abcde1234 라면 kakaoabcde1234 라고 적어준다.

 

4. AppDelegate.m 파일에 아래 내용을 추가해 준다.

#import <RNKakaoLogins.h>

...

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

 return NO;
}

 - 주의할 점은 위의 코드 추가 시 #if RCT_NEW_ARCH_ENABLED scope 밖에 넣어줘야 한다는 것이다.

 

5. Android 설정을 위해 Android Studio 를 실행

6. Manifest.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>

 - { } 부분을 카카오 네이티브 앱 키로 변경한다.

 

7. strings.xml 파일에 아래 코드를 추가한다.

<string name="kakao_app_key">your_app_key</string>

 - your_app_key 부분을 카카오 네이티브 앱 키로 변경한다.

 

로그인 해보기

App.tsx 파일 내의 example 코드는 싹 지우고 아래처럼 간단한 버튼 하나와 handler 를 추가한다.

 

import {KakaoOAuthToken, login} from '@react-native-seoul/kakao-login';
import React from 'react';
import {Button, View} from 'react-native';

const App = () => {
  const handleKakaoLogin = async () => {
    const token: KakaoOAuthToken = await login();

    console.log('handleKakaoLogin', 'success', token);
  };

  return (
    <View
      style={{flex: 1, justifyContent: 'center'}}>
      <Button title="카카오 로그인" onPress={handleKakaoLogin} />
    </View>
  );
};

export default App;

 

아래처럼 화면에 버튼이 잘 보이고 클릭했을 때 카카오 로그인 페이지로 잘 넘어간다면 성공이다.

 

Github

https://github.com/areemak/kakao-login-example-rn

GitHub - areemak/kakao-login-example-rn: 리액트 네이티브 카카오 로그인 샘플입니다.

 

문제해결

TypeError: Cannot read property 'login' of null

- 만약 iOS 라면 Info.plist 파일의 내용이 잘못될 가능성이 높다. 복붙하다 의외로 실수하는 경우가 많이 있었다..

 

SDK error {number}

- error 코드는 아래 페이지에서 확인할 수 있다. 만약 SDK error 2 나온다면 KOE002 에러를 확인하면 된다.

https://developers.kakao.com/docs/latest/ko/kakaologin/trouble-shooting

Kakao Developers