React Native cli Naver & Kakao 연동하기

네이버와 카카오를 각각 로그인하는 기능을 구현하였다. 

이번엔 네이버와 카카오 같이 설정하는 방법에 대해서 진행하겠다. 

 

반드시 Naver와 Kakao 연동하는 것을 선행적으로 진행하고 해당 글을 봐주시길 바랍니다. 

 

작업 환경은 iOS ( Macbook )입니다. 

 

환경 설치

이미 Naver와 Kakao 로그인을 진행했다면 추가로 작업할 필요가 없습니다. 

마지막으로 해당 글을 참고해서 연동을 하지 않으셨다면 돌아가서 연동 후 해당 글을 봐주시기 바랍니다. 

 

각각 개발 환경 자체는 세팅하지 않고 바로 둘을 연동하기 위한 설정만 진행합니다. 

 

환경 설정 

1. LSApplicationQueriesSchemes 설정 

<key>LSApplicationQueriesSchemes</key>
<array>
  <string>naversearchapp</string>
  <string>naversearchthirdlogin</string>
  <string>kakaokompassauth</string>
  <string>storykompassauth</string>
  <string>kakaolink</string>
</array>

 

ios 폴더에 있는 info.plist에 이미 등록된 설정이겠지만 Kakao와 Naver 모두 LSApplicationQueriesSchemes 설정을 해야합니다. 

이때 key는 동일하고 <array></array>부분에 공통의 설정을 모두 넣어주면 됩니다. 

 

2. CFBundleURLSchemes 설정

<key>CFBundleURLSchemes</key>
<array>
    <string>[Custome URL Schemes]</string>
    <string>kakao[카카오톡 네이티브앱 키]</string>
</array>

 

CFBundleURLSchemes 역시 네이버에서는 Custom URL Scheme를 카카오는 네이티브앱 키를 넣어줘야 합니다. 

이것 역시 두 개의 CFBundleURLSchemes 속성을 만들 필요 없고 하나에 <array></array>부분에 공통의 설정을 넣어준다. 

 

3. AppDelegate  설정 

- (BOOL)application:(UIApplication *)application
     openURL:(NSURL *)url
     options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options {

  // naver
  if ([url.scheme isEqualToString:@"[Custom URL Scheme]"]) {
    return [[NaverThirdPartyLoginConnection getSharedInstance] application:application openURL:url options:options];
  }

  // kakao
  if([RNKakaoLogins isKakaoTalkLoginUrl:url]) {
    return [RNKakaoLogins handleOpenUrl: url];
  }

 return NO;
}

 

AppDelegate에서도 네이버 로그인과 카카오 로그인이 공통의 설정을 공유하고 있다. 

이것을 하나로 합쳐줘야 한다. 카카오 로그인 부분은 설정이 동일한데, 네이버 로그인의 경우 조건이 달라졌다. 

isEqualToString 속성으로 앞서 설정해둔 Custom URL Scheme를 넣어주면 된다. 

 

이렇게 설정해주면 모든 설정이 끝나게 된다.