카카오 로그인 기능 구현하기

 

안녕하세요~ 오늘은 카카오 로그인 기능에 대해서 다뤄보려고 합니다!

 

로그인 화면 디자인 (임시)

 

작년에 해커톤을 나갔을 때 카카오 로그인을 사용하지 않고 백엔드에서 자체 서버를 구현했었는데 이와 관련한 심사위원 피드백이 생각났습니다. 어뷰징(abusing), 즉 자체 로그인 시스템을 쓰면 한 사람이 여러 개의 계정을 만들어 댓글을 조작하는 등 악의적인 행위를 할 수 있다고 합니다. 따라서 이번에는 피드백을 반영하여 자체 서버를 사용하지 않고 카카오, 네이버, 구글 API 을 이용해보기로 했습니다. 

1. 애플리케이션 추가하기

카카오 사이트

 

먼저, 해당 url 의 홈페이지에 접속한 다음 카카오 계정으로 로그인을 합니다. 이후에는 '내 애플리케이션'을 클릭합니다.

 

애플리케이션 추가하기

그 다음엔, 애플리케이션 추가하기를 클릭해줍니다.

애플리이션 추가하기 상세화면

 

그 다음엔 해당 화면이 뜨는데요. 엡 아이콘, 앱 이름, 회사명, 카테고리를 선택하고 아래 동의 체크를 한 다음 저장 버튼을 누릅니다. 

2. 플랫폼 등록하기

애플리케이션 추가하기를 마쳤으면 플랫폼 등록을 해야합니다. Android 와 iOS 로 나누어져있는데, 저는 Android 플랫폼 등록을 진행했습니다.

플랫폼 등록

 

플랫폼 등록을 하려면 패키지명, 마켓 URL, 키 해시 값을 알아야합니다. 패키지명을 아는 방법은 아래와 같습니다.

패키지명

 

안드로이드 스튜디오 IDE 에서 모듈 단위 build.gradle 에 들어가면 namespace, applicationId 에 패키지명이 있습니다.

참고로, 패키지명이 com.example 로 시작하면 배포용 앱을 만들 수 없습니다. 저희 팀은 스토어에 배포까지는 고려하지 않았기에 패키지명을 바꾸지않고 그대로 진행했습니다.

마켓 URL

 

나중에 앱을 마켓에 실제 등록(배포)할 때 나오는 URL 을 입력하면 됩니다. 아직 등록하지 않은 경우에는 '없음'을 선택합니다.

키 해시

 

마지막으로 키 해시값이 필요합니다. 키 해시(Key Hash)는 인증서의 지문 값을 해시(hash)한 값으로, 악성 앱인지 판별할 수 있습니다. 키 해시는 디버그 키 해시와 릴리즈 키 해시 두 가지가 있습니다. 릴리즈 키는 배포할 때 필요한 키이기 때문에, 저희는 디버그 키 해시를 구하면 됩니다. 이를 위해선 두 가지 방법이 있습니다.

1. 터미널에서 디버그 키 해시 값 구하기

키 해시 값 구하기 (git bash)

 

첫 번째로, 터미널에서 해시 값을 구할 수 있습니다. 근데 윈도우의 경우에는 먼저 OpenSSL 을 다운을 받아야하고, keytool 명령어를 인식하지 못하는 경우에는 Oracle JDK 를 설치한 후 시스템 환경변수의 path 에 bin 폴더 경로를 추가해야합니다.

window - OpenSSL 설치

Oracle JDK 설치 (명령어 인식 못할 시)

시스템 환경 변수 경로 설정

 

2. 카카오 SDK 로 디버그 키 해시 값 구하기

두 번째로, Kakao SDK 를 통해서도 키 해시 값을 구할 수 있는데 SDK 를 사용하려면 먼저 gradle 설정을 먼저 해주어야 합니다.

settings.gradle 파일에 파란색으로 표시한 코드를 추가해줍니다. 

settings.gradle.kts

 

또한, 모듈 단위 gradle 에 아래와 같이 의존성을 추가합니다. 저 같은 경우에는 버전을 2.21.2 로 했습니다.

dependencies {
  implementation("com.kakao.sdk:v2-user:${LATEST_VERSION}") // 카카오 로그인 API 모듈
}

 

메니페스트에 인터넷 사용 권한 허가 코드도 추가합니다.

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

 

이제, 키 해시를 로그를 통해 확인할 수 있는데요. 작성 위치는 Application, Activity 둘 다 괜찮습니다. 근데 Application 에 작성하는 경우, 해당 클래스 역시 메니페스트의 name 속성에 연결시켜줍니다. 

class SmartStayApplication: Application() {
    override fun onCreate() {
        super.onCreate()
        val keyHash = Utility.getKeyHash(this)
        Log.e("keyHash", keyHash)
    }
}

