[React Native] RN - 카카오 로그인(kakao login) 구현

안녕하세요.

 

이번시간에는 React Native 안드로이드 버전 카카오 로그인을 구현해 보도록 하겠습니다.

 

카카오 로그인 구현이 초보자들은 쉽지는 않으니 천천히 따라 해 보시길 바랍니다.

 

Android(안드로이드)

Step 1. 설치하기

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

* 설치 후 바로 ReactNative를 실행하시면 오류가 발생할 수 있으니 설치 후 아래 순서대로 전부 작업 후 ReactNative를 실행하시길 권장합니다.

 

Step 2. 키해시 등록

아래 명령어를 입력을 통해 키해시 등록을 진행 하도록 합니다.

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

명령어 입력 후 cmd 창에 예를 들어 Xo8123214214215yr9iU= 같은 문자가 나타나게 됩니다.

키 해시를 사용하기 위하여 카카오 디벨로퍼 사이트에 접속합니다.

https://developers.kakao.com/

 

① 앱 설정에서 플랫폼을 선택하여 줍니다.

② 수정을 눌러 키해시를 변경 해보도록 하겠습니다.

③ 위에 CMD에서 확인됬던 키해시를 복사하여 붙여 넣어 줍니다.

④ 마지막으로 저장 버튼을 눌러 주시면 키 해시 등록이 완료 됩니다.

Step 3. 패키지명 등록 & 변경

./android/app/src/main/AndroidManifest.xml 경로에 있는 package= 어트리뷰트를 참조하여 수정하여 줍니다.

package="com.kacoco"

 

Step 4. AndroidManifest 파일 설정 변경

① ./android/app/src/main/AndroidManifest.xml 경로로 이동합니다.

②  android:allowBackup="false"로 되어 있는 것을 android:allowBackup="true"로 변경해 주도록 합니다.

 

Step 5. Android SDK Repository 설정 추가

① ./android/build.gradle 경로로 이동합니다.

② 아래 코드를 추가해 주도록 하겠습니다.

kotlinVersion = '1.3.50'

classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlinVersion"

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

* What went wrong:
The Android Gradle plugin supports only Kotlin Gradle plugin version 1.5.20 and higher.
The following dependencies do not satisfy the required version:
root project 'app' -> org.jetbrains.kotlin:kotlin-gradle-plugin:1.3.50

* 위 내용과 같이 ReactNative Run 실행 후 경고가 발생하시면 kotlinVersion = '1.5.20' 로 변경하시면 됩니다.

 

Step 6. Strings 파일 설정 변경

① ./android/app/src/main/res/values/strings.xml 경로로 이동합니다.

② 아래 코드를 추가 합니다.

 * your_app_key는 삭제하시고 삭제한 부분에 네이티브 앱 키 코드를 삽입해 주시며 됩니다.

<string name="kakao_app_key">your_app_key</string>

 

Step 7. Redirect URI 설정

① ./android/app/src/main/AndroidManifest.xml 경로로 이동합니다.

②  아래 코드를 삽입하도록 합니다.

* 카카오 디벨롭스에 나와있는 네이티브 앱 키 코드를 삽입해 주시면 됩니다. 

  ex) android:scheme="kakao1232142142152316236"

<activity android:name="com.kakao.sdk.auth.AuthCodeHandlerActivity">
  <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>

 

Step 8. 로그인 코드 작성

app.js에 간단한 sample code를 작성해 보았습니다.

import {StyleSheet, Text, View, Button} from 'react-native';
import React from 'react';
import {
  KakaoOAuthToken,
  KakaoProfile,
  getProfile as getKakaoProfile,
  login,
  logout,
  unlink,
} from '@react-native-seoul/kakao-login';

export default function App() {
  const signInWithKakao = async (): Promise<void> => {
    const token: KakaoOAuthToken = await login();

    setResult(JSON.stringify(token));
  };

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

    setResult(message);
  };

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

    setResult(JSON.stringify(profile));
  };

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

    setResult(message);
  };

  return (
    <View>
      <Button title="로그인" onPress={signInWithKakao} />
    </View>
  );
}

 

Step 9. 결과보기

 

 

포스팅이 도움 되셨다면, 커피 한잔 후원해주세요! 더 좋은 포스팅 작성에 큰 힘이 됩니다.

 

 

[React Naitve] RN - Firebase 구글 로그인(Google Login) 구현하기

 

네이버 로그인(Naver Login)

[React Native] 리액트 네이티브 - 안드로이드 네이버 로그인하기(Android Naver Login)