[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. 카카오 Developer 계정 생성

1. https://developers.kakao.com/ 링크에 접속하여 애플리케이션을 생성 후 앱 아이콘, 앱 이름, 사업자명 작성 후 저장해 준다.

참고로 아이콘을 등록하지 않으면 카카오 로그인 사용이 불가능하기 때문에 필수로 등록이 필요했다

 

2. 왼쪽 사이드바에서 플랫폼을 누른 후 ios 등록 및 카카오 로그인 활성화 

1. 번들 ID 작성

    번들 ID는 Xcode -> Gereneral -> Bundle Identifier에 입력되어 있는 것을 그대로 적어주면 된다. 

    만약 안드로이드도 개발 중이라면 IOS번들 ID와 동일하게 작성해주어야 하기 때문에 Xcode에서 Bundle Identifier을 수정해주어야 한다

    (혹시 나중에 내가 필요할까 봐)

 

참고로 애플리케이션을 개발 중이면  번들 ID만 작성해 준다. 처음 애플리케이션 개발이라 로그인 시 토큰을 Redirect URI를 받아 구현을 하려 했는데 잘못된 방법이었다. 애플리케이션은 웹과 다른 방식으로 진행된다는 것을 알게 되었다 ㅎ!..

 

2. 카카오 로그인 활성화

 

활성화 상태만 ON으로 해준다! 아주 쉽다 

2. react-native-seoul/kakao-login 설치

1. npm install @react-native-seoul/kakao-login 입력 

여기서 주의할 점!

문서를 확인하니 IOS deployment target은 13.0 이상이어야 한다!

 

3.  Xcode에서 info.plist 수정

xcode에서 프로젝트 폴더 내부를 보면 Info라는 파일이 보일 것이다. 이 파일을 수정해줘야 한다.

 

해당 파일을 누르면 대충 아래와 같은 화면이 나타날 것이다.

여기서 KAKAO_APP_KEY 부분이 보일 것이다 우리는 저것을 추가해줘야 한다.

새로운 row를 만들어 이름은 KAKAO_APP_KEY, 타입은 String, Value는 카카오 앱 키를 넣어준다. 

 

4. Xcode에서 URL Types 추가하기

1번과 동일하게 Xcode -> 프로젝트 선택 -> info -> URL Types 추가

 

url types에서는 URL Schemes부분에 kakao+카카오앱키 이런 식으로 입력하고 저장해 준다.

 

간단히 말해서 카카오 앱 키가 frontend1208라면 kakaofrontend1208 이런 식으로 붙여서 작성해 주면 된다

URL TYPE 등록 완료 후

 

5. xcode에서 AppDelegate.m 수정

가장 애먹었던 부분..

1. import문 작성

@implementation Appdelegate 위에 보면 import문들이 있을 것이다.  그곳에 #import <RNKkaoLogins.h>를 추가한다.

 

2. 그 후 @implementation Appdelegate안에 아래와 같은 코드를 작성한다

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

 

 

6. 자신이 만든 카카오 로그인 버튼에 카카오 로그인 코드를 추가

1. 카카오 로그인 import문 추가

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

 

2 카카오 로그인 함수 추가

  const signInWithKakao = async (): Promise<void> => {
    const result: KakaoOAuthToken = await login();
    console.log(result)
  };

 

3. 버튼에 카카오 로그인 함수 적용

<LoginButton onPress={signInWithKakao} />

 

 

마무리.

이렇게 끝이 난다. 나는 5번 부분에서 오류가 발생했고 오류 해결까지 오랜 시간이 걸렸다. 여러 문서들도 찾아보고 다른 개발자들의 블로그도 찾아봤지만 모두 환경이 다른지라.. 해결법이 되지는 못했다. 그래서 Appdelegate부분의 추가된 코드 부분을 지우고 import문만 남겨두었는데 오류가 사라지고 정상적으로 작동되었다! 최종화면을 보여주겠다!

로그인 버튼 클릭 시

로그인 중

 

카카오 함수 추가 설명

 

위를 보면 로그인~ 프로필 불러오기~ 로그아웃~ 연결 끊기~ 등 제공하는 다양한 함수들이 있다.

 

아래 예시 코드들도 제공된다. 나는 유저 정보와 로그인만 필요했기 때문에 두 함수를 사용했다.

 

자세한 건 https://github.com/crossplatformkorea/react-native-kakao-login 이 링크를 참고하면 볼 수 있다.

 

중간에 막혔던 부분들도 있었지만 내 생각보다 카카오 로그인 구현을 간편하게 할 수 있었다.

const signInWithKakao = async (): Promise<void> => {
  const token: KakaoOAuthToken = await login();

  setResult(JSON.stringify(token));
};

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

  setResult(message);
};

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

  setResult(JSON.stringify(profile));
};

const getKakaoShippingAddresses = async (): Promise<void> => {
  const addresses: KakaoShippingAddresses = await shippingAddresses();

  setResult(JSON.stringify(addresses));
};

const getKakaoServiceTerms = async (): Promise<void> => {
  const serviceTerms: KakaoUserServiceTerms = await serviceTerms();

  setResult(JSON.stringify(serviceTerms))
}

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

  setResult(message);
};