[Android/Kotlin]KaKao Login

Kakao Login 사용 신청

🔒안드로이드 개발하면서 사용자 인증이 필요한 경우, 사용자 정보가 필요한 경우가 있습니다. 그 경우에 적합한 기술중 하나인 카카오 로그인을 알아보겠습니다.

Kakao Developer 접속

Kakao Developer에 접속 후 로그인합니다.

내 애플리케이션 추가

1. 위 화면에서 내 애플리케이션 클릭.
2. 애플리케이션 추가하기 클릭.
3. 앱 이름, 사업자명, 카테고리 작성 후 저장.

내 애플리케이션 기본 설정

1. 앱 설정 -> 플랫폼 -> Android 플랫폼 등록 클릭.
2. 패키지명, 해시 키 입력 후 저장.

📌 해시 키가 뭐죠...?

안드로이드 해시 키는 안전한 통신을 보장하고 앱의 무단 사용을 방지하며 사용자 데이터의 보안을 유지하는데 도움이 됩니다. 또한 각 앱은 고유한 서명 키를 가지며, 특정 안드로이드 앱을 고유하게 식별합니다. 이로 인해 카카오는 각 앱을 식별하고 특정 앱에 대한 보안 및 권한을 관리할 수 있습니다.

📌 그래서 어떻게 얻는거죠...?

private fun getAppKeyHash() {
        try {
            val info = packageManager.getPackageInfo(packageName, PackageManager.GET_SIGNATURES)
            for (signature in info.signatures) {
                val md: MessageDigest = MessageDigest.getInstance("SHA")
                md.update(signature.toByteArray())
                val hashKey = String(Base64.encode(md.digest(), 0))
                Log.e(TAG, "해시키 : $hashKey")
            }
        } catch (e: Exception) {
            Log.e(TAG, "해시키를 찾을 수 없습니다 : $e")
        }
    }

이 메서드를 onCreate()에서 호출해서 logcat을 확인하시면 됩니다.

3. 앱 설정 -> 요약 정보 -> 네이티브 앱 키 복사

카카오 로그인 활성화

1. 제품 설정 -> 카카오 로그인 -> on/off버튼 눌러서 활성화
2. 카카오 로그인 -> 동의 항목 -> 닉네임, 프로필 사진 '필수 동의'로 설정.
   

안드로이드 에서 카카오 SDK사용

AndroidManifest.xml

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

<activity
    android:name="com.kakao.sdk.auth.AuthCodeHandlerActivity"
    android:exported="true">
<activity
    android:name=".MainActivity"
    android:exported="false">

</activity>
<activity android:name=".LoginActivity"
    android:exported="true">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />

        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
</activity>
    <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="@string/kakao_redirection_scheme" />
    </intent-filter>
</activity>

매니페스트에 해당 코드를 추가합니다. 이 코드는 카카오 로그인을 위해 필요한 액티비티를 정의하고, 해당 액티비티가 어떤 인텐트를 수신할 수 있는지를 지정합니다.

build.gradle(:app)

implementation "com.kakao.sdk:v2-all:2.17.0"

settings.gradle(project)

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

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/userName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="20dp"
        android:textColor="@color/black"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/userThumbnail"
        android:layout_width="100dp"
        android:layout_height="100dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toTopOf="@id/userName" />
    
</androidx.constraintlayout.widget.ConstraintLayout>

activity_login.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <androidx.appcompat.widget.AppCompatButton
        android:id="@+id/kakaoLogin"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:background="@drawable/kakao_login_medium_wide"
        android:layout_margin="20dp"/>

</androidx.constraintlayout.widget.ConstraintLayout>

여기서 카카오 로그인 버튼 디자인은 디자인 가이드를 따라서 'kakao_login_medium_wide'를 다운 받아서 사용합니다.

LoginActivity.kt

import android.content.Intent
import android.os.Bundle
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import com.example.kakaologin.databinding.ActivityLoginBinding
import com.kakao.sdk.auth.model.OAuthToken
import com.kakao.sdk.common.KakaoSdk
import com.kakao.sdk.user.UserApiClient

class LoginActivity: AppCompatActivity() {

    private lateinit var binding: ActivityLoginBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityLoginBinding.inflate(layoutInflater)
        setContentView(binding.root)

        KakaoSdk.init(this, getString(R.string.kakao_native_app_key))

        binding.kakaoLogin.setOnClickListener {
            login()
        }
    }

    private fun login(){
        if (UserApiClient.instance.isKakaoTalkLoginAvailable(this)) loginWithKakaoTalk()
        else loginWithKakaoAccount()
    }

    private fun loginWithKakaoTalk(){
        UserApiClient.instance.loginWithKakaoTalk(this){ token, error ->
            handleLoginResult(token, error)
        }
    }

    private fun loginWithKakaoAccount(){
        UserApiClient.instance.loginWithKakaoAccount(this) { token, error ->
            handleLoginResult(token, error)
        }
    }

    private fun handleLoginResult(token: OAuthToken?, error: Throwable?){
        if (error != null){
            Toast.makeText(this, "로그인 실패!", Toast.LENGTH_SHORT).show()
        } else if (token != null){
            fetchUserInfo()
        }
    }

    private fun fetchUserInfo(){
        UserApiClient.instance.me { user, error ->
            if (error != null){
                Toast.makeText(this, "사용자 정보 가져오기 실패!", Toast.LENGTH_SHORT).show()
            } else if (user != null){
                val userId = user.id
                val userName = user.kakaoAccount?.profile?.nickname
                val userThumbnail = user.kakaoAccount?.profile?.thumbnailImageUrl

                val intent = Intent(this@LoginActivity, MainActivity::class.java)
                intent.putExtra("userId", userId)
                intent.putExtra("userName", userName)
                intent.putExtra("userThumbnail", userThumbnail)

                startActivity(intent)
            }
        }
    }
}

• KakaoSdk.init(this, getString(R.string.kakao_native_app_key)) : KakaoSdk 초기화.
• 버튼 클릭 시 login()메서드 호출.
• login() : 카카오톡으로 로그인이 가능한지 여부를 확인. 가능하다면 카카오톡으로 로그인, 아니라면 카카오 계정으로 로그인.
• loginWithKakaoTalk() : KakaoTalk을 통해 로그인하는 메서드.
• loginWithKakaoAccount() : Kakao 계정을 통해 로그인하는 메서드.
• handleLoginResult() : 로그인 결과를 처리하는 메서드. 성공하면 사용자 정보를 가져옴.
• fetchUserInfo() : 사용자 정보를 가져오는 메서드. 사용자 정보를 가져오면 MainActivity로 이동.

MainActivity.kt

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        val userId = intent.getStringExtra("userId")
        val userName = intent.getStringExtra("userName")
        val userThumbnail = intent.getStringExtra("userThumbnail")

        binding.userName.text = userName
        Glide.with(binding.userThumbnail)
            .load(userThumbnail)
            .into(binding.userThumbnail)
    }
}

사용자 이름과 썸네일을 intent로 가져온 값으로 설정합니다. 썸네일설정은 Glide를 사용합니다.

plugins {
    id 'kotlin-kapt'
}

dependencies {
    // Glide
    implementation 'com.github.bumptech.glide:glide:4.15.1'
    kapt 'com.github.bumptech.glide:compiler:4.15.1'
}

다음과 같이 의존성을 추가하면 사용 가능합니다.