안드로이드 API 예제 - andeuloideu API yeje

안녕하세요 오늘은 제가 배포하고 싶은 앱이 생겨 프로젝트를 만드는 도중 카카오 로그인 API가 필요하여 카카오 로그인 API를 구현하였습니다!! 짝짝짝 그래서 잊어버리지 않게 블로그에 포스팅해보려고 합니다!!

자 시작해보도록 하겠습니다!!

카카오로그인API를 연동하기 위해선 환경 구축부터 먼저 해야 합니다!!

먼저 프로젝트를 생성해주시고 //developers.kakao.com/ 여기 Kakao Developers로 들어가 주세요!!

Kakao Developers

카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.

developers.kakao.com

우선 연동을 위해서 애플리케이션을 추가해주셔야 합니다.

저는 애플리케이션을 추가할 때 앱 이름은 제가 만든 프로젝트 이름 그리고 사업자명 또한 그냥 Kong로 했습니다!

앱 아이콘은 선택사항입니다!!

다음은 내 애플리케이션 > 앱 설정 > 플랫폼에 들어가

Android에 대한 플랫폼을 등록해야 합니다.

여기서부터 이제 중요하니!! 꼭 꼭!! 집중해주세요!!

패키 지명을 입력할 때에는 Android Studio에 매니페스트 파일을 열어줍니다.

Package="com.example.totogame" 저는 이렇게 되어 있는데요 저와 똑같이 하면 안 되고 안드로이드 만들어져 있는 패키지 명을 복사한 후 패키 지명에 위에 플랫폼 등록에 붙여 넣어 줍니다. 그리고 이제 중요한 키 해시 등록인데요 이제 Android Studio 내가 만든 프로젝트에 들어가 키 해시를 추출해줘야 합니다.

여기서 키 해시는 노트북, 컴퓨터 각 각의 키 해시가 다릅니다. 

이 말이 무슨 말이냐 이 세상에 있는 노트북과 키해시 내 친구의 노트북 카페에 공부하는 모르는 사람의 노트북 이렇게 각각의 노트북에 고유한 키해시가 있습니다. 저희는 이 키 해시를 추출해주는 겁니다.

저는 간단한 설명이고 공부하고 싶으신 분들은 신과 같은 존재인 구글에 많이 나와 있으니 찾아보세요!!

아무튼 이제 메인 액티비티에 들어가 키 해시 값을 추출해줍니다!! 코드는 올려드릴게요!!

package com.example.totogame; import androidx.appcompat.app.AppCompatActivity; import android.content.Context; import android.content.pm.PackageInfo; import android.content.pm.PackageManager; import android.content.pm.Signature; import android.os.Bundle; import android.util.Log; import java.security.MessageDigest; import java.security.NoSuchAlgorithmException; public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Log.d("getKeyHash", "" + getKeyHash(MainActivity.this)); // 이렇게 로그에 키해시 값을 뽑아 주면 로그창에 키해시가 뜹니다!! } public static String getKeyHash(final Context context) { PackageManager pm = context.getPackageManager(); try { PackageInfo packageInfo = pm.getPackageInfo(context.getPackageName(), PackageManager.GET_SIGNATURES); if (packageInfo == null) return null; for (Signature signature : packageInfo.signatures) { try { MessageDigest md = MessageDigest.getInstance("SHA"); md.update(signature.toByteArray()); return android.util.Base64.encodeToString(md.digest(), android.util.Base64.NO_WRAP); } catch (NoSuchAlgorithmException e) { e.printStackTrace(); } } } catch (PackageManager.NameNotFoundException e) { e.printStackTrace(); } return null; } }

키 해시를 추출해내는 소스코드입니다.!! 작성한 후 앱을 실행시켜주세요

그럼 이렇게 로그 창에 key만 쳐도 키 값이 추출된 걸 확인할 수 있습니다.

키 값을 복사하신 후 Kakao Developers로 돌아와 키 해시 값을 붙여 넣어주세요.

이제 다시 Android Studio로 돌아옵니다! 다음

Gradle Scripts 경로의 > build.gradle(progect: ~~) 파일로 들어와

다음과 같은 코드를 추가해줍니다.

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

추가하셨으면 그 밑에 build.gradle(Module: ~~) 경로를 들어가 주세요.

들어오신 후 JavaVersion.VERSION_1_8 버전이 둘 다 설정되어있는지 확인해주세요 그리고 난 후 주석이 되어있는 부분들을 작성해주세요 편의를 위해 작성해두겠습니다.

implementation "com.kakao.sdk:v2-user:2.6.0" // 카카오 로그인
implementation "com.kakao.sdk:v2-talk:2.6.0" // 친구, 메시지(카카오톡)
implementation "com.kakao.sdk:v2-story:2.6.0" // 카카오스토리
implementation "com.kakao.sdk:v2-link:2.6.0" // 메시지(카카오링크)
implementation "com.kakao.sdk:v2-navi:2.6.0" // 카카오 내비
// 오픈소스 이미지 핸들링할 때 많이 사용되는 글라이드
implementation "com.github.bumptech.glide:glide:4.11.0"

