[React Native] AOS - Kakao SDK를 이용한 카카오 로그인

프로젝트에서 계정 로그인을 카카오와 구글을 이용하여 로그인을 진행하기로 했다. 카카오 로그인의 경우 보통 2가지가 존재한다.

1. sdk를 이용하는 경우

2. 웹뷰를 이용하여 로그인을 띄워주는 경우

 

처음에 웹뷰를 이용하여 로그인을 띄워주려고 생각했었다. 하지만 웹뷰는 카카오 앱과 연동이 되는것이 아닌 카카오 로그인 페이지 뷰를 보여주는 형식이기 때문에 네이티브 앱과 연동이 되지 않았다. 그리하여 UX 고려차원에서 kako sdk를 이용하기로 하였다.

 

빠른 구현을 위하여 react-native-kakao-login 라는 라이브러리를 사용하기로하였다. 

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

GitHub - crossplatformkorea/react-native-kakao-login: react-native native module for Kakao sign in.

 

카카오 로그인을 시작하기 전 준비물

카카오 로그인을 위해선 Kakao Developers 사이트에서 등록이 필요하다. 글 작성자는 EDITOR로 팀 초대를 받았다.

https://developers.kakao.com/

Kakao Developers

 

앱을 만든 후에 로그인을 허용하기 위해 내 애플리케이션 > 앱 설정을 통하여 로그인을 허용해주어야한다.

 

마지막으로 가장 중요한 앱 키를 확인해야한다. 내 애플리케이션 > 앱 키에 있는 네이티브 앱 키가 필요하기에 이를 잘 확인하여야한다. 아래는 설치 및 적용 과정이다.

 

AOS - 카카오 로그인 설치 및 적용

1. 패키지 설치

npm

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

yarn

yarn add @react-native-seoul/kakao-login

 

위의 코드로 패키지를 설치한다.

 

2. activity 코드 추가

android/src/main/res/AndroidManifest.xml 파일에 아래와 같은 코드를 추가한다.이때 {카카오 네이티브 앱 key}에는 Kakao Developers에 있는 네이티브 앱 키를 등록해야한다. 

 <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" />

        <!-- Redirect URI: "kakao{NATIVE_APP_KEY}://oauth“ -->
        <data android:host="oauth"
            android:scheme="kakao{카카오 네이티브 앱 key}" />
      </intent-filter>
</activity>

 

(예를들어 나의 앱 키가 123456789a라면 아래와 같은 코드가 된다. 네이티브 앱 키는 사람마다 다르므로 각각에 맞는 키를 설정해줘야한다. 또한 앞에 kakao를 필수로 붙여야한다.)

예시
<data android:host="oauth"
            android:scheme="kakao123456789a" />

 

그 다음에 android/src/main/res/values/string.xml에서 아래와 같은 코드를 추가합니다. 위의 코드에도 네이티브 앱 키를 넣어줘야합니다. 그렇지 않으면 KOE101 오류가 발생 할 수 있습니다.

<string name="kakao_app_key">{네이티브 앱 키}</string>

3. Maven 추가

android/build.gradle 파일에서 allprojects 안에 maven을 추가해줍니다.

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

 

마지막으로 해쉬키를 등록해야합니다. 저의 프로젝트는 frontend 폴더 안에 frontend 코드들과 android 폴더가 있는데 frontend 폴더에서 아래의 명령어로 안드로이드 앱의 디버그 키 해시(Key Hash)를 추출합니다.

keytool -exportcert -alias androiddebugkey -keystore ./android/app/debug.keystore -storepass android -keypass android | openssl sha1 -binary | openssl base64

위의 명령어를 입력하면 해쉬키가 나오는데 이 키를 복사합니다

 

오류) 키 해쉬 에러

어려 번 키를 생성 할 시 아래와 같은 주의사항과 함께 디버그 해쉬 키가 나옵니다. 

Warning:
The certificate uses the SHA1withRSA signature algorithm which is considered a security risk.
The JKS keystore uses a proprietary format. It is recommended to migrate to PKCS12 
which is an industry standard format using "keytool -importkeystore -srckeystore 
./android/app/debug.keystore -destkeystore ./android/app/debug.keystore -deststoretype pkcs12".
{해쉬 키}

위와같은 문구가 나오는데 이 값은 이전에 등록했던 해쉬 키랑 다를 수 있으므로 한 번 더 SHA1 값으로 키 해시를 등록해야합니다. (저는 몇 번 키를 생성했기에 이런 사항이 나오는것이라 생각합니다. 만약 위의 문구가 뜨지 않으면 아래의 과정을 생략하고 바로 플랫폼에 해쉬 키 등록 부분으로 넘어가면 됩니다.)

 

해결방법

# 현재 앱이 어떤 서명으로 빌드되고 있는지 확인
cd android
./gradlew signingReport

안드로이드 폴더로 가서 앱 서명을 확인합니다.

 

Task :app:signingReport
Variant: debug
Config: debug
Store: C:\Users\jes\Desktop\projectname\projectname\frontend\android\app\debug.keystore
Alias: androiddebugkey

콘솔에 아래와 같은 형식으로 디버그 키가 있고 아래 SHA1 키가 나옵니다. 그럼 SHA1를 복사하고 Git bash 등을 이용하여 키를 생성합니다. (위치는 상관없습니다)

echo -n "이곳에 SHA1 관련 키를 넣으세요" | xxd -r -p | openssl base64

 

플랫폼 등록

해쉬 키까지 얻는데 성공했으면 Kakao Developers에서 내 애플리케이션 > 앱 설정 > 플랫폼에서 나의 패키지, 키 해시 등을 등록합니다. 패키지는 앱의 패키지왕 동일해야합니다.

사용된 React Native 로그인 코드

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

const App = () => {
  const [result, setResult] = useState<string>("");

  const signInWithKakao = async (): Promise<void> => {
    try {
      const token = await login();
      setResult(JSON.stringify(token));
      console.log("login success ", token.accessToken);
    } catch (err) {
      console.error("login err", err);
    }
  };

  const signOutWithKakao = async (): Promise<void> => {
    try {
      const message = await logout();

      setResult(message);
    } catch (err) {
      console.error("signOut error", err);
    }
  };

  const getProfile = async (): Promise<void> => {
    try {
      const profile = await getKakaoProfile();

      setResult(JSON.stringify(profile));
    } catch (err) {
      console.error("signOut error", err);
    }
  };

  const getShippingAddresses = async (): Promise<void> => {
    try {
      const shippingAddresses = await getKakaoShippingAddresses();

      setResult(JSON.stringify(shippingAddresses));
    } catch (err) {
      console.error("signOut error", err);
    }
  };

  const unlinkKakao = async (): Promise<void> => {
    try {
      const message = await unlink();

      setResult(message);
    } 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={() => getShippingAddresses()}>
        <Text style={styles.text}>배송주소록 조회</Text>
      </Pressable>
      <Pressable style={styles.button} onPress={() => unlinkKakao()}>
        <Text style={styles.text}>링크 해제</Text>
      </Pressable>
      <Pressable style={styles.button} onPress={() => signOutWithKakao()}>
        <Text style={styles.text}>카카오 로그아웃</Text>
      </Pressable>
    </View>
  );
};

export default App;

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",
  },
});

 

실행화면

적용 후 개발자 모드로 변경하여 앱을 실행하고 로그인에 성공하면 아래와 같이 로그인 코드가 나옵니다.