[RN] kakao login

오랜만에 프로젝트를 했다가 카카오 로그인에 막혔다.

스스로 어이가 없었다.

다신 이런 실수를 하지 않기 위해 글로 남겨봅니다.

 

https://www.npmjs.com/package/@react-native-seoul/kakao-login/v/3.3.1

@react-native-seoul/kakao-login

 

무려 영상 가이드까지 있다.

하지만 아시죠? RN 맨날 뭐가 바뀌는거-

현재 프로젝트 버전은 0.77입니다.

 

iOS는 영상대로 하면 잘 된다. 스킵-

공식문서가 잘 나와있어서, 굳이 뭘 안써도 될 것 같다.

 

android의 경우 릴리즈, 디버그 해시를 등록해도 이러한 에러가 뜰 수 있다.

AUTHORIZATION_FAILED: invalid android_key_hash or ios_bundle_id or web_site_url

 

1. android/build.gradle

buildscript {
    ext {
        buildToolsVersion = "35.0.0"
        minSdkVersion = 24
        compileSdkVersion = 35
        targetSdkVersion = 34
        ndkVersion = "27.1.12297006"
        kotlinVersion = "2.0.21"
    }
    repositories {
        google()
        mavenCentral()
        // ++ kakao
        maven { url 'https://devrepo.kakao.com/nexus/content/groups/public/' }

    }
    dependencies {
        classpath("com.android.tools.build:gradle")
        classpath("com.facebook.react:react-native-gradle-plugin")
        classpath("org.jetbrains.kotlin:kotlin-gradle-plugin")
    }
}

apply plugin: "com.facebook.react.rootproject"

 

 

2. android/app/build.gradle

apply plugin: "com.android.application"
apply plugin: "org.jetbrains.kotlin.android"
apply plugin: "com.facebook.react"

...

dependencies {
    // The version of react-native is set by the React Native Gradle Plugin
    implementation("com.facebook.react:react-android")

	// ++ kakao sdk
    implementation "com.kakao.sdk:v2-user:2.15.0"

    if (hermesEnabled.toBoolean()) {
        implementation("com.facebook.react:hermes-android")
    } else {
        implementation jscFlavor
    }
}

 

3. manifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android">

    <uses-permission android:name="android.permission.INTERNET" />
    <!-- ++ kakao -->
    <uses-permission android:name="android.permission.QUERY_ALL_PACKAGES" />

    <application
      android:name=".MainApplication"
      android:label="@string/app_name"
      android:screenOrientation="portrait"
      android:icon="@mipmap/ic_launcher"
      android:roundIcon="@mipmap/ic_launcher_round"
      android:allowBackup="true"
      android:theme="@style/AppTheme"
      android:supportsRtl="true">
      <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode"
        android:launchMode="singleTask"
        android:windowSoftInputMode="adjustResize"
        android:exported="true">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
      </activity>

      <!-- ++ kakao -->
      <meta-data
        android:name="com.kakao.sdk.AppKey"
        android:value="@string/kakao_app_key" />

      <!-- ++ kakao -->
      <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>
    </application>
</manifest>

 

4. mainApplication

package com.ex

import android.app.Application
import com.facebook.react.PackageList
import com.facebook.react.ReactApplication
import com.facebook.react.ReactHost
import com.facebook.react.ReactNativeHost
import com.facebook.react.ReactPackage
import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.load
import com.facebook.react.defaults.DefaultReactHost.getDefaultReactHost
import com.facebook.react.defaults.DefaultReactNativeHost
import com.facebook.react.soloader.OpenSourceMergedSoMapping
import com.facebook.soloader.SoLoader
// ++ kakao sdk
import com.kakao.sdk.common.KakaoSdk 

class MainApplication : Application(), ReactApplication {

  override val reactNativeHost: ReactNativeHost =
      object : DefaultReactNativeHost(this) {
        override fun getPackages(): List<ReactPackage> =
            PackageList(this).packages.apply {
              // Packages that cannot be autolinked yet can be added manually here, for example:
              // add(MyReactNativePackage())
            }

        override fun getJSMainModuleName(): String = "index"

        override fun getUseDeveloperSupport(): Boolean = BuildConfig.DEBUG

        override val isNewArchEnabled: Boolean = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED
        override val isHermesEnabled: Boolean = BuildConfig.IS_HERMES_ENABLED
      }

  override val reactHost: ReactHost
    get() = getDefaultReactHost(applicationContext, reactNativeHost)

  override fun onCreate() {
    super.onCreate()
    SoLoader.init(this, OpenSourceMergedSoMapping)

    // ++ kakao sdk
    KakaoSdk.init(this, getString(R.string.kakao_app_key))

    if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
      load()
    }
  }
}

 

5. android/app/src/main/res/values/strings.xml

<resources>
    <string name="app_name">앱 이름</string>
    // ++ kakao
    <string name="kakao_app_key">{여러분들 네이티브 앱키}</string>
</resources>

 

일단 이렇게 세팅하세요!
그럼에도 불구하고 같은 오류가 나온다면 카카오디벨로퍼에 해시키를 제대로 등록하지 않았을 확률이 높습니다.

 

안드로이드스튜디오 ㄱㄱ

MainActivity 파일열고 수정하세요. 

package com.ex
// ++ 필요한 임포트 다 하세요.
import android.content.pm.PackageManager
import android.os.Bundle
import android.util.Base64
import android.util.Log
import com.facebook.react.ReactActivity
import java.security.MessageDigest
import java.security.NoSuchAlgorithmException

class MainActivity : ReactActivity() {

    override fun getMainComponentName(): String = "ex"

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        // ++ 호출
        getHashKey()
    }

  // ++ 실행 중인 앱의 키 해시 출력
  private fun getHashKey() {
    try {
      val packageInfo = if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.P) {
        packageManager.getPackageInfo(packageName, PackageManager.GET_SIGNING_CERTIFICATES)
      } else {
        packageManager.getPackageInfo(packageName, PackageManager.GET_SIGNATURES)
      }

      val signatures = if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.P) {
        packageInfo?.signingInfo?.apkContentsSigners
      } else {
        packageInfo?.signatures
      }

      if (signatures.isNullOrEmpty()) {
        Log.e("KakaoKeyHash", "키 해시를 가져올 수 없음: 서명이 없음")
        return
      }

      for (signature in signatures) {
        val md = MessageDigest.getInstance("SHA")
        md.update(signature.toByteArray())
        val keyHash = Base64.encodeToString(md.digest(), Base64.NO_WRAP)
        Log.d("KakaoKeyHash", "현재 실행 중인 키 해시: $keyHash")
      }
    } catch (e: NoSuchAlgorithmException) {
      Log.e("KakaoKeyHash", "키 해시를 가져오는 중 오류 발생", e)
    } catch (e: Exception) {
      Log.e("KakaoKeyHash", "키 해시를 가져올 수 없음", e)
    }
  }
}

 

그리고 안드로이드 스튜디오에서 런 돌리고 로그캣 확인하면 해시키 나옵니다.

그거 카카오 디벨로퍼에 등록ㄱㄱ

 

그럼 끝.

그래도 안된다? 부장님한테 던지세요.