카카오 로그인 연동(expo, React Native)

카카오 로그인은 자주 쓰는 API이기 때문에 설정 방법에 대해 정리하려고 한다.

일단은 expo init을 통해 폴더를 만들어주자.

이후 카카오 로그인 네이티브를 사용하기 위해 expo eject 를 해주자.

이후에 ios 폴더로 이동하여 pod install 을 해주자.

이후에 xcworkspace 파일을 눌러 xcode를 실행시킨다.

이후에 해당 프로젝트를 클릭한뒤에 Signing & Capabilities에 해당 팀을 등록해주자.

이후 실행을 하게 되면 핸드폰에서 잘 돌아가는 것을 확인 할 수 있다.

이제 kakaoLogin에 대해 설정해보겠다.

 

https://developers.kakao.com/

Kakao Developers

해당 홈페이지에 들어가서 애플리케이션을 추가하여 네이티브 키를 받자! 그리고 ios 플랫폼을 추가해준다. 여기서 중요한 점은 내가 설정한 프로젝트 번들과 일치하게 생성해주어야한다.

 

그리고 카카오 SDK를 받은 후에  KaKaoOpenSDK.framework 폴더를 해당 프로젝트의 Frameworks 폴더에 넣어주자.

이후에 Info > URL Types 에 들어가 kakao문자열과 함께 네이티브앱키를 추가해준다.

이후 info.plist를 Source Code로 열어서 아래와 같이 내용을 추가해준다.

네이티브앱키는 카카오에서 발급한 키를 입력하면 된다.

이후에 AppDelegate.m에 다음과 같이 헤더와 내용을 추가해준다.

- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
                                      sourceApplication:(NSString *)sourceApplication
                                              annotation:(id)annotation {
    if ([KOSession isKakaoAccountLoginCallback:url]) {
        return [KOSession handleOpenURL:url];
    }

    return false;
}

- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
                                                options:(NSDictionary<NSString *,id> *)options {
    if ([KOSession isKakaoAccountLoginCallback:url]) {
        return [KOSession handleOpenURL:url];
    }

    return false;
}

- (void)applicationDidBecomeActive:(UIApplication *)application
{
    [KOSession handleDidBecomeActive];
}

 

이제 react-native 모듈을 설치하여 연결을 해보자.

react-native-kakao-login 라이브러리를 사용하여 진행 할 것이다.

https://github.com/react-native-seoul/react-native-kakao-login

 

관련 npm을 설치하자.

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

 

이후 Xcode에서 실행을 하게되면 아래와 같은 에러를 마주할 것이다.

error Unable to resolve module `apsl-react-native-button` from `App.js`: apsl-react-native-button could not be found within the project.

 

해당 모듈도 설치를 해주자. 

npm install apsl-react-native-button

 

이후에 빌드를 하지만 아직도 문제가 발생한다.

해결법은 바로 ios 폴더에서 pod install을 다시 해주어야한다. 아까 kakaoLogin 모듈을 설치하고 Pod install 해주는 것을 깜빡했다.

pod install 을 해주고 커맨드+shift+k를 통해 캐쉬를 지운다음에 다시 빌드해주자.

 

 

그디어 끝났다!!

확실히 카카오 로그인 연동 같은 경우 한번 해두면 다음 부터는 속도가 빨라 지는 것 같다.