[React Native] 카카오 로그인 구현

카테고리 : Development
태그: development, - React-Native - reactnative - 카카오 로그인 - Android 카카오 로그인 - IOS 카카오 로그인 - 키 해시 등록 - Redirect URI 설정 - react-native-seoul/kakao-login - kakao developers

🔥 1. 카카오 애플리케이션 생성 및 설정

kakao developers에 로그인 후 애플리케이션을 생성하고 생성한 애플리케이션을 클릭해 카카오 로그인을 활성화

🔥 2. 앱 설정에서 카카오 로그인을 사용할 플랫폼을 Android, iOS 모두 등록.

🔥 3. Android 플랫폼 등록

3-1 : 키 해시 등록

  • 패키지명은 APP의 고유 값
  • 키 해시를 등록해야한다 ⇒ 기존 Debug 환경일땐 Xo8WBi6jzSxKDVR4drqm84yr9iU=
  • 릴리즈 환경일땐 아래 코드에 넣는다
$ keytool -exportcert -alias androiddebugkey -keystore debug.keystore -storepass android -keypass android | openssl sha1 -binary | openssl base64

3-2 : 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>

3-2 : app/src/main/res/values/strings.xml 을 열어 다음을 추가

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

🔥 4. IOS 플랫폼 등록

<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>1</string>
+ <key>KAKAO_APP_KEY</key>
+ <string>{카카오 네이티브앱 아이디를 적어주세요}</string>
+ <key>KAKAO_APP_SCHEME</key> // 선택 사항 멀티 플랫폼 앱 구현 시에만 추가하면 됩니다
+ <string>{카카오 앱 스킴을 적어주세요}</string> // 선택 사항
+ <key>LSApplicationQueriesSchemes</key>
+ <array>
+   <string>kakaokompassauth</string>
+   <string>storykompassauth</string>
+   <string>kakaolink</string>
+ </array>

**🔥 5. 라이브러리 설치 후 테스트**

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

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

  • 간단한 테스트 코드로 프로필을 조회하는 로직
import React from "react";
import { SafeAreaView, Button } from "react-native";
import * as KakaoLogin from "@react-native-seoul/kakao-login";

const Login: () => Node = () => {
  return (
    <SafeAreaView>
      <Button title="카카오 로그인" onPress={() => login()} />
    </SafeAreaView>
  );
};

const login = () => {
  KakaoLogin.login()
    .then((result) => {
      console.log("Login Success", JSON.stringify(result));
      getProfile();
    })
    .catch((error) => {
      if (error.code === "E_CANCELLED_OPERATION") {
        console.log("Login Cancel", error.message);
      } else {
        console.log(`Login Fail(code:${error.code})`, error.message);
      }
    });
};

const getProfile = () => {
  KakaoLogin.getProfile()
    .then((result) => {
      console.log("GetProfile Success", JSON.stringify(result));
    })
    .catch((error) => {
      console.log(`GetProfile Fail(code:${error.code})`, error.message);
    });
};

export default Login;