ReactNative

[ReactNative] Kakao Login API + iOS 토큰 받아오기

mooni_ 2025. 1. 22. 21:04

Kakao Login iOS공식 문서 링크https://www.npmjs.com/package/@react-native-seoul/kakao-login를 참고하여 Kakao 사용자의 AccessToken을 가져오는데 성공하였다.

 

1. 플랫폼 등록

 

2. Info.plist 수정

Xcode로 프로젝트를 열고 Info 탭에서 Queried URL Schemes을 추가하자.

Info.plist에서 보면 LSApplicationQueriesSchemes로 확인 가능하다.

 

3. 커스텀 URL 스킴 설정

마찬가지로 Info 탭에서 URL Types -> URL Schemes 항목에 카카오 네이티브 앱 키를 등록하면 된다.

 

4. Package 추가

 

 

[Kakao API 플랫폼에서 제공하는 iOS SDK]

KakaoSDKCommon : 필수 요소를 담은 공통 모듈 | 초기화 담당

KakaoSDKAuth : 카카오 로그인 인증 및 토큰 관리 모듈 | 토큰 존재 여부 확인하기

KakaoSDKUser : 카카오 로그인 API 모듈 | 카카오 로그인 API, 사용자 정보 가져오기 API

User는 Auth에 의존하고 Auth는 Common에 의존한다 => 결론적으로? 위의 3개 모두 설정해줘야함.

 

5. @react-native-seoul/kakao-login 설치

 

6. Swift Bridging Header 추가

 

7. AppDelegate.mm 파일 수정

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

 

 

8. 사용 예시

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

const onPressKakaoLoginButton = async () => {
    try {
      const token = await login();

      //server로 전달 후 response 받기
      const serverResponse = await sendAccessTokenToServer(token.accessToken);

      //이후 작업 진행 . . .
    } catch (e) {
      console.log('login error: ', e);
    }
  };

 

고민...

Client에서 AccessToken을 Server로 주는 게 맞는 과정인가...??

Server에게 토큰 과정을 일임하려면 인가코드를 받아야하는데 그러면 WebView로 구현해야된다...

.

.

.

고 생각했는데 카카오 SDK를 사용하여 카카오톡으로 로그인하는 방법이 있다고하니 찾아봐야겠다.