Social Login - Kakao Talk

이번 글에서는 카카오 로그인에 대해서 작성하려고 한다.
소셜 로그인 중에 국내에서 가장 많이 사용되고 있는 카카오 로그인에 대해서 개발자 센터 등록 부터 소스 코드까지 설명하겠다.

맥OS를 기준으로 작성하였으며 카카오 관련 SDK는 flutter_kakao_sdk를 사용하여 작성한 글이다.

카카오 로그인을 사용하기 위해서는 kakao developer에 앱 등록을 하여야 사용할 수 있다.

kakao developer 사이트에 접속하여 카카오 계정에 로그인한 뒤 상단에 "내 애플리케이션" 탭에 진입 후 애플리케이션 추가하기를 눌러준다.

앱 아이콘/앱 이름/사업자명을 입력하게 되어있는데 나는 앱 이름과 사업자명에 "velogexample"라는 이름으로 생성하였다.

애플리케이션 생성 후에 요약 정보에 보면 카카오 오픈 API에서 사용되는 각종 키들을 볼 수 있다.

로그인에 사용되는 키는 네이티브 키만 사용하면 되고 유출되면 안되기 때문에 조심하여야 한다.

플랫폼 탭으로 이동하여 안드로이드/IOS 플랫폼 등록을 진행하면 된다.

Android

안드로이드 플랫폼 등록을 누르면 패키지명을 넣어주게 된다.

패키지명은 개발 중인 앱의 project 수준에서 android > app > src > main > AndroidManifest.xml 로 이동하여 package="{PACKAGE_NAME}"이렇게 나와있는 패키지명을 넣어주면 된다.

아래에 있는 키 해시에는 디버그 키를 추출하여 넣어주면 된다.

키 해시 값을 통해 빌드된 PC를 구분하기 때문에 다른 PC에서 프로젝트를 빌드하게 되면 해당 PC의 키 해시를 추가로 넣어서 사용하여야 한다.

실제 배포시에는 플레이 콘솔에서 앱 등록 후 발행되는 릴리즈 키를 추가로 넣어주어야 한다.

package="com.example.flutter_velog_example">

MAC OS 디버그 키 해시 명령어
keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore -storepass android -keypass android | openssl sha1 -binary | openssl base64

안드로이드 플랫폼 등록은 여기까지만 해주면 된다.

IOS

IOS 플랫폼 등록을 누르면 아래와 같은 화면이 나오는데 아직 앱이 스토어 배포되지 않았기에 번들 ID만 넣어주면 된다(MAC OS만 등록 가능).

번들 ID를 확인하려면 project 수준의 IOS 폴더를 우측 클릭한 뒤 Open In Xcode를 클릭하여 XCode를 열어준다.

XCode 오른쪽에 있는 Runner를 클릭한 뒤 General 아래에 보이는 identity > Bundle Identifier에 있는 번들 ID를 넣어주면 된다.

추가로 많은 개발자들이 빼먹고 하지 않는 중요한 세팅이 하나있다.

IOS의 카카오 톡 로그인 플로우를 보면 카카오 로그인이 진행되면 우선 카카오 톡을 열어 카카오 앱내에서 동의항목을 체크받게 되는데 체크 후에 앱에 다시 진입하기 위해서는 딥링크를 등록하여 다시 앱으로 돌아올 수 있도록 해주어야 한다.
여기서 카카오는 각 앱에 딥링크를 kakao{NATIVE_APP_KEY} 형태로 동의항목 체크 버튼에 딥링크를 심어놓은 상태이므로 앱에서도 딥링크를 등록해 주어야한다.

info 탭으로 이동하여 아래로 스크롤을 해보면 URL Types라는 항목에 + 버튼을 클릭하여 아래와 같이 딥링크를 등록해주면 된다.

identifier는 딥링크의 이름으로 편하게 작성하여도 된다.
중요한 부분이 URL Schemes인데 여기서 등록하는 값이 딥링크가 된다.

딥링크는 kakao+NATIVE_APP_KEY로 넣어주면 되고 반드시 앞에 kakao를 같이 넣어주어야 한다.

네이티브 키는 요약정보를 확인하면 된다.

kakao{NATIVE_APP_KEY}

Kakao Login 활성화 및 동의항목 구성

카카오 로그인 탭에 들어가 카카오 로그인 기능을 활성화 해주고
동의항목 탭으로 이동하여 얻고자 하는 정보를 활성화 해준다.

이렇게 등록을 마치면 안드로이드와 IOS 플랫폼 등록 및 카카오 로그인 활성화 설정은 다 한것이다.

dependencies

이어서 Kakao SDK를 dependencies에 추가해주면 된다.

flutter pub add kakao_flutter_sdk

Source Code

SignInWithKakao()

카카오 톡의 로그인 방식은 두 가지가 있는데 버전에 따라 다르게 사용되는 것으로 알고있다.

requestWithTalk() / loginWithKakao() 두 개의 함수가 제공이 되는데 1.1.1 버전 이 후 부터는 requestWithTalk()은 제공되지 않는다.

두 함수는 카카오 톡을 통한 앱 로그인을 지원하지만 방식의 차이가 있다.

예제 코드를 살펴보면 requestWithTalk()은 인증코드를 받아와 토큰을 발급받는 방식이고 loginWithKakaoTalk()함수는 이 과정이 축약된 함수이다.
loginWithKakaoTalk() 라이브러리를 들어가보면 requestWithTalk()으로 구현되있는 것을 확인할 수 있다.

카카오 톡 앱 로그인은 아래 소스코드 처럼 매우 간편하게 구현이 된다.
이렇게 작성해 주면 카카오 로그인은 끝난다.

카카오는 토큰을 accessToken / refreshToken 두 개의 토큰을 제공하고 있으며 accessToken의 만료 기간은 하루가 되지 않기에 refreshToken을 통해서 accessToken을 발급받는 방법으로 로그인을 유지할 수 있다.

// requestWithTalk()
final _code = await AuthCodeClient.instance.requestWithTalk();
OAuthToken? _token = await AuthApi.instance.issueAccessToken(_code);
await TokenManagerProvider.instance.manager.setToken(_token);

// loginWithKakaoTalk()
 OAuthToken? _token = await UserApi.instance.loginWithKakaoTalk();
await TokenManagerProvider.instance.manager.setToken(_token);

Kakao User

카카오 로그인이 성공하면 카카오 사용자 정보를 받아볼 수 있다.

사용자 정보는 UserApi.instance.me();에서 제공해주고 있으며 해당 정보는 필수/선택 동의를 통해서 제공 받는다.

위에서 동의항목 구성에 따라 제공되는 사용자 정보가 다르다.

중요한 부분은 카카오 토큰이 발급되지 않은 상태로 User를 얻으려고 하면 SDK 에러가 발생하기 때문에 반드시 토큰을 먼저 얻어야 정상적으로 사용이 가능하다.

  User? _user = await UserApi.instance.me();
    print(_user.kakaoAccount!.email);
    print(_user.kakaoAccount!.name);
    print(_user.kakaoAccount!.phoneNumber);

자동로그인

유저에 대한 자동로그인을 체크하는 로직을 만들고 싶다면 간단하게 토큰 여부만 확인하면 된다. 해당 토큰이 존재한다면 로그인을 유지 시켜주어도 된다.

 OAuthToken? _token =
        await TokenManagerProvider.instance.manager.getToken();

전체코드