React Native 카카오 로그인 iOS

참고한 라이브러리 : https://github.com/crossplatformkorea/react-native-kakao-login

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

1. 리액트 네이티브 프로젝트 생성

npx react-native init 프로젝트명

2. 앱 실행

npx react-native run-ios

3. 카카오 라이브러리 설치

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

npx pod install

 pod 라이브러리 설치

4. pod에서 iOS deployment target 11.0 이상으로 설정

> platform : ios, '11.0.0' 변경

5. 카카오 개발자 설정

https://developers.kakao.com/

Kakao Developers

---

5-1. 플랫폼 설정

내 애플리케이션 > 애플리케이션 추가하기 > 앱이름, 사업자명 적고 저장하기

앱설정 > 플랫폼 > iOS 플랫폼 등록 > 번들 ID 작성

XCODE > Signing & Capabilities > Bundle Identifier 값 등록

---

5-2. 동의 설정

내 애플리케이션 > 제품 설정 > 카카오 로그인 > 활성화 설정 > 상태 ON

6. 프로젝트 설정

https://developers.kakao.com/docs/latest/ko/ios/getting-started

6-1. 앱 실행 허용 목록 설정

Info.plist 파일에 앱 실행 허용 목록(Allowlist)을 설정

 <key>LSApplicationQueriesSchemes</key>
  <array>
      <!-- 카카오톡으로 로그인 -->
      <string>kakaokompassauth</string>
      <!-- 카카오톡 공유 -->
      <string>kakaolink</string>
      <!-- 카카오톡 채널 -->
      <string>kakaoplus</string>
  </array>

6-2. 커스텀 URL 스킴 설정

[Info] > [URL Types] > [URL Schemes] 항목에 네이티브 앱 키(Native App Key)를 kakao${NATIVE_APP_KEY} 형식으로 등록

xcode에서 url 스킴 등록하면 자동으로 생성 됨

---

위의 두가지 설정 후 최종 info.plist 추가되는 코드

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

import~ 코드는 위쪽에 그리고 밑 bool~ 코드는

@implementation AppDelegate 아래에 적어줘야한다.

8. Podfile

Podfile 파일 안의 target 프로젝트명 do ~ end 사이에 코드 추가

pod 'KakaoSDK'

9. 예제 코드

App.tsx

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * Generated with the TypeScript template
 * https://github.com/react-native-community/react-native-template-typescript
 *
 * @format
 */

import Intro from './pages/Intro';
import React from 'react';
import {
  SafeAreaView,
} from 'react-native';

const App = () => {

  return (
    <SafeAreaView >
      <Intro />
    </SafeAreaView>
  );
};

export default App;

---

Pages/Intro.tsx

import { Pressable, StyleSheet, Text, View } from 'react-native';
import React, { useState } from 'react';
import { login, logout, getProfile as getKakaoProfile, shippingAddresses as getKakaoShippingAddresses, unlink } from '@react-native-seoul/kakao-login';
import ResultView from './IntroView';

const Intro = () => {
  const [result, setResult] = useState<string>('');

  const signInWithKakao = async (): Promise<void> => {
    try {
      const token = await login();
      setResult(JSON.stringify(token));
    } catch (err) {
      console.error('login err', err);
    }
  };

  const signOutWithKakao = async (): Promise<void> => {
    try {
      const message = await logout();

      setResult(message);
    } catch (err) {
      console.error('signOut error', err);
    }
  };

  const getProfile = async (): Promise<void> => {
    try {
      const profile = await getKakaoProfile();

      setResult(JSON.stringify(profile));
    } catch (err) {
      console.error('signOut error', err);
    }
  };

  const getShippingAddresses = async (): Promise<void> => {
    try {
      const shippingAddresses = await getKakaoShippingAddresses();

      setResult(JSON.stringify(shippingAddresses));
    } catch (err) {
      console.error('signOut error', err);
    }
  };

  const unlinkKakao = async (): Promise<void> => {
    try {
      const message = await unlink();

      setResult(message);
    } catch (err) {
      console.error('signOut error', err);
    }
  };

  return (
    <View style={styles.container}>
      <ResultView result={result} />
      <Pressable
        style={styles.button}
        onPress={() => {
          signInWithKakao();
        }}
      >
        <Text style={styles.text}>
          카카오 로그인
        </Text>
      </Pressable>
      <Pressable
        style={styles.button}
        onPress={() => getProfile()}
      >
        <Text style={styles.text}>
          프로필 조회
        </Text>
      </Pressable>
      <Pressable
        style={styles.button}
        onPress={() => getShippingAddresses()}
      >
        <Text style={styles.text}>
          배송주소록 조회
        </Text>
      </Pressable>
      <Pressable
        style={styles.button}
        onPress={() => unlinkKakao()}
      >
        <Text style={styles.text}>
          링크 해제
        </Text>
      </Pressable>
      <Pressable
        style={styles.button}
        onPress={() => signOutWithKakao()}
      >
        <Text style={styles.text}>
          카카오 로그아웃
        </Text>
      </Pressable>
    </View>
  );
};

export default Intro;

const styles = StyleSheet.create({
  container: {
    height: "100%",
    justifyContent: "flex-end",
    alignItems: 'center',
    paddingBottom: 100
  },
  button: {
    backgroundColor: '#FEE500',
    borderRadius: 40,
    borderWidth: 1,
    width: 250,
    height: 40,
    paddingHorizontal: 20,
    paddingVertical: 10,
    marginTop: 10
  },
  text: {
    textAlign: "center"
  }
});

---

IntroView.tsx

import { ScrollView, StyleSheet, Text, View } from 'react-native';

import React from 'react';

type Props = {
  result: string;
};

function IntroView({ result }: Props): React.ReactElement {
  return (
    <View style={styles.container}>
      <ScrollView>
        <Text>{result}</Text>
        <View style={{ height: 100 }} />
      </ScrollView>
    </View>
  );
}

export default IntroView;

const styles = StyleSheet.create({
  container: {
    flexDirection: "column",
    width: "100%",
    padding: 24,
  }
});

---

여기까지 다 하면 ~~~

iOS 카카오 로그인 성공 ㅠㅠㅠ

이거 때문에 프로젝트 몇 개를 생성했는지 모르겠다 .... 

천천히 하나하나 해보니까 됨 ..... 예 !!!

시도하는 모든 사람들 성공하시길 바랍니당