[Android] 카카오 로그인 구현하기 (+ api key 숨기는 방법)

 

1. 안드로이드 developer 페이지 설정

 

https://developers.kakao.com/console/app

 

카카오 developers 페이지에서 로그인 후 '내 애플리케이션' 메뉴로 들어간다.

 

 

애플리케이션 추가하기 클릭

 

카카오 로그인을 사용할 애플리케이션 정보를 입력하면 된다.

사업자 명의 경우 아직 앱스토어에 등록되지 않은 단계이기 때문에 앱 이름과 동일하게 입력해주었다.

 

입력하면 내 애플리케이션에 새 항목이 등록된다.

이제 애플리케이션 플랫폼을 등록하기 위해 내 애플리케이션 > 앱 설정 > 플랫폼으로 이동한다.

 

 

Android, IOS, Web 3가지 플랫폼 중에 Android 플랫폼 등록을 클릭

 

애플리케이션 패키지 명과 마켓 url, 키 해시를 입력해야한다.

마켓에는 아직 등록되지 않아서 url을 없음으로 선택했다.

 

키 해시의 경우는 아래 공식 홈페이지 문서를 참고해 알아냈다.

 

https://developers.kakao.com/docs/latest/ko/android/getting-started#before-you-begin-add-key-hash

 

터미널에서 명령어를 실행하는 방법으로 키를 얻었는데, keytool 이랑 openssl 명령어에서 오류가 났다.

keytool 관련 오류는 https://kwonsaw.tistory.com/326#google_vignette 를 참고했고

openssl은 설치가 안 돼서 발생하는 오류여서 설치했다.

 

등록한 다음

 

 

내 애플리케이션 > 제품 설정 > 카카오 로그인

으로 이동해 로그인을 반드시 활성화 시켜줘야 한다.

 

 

 

2. 안드로이드 스튜디오 설정

 

AndroidManifest.xml에 인터넷 권한 설정을 해준다.

 

<uses-permission android:name="android.permission.INTERNET"/>

 

 

다음으로는 settings.gradle 파일에 android sdk 연동을 위한 설정을 해준다.

(*만약 Android Studio 버전이 Artic Fox 이전 버전이라면 해당 내용을 프로젝트 수준의 build.gradle 파일에 추가해야 한다.)

 

dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
    	...
        maven { url 'https://devrepo.kakao.com/nexus/content/groups/public/' }
    }
}

 

 

모듈 수준의 build.gradle 파일에 카카오 로그인 모듈을 추가해준다.

 

dependencies {
    ...
    implementation 'com.kakao.sdk:v2-user:2.17.0'
}

 

 

그 다음 Android SDK를 초기화 하기 위해 Application()을 상속받은 GlobalApplication 클래스를 선언한다.

 

 

저기서 init 함수의 appKey 인자로 kakao developers 페이지에서 등록한 앱의 네이티브 키를 입력해야 하는데, 코드상에 키를 직접적으로 입력해두면 키가 노출될 수 있기 때문에 gitignore 설정으로 원격에 업로드 되지 않는 local.properties 파일에 키를 숨겨 이용할 수 있다.

 

 

우선 kakao developers 페이지의 내 애플리케이션 > 앱 설정 > 앱 키 메뉴에서 등록된 플랫폼의 네이티브 앱 키를 복사한다.

 

 

그런 다음 local.properties 파일에 복사한 키 값을 추가해준다.

이름은 마음대로 지정해도 되고, 키 값은 반드시 큰따옴표로 감싸주자

 

다시 모듈 수준의 build.gradle 파일로 가서

다음 코드를 추가해준다.

Properties properties = new Properties()
properties.load(project.rootProject.file('local.properties').newDataInputStream())

 

properties 객체를 통해 local.properties 파일에서 읽어온 내용을 사용할 수 있다.

 

android {
    ...

    defaultConfig {
        ...
        buildConfigField "String", "KAKAO_NATIVE_APP_KEY", properties['kakao_native_app_key']
        manifestPlaceholders = [kakaoNativeAppKey:"kakao_native_app_key"]
    }
}

 

defaultConfig 내에 위와 같이 코드를 작성해준다.

 

BuildConfig 클래스에 local.properties 파일에서 kakao_native_app_key라고 등록한 값을 String 유형의 필드로 저장한다.

