[Android][Kotlin] 카카오 로그인 구현해보기! (API 이용)(Feat.KOE004)

이번글에서는 Kakao Developers에서 지원해주고 있는 카카오 로그인 api를 이용하여
로그인 기능을 구현해보려고 한다.

 

https://developers.kakao.com/

Kakao Developers

 

개발자 문서에 보면
어떻게 구현을 할지, API에 대한 설명이 잘 나와있으니
잘 보고 해봐야겠다!!ㅎㅎ

 

• Gradle 설정하기(project)
  

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

• 필요한 모듈 설정하기 (Module)
  Gradle 설정 완료 후, bulid.gradle(Module)파일에 필요한 모듈을 설정한다.
  나는 여기서 카카오 로그인만 필요하므로 다른 부분은 지워야겠다.

• 인터넷 사용 권한 설정하기
  카카오 API를 통해 카카오 서버와 통신하기 위해서 인터넷 사용 권한을 설정해야한다.
  권한 설정은 Manifest.xml에서 할 수 있다. 

• JAVA 8 사용 설정하기
  JAVA 8 설정을 해주자
  해당 설정은 bulid.gradle(Module)에서 할 수 있다.

---

• GlobalApplication 클래스 만들기(네이티브 앱 키로 초기화)
  Android SDK를 사용하기 위해서는 가장먼저 네이티브 앱 키로 초기화를 해야 한다.
  Application을 상속한 클래스를 사용하고 있다면 다음과 같이 초기화 할 수 있다.
  
  GlobalApplication이란 이름으로 class를 하나 생성 한 후, 다음 코드를 작성하고
  Appkey에 네이티브 앱 키를 작성한다.

• Manifest.xml 설정
  아래 코드를 application 태그 안에 작성하여 애플리케이션 프로세스가 시작될 때, 애플리케이션의 다른 컴포넌트보다 먼저 실행되게 한다.

android:name=".GlobalApplication

---

• kakao Developers에 애플리케이션 추가
  https://developers.kakao.com/console/app

카카오계정 로그인

로그인 api를 사용할 애플리케이션을 등록 한 후에
'플랫폼'에 들어가 Android 플랫폼 등록을 누른다

Android 플랫폼 등록을 할 때 패키지 명과 키 해시을 넣고 저장 버튼을 누르면 등록이 된다.

*해시값 구하기

val keyHash = Utility.getKeyHash(this)
Log.d("Hash", keyHash)

---

• 네이티브 앱 키 작성하기GlobalApplication 클래스에서 네이티브 앱 키를 작성해야한다.
  네이티브 앱 키는 '요약정보' 탭에서 확인할 수 있다.

---

• Redirect URL 설정하기
  카카오 로그인 기능을 구현하기 위해서는 리다이렉션(Redirection)을 통해 인가 코드를 받아야 한다.
  이를 위해, AndroidManifest.xml에 AuthCodeHandlerActivity을 추가하고,
  <intent-filter> 내에
  
  'android:host'와 'android:scheme' data를 추가하여 redirect_uri을 설정합니다.
  'android:scheme' 속성의 값은 'kakao{NATIVE_APP_KEY}' 형식으로 입력합니다.
  예를 들어 네이티브 앱 키가 '123456789'라면 'kakao123456789'를 입력합니다.
  

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

• 카카오 로그인 버튼
  https://developers.kakao.com/tool/resource/login

Kakao Developers

카카오 로그인 버튼은 해당 페이지에서 이미지를 다운로드 할 수 있다. 

 

로그인 버튼 이미지를 만들었으면 이제 Activity에 버튼을 추가해보자!!

<?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">


    <ImageButton
        android:id="@+id/kakao_login_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/kakao_login_medium_wide"
        android:background="@android:color/transparent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginBottom="40dp"
        />

</androidx.constraintlayout.widget.ConstraintLayout>

---

• 카카오톡으로 로그인 구현하기
  로그인을 구현하기 위해서는 Token값을 가지고 와야한다.
   1. 먼저 isKakaoTalkLoginAvailable() API로 사용자 기기에 카카오톡이 설치되어 있음을 확인한 후
   2. 카카오톡으로 로그인 API인 loginWithKakaoTalk()를 호출한다.
   3. loginWithKakaoTalk() API가 호출되면 Android SDK가 카카오톡을 실행하고 
  (API 호출 시 context와 결과 처리를 위한 콜백(Callback) 함수를 전달하여야 한다.)
   4. 사용자에게 앱 이용 관련 동의를 구하는 동의 화면을 출력한다.
  (사용자는 필수 항목에 모두 동의하여야 로그인 할 수 있으며, 동의하지 않고 로그인을 취소할 수도 있다.
  예외 처리를 위해 사용자의 로그인 취소 등 주요 에러가 AuthErrorCause에 정의되어 있으니 해당 래퍼런스를 참고하면 된다.)

