[ReactNative] 카카오 로그인 구현하기 -1

ReactNatvie 에서 카카오 로그인을 구현하려 하는데 여러 선택지가 있었습니다.

 

1. react-native-seoul/kakao-login

2. actbase/react-native-kakao-login

 

이렇게 2개가 있었지만, 1번은 진행 중 많은 오류가 있어 포기를 하게 되었고,

2번은 지원이 중단되었다길래 새로운 방법을 차게 되었습니다.

 

---

라이브러리 선정

actbase 에서 기존의 react-native-kakao-login 은 아래 보이는 이미지처럼 npm 에서

This package has been deprecated 라고 뜨며 @actbase/react-kakaosdk 로 변경이 되었다고 합니다.

 

그래서 @actbase/react-kakaosdk 를 사용하기로 하였습니다.

 

GitHub - actbase/react-kakaosdk: KakaoSDK Bridge for React, React-Native, RNW

 

라이브러리 설치 후 프로젝트 설정

  설치

//설치 후
npm install @actbase/react-kakaosdk
yarn add @actbase/react-kakaosdk

//세팅
npx @actbase/react-kakaosdk

 

  Android

1. 해시키와 디버그 키 등록

Kakao Developers

 

2. Project bundle.gradle 에 maven 추가

allprojects{
	repositories{
    	maven { url 'https://devrepo.kakao.com/nexus/content/groups/public/'}
    }
}

 

  IOS

ios 의 경우, 필자도 고생을 많이 하엿는데 설정하는 방법을 작성하겠습니다.

 

1. pod isntall

cd ios && pod install && cd ..

2. info.plist 설정

<key>LSApplicationQueriesSchemes</key>
<array>
	<string>kakaokompassauth</string>
	<string>storykompassauth</string>
	<string>kakaolink</string>
</array>
    
<key>KAKAO_APP_KEY</key>
<string>{NATIVE_APP_KEY}</string>

3. AppDelegate.m 수정

필자가 고생했다는게 이 부분인데, github 에는 이렇게 작성이 되어있었습니다.

하지만, 저의 경우는 apenURL:(NSURL *)url 이 포함된 저런 형식의 코드는 존재하지 않아 ++된 부분만을 추가 할 방법이 없는줄 알았습니다.

그래서 이 부분을 하지 않고 했더니 결국,,, Android 는 되는데 IOS 는 로그인이 되지 않아 거의 2시간 가량 삽질을 했습니다..

 

정 해결이 되지 않자 해당 라이브러리 개발자 분에게 메일을 보내며 확인을 한 결과 아래 코드를 그냥 집어넣으면 된다고 하셔서 집어 넣었더니 적용 완료 :) 오후 8시가 다 되어가는 시간에도 도움을 주셔서 정말 감사합니다!

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

 

Script 작성

카카오톡 로그인 하는 부분을 따로 파일을 만들어서 함수화 시켰습니다.

import KakaoSDK from "@actbase/react-kakaosdk"

const login = async () => {
  try {
    await KakaoSDK.init({Your_Native_App_Key})
    const tokens = await KakaoSDK.login()
    return tokens
  } catch (e) {
    console.log(e)
  }
}
const getProfile = () => {

}
const logout = () => {

}
export {
  login,
  getProfile,
  logout
}

 

이런식으로 함수를 만들어서 사용을 하였습니다.

---

여태 회원가입/로그인을 직접 db 를 구축해서 하는 방법으로만 하고 있었는데, 토이 프로젝트를 진행하다 보니 소셜 로그인의 필요성을 느끼게 되어 처음으로 시도를 하게 되었습니다.

이와 관련된 국내 블로그 글이 많지 않아 정말 많은 어려움이 있었지만 이 글을 통해서 많은 사람들이 문제를 해결하셨으면 합니다.