[Android/Flutter 교육] 65일차

MSU·2024년 4월 4일

Android-Flutter

목록 보기
69/85
post-thumbnail

소셜로그인

카카오 개발자 페이지에 들어가서 로그인을 한다.
https://developers.kakao.com/

처음 회원가입 또는 로그인을 하면 서비스 이용동의 절차가 있으므로 체크해준다.

메인 페이지에서 아래로 내리면 추천 제품이 뜨는데

카카오싱크는 회원가입과 카카오톡 채널 추가 기능까지 한번에 해결할 수 있는 기능이다
마케팅용으로 카카오톡 채널을 운영한다면 카카오싱크를 이용하면 된다.(기업만 가능)

상단의 "내 애플리케이션" 클릭

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

필요한 내용 입력 후 저장

추가된 애플리케이션 확인

앱 키는 네이티브 앱 키를 사용한다

왼쪽 메뉴 중 플랫폼을 눌러 플랫폼을 등록해야 한다.

패키지명과 마켓 URL을 입력 후
키 해시도 입력해야 한다. 키해시는 일단 비워두고 나중에 입력할 수 있다.

패키지명은 AndroidManifest파일이 아니라 build.gradle파일에 있다

모든 내용 입력후 저장하면 아래와 같이 저장이되고 나중에 수정이 가능하다

왼쪽 메뉴의 카카오 로그인 메뉴로 들어가서 활성화 설정을 해줘야 한다.

활성화 상태를 ON으로 해준다.

왼쪽 메뉴에 동의항목 메뉴로 들어가보면 비활성화된 항목들이 많이 나온다

비즈니스 앱으로 전환을 해야 비활성화된 항목들도 활성화된다.
그 중 CI(연계정보) 값으로 사용자를 구분할 수 있는데 CI 대신 회원번호를 받아올 수 있다.

동의 항목 설정 시 보통 필수 동의 또는 선택 동의를 선택한다.

문서페이지의 카카오 로그인 > Android 메뉴 순서로 들어가면 아래와 같이 연동 가이드가 나온다.

구현방식은 카카오톡으로 로그인하는 방법과 카카오계정으로 로그인하는 방법이 있는데, 모든 경우를 고려하여 둘 다 구현하면 된다.

settings.gradle에 설정

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

build.gradle에 모듈 추가

dependencies {

    implementation("com.kakao.sdk:v2-user:2.20.1")
    
}

추가 후 sync now하면 된다.

Redirect URI 설정

카카오에서 제공하는 인증처리 액티비티를 AndroidManifest에 추가해줘야 한다

이때 ${NATIVE_APP_KEY}는 네이티브 키 값을 넣어주면 된다.(${}까지 모두 바꿔주는거임)


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

여기까지 하면 기본 셋팅은 완료되었다.

코드 구현

카카오 로그인 구현 예제에 있는 코드를 그대로 사용하면 된다.

카카오 로그인 함수

TAG는 확인용으로 아무 값이나 넣어주고 로그에서 확인하면 된다.
context는 MainActivity에서 작성하는 코드일 때 this@MainActivity를 넣어준다

    fun kakaoLogin(){

        val TAG = "test1234"
        
        // 카카오계정으로 로그인 공통 callback 구성
        // 카카오톡으로 로그인 할 수 없어 카카오계정으로 로그인할 경우 사용됨
        val callback: (OAuthToken?, Throwable?) -> Unit = { token, error ->
            if (error != null) {
                // 이 부분에는 로그인이 실패했을 때의 처리를 해준다
                Log.e(TAG, "카카오계정으로 로그인 실패", error)
            } else if (token != null) {
                // 이 부분에는 로그인에 성공했을 때의 처리를 해준다
                Log.i(TAG, "카카오계정으로 로그인 성공 ${token.accessToken}")
            }
        }

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

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

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

로그인 성공여부에따라 callback의 조건문에 로그인 처리를 해주면 된다.

버튼을 누르면 카카오로그인 호출


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

        activityMainBinding.apply {
            button.setOnClickListener{
                kakaoLogin()
            }
        }
    }

맨 처음 실행 후 버튼을 누르면 에러가 발생하는데

Kakao SDK 초기화 과정이 필요하다

Kakao SDK 초기화

