[Flutter] Kakao Login API 연동

이번에는 로그인 기능을 구현하려다가 간편하게 관리하기 위해서 연동을 이용하려고 합니다.

1. Kakao API
2. Google API

처음으로는 카카오 로그인을 하기 위해서 문서를 확인해보겠습니다.
카카오문서 API

확인해보니 이대로만 따라가면 되겠네요

내 어플 등록해주기

https://developers.kakao.com/console/app 에 들어가서 로그인을 해주고 어플 등록을 해줍니다.

비어있는 상태로 보이는데 추가를 해보겠습니다!

앱 아이콘, 앱 이름, 회사명, 카테고리가 필요한데요
만들고 있던 앱을 추가해주면 됩니다.

앱 아이콘 정보는 없어도 괜찮습니다 추후에 추가를 해주면 되겠군요

이러한 기능을 이용 할 수 있습니다. 여기서 저는 카카오 로그인과 간편가입 정도만 사용 할 수 있을 것 같네요

그리고 목록에 앱 키 탭을 가보시면 정보가 4가지 들어있습니다.

이 정보는 절대 유출되어서는 안되는 정보들입니다!! 꼭꼭 지켜주세요

추후에 네이티브 앱키가 필요해요!

그러고 이제 플랫폼 탭을 보면

여기서 등록이 필요한 플랫폼을 등록해주면 됩니다.
저는 안드로이드와 IOS만 등록할 예정입니다.

안드로이드 등록하기

안드로이드 등록 정식 가이드

마찬가지로 링크를 들어가서 따라해줄 예정입니다

Flutter 파일에 AndroidManifest.xml 파일의 package 속성 값 입력해주면 되겠네요

는 (가이드에서 말하는 정보가) 없을 수도 있으니 찾아보니 build.gradle에 보면 com.~~ 이 정보입니다

그리고 키 해시 정보가 필요한데
키 해시 참고내용

디버그 mac

keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore -storepass android -keypass android | openssl sha1 -binary | openssl base64

릴리즈 mac

keytool -exportcert -alias <RELEASE_KEY_ALIAS> -keystore <RELEASE_KEY_PATH> | openssl sha1 -binary | openssl base64

디버그 윈도우

keytool -exportcert -alias androiddebugkey -keystore %USERPROFILE%\.android\debug.keystore -storepass android -keypass android | openssl sha1 -binary | openssl base64

릴리즈 윈도우

keytool -exportcert -alias <RELEASE_KEY_ALIAS> -keystore <RELEASE_KEY_PATH> | openssl sha1 -binary | PATH_TO_OPENSSL_LIBRARY\bin\openssl base64

각 사용에 맞게 입력하여 얻어서 넣어주시면 됩니다

이제 안드로이드는 등록을 완료했습니다!!

IOS 등록하기

Xcode 에서 열어서 확인해보겠습니다

여기에 com.~ 바로 이놈입니다

안드로이드보다 쉽게 느껴지네요 뭔가..?

카카오로그인 활성화

문서 에서 확인을 해보니 그냥 키면 되는군요!

1. ‘카카오 로그인’ 메뉴를 클릭합니다.
2. ‘활성화 설정'에 OFF로 되어 있는데 이를 클릭합니다.
3. ‘활성화'를 클릭합니다

둘 다 켜보고 어떤 화면으로 동의를 구하는지 확인해보겠습니다.

동의를 하는 항목이 전혀 없어서 보니

비즈 앱이 아니기 때문에 가져올 정보에는 한계가 있습니다.
우선은 프로필사진, 이름만 가져오도록 하겠습니다.

완벽합니다!

근데 생각해보니 어플에 그냥 카카오톡으로 로그인하기를 해야겠네요!
계정만 이용하려고 했었는데, 그렇게 하는게 더 간편할 것 같습니다

Flutter 프로젝트에 카카오sdk 추가

1. 터미널에다가 명령어를 입력하면 필요한 모든 패키지를 추가 해줍니다

   flutter pub add kakao_flutter_sdk

2. main함수에 초기화함수를 추가해줍니다
   ${YOUR_NATIVE_APP_KEY} 부분에는 [내 애플리케이션] > [앱 키]에서 확인한 네이티브 앱 키를 입력합니다.
   아까 위에서 강조한 네이티브 앱 키가 이제서야 쓸모가 있습니다.

void main() {
  ...
  KakaoSdk.init(nativeAppKey: '${YOUR_NATIVE_APP_KEY}'); // 이 줄을 runApp 위에 추가한다.
  runApp(MyApp());
  ...
}

로그인 예제 과정 을 통해서 자신에게 맞는 방법으로 로그인을 성공해 보세요!