React Native 카카오 로그인 적용하기

1. kakao developers 애플리케이션 등록하기

🟡 내 애플리케이션 추가하기

kakao developers 홈페이지에 들어가주세요.

회원가입을 완료 한 후 내 애플리케이션 > 애플리케이션 추가하기 버튼을 눌러줍니다.

애플리케이션 등록을 완료해줍니다.

---

🟡 Bundle Identifier 설정하기

XCode에 설정되어 있는 Bundle Identifier를 확인해주세요.

등록한 애플리케이션에 들어가 내 애플리케이션 > 앱 설정 > 플랫폼 탭에 들어갑니다.

번들 ID를 Bundle Identifier와 똑같이 설정해주세요.

---

🟡 네이티브 앱 키 발급받기

내 애플리케이션 > 앱 설정 > 앱 키 탭에 들어갑니다.

info.plist에 활용됩니다. 네이티브 앱 키를 복사해주세요.

---

🟡 동의항목 설정하기

내 애플리케이션 > 제품 설정 > 카카오 로그인 > 동의 항목 탭에 들어갑니다.

사용하려는 개인정보의 상태를 사용으로 바꿔주세요.

---

2. 라이브러리 설치하기

react-native-kakao-login 라이브러리를 사용했습니다.

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

3. info.plist 수정하기

ios/프로젝트명/info.plist 파일에 아래의 코드를 추가해주세요.

네이티브 앱 키는 1번에서 복사한 키로 대체하세요.

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

4. AppDelegate.mm 파일 수정하기

ios/AppDelegate.mm 파일에 아래의 코드를 추가해주세요.

#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;
}

5. SwiftBridge 파일 생성하기

XCode에서 ios/프로젝트.xcworkspace 파일을 열어주세요.

SwiftBridge.swift 파일을 생성합니다.

⭐️ Swift Bridging Header를 추가하겠냐는 문구가 나오면 꼭 확인을 눌러줍니다.

SwiftBridge, [프로젝트명]-Bridging-Header.h 두 개의 파일이 생성됩니다.

예제 코드

import { useState } from 'react';
import { Text, TouchableOpacity, View } from 'react-native';
import * as KakaoLogin from '@react-native-seoul/kakao-login';

function LoginPage() {
  const [result, setResult] = useState('');

  async function signInWithKakao() {
    try {
      const token = await KakaoLogin.login();
      setResult(JSON.stringify(token));
    } catch (err) {
      console.log(err);
    }
  }

  async function signOutWithKakao() {
    try {
      const message = await KakaoLogin.logout();
      setResult(message);
    } catch (err) {
      console.log(err);
    }
  }

  async function getProfile() {
    try {
      const profile = await KakaoLogin.getProfile();
      setResult(JSON.stringify(profile));
    } catch (err) {
      console.log('get profile err:', err);
    }
  }

  return (
    <View>
      <TouchableOpacity onPress={() => signInWithKakao()}>
        <Text>카카오 로그인</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => getProfile()}>
        <Text>프로필 조회</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => signOutWithKakao()}>
        <Text>카카오 로그아웃</Text>
      </TouchableOpacity>
      <Text>{result}</Text>
    </View>
  );
}

export default LoginPage;