이를 통해 코드에서는 BuildConfig.KAKAO_NATIVE_APP_KEY로 등록된 키 값에 접근할 수 있다.

 

AndroidManifest.xml에서는 BuildConfig를 사용할 수 없기 때문에 manifestPlaceholders에 키를 등록해 사용할 수 있다.

매니페스트 파일에서 키가 사용되지 않으면 굳이 manifestPlaceholders를 등록하지 않아도 된다.

 

 

마지막으로 

buildFeatures {
    buildConfig = true
}

 

buildConfig 사용 설정을 해주고 gradle sync를 실행해주면 코드와 매니페스트에서 숨긴 키 값을 이용할 수 있다.

 

 

그런데 나는 코드에서 BuildConfig를 Import 할수가 없었다.

(5번 줄) 해당 앱 패키지.BuildConfig 형식으로 import가 돼야 하는데 다른 패키지 BuildConfig만 떴다..

 

똑같은 문제가 발생했다면 

1) Build > Clean Project 실행 후 Build > Rebuild Project 실행

2)  File > Invalidate Caches 에서 Restart 실행

순서대로 해보자!! 이 방법을 통해 정상적으로 import해 사용할 수 있었다.

 

AndroidManifest.xml에서

<application
    android:name=".login.view.GlobalApplication"
    ...
    >

 

GlobalApplication 클래스를 애플리케이션 name 속성으로 지정해주고

 

<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${kakaoNativeAppKey}"/>
    </intent-filter>
</activity>

 

카카오 로그인 페이지로 이동하기 위한 activity 태그를 생성해준다.

여기서 manifestPlaceholders로 지정한 kakaoNativeAppKey를 사용했다. 키 값 앞에 반드시 kakao를 붙여줘야 한다!

 

 

3. 카카오 계정 로그인 코드 작성

 

1, 2 번의 설정을 다 마친 뒤

로그인 화면으로 진입해 과정을 진행하는 코드는 공식문서에 작성된 대로 사용하면 된다.

 

https://developers.kakao.com/docs/latest/ko/kakaologin/android

 

private fun kakaoLogin(){
        // 카카오계정으로 로그인 공통 callback 구성
        // 카카오톡으로 로그인 할 수 없어 카카오계정으로 로그인할 경우 사용됨
        val callback: (OAuthToken?, Throwable?) -> Unit = { token, error ->
            if (error != null){
                Log.e("Login-kakao", "카카오계정으로 로그인 실패", error)
            } else if (token != null){
                Log.d("Login-kakao", "카카오계정으로 로그인 성공 ${token.accessToken}")
            }
        }

        // 카카오톡이 설치되어 있으면 카카오톡으로 로그인, 아니면 카카오계정으로 로그인
        if (UserApiClient.instance.isKakaoTalkLoginAvailable(mainActivity)) {
            UserApiClient.instance.loginWithKakaoTalk(mainActivity) { token, error ->
                if (error != null) {
                    Log.e("Login-kakao", "카카오톡으로 로그인 실패", error)

                    // 사용자가 카카오톡 설치 후 디바이스 권한 요청 화면에서 로그인을 취소한 경우,
                    // 의도적인 로그인 취소로 보고 카카오계정으로 로그인 시도 없이 로그인 취소로 처리 (예: 뒤로 가기)
                    if (error is ClientError && error.reason == ClientErrorCause.Cancelled) {
                        return@loginWithKakaoTalk
                    }

                    // 카카오톡에 연결된 카카오계정이 없는 경우, 카카오계정으로 로그인 시도
                    UserApiClient.instance.loginWithKakaoAccount(mainActivity, callback = callback)
                } else if (token != null) {
                    Log.i("Login-kakao", "카카오톡으로 로그인 성공 ${token.accessToken}")
                }
            }
        } else {
            UserApiClient.instance.loginWithKakaoAccount(mainActivity, callback = callback)
        }
    }

 

위와 같은 로그인 함수를 선언한 뒤

 

buttonKakaoLogin.setOnClickListener {
    kakaoLogin()
}

 

버튼 클릭 시 동작하도록 호출해주면 

 

 

웹 페이지로 이동해 로그인 과정을 거칠 수 있다.