[Android/Kotlin] 카카오 로그인 화면 구현하기 - (1)

Madeline👩🏻‍💻·2022년 12월 9일
0

kotlin study

목록 보기
15/19
post-thumbnail

기본 설정과 로그인 화면을 띄우는 정도의 글입니다.
이후 과정은 (2) 에서 계속..🙈

💡 카카오 로그인 화면 구현

1. 애플리케이션 등록

developers.kakao.com/에 앱 등록

https://developers.kakao.com/

  • Android 플랫폼 등록

1) native app key는 따로 저장해놓는다.

2) Gradle, manifest 설정

🔑 Gradle >

implementation "com.kakao.sdk:v2-user:2.3.0" // 카카오 로그인
implementation "com.kakao.sdk:v2-talk:2.3.0" // 친구, 메시지(카카오톡)
implementation "com.kakao.sdk:v2-story:2.3.0" // 카카오스토리
implementation "com.kakao.sdk:v2-link:2.3.0" // 메시지(카카오링크)
implementation "com.kakao.sdk:v2-navi:2.3.0" // 카카오내비
implementation 'com.kakao.sdk:usermgmt:1.27.0' // 카카오 로그인 버튼 만들 때 사용

🔑 manifest >

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

추가하기

🔑 settings.gradle>

jcenter()

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

3) Key Hash 구하기

다른 방법도 있는 것 같던데,
나는 우선 MainActivity에

val keyHash = Utility.getKeyHash(this)
Log.e("Key","keyHash: $keyHash")
/** KakaoSDK init */
KakaoSdk.init(this, this.getString(R.string.kakao_app_key))

keyHash 변수를 만들었다.

이 상태로 run해보면 Logcat에 keyHash가 찍힌다.
이 keyHash 값과 안드로이드스튜디오의 프로젝트 패키지명을 다시 kakao developer 애플리케이션 플랫폼으로 등록해준다.

2. gradle, manifest 기본 설정

1) manifest 에 다음 등록

application 태그 >

<!-- Kakao 로그인 -->
        <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" -->
                <!-- scheme-example: "kakao{NATIVE_APP_KEY}" -->
                <data
                    android:host="oauth"
                    android:scheme="@string/kakao_app_key2" />

            </intent-filter>
        </activity>

2) gradle에 viewbinding 설정!

3. 로그인 화면 구현

activity_main.xml에서 로그인 화면을 구현해보자
여기가 젤 재밌다

사실 다른 앱을 만든 후에 그 앱에서 카카오 로그인 할거냐고 물어봐야되는데,
이 앱은 카카오 로그인 구현을 위한 앱이니까,
카카오 로그인 화면을 따라해봤다.

카카오 버튼 이미지는
https://developers.kakao.com/tool/resource/login
여기에서 모두 다운받을 수 있다.

요렇게 세팅해주고!

5. MainActivity

6. Manifest 등록

< activity > 태그들 사이에 아래 내용을 적절하게 붙여넣는다.
asdfasdf 부분은 지우고 자신의 네이티브 앱 키를 그대로 붙여넣으면 된다.

<activity android:name="com.kakao.auth.authorization.authcode.KakaoWebViewActivity"
            android:launchMode="singleTop"
            android:windowSoftInputMode="adjustResize">
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>
                <category android:name="android.intent.category.DEFAULT"/>
            </intent-filter>
        </activity>
        <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" />
                <data android:host="oauth"
                    android:scheme="kakaoasdfasdf" />
            </intent-filter>
        </activity>
        <meta-data
            android:name="com.kakao.sdk.AppKey"
            android:value="@string/kakao_app_key" />

7. 실행해보아요

로그인 버튼을 누르면,

연결이 왕 느리지만 된다!

로그인 화면까지 잘 뜬다!!

참고

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

https://minchanyoun.tistory.com/85?category=1013568

https://onlyfor-me-blog.tistory.com/296

사용하지 않은 것: KakaoSDKAdapter

어답터 생성 => 카카오 SDK를 사용하려면 SDK와 어플리케이션을 연결해줘야 한다.

SDK에 필요한 정보:

  • ApplicationConfig : Application이 가지고 있는 정보를 얻기 위한 interface.
  • SessionConfig : 로그인을 위해서는 Session을 생성해야합니다. Session 생성하기 위해 필요한 옵션을 얻기 위한 abstract class.
  • AuthType : Kakao SDK 로그인을 하는 방식에 대한 Enum class
  • UserProfile : MeResponseCallback을 통해 성공시 onSuccess의 param으로 UserProfile 정보를 넘겨줍니다.
profile
Major interest in iOS 🍀 & 🍎

1개의 댓글

comment-user-thumbnail
2023년 11월 24일

감사합니다 도움많이 됐어요!

답글 달기