React Native에서 카카오 로그인 API 연동시키기 (RN)

이번 글에서는 구글 로그인 API를 연동시키며 어떻게 API를 연동시키는지 감이 잡혀 카카오 로그인 API를 연동시키는 것도 성공시키게 되어 기쁜 마음으로 해당 내용에 대해 정리해보고자 한다.

 

 

참고로 카카오 로그인 API는 예전에 SDK 버전호환과 관련된 에러와 더불어, 안드로이드 앱 빌드 과정과 관련된 파일들에 대해 알지도 못하는 무지한 상태에서 처음 API를 연동시키며 정말 많은 고생을 하며 멘탈도 갈리고 결국 반포기상태로 방치했었던 부분인데 막상 API를 어떤식으로 안드로이드 프로젝트에서 불러와 실행시키고 빌드하는 건지에 대한 이해도가 어느정도 오른상태에서 다시 연동시켜보니 어이없을 정도로 쉽게 API를 연동시킬 수 있게 되어 당황스러웠다.

 

이제 본론으로 돌아가 안드로이드 환경에서 react native로 카카오 로그인 API를 연동시키려면 어떻게 해야하는지 꼭 필요한 과정들만 추려 정리해보도록하겠다. (추가적으로 버전 호환성에러를 겪었었기에 현재 카카오 로그인 API를 사용중인 글쓴이의 Gradle 버전은 8.8이며, JDK 버전은 17, react-native 버전은 0.74, 카카오 라이브러리 버전은 4.01버전이다)

 

 

 

1. Kakao Developers 앱 등록 

 

https://developers.kakao.com/ 

Kakao Developers

 

 

먼서 카카오 로그인 API를 연동시키려면 Kakao Devleopers에 API를 사용하려면 프로젝트를 등록시켜 해당 API에 접근할 수 있게 해주는 API Key를 발급받아야줘야 한다. 그러기 위해 위의 링크를 통해 Kakao Developers에 접속하여 본인 카카오 계정으로 로그인 해준 다음,  '내 애플리케이션' - '애플리케이션 추가하기' 버튼을 눌러 앱을 등록해주도록 하자 (앱 아이콘은 스토어에 배포하지 않는이상 따로 추가해주지 않아도 됨)

 

 

 

 

 

 

 

 

 

 

앱을 등록해주었다면 이제 플랫폼을 등록해주어야 하므로 등록한 앱을 눌러 왼쪽 메뉴바에 있는 '플랫폼' - 'Android 플랫폼 등록' 버튼을 눌러, 현재 진행중인 '패키지명'과 '키 해시' 명을 입력해주도록 하자.  (참고로 글쓴이는 이미 등록시켰기 때문에 화면이 다를 수 있으며 마켓URL은 플레이스토어에 배포하지않는다면 따로 지정해주지 않아도 된다.) 

 

 

 

 

 

 

 

 

 

패키지명은 안드로이드환경 기준이므로 현재 진행중인 프로젝트의 'APP'단의 'build.gradle'파일에 들어가 'applicationId'란의 'com. ' 으로 시작하는 부분을 복붙해주면 된다.

 

 

 

 

 

 

 

 

 

 

그다음 안드로이드 플랫폼을 등록하기 위해서는 해당 애플리케이션이 카카오 API 서비스를 사용할 자격이 있는지 검증하는데 필요한 '해시 키'값을 줘야하는데,  여기에는 앱 개발중 디버그를 하며 앱을 테스트할 때 쓰이는 기본 해시 키인 아래 키를 입력해주면 된다.

 

Xo8WBi6jzSxKDVR4drqm84yr9iU=				// 기본적으로 앱 디버깅에 쓰이는 해시 키

 

 

 

 

이렇게 해시 키까지 입력해주었다면 안드로이드 플랫폼을 통해 카카오에서 제공해주는 API들을 사용할 수 있게 된다.
('IOS'환경에서 앱 개발중이신 분들은 IOS 플랫폼을 등록해주어야 함, 동시개발중이라면 둘다 등록해주면 됨)

추가적으로 '해시 키'는 카카오측에서 등록한 어플리케이션이 카카오 API서비스들을 이용할 수 있는 자격이 있는지 확인하는데에 쓰이는 KEY로 API를 사용하는데 있어 핵심적인 부분인데. 위의 '해시 키'로는 제대로 등록된건지 불안하다면 추가적으로 아래 명령어를 통해 해시 키를 발급받아 여러개의 해시키를 등록시켜주면 된다. ( 여러개의 해시 키중에 한가지만 제대로 활성화가 되어도 정상적으로 API서비스들을 이용할 수 있음)

 

keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore -storepass android -keypass android | openssl sha1 -binary | openssl base64			// 해시 키 발급받는 명령어

 

 

 

 

 

 

 

2. '네이티브 앱 키'  발급받기

 

왼쪽 메뉴바에서 '앱 키'로 들어가 각자 환경에 맞는 Key를 발급받아주자. 글쓴이같은 경우 React-Native 언어를 통해 앱을 개발중이기에 네이티브 앱 키를 발급받아주었다.

 

 

 

 

 

 

 

 

