React Native로 카카오 로그인 구현 방법

카카오 로그인 구현하기

카카오 로그인을 React Native에서 어떻게 할 수 있을까요? 오늘은 그 방법을 함께 알아보려고 해요. 카카오 로그인은 한국에서 정말 많은 사람들이 사용하는 소셜 로그인 방식이라, 앱에서 인증 과정을 쉽게 처리할 수 있답니다. 자, 그럼 시작해볼까요?

1. 카카오 애플리케이션 만들기

먼저, 카카오 디벨로퍼스에 들어가서 애플리케이션을 만들어야 해요. 여기서 카카오 로그인을 활성화하는 과정이 필요하죠. Android와 iOS 플랫폼을 모두 등록해야 하니 이 점 잊지 마세요. 특히 iOS에서는 번들 ID를 설정해야 하니까 주의가 필요해요.

2. React Native 환경 세팅하기

이제 @react-native-seoul/kakao-login 라이브러리를 설치할 차례입니다. 설치한 후에는 iOS 프로젝트에서 pod install도 꼭 실행해 주세요. 아래 명령어를 입력하면 돼요:

npm install @react-native-seoul/kakao-login
cd ios
pod install

이렇게 하면 필요한 환경이 준비됩니다.

3. 로그인 기능 추가하기

로그인 버튼을 만들어서 카카오 로그인 API를 호출하는 코드를 작성해볼게요. 아래 예제를 참고하세요:

import React from 'react';
import { Button } from 'react-native';
import * as KakaoLogin from '@react-native-seoul/kakao-login';

const Login = () => {
  const login = () => {
    KakaoLogin.login().then((result) => {
      console.log("로그인 성공", JSON.stringify(result));
      getProfile();
    }).catch((error) => {
      console.log(`로그인 실패(code:${error.code})`, error.message);
    });
  };

  const getProfile = () => {
    KakaoLogin.getProfile().then((result) => {
      console.log("프로필 조회 성공", JSON.stringify(result));
    }).catch((error) => {
      console.log(`프로필 조회 실패(code:${error.code})`, error.message);
    });
  };

  return (
    <Button title="카카오 로그인" onPress={login} />
  );
};

위 코드를 통해 사용자가 버튼을 클릭하면 카카오 로그인이 진행돼요.

4. 프로필 정보 조회하기

로그인 후에는 사용자의 프로필 정보를 가져올 수 있어요. 이 정보는 Firebase와 연동할 때 유용하게 쓸 수 있습니다.

5. 오류 처리하기

로그인이나 프로필 조회 중에 오류가 발생할 수도 있으니, 이를 잘 처리해야 해요. 예를 들어, 사용자가 로그인을 취소하면 E_CANCELLED_OPERATION 오류가 발생하니 미리 대비해두는 게 좋겠죠.

6. Firebase와 연결하기

카카오 로그인 정보를 Firebase와 연결하려면 이메일과 ID를 사용해서 Firebase 계정을 만들어야 해요. React Native Firebase에서는 커스텀 토큰 생성 기능이 없기 때문이에요. 아래는 그 과정의 예시입니다:

import auth from '@react-native-firebase/auth';

const firebaseAuth = auth();

const getProfile = () => {
  KakaoLogin.getProfile().then((result) => {
    const email = result.email;
    const password = "A@" + result.id;
    firebaseAuth.createUserWithEmailAndPassword(email, password).then((success) => {
      console.log(success);
    }, (fail) => {
      console.log(fail);
    });
  }).catch((error) => {
    console.log(`프로필 조회 실패(code:${error.code})`, error.message);
  });
};

이렇게 하면 Firebase에 사용자 정보를 안전하게 저장할 수 있어요.

7. 추가 팁 알아보기

키 해시 등록: Android에서는 키 해시를 등록해야 하는데, 이는 카카오 로그인을 위해 꼭 필요한 과정이에요.
Redirect URI 설정: AndroidManifest.xml 파일에 Redirect URI도 설정해야 합니다. 예시는 다음과 같아요:

<activity
  android:name="com.kakao.sdk.auth.AuthCodeHandlerActivity"
  android:exported="true">
  <intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:host="oauth" android:scheme="kakao{네이티브 앱 키}" />
  </intent-filter>
</activity>

8. 마무리 및 결론

React Native에서 카카오 로그인을 성공적으로 구현하려면 플랫폼별 환경 설정과 라이브러리 설치가 정말 중요해요. 그리고 Firebase와 연동해서 더 나은 사용자 경험을 제공할 수 있답니다. 여러분도 이 내용을 바탕으로 쉽게 카카오 로그인을 구현해보세요!

궁금한 점이나 피드백이 있다면 언제든지 말씀해 주세요! 😊