기존에 작성한 카카오 로그인 메서드에 초기화 코드를 추가해준다.


    fun kakaoLogin(){

        val TAG = "test1234"

        // Kakao SDK 초기화
        KakaoSdk.init(this, "{NATIVE_APP_KEY}")

다시 한번 실행하여 버튼을 누르면

카카오톡이 설치가 안된 상태에서 카카오 로그인 페이지가 나오고

로그인을 하려고 하면 동의 메시지가 나온다.

동의하고 계속하기 버튼을 누르면 또 에러가 발생한다.

먼저 인터넷 권한이 필요하다

인터넷 권한 추가

AndroidManifest에 인터넷 권한을 추가해준다.

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

추가 후 다시 로그인을 시도하면 앱이 꺼지지는 않지만 로그에는 에러가 표시된다

로그인 과정에서 android key 해시 값을 찾아서 이를 등록해줘야 한다.

key hash 등록

안드로이드 키 해시값을 파악하기 위해 다음과 같이 메서드를 수정하고 로그캣을 통해 해시값을 파악한다

    fun kakaoLogin(){

        val TAG = "test1234"

        // Kakao SDK 초기화
        KakaoSdk.init(this, "9a42128c75cdac3a580f5b608b12b1d6")

        // 카카오계정으로 로그인 공통 callback 구성
        // 카카오톡으로 로그인 할 수 없어 카카오계정으로 로그인할 경우 사용됨
        val callback: (OAuthToken?, Throwable?) -> Unit = { token, error ->
            if (error != null) {
                // 이 부분에는 로그인이 실패했을 때의 처리를 해준다
                Log.e(TAG, "카카오계정으로 로그인 실패", error)
                // android key hash 값을 출력하고 이를 등록해야 한다.
                Log.d("test1234", Utility.getKeyHash(this@MainActivity))

메서드 수정 후 다시 시도하여 로그를 살펴보면 해시 값을 찾아볼 수 있다.

확인한 해시값을 아까 카카오 개발자 페이지에 등록해주면 된다.

다시 로그인을 시도하면 에러 없이 정상적으로 로그인 된 것을 확인할 수 있다

로그캣에 보이는 액세스 토큰값은 매번 시도할때마다 달라진다
따라서 액세스 토큰값으로 사용자를 구분할 수는 없다

로그인 성공 처리

로그인 성공했을 때 사용자의 정보를 가져온다.

    fun kakaoLogin(){

        val TAG = "test1234"

        // Kakao SDK 초기화
        KakaoSdk.init(this, "9a42128c75cdac3a580f5b608b12b1d6")

        // 카카오계정으로 로그인 공통 callback 구성
        // 카카오톡으로 로그인 할 수 없어 카카오계정으로 로그인할 경우 사용됨
        val callback: (OAuthToken?, Throwable?) -> Unit = { token, error ->
            if (error != null) {
                // 이 부분에는 로그인이 실패했을 때의 처리를 해준다
                Log.e(TAG, "카카오계정으로 로그인 실패", error)
                // android key hash 값을 출력하고 이를 등록해야 한다.
                Log.d("test1234", Utility.getKeyHash(this@MainActivity))

            } else if (token != null) {
                // 이 부분에는 로그인에 성공했을 때의 처리를 해준다
                Log.i(TAG, "카카오계정으로 로그인 성공 ${token.accessToken}")

                // 로그인한 사용자 정보를 가져온다.
                // 이 때 accessToken을 카카오 서버로 전달해야 하는데 알아서 해준다.
                UserApiClient.instance.me { user, error ->
                    if(error != null){
                        Log.e(TAG, "사용자 정보를 가져오는데 실패하였습니다", error)
                    }else{
                        // 사용자가 승인하지 않은 값은 null로 나온다.
                        Log.d(TAG, "회원번호 : ${user?.id}")
                        Log.d(TAG, "이메일 : ${user?.kakaoAccount?.email}")
                        Log.d(TAG, "닉네임 : ${user?.kakaoAccount?.profileNicknameNeedsAgreement}")
                        Log.d(TAG, "프로필사진 : ${user?.kakaoAccount?.profile?.thumbnailImageUrl}")
                    }
                }
            }
        }
        ...

프로필 사진 주소는 실제 카카오톡에 등록한 프로필 사진이 나온다

회원번호는 매번 로그인해도 동일한 값이 나오기 때문에 이를 회원을 구분하기 위한 값으로 아이디 대신 사용하면 된다.

profile
안드로이드공부

0개의 댓글