3. Redirect URI 설정

 

 

위에서 플랫폼 등록을 성공적으로 마쳤다면 이제 카카오 로그인 api에서 구글과 동일한 OAuth 2.0 프로토콜을 사용해 사용자 인증절차를 거칠 때 필요한 'Redirect URI'을 등록 시켜주기 위해, [ 'android' - 'src' - 'main' - 'AndroidManifest.xml' ] 파일 경로로 이동하여 'AndroidManifest.xml' 파일에 아래 코드를 추가해주도록 하자. 

 

위에서 발급받은 KEY를 scheme 부분에 예시과 같은 형태로 추가해주면 된다.

 

 

<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.apitest">
	...
    <application
      ...
      <activity
       ...
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
	
	    // 'activity'와 'intent-filter' 안에 추가
            <data android:host="oauth"
            android:scheme="kakao{카카오 네이티브 앱 key를 입력해주세요}" />
        	// 예시
            <data android:host="oauth"
            android:scheme="kakaof32f00d36e598b675bea0ed5ca9ad8b6" />            <!-- kakao login api -->
        </intent-filter>
      </activity>
	  ...
    </application>
    ...
</manifest>

 

 

 

 

 

 

 

4. Maven 저장소 설정

안드로이드 환경의 프로젝트에서 카카오 SDK를 다운로드 받아 사용하기 위해선 SDK파일뿐만 아니라 관련된 라이브러리들을 다운로드 받아주는 Maven 저장소를를 설정해주어야 하므로, Maven 저장소의 URL를 '프로젝트'단의 'build.gradle' 파일에 추가해주도록하자.

 

 

buildscript {
    ext {
	...
    }
    repositories {
        google()
        mavenCentral()
        maven { url 'https://devrepo.kakao.com/nexus/content/groups/public/' }             // 이부분에 추가
    }
    dependencies {
	...
	}
...       
}
...
apply plugin: "com.facebook.react.rootproject"
...

 

 

 

 

5. 카카오 로그인관련 라이브러리 다운로드

 

 

위에서 Kakao Developers에서 카카오 로그인 API를 사용하기위한 설정들은 모두 마쳤고, 이제 해당 API를 사용하기위한 라이브러리를 아래 명령어를 통해 카카오 로그인 라이브러리를 다운로드 받고, 테스트 코드를 입력해 카카오 로그인 기능을 구현해보도록 하겠다.

 

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

 

 

 

 

 

 

6. 카카오 로그인 관련 샘플 코드 (JS)

 

기능 구현은 정말 쉬운데 아래 코드처럼 라이브러리에서 로그인, 로그아웃, 프로필 불러오기와 관련된 컴포넌트와 메서드들을 사용해주면 간단하게 구현할 수 있다.

 

import { Pressable, ScrollView, StyleSheet, Text, View } from "react-native";
import React, { useState } from "react";
import {
  login,
  logout,
  getProfile as getKakaoProfile,
} from "@react-native-seoul/kakao-login";

const KakaoAPIScreen = () => {
  const [result, setResult] = useState("");

  const signInWithKakao = async () => {					// 카카오 계정 로그인 기능 
    try {
      const token = await login();
      setResult(JSON.stringify(token));
    } catch (err) {
      console.error("login err", err);
    }
  };

  const signOutWithKakao = async () => {				// 카카오 계정 로그아웃 기능
    try {
      const message = await logout();
      setResult(message);
    } catch (err) {
      console.error("signOut error", err);
    }
  };

  const getProfile = async () => {						// 카카오계정 프로필정보 불러오기
    try {
      const profile = await getKakaoProfile();
      setResult(JSON.stringify(profile));
    } catch (err) {
      console.error("signOut error", err);
    }
  };

  return (
    <View style={styles.container}>
      <View style={styles.resultContainer}>
        <ScrollView>
          <Text>{result}</Text>
          <View style={{ height: 100 }} />
        </ScrollView>
      </View>
      <Pressable
        style={styles.button}
        onPress={() => {
          signInWithKakao();
        }}
      >
        <Text style={styles.text}>카카오 로그인</Text>
      </Pressable>
      <Pressable style={styles.button} onPress={() => getProfile()}>
        <Text style={styles.text}>프로필 조회</Text>
      </Pressable>
      <Pressable style={styles.button} onPress={() => signOutWithKakao()}>
        <Text style={styles.text}>카카오 로그아웃</Text>
      </Pressable>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    height: "100%",
    justifyContent: "flex-end",
    alignItems: "center",
    paddingBottom: 100,
  },
  resultContainer: {
    flexDirection: "column",
    width: "100%",
    padding: 24,
  },
  button: {
    backgroundColor: "#FEE500",
    borderRadius: 40,
    borderWidth: 1,
    width: 250,
    height: 40,
    paddingHorizontal: 20,
    paddingVertical: 10,
    marginTop: 10,
  },
  text: {
    textAlign: "center",
},
});

export default KakaoAPIScreen;

 

 

 

 

 

 

실제 테스트 화면 (카카오 계정 선택화면은 검은화면으로 처리됨)