Expo에서 ExpoKit으로 전환한 가장 큰 이유는 외부 네이티브 모듈을 가져와서 쓸 수 있다는 것입니다. Expo에서는 Rest Api를 이용해서 카카오 로그인을 구현했지만 매번 아이디와 패스워드를 입력하는게 불편했습니다. 이번 포스팅에서는 장효찬님의 react-native-kakao-logins 네이티브 모듈을 사용해서 네이티브 카카오 로그인을 앱에 붙여보겠습니다.
카카오 로그인 네이티브 모듈을 설치합니다.
npm install react-native-kakao-logins --save설치가 완료되면 카카오 로그인 모듈을 Xcode와 연결합니다.
react-native link react-native-kakao-logins카카오 SDK 가이드에 스크린샷과 설명이 잘되어 있어서 설정과정은 링크로 대체하겠습니다.
https://developers.kakao.com/docs/ios/getting-started
카카오 SDK 가이드 페이지로 이동합니다.
링크 첫 화면에서 개발환경 구성과 Kakao SDK 설치 그리고 개발프로젝트 설정, 앱 생성 등을 차례차례 진행합니다.
프로젝트 TARGETS를 선택 한 다음 General 탭에서 Bundle identifier의 값을 확인합니다.
카카오의 내 애플리케이션 설정에서 iOS 플랫폼의 번들 ID 값을 확인합니다. Xcode의 Bundle Idnetifier와 번들 ID는 반드시 같은 값으로 설정합니다.
Xcode에서 AppDelegate.m 파일을 엽니다.
#import <KakaoOpenSDK/KakaoOpenSDK.h>
- (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];
}위의 내용을 AppDelegate.m에 추가합니다. 관련 내용은 카카오 문서에서 확인 할 수 있습니다.
추가된 application openURL 메소드와 기존에 있던 app openURL 메소드가 충돌이 발생합니다. isKaKaAccountLoginCallback if문만 복사해서 기존에 있던 app openURL 메소드에 추가했습니다.
프로젝트를 선택하고 Build Settings 탭 메뉴를 선택합니다. Library Search Paths에 <Multiple values> 를 더블클릭 합니다.
프로젝트 경로에 ios > Pods > Headers 폴더로 이동하면 Public폴더가 있습니다. Public 폴더를 Library Search Paths 추가 창에 드래그 앤 드랍을 해서 경로를 추가하거나 직접 입력해서 경로를 추가합니다. Public 폴더 아래에 있는 Library 폴더도 참조할 수 있도록 recursive를 선택합니다.
여기까지 설정을 완료했습니다.
import RNKakaoLogins from 'react-native-kakao-logins';
export default class App extends Component<{}> {
constructor(props) {
super(props);
this.state = {
isKakaoLogging: false,
token: 'token has not fetched',
};
}
// 카카오 로그인 시작.
kakaoLogin() {
console.log(' kakaoLogin ');
RNKakaoLogins.login((err, result) => {
if (err) {
console.log(err.toString());
return;
}
Alert.alert('result', result);
});
}
kakaoLogout() {
console.log(' kakaoLogout ');
RNKakaoLogins.logout((err, result) => {
if (err) {
console.log(err.toString());
return;
}
Alert.alert('result', result);
});
}
// 로그인 후 내 프로필 가져오기.
getProfile() {
console.log('getKakaoProfile');
RNKakaoLogins.getProfile((err, result) => {
if (err) {
console.log(err.toString());
return;
}
Alert.alert('result', result);
});
}
render() {
return (
<View style={styles.container}>
<View style={styles.header}>
<Text>LOGIN</Text>
</View>
<View style={styles.content}>
<NativeButton
isLoading={this.state.isNaverLoggingin}
onPress={() => this.kakaoLogin()}
activeOpacity={0.5}
style={styles.btnKakaoLogin}
textStyle={styles.txtNaverLogin}
>LOGIN</NativeButton>
<Text>{this.state.token}</Text>
<NativeButton
onPress={() => this.kakaoLogout()}
activeOpacity={0.5}
style={styles.btnKakaoLogin}
textStyle={styles.txtNaverLogin}
>Logout</NativeButton>
<NativeButton
isLoading={this.state.isKakaoLogging}
onPress={() => this.getProfile()}
activeOpacity={0.5}
style={styles.btnKakaoLogin}
textStyle={styles.txtNaverLogin}
>getProfile</NativeButton>
</View>
</View>
);
}
}장효찬님께서 제공해주신 예제소스입니다. 참고하여 로그인 버튼을 구현합니다.
RestAPI로 로그인을 구현했을 때 보다 훨씬 간단하게 만들었습니다. 장효찬님께 감사드립니다.
참고자료.
