카카오 로그인 with React-Native

 

# react-native 활용하여 카카오 로그인 구축하기 

이번에 로그인 파트를 담당을 해서 다음과 같이 진행하게 됐다. 

( 왜 로그인 하겠다고 나서서 ...  ) 

일단 첫번째로 모듈을 다 설치 및 설정을 해줘야 한다. 

 

 

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

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

 

2. Native Module 설정 (Android)

 

android/build.gradle 파일을 열고 다음을 추가한다. 

allprojects {
    repositories {
        maven { url 'https://devrepo.kakao.com/nexus/content/groups/public/' }
    }
}

 

android/app/build.gradle 파일을 열고 다음을 추가한다. 

dependencies {
    implementation "com.kakao.sdk:v2-user:2.5.0" // 최신 버전을 사용하세요
}

 

android/app/src/main/AndroidManifest.xml 파일을 열고 다음을 추가한다. 

<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="YOUR_PACKAGE_NAME">
    <uses-permission android:name="android.permission.INTERNET" />
    <application
        android:requestLegacyExternalStorage="true"
        ...>
        ...
        <meta-data android:name="com.kakao.sdk.AppKey" android:value="@string/kakao_app_key" />
        <meta-data android:name="com.kakao.sdk.KAKAO_CUSTOM_SCHEME" android:value="@string/kakao_custom_scheme" />
    </application>
</manifest>

 

android/app/src/main/res/values/strings.xml 파일을 열고 다음을 추가한다. 

<resources>
    <string name="kakao_app_key">YOUR_KAKAO_APP_KEY</string>
    <string name="kakao_custom_scheme">kakao{YOUR_KAKAO_APP_KEY}</string>
</resources>

 

 

참고로 내 코드는 다음과 같다. 

 

import React from 'react';
import { View, Text, StyleSheet, Image, TouchableOpacity } from 'react-native';
import { KakaoOAuthToken, KakaoProfile, login, logout, getProfile } from '@react-native-seoul/kakao-login';

export default function Login() {
  const handleKakaoLogin = async () => {
    try {
      const token: KakaoOAuthToken = await login();
      console.log(token);
      const profile: KakaoProfile = await getProfile();
      console.log(profile);
      // 로그인 성공 시 필요한 작업 추가
    } catch (error) {
      console.error('Login failed', error);
    }
  };

  return (
    <View style={styles.screenContainer}>
      <View style={styles.textContainer}>
        <Text style={styles.title}>보안을 고려한</Text>
        <Text style={styles.title}>의료 관리 데이터 플랫폼</Text>
        <Text style={styles.subText}>
          누구나, 쉽게 자신의 의료 데이터를 관리할 수 있어요.
        </Text>
        <Image
          source={require('../../assets/images/icon/Mainicon.png')}
          style={styles.image}
        />
      </View>
      <TouchableOpacity style={styles.kakaoButton} onPress={handleKakaoLogin}>
        <Text style={styles.kakaoButtonText}>카카오 로그인</Text>
      </TouchableOpacity>
    </View>
  );
}

 

다들 도움이 되길 바라며..