[RN] 카카오톡 로그인 구현하기

리액트 네이티브 버전 :  "react-native": "0.69.2"

 

728x90

 

 

카카오 로그인 라이브러리 사용하기

1. 라이브러리를 먼저 설치해준다.

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

 

프로젝트 폴더 안에 ios 폴더로 이동 한 뒤 아래 명령어로 설치 마무리

pod install

 

2. 카카오 디벨로퍼에서 키 발급

(1) 내 애플리케이션 클릭

(2) 애플리케이션 추가하기 클릭

- 내용 입력 후 저장

 

- 네이티브 앱 키가 필요하다.

 

3. 플랫폼 등록

 

- 나는 iOS 플랫폼만 등록했다.

 

 

- 번들ID를 잘 등록해야된다....이거 틀린지 모르고 왜 안되지 고민 2일 했다...

- 번들ID는 xcode로 프로젝트명.xcworkspace을 실행한다.

- 왼쪽 메뉴에서 프로젝트명을 클릭하고, TARGETS의 프로젝트명을 클릭.

- Identity의 Bundle Identifier를 잘 입력해줘야 한다.

 

4. Swift Bridging Header 추가

 

5. 카오톡이 설치되어 있을 때 오류가 없도록 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;
}

 

 

6. 발급된 키를 info.plist에 넣어준다.

- CFBundleURLSchemes의 array string 값에는 kakao가 꼭 있어야 한다.

<key>CFBundleURLTypes</key>
	<array>
		<dict>
			<key>CFBundleTypeRole</key>
			<string>Editor</string>
			<key>CFBundleURLSchemes</key>
			<array>
				<string>kakao발급된 네이티브앱 키를 넣어준다.</string>
			</array>
		</dict>
		<dict>
			<key>CFBundleTypeRole</key>
			<string>Editor</string>
			<key>CFBundleURLSchemes</key>
			<array>
				<string>번들ID</string>
			</array>
		</dict>
	</array>
	<key>CFBundleVersion</key>
	<string>1</string>
	<key>KAKAO_APP_KEY</key>
	<string>발급된 네이티브앱 키를 넣어준다.</string>
	<key>LSApplicationQueriesSchemes</key>
	<array>
		<string>kakaokompassauth</string>
		<string>storykompassauth</string>
		<string>kakaolink</string>
	</array>

 

- 이렇게 하고 실행한 뒤에 카카오 로그인을 위한 화면단을 작성해주면 잘 된다.

- 예시 코드

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 unlinkKakao = async (): Promise<void> => {
  const message = await unlink();

  setResult(message);
};

 

- 버튼을 만들어 저 함수들과 연결하면 잘 되는 것을 볼 수 있다.

 

 

8. 백엔드와 연결?

- 카카오톡 로그인을 하면 액세스 토큰과 리프레시 토큰이 리턴되는데, 이를 그대로 사용할지, 자체적으로 토큰을 만들지 결정하여 처리해야 한다.

- 나는 JWT를 사용하고 있었기 때문에, 카카오 로그인 성공 후 더이상 카카오와 연결하진 않았다.

 

 

 

- 참고

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