kakao login api 사용 - 2

Redirect URI 설정

---

https://developers.kakao.com/docs/latest/ko/kakaologin/android#set-redirect-uri

Kakao Developers

카카오 로그인 기능을 구현하기 위해서는 리다이렉션(Redirection)을 통해 인가코드를 받아야 하기 때문에 설정

AndroidManifest.xml에 액티비티 설정해줌

<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" />
        
        <!-- Redirect URI: "kakao${NATIVE_APP_KEY}://oauth" -->
        <data android:host="oauth"
                android:scheme="kakao${NATIVE_APP_KEY}" />
    </intent-filter>
</activity>

여기서도 NATIVE_APP_KEY는 이전에 발급받은 키 값을 사용하면 됨

주의할 점이 kakao는 그대로 두고 뒤에 키 값을 넣어줘야 함

 

 

 

카카오 로그인 리소스 다운

---

리소스 다운로드 후 사용할 프로젝트에 넣어줌

 

 

 

 

사용 예제

---

activity_main.xml

기본 레이아웃 틀

실습을 위해 로그인, 로그아웃 버튼과 프로필 사진 이미지뷰, 닉네임 텍스트뷰를 만들어줌

프로필 이미지뷰와 닉네임 텍스트뷰는 src와 text를 설정해두지 않아 로그인 로그아웃 버튼 위는 빈 화면으로 뜸

버튼 두개는 모두 gone으로 visibility를 설정해 첫 화면에선 보이지 않도록 설정해줌

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

    <LinearLayout
        android:id="@+id/linear"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:orientation="vertical"
        android:gravity="center"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toTopOf="@id/login">

        <ImageView
            android:id="@+id/profile"
            android:layout_width="200dp"
            android:layout_height="200dp" />

        <TextView
            android:id="@+id/nickname"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:textSize="20dp"
            android:textStyle="bold"/>

    </LinearLayout>


    <ImageView
        android:id="@+id/login"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/kakao_login_large_wide"
        android:layout_marginTop="30dp"
        android:layout_marginStart="10dp"
        android:layout_marginEnd="10dp"
        android:visibility="gone"
        app:layout_constraintTop_toBottomOf="@id/linear"
        app:layout_constraintStart_toStartOf="@id/linear"
        app:layout_constraintEnd_toEndOf="@id/linear"
        app:layout_constraintBottom_toTopOf="@id/logout"/>

    <Button
        android:id="@+id/logout"
        android:layout_width="match_parent"
        android:layout_height="65dp"
        android:backgroundTint="#979797"
        android:textSize="18dp"
        android:text="로그아웃"
        android:visibility="gone"
        android:layout_marginStart="10dp"
        android:layout_marginEnd="10dp"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="20dp"
        app:layout_constraintTop_toBottomOf="@id/login"
        app:layout_constraintStart_toStartOf="@id/login"
        app:layout_constraintEnd_toEndOf="@id/login"
        app:layout_constraintBottom_toBottomOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

 

---

 

MainActivitiy.kt

사용자 정보를 가져와서 로그인이 되어있다면 프로필과 닉네임을 화면에 띄워주고, 로그아웃 버튼만 보여줌

로그인이 되어있지않다면 로그아웃 버튼은 숨기고 로그인 버튼만 보여줌

 

1) 로그인 여부에 따라 UI 변경 함수

// 함수 전체 코드
    fun updateKakaoLoginUI(){
        UserApiClient.instance.me { user, error ->
//            if(error != null){
//                Log.e(TAG,"사용자 정보 요청 실패",error)
//            }
            if (user != null) {
                binding.logout.visibility = View.VISIBLE
                binding.login.visibility = View.GONE
                binding.nickname.text=user.kakaoAccount?.profile?.nickname
                Glide.with(binding.profile)
                    .load(user.kakaoAccount?.profile?.thumbnailImageUrl)
                    .circleCrop()
                    .into(binding.profile)
            }
            else{
                binding.login.visibility = View.VISIBLE
                binding.logout.visibility = View.GONE
                binding.nickname.text = null
                binding.profile.setImageBitmap(null)
            }
        }
    }

 