class login : AppCompatActivity() {
    val TAG : String = "MainActivity"

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_login)



//        // 카카오계정으로 로그인
//        UserApiClient.instance.loginWithKakaoAccount(this) { token, error ->
//            if (error != null) {
//                Log.e(TAG, "로그인 실패", error)
//            }
//            else if (token != null) {
//                Log.i(TAG, "로그인 성공 ${token.accessToken}")
//                val startMainIntent = Intent(getApplicationContext(), MainActivity::class.java)
//                startActivity(startMainIntent)
//            }
//        }

        // 로그인 정보 확인 (토큰 값이 있으면 자동 로그인)
        UserApiClient.instance.accessTokenInfo { tokenInfo, error ->
            if (error != null) {
                Toast.makeText(this, "토큰 정보 보기 실패", Toast.LENGTH_SHORT).show()
            }
            else if (tokenInfo != null) {
                Toast.makeText(this, "토큰 정보 보기 성공", Toast.LENGTH_SHORT).show()
                val intent = Intent(this, MainActivity::class.java)
                startActivity(intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP))
                finish()
            }
        }


        // 로그인 공통 callback 구성
        val callback: (OAuthToken?, Throwable?) -> Unit = { token, error ->
            if (error != null) {
                when {
                    error.toString() == AuthErrorCause.AccessDenied.toString() -> {
                        Toast.makeText(this, "접근이 거부 됨(동의 취소)", Toast.LENGTH_SHORT).show()
                    }
                    error.toString() == AuthErrorCause.InvalidClient.toString() -> {
                        Toast.makeText(this, "유효하지 않은 앱", Toast.LENGTH_SHORT).show()
                    }
                    error.toString() == AuthErrorCause.InvalidGrant.toString() -> {
                        Toast.makeText(this, "인증 수단이 유효하지 않아 인증할 수 없는 상태", Toast.LENGTH_SHORT).show()
                    }
                    error.toString() == AuthErrorCause.InvalidRequest.toString() -> {
                        Toast.makeText(this, "요청 파라미터 오류", Toast.LENGTH_SHORT).show()
                    }
                    error.toString() == AuthErrorCause.InvalidScope.toString() -> {
                        Toast.makeText(this, "유효하지 않은 scope ID", Toast.LENGTH_SHORT).show()
                    }
                    error.toString() == AuthErrorCause.Misconfigured.toString() -> {
                        Toast.makeText(this, "설정이 올바르지 않음(android key hash)", Toast.LENGTH_SHORT).show()
                    }
                    error.toString() == AuthErrorCause.ServerError.toString() -> {
                        Toast.makeText(this, "서버 내부 에러", Toast.LENGTH_SHORT).show()
                    }
                    error.toString() == AuthErrorCause.Unauthorized.toString() -> {
                        Toast.makeText(this, "앱이 요청 권한이 없음", Toast.LENGTH_SHORT).show()
                    }
                    else -> { // Unknown
                        Toast.makeText(this, "기타 에러", Toast.LENGTH_SHORT).show()
                    }
                }
            }
            else if (token != null) {
                Toast.makeText(this, "로그인에 성공하였습니다.", Toast.LENGTH_SHORT).show()
                val intent = Intent(this, MainActivity::class.java)
                startActivity(intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP))
                finish()
            }
        }

        // 카카오톡이 설치되어 있으면 카카오톡으로 로그인, 아니면 카카오계정으로 로그인
        if (UserApiClient.instance.isKakaoTalkLoginAvailable(this)) {
            UserApiClient.instance.loginWithKakaoTalk(this, callback = callback)
        } else {
            UserApiClient.instance.loginWithKakaoAccount(this, callback = callback)
        }
    }
}

동의 화면에서 사용자가 모든 필수 항목에 동의하고 [동의하고 계속하기]를 선택하면, Android SDK는 카카오톡에서 서비스 앱으로 돌아와 다음 단계인 인가 코드 발급과 토큰 발급을 요청합니다.
토큰 발급에 성공하면 카카오 로그인 완료입니다.

---

회원정보 가지고 오기

카카오 로그인 -> 동의항목으로 이동하면
어떤 정보를 가지고 올건지 설정할 수 있다.

여기에서 이메일은 사업자 등록을 해야만 가지고 올 수 있다.

 

---

실행화면

관리자 설정 이슈 KOE004가 나왔다.
문서에 의하면 카카오 로그인 활성화를 안해줘서 나오는 에러라고 한다.

[제품 설정] -> [카카오 로그인] -> [카카오 로그인 활성화]를 해주면 된다.

- 앱 실행 영상

kakoAPI2.mp4

0.31MB

kakaoAPI1.mp4

4.39MB