<application
        android:allowBackup="true"
        android:name=".SmartStayApplication"
        android:dataExtractionRules="@xml/data_extraction_rules"
        android:fullBackupContent="@xml/backup_rules"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.SmartStay"
        tools:targetApi="31">

 

 

로그를 통한 키해시값 확인

 

로그를 통해 출력된 키 해시 값을 확인할 수 있습니다. 다시 플랫폼 등록으로 돌아가겠습니다.

 

키 해시를 적어주면 됩니다. 키 해시는 노출되면 안되는 값이라 모자이크로 안보이게 했습니다!

플랫폼 등록을 마치면 이렇게 앱 키가 발급이 됩니다. 

3. 활성화 및 동의 항목 설정

 

 

이후에는 카카오 로그인 활성화 상태를 OFF 에서 ON 으로 바꿔줍니다. 바로 아래에 개인정보 동의 항목을 보겠습니다.

동의항목

 

사용자로부터 받아올 수 있는 데이터에 대해 동의 단계를 설정할 수 있습니다. 보통 닉네임과 이미지 같은 경우에는 필수 동의로 체크합니다. 

닉네임, 프로필 사진

4. 카카오 SDK 초기화

카카오 Sdk 를 사용하려면 초기화 과정도 필요합니다. 아까처럼 Application 이나 Activity 단위에서 발급받은 네이티브 앱 키를 가지고 초기화를 진행합니다. 만약 네이티브 앱 키가 노출이 된다면 재발급을 받으시면 됩니다.

class SmartStayApplication: Application() {
    override fun onCreate() {
        super.onCreate()
        KakaoSdk.init(this, "{NATIVE_APP_KEY}")
    }
}

 

5. 카카오 로그인 버튼 UI 

카카오 로그인 버튼 이미지

 

설정 단계는 거의 끝났습니다..!!😭 마지막으로 이미지를 빼놓을 수 없겠죠. 디자인 가이드에 버튼 관련된 리소스가 있습니다.

카카오 로그인 버튼 이미지

 

이렇게 원하는 이미지를 다운로드 받으시면 되는데요. 저는 버튼 크기 중에 Middle 이랑 Large 가 체감이 안되어서 아래와 같이 직접 xml 에 띄워보았습니다.

이미지 크기(Large, Middle) 차이

 

이 정도 크기네요.. 저희 앱에는 Large 가 더 적합한 것 같습니다. 🤨

6. 기능 구현하기 

 

카카오 기능 구현 방식은 카카오톡으로 로그인하기, 카카오계정으로 로그인하기 두 가지로 나뉩니다. 먼저 manifest 에 아래와 같이 액티비티를 등록해줍니다. scheme 에 네이티브 앱 키를 넣어주면 됩니다.

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

 

버튼을 눌렀을 때의 코드는 아래와 같이 작성해줍니다.

binding.ivKakaoLogin.setOnClickListener {
            val callback: (OAuthToken?, Throwable?) -> Unit = { token, error ->
                if (error != null) {
                    Log.e("error", "카카오계정으로 로그인 실패", error)
                } else if (token != null) {
                    Log.i("error", "카카오계정으로 로그인 성공 ${token.accessToken}")
                    Toast.makeText(requireContext(), "${token.accessToken}", Toast.LENGTH_SHORT).show()
                }
            }

            if (UserApiClient.instance.isKakaoTalkLoginAvailable(requireContext())) {
                UserApiClient.instance.loginWithKakaoTalk(requireContext()) { token, error ->
                    if (error != null) {
                        Log.e("error", "카카오톡으로 로그인 실패", error)
                        if (error is ClientError && error.reason == ClientErrorCause.Cancelled) {
                            return@loginWithKakaoTalk
                        }
                        UserApiClient.instance.loginWithKakaoAccount(requireContext(), callback = callback)
                    } else if (token != null) {
                        Log.i("error", "카카오톡으로 로그인 성공 ${token.accessToken}")
                        Toast.makeText(requireContext(), "${token.accessToken}", Toast.LENGTH_SHORT).show()
                    }
                }
            } else {
                UserApiClient.instance.loginWithKakaoAccount(requireContext(), callback = callback)
            }
        }
    }

 

저는 코드에 대한 설명을 아래 플로우 차트로 대신 정리했습니다. 저는 개인적으로 플로우 차트 흐름을 먼저 이해한 다음에 코드를 보는게 더 중요하다고 생각합니다.

카카오 OAuth 로그인 플로우 차트

7. 시연 영상

시연 영상

 

카카오 로그인 버튼을 누르면 처음에 동의항목 관련 창이 뜨고, 이후 체크를 하면 아래에 토스트 메세지로 accessToken 일부가 출력되는 것을 볼 수 있습니다. 이는 카카오 로그인이 성공했다는 것을 의미합니다.

 

오늘은 카카오 로그인 연동하기를 알아봤습니다! 도움이 되셨으면 좋겠습니다. 5월도 화이팅 하시길 바랍니다! 😊