a. 사용자 정보 가져오기

https://developers.kakao.com/docs/latest/ko/kakaologin/android#req-user-info

Kakao Developers

UserApiClient의 me()를 호출해서 가져옴

공식 사이트에서 제공하는 사용자 정보 가져오기 기본 예제

해당 함수를 onCreate에서 실행하기 때문에 처음에 사용자가 없는 경우엔 error가 뜸

따라서 기본 예제에서 error가 null인지 확인하는 조건문은 사용하지 않고 user가 있는지 없는지로 ui변경 여부를 결정

 

b. 이미지 url을 이미지로 변환

프로필 사진 정보를 가져올 때 url로된 이미지를 이미지뷰에 출력하기 위해 glide 오픈소스 사용

http://bumptech.github.io/glide/

Glide v4 : Fast and efficient image loading for Android

// gradle에 추가
// glide
implementation 'com.github.bumptech.glide:glide:4.11.0'
annotationProcessor 'com.github.bumptech.glide:compiler:4.11.0'

Glide 사용

Glide.with(binding.profile)
     .load(user.kakaoAccount?.profile?.thumbnailImageUrl)
     .circleCrop() // glide 제공 - 원 모양으로 자르기
     .into(binding.profile)

 

 

 

2) 로그인 / 로그아웃

a. 로그인

 

https://developers.kakao.com/docs/latest/ko/kakaologin/android#sample-login

Kakao Developers

    // 로그인 함수 전체 코드
    fun login(){
        val callback: (OAuthToken?, Throwable?) -> Unit = {token, error ->
            if(error !=null){
                Log.e(TAG,"카카오톡으로 로그인 실패",error)
            }
            else if(token !=null){
                Log.i(TAG,"카카오계정으로 로그인 성공 ${token.accessToken}")
                updateKakaoLoginUI()
            }
        }

        if(UserApiClient.instance.isKakaoTalkLoginAvailable(this)){
            UserApiClient.instance.loginWithKakaoTalk(this) { token, error ->
                if (error != null) {
                    Log.e(TAG, "카카오톡으로 로그인 실패", error)

                    if (error is ClientError && error.reason == ClientErrorCause.Cancelled) {
                        return@loginWithKakaoTalk
                    }
                    UserApiClient.instance.loginWithKakaoAccount(this, callback = callback)
                } // 사용자가 취소하거나 에러가 난 경우 카카오톡이 아닌 카카오 계정으로 로그인실행
                else if(token != null){
                    Log.i(TAG,"카카오톡으로 로그인 성공 ${token.accessToken}")
                    updateKakaoLoginUI()
                }
            }
        }
        else{
            UserApiClient.instance.loginWithKakaoAccount(this, callback = callback)
        }
    }

 

        // 로그인 버튼 눌렀을때 로그인 함수 실행
        binding.login.setOnClickListener {
            login()
        }

 

 

a. 로그아웃

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

Kakao Developers

    // 로그아웃 함수 전체 코드
    fun logout(){
        UserApiClient.instance.logout { error ->
            if(error!=null){
                Log.e(TAG,"로그아웃 실패. SDK에서 토큰 삭제됨",error)
                binding.nickname.text="로그아웃 실패" // 임의로 만듦
            }
            else{
                Log.i(TAG,"로그아웃 성공. SDK에서 토큰 삭제됨")
                updateKakaoLoginUI()
            }
        }
    }

 

	// 로그아웃 버튼 눌렀을때 로그아웃 함수 실행
        binding.logout.setOnClickListener {
            logout()
        }

 

 

 

실습 결과 화면

---

확인한다고 한번 실행했을때 권한 동의를 해버려서 다시 로그인할땐 권한 동의 창이 안나온다,,

 

기본 예제를 사용해서 간단하게 구현했지만

실제 앱에서 사용할 땐 모든 예외를 처리해줘야해서 이것보단 복잡해질 것으로 예상됨

하지만 카카오에서 제공해주는 api를 사용해서 간단하게 소셜 로그인을 구현할 수 있다는 점은 매우 좋은 것 같다