저희는 카카오 로그인을 쓰지만 프로젝트 도중 다양한 API를 쓸 수 있기 때문에 저는 전부 추가해두었습니다.

다음 매니페스트에 들어가 뭘 더 추가해줘야 합니다. 소스코드와 함께 추가한 부분을 알려드리겠습니다!!

<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="//schemas.android.com/apk/res/android" package="com.example.totogame"> <!-- 인터넷 사용 권한 설정 추가--> <uses-permission android:name="android.permission.INTERNET" /> <application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:roundIcon="@mipmap/ic_launcher_round" android:supportsRtl="true" <!--추가--> android:theme="@style/Theme.TOTOGAME" // android:name=".kakaoApplication"> <!--여기는 우선 빼주세요 !! 밑에서 추가할 예정--> <activity android:name=".LoginActivity"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> <activity android:name=".MainActivity"> </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" /> <!-- Redirect URI: "kakao{NATIVE_APP_KEY}://oauth" --> <data android:host="oauth" android:scheme="kakaoe520332be8f652738dc2a60b7c232b7f" /> </intent-filter> </activity> </application> </manifest>

본인과 비교하며 매니페스트에 추가해주세요 

저기서 android:scheme="kakaoe+ 여기는 "

Kakao Developers에 들어가 본인의 네이티브 앱 키를 복사한 후 붙여주세요 경로는 다음과 같습니다.

내 애플리케이션 > 앱 설정 > 요약 정보 네이티브 앱 키

자 이제 정말 마지막으로 하나만 더 하게 된다면 환경 구축은 끝납니다!!

자 이제 자바 클래스를 하나 만들어 줍니다.

저는 클래스 이름을 kakaoApplication으로 만들어주었습니다.

그럼 이제 kakaoApplication에 extends Application을 붙여 줍니다. (상속)

다음 Alt + Insert 키를 눌러준 후 Ctrl + O을 눌러주세요 다음 onCreate()를 생성해줍니다.

그리고 난 후 onCreate 메서드 안에 다음과 같은 소스 코드를 작성해주세요

KakaoSdk.init(this, 본인의 네이티브 키 값) 작성이 완료된 후 

android:name".kakaoApplication을 추가해줍니다.

KakaoApplication을 작성하다가 보면 자동으로 추가가 되는 걸 확인하실 수 있습니다.

자 이제!! 정말 환경설정은 끝!! 이제 XMl과 소스코드를 작성하시면 됩니다.

이제 LoginActivity.xml에 들어가 줍니다! 아 맞다! 우선 카카오에서 버튼 이미지를 다운로드하여줄게요

네 카카오에서 다운로드할 이미지는 경로를 알려드리도록 하겠습니다.

경로는 문서> 유용한 참고 정보 > 디자인 가이드에 들어가 주신 후 카카오 로그인 버튼 리소스 다운로드 버튼을 클릭해주세요 그러고 난 후

본인이 사용하고 싶은 언어, 크기, 너비를 설정 후 이미지를 다운로드하여 드로 우블 파일에 넣어줍니다.

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="//schemas.android.com/apk/res/android" xmlns:app="//schemas.android.com/apk/res-auto" xmlns:tools="//schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".LoginActivity"> <LinearLayout android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" android:gravity="center" android:orientation="vertical"> <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"/> </LinearLayout> <ImageView android:id="@+id/login" android:layout_width="match_parent" android:layout_height="wrap_content" android:src="@drawable/kakao_login_large_wide" // 이거는 카카오에서 다운받아야합니다. android:visibility="gone"/> // 로그인 시 보이기 위하여 gone로 설정해줍니다. <Button android:id="@+id/logout" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="로그아웃" android:visibility="gone"/> // 로그인 시 보이기 위하여 gone로 설정해줍니다. </LinearLayout>

이건 LoginActivity.xml 파일입니다. 설정해 주신 후 이제 LoginActivity.java에 들어가 소스코드를 작성하도록 하겠습니다.

package com.example.totogame; import androidx.appcompat.app.AppCompatActivity; import android.os.Bundle; import android.util.Log; import android.view.View; import android.widget.ImageView; import android.widget.TextView; import com.bumptech.glide.Glide; import com.kakao.sdk.auth.model.OAuthToken; import com.kakao.sdk.user.UserApiClient; import com.kakao.sdk.user.model.User; import kotlin.Unit; import kotlin.jvm.functions.Function1; import kotlin.jvm.functions.Function2; public class LoginActivity extends AppCompatActivity { private static final String TAG = "LoginActivity"; private View loginButton, logoutButton; private TextView nickName; private ImageView profileImage; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_login); loginButton = findViewById(R.id.login); logoutButton = findViewById(R.id.logout); nickName = findViewById(R.id.nickname); profileImage = findViewById(R.id.profile); // 카카오가 설치되어 있는지 확인 하는 메서드또한 카카오에서 제공 콜백 객체를 이용함 Function2<OAuthToken, Throwable, Unit> callback = new Function2<OAuthToken, Throwable, Unit>() { @Override public Unit invoke(OAuthToken oAuthToken, Throwable throwable) { // 이때 토큰이 전달이 되면 로그인이 성공한 것이고 토큰이 전달되지 않았다면 로그인 실패 if(oAuthToken != null) { } if (throwable != null) { } updateKakaoLoginUi(); return null; } }; // 로그인 버튼 loginButton.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { if(UserApiClient.getInstance().isKakaoTalkLoginAvailable(LoginActivity.this)) { UserApiClient.getInstance().loginWithKakaoTalk(LoginActivity.this, callback); }else { UserApiClient.getInstance().loginWithKakaoAccount(LoginActivity.this, callback); } } }); // 로그 아웃 버튼 logoutButton.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { UserApiClient.getInstance().logout(new Function1<Throwable, Unit>() { @Override public Unit invoke(Throwable throwable) { updateKakaoLoginUi(); return null; } }); } }); updateKakaoLoginUi(); } private void updateKakaoLoginUi(){ UserApiClient.getInstance().me(new Function2<User, Throwable, Unit>() { @Override public Unit invoke(User user, Throwable throwable) { // 로그인이 되어있으면 if (user!=null){ // 유저의 아이디 Log.d(TAG,"invoke: id" + user.getId()); // 유저의 어카운트정보에 이메일 Log.d(TAG,"invoke: nickname" + user.getKakaoAccount().getEmail()); // 유저의 어카운트 정보의 프로파일에 닉네임 Log.d(TAG,"invoke: email" + user.getKakaoAccount().getProfile().getNickname()); // 유저의 어카운트 파일의 성별 Log.d(TAG,"invoke: gerder" + user.getKakaoAccount().getGender()); // 유저의 어카운트 정보에 나이 Log.d(TAG,"invoke: age" + user.getKakaoAccount().getAgeRange()); nickName.setText(user.getKakaoAccount().getProfile().getNickname()); Glide.with(profileImage).load(user.getKakaoAccount(). getProfile().getProfileImageUrl()).circleCrop().into(profileImage); loginButton.setVisibility(View.GONE); logoutButton.setVisibility(View.VISIBLE); }else { // 로그인이 되어 있지 않다면 위와 반대로 nickName.setText(null); profileImage.setImageBitmap(null); loginButton.setVisibility(View.VISIBLE); logoutButton.setVisibility(View.GONE); } return null; } }); } }

다음과 같은 코드를 작성해주세요

이제 로그인 후 들어갈 MainActivity.xml 파일을 손 좀 봐주겠습니다. 

다음과 같이 코드를 작성해주세요

<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="//schemas.android.com/apk/res/android" xmlns:app="//schemas.android.com/apk/res-auto" xmlns:tools="//schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <TextView android:id="@+id/tv_email" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="56dp" android:text="Hello World!" android:textSize="30sp" app:layout_constraintEnd_toEndOf="@+id/iv_view" app:layout_constraintHorizontal_bias="0.509" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintStart_toStartOf="@+id/iv_view" app:layout_constraintTop_toBottomOf="@+id/iv_view" /> <TextView android:id="@+id/tv_nickname" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="44dp" android:text="TextView" android:textSize="30sp" app:layout_constraintEnd_toEndOf="@+id/tv_email" app:layout_constraintHorizontal_bias="0.421" app:layout_constraintStart_toStartOf="@+id/tv_email" app:layout_constraintTop_toBottomOf="@+id/tv_email" /> <ImageView android:id="@+id/iv_view" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="141dp" android:layout_marginTop="172dp" android:layout_marginEnd="142dp" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" tools:srcCompat="@tools:sample/avatars" /> </androidx.constraintlayout.widget.ConstraintLayout>

자 이렇게 MainActivity.xml 파일을 손 좀 봐주었습니다.

이제 제가 만든 앱을 실행시켜보도록 하겠습니다.

LoginActivity 화면입니다. 이제 한번 카카오 로그인을 눌러보도록 하겠습니다.

저는 한번 에뮬레이터로 로그인을 실행한 적이 있어 이렇게 뜹니다. 여러분은 체크박스 동의하시고 로그인하시면 됩니다. 자 이제 Continue를 클릭해보겠습니다.

자 이렇게 카카오에서 받은 프로필 사진과 이름을 띄울 수 있었습니다.

카카오 로그인 API를 써보기 위해 이리저리 찾아보다가 정말 친절하게 설명해주시는 유튜버님을 찾았는데요.

만약 저와 함께 되지 않더라도 슬기로운 코딩 생활 님의 유튜브를 찾아가 한번 다시 해보도록 합시다!!

코딩의 기본 인내! 자 이렇게 KakaoLoginAPI를 마치도록 하겠습니다. 

//www.youtube.com/watch?v=8hKczn0-Hkw