[flutter] 카카오 로그인

토이프젝중 카카오 로그인이 필요해 진행을 할 일이 생겼다.

초기세팅

어플리케이션 추가

https://developers.kakao.com/console/app

어플리케이션을 추가한 후 플랫폼 메뉴로 들어간다.
android 플랫폼 등록을 누르고 해당 값들을 기입한다.

패키지명

• android/app/build.gradle에 있는 namespace 혹은 com.~ 으로 작성된 본인 패키지값이면 상관없다.

마켓url

• 자동기입

키해시
- 나는 gradle signingReport 명령어를 사용했다 관련 에러 내용도 있으니 참고하고 나온 값을 기입하면된다. 우선은 debug 키만 넣어둔 상태다
에러에 관한 글 작성

https://velog.io/@ilsong963/BUG-exception-in-phase-semantic-analysis-in-source-unit-BuildScript-Unsupported-class-file-major-version-67

후에 키값에 에러가 있어 keytool 로 다시실행했다.
사용을 하려면 윈도우에선 openssl설치가 필요하다.

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

https://slproweb.com/products/Win32OpenSSL.html

카카오 로그인 활성화

다음은 카카오 로그인 동의 항목으로 가서 내용들을 설정해준다.

sdk 추가

dependencies:
  kakao_flutter_sdk: ^1.9.5 # 전체 추가
  kakao_flutter_sdk_user: ^1.9.5 # 카카오 로그인 API 패키지
  kakao_flutter_sdk_share: ^1.9.5 # 카카오톡 공유 API 패키지
  kakao_flutter_sdk_talk: ^1.9.5 # 카카오톡 채널, 카카오톡 소셜, 카카오톡 메시지 API 패키지
  kakao_flutter_sdk_friend: ^1.9.5 # 피커 API 패키지
  kakao_flutter_sdk_navi: ^1.9.5 # 카카오내비 API 패키지

입맛에 맞게 추가하면 될거같다.

<activity android:name="com.kakao.sdk.flutter.AuthCodeCustomTabsActivity">
	<intent-filter android:label="flutter_web_auth">
		<action android:name="android.intent.action.VIEW" />
		<category android:name="android.intent.category.DEFAULT" />
		<category android:name="android.intent.category.BROWSABLE" />
    
		<!-- Redirect URI, "kakao${YOUR_NATIVE_APP_KEY}://oauth" 형식 -->
		<data android:scheme="kakao${YOUR_NATIVE_APP_KEY}" android:host="oauth"/>
	</intent-filter>
</activity>

androidmenifest에 추가를 해준다.

후에 main에서 sdk초기화를 진행하면 세팅은 끝이다.

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

앱키는 카카오 페이지에 앱키 항목이 있다. 그대로 기입하면 된다.
키는 위험하기때문에 후에 .evn로 빼고 git ignore 처리를 하는게 좋다

실제 코드

// 카카오 로그인 구현 예제

// 카카오톡 실행 가능 여부 확인
// 카카오톡 실행이 가능하면 카카오톡으로 로그인, 아니면 카카오계정으로 로그인
if (await isKakaoTalkInstalled()) {
  try {
      await UserApi.instance.loginWithKakaoTalk();
      print('카카오톡으로 로그인 성공');
  } catch (error) {
    print('카카오톡으로 로그인 실패 $error');

    // 사용자가 카카오톡 설치 후 디바이스 권한 요청 화면에서 로그인을 취소한 경우,
    // 의도적인 로그인 취소로 보고 카카오계정으로 로그인 시도 없이 로그인 취소로 처리 (예: 뒤로 가기)
    if (error is PlatformException && error.code == 'CANCELED') {
        return;
    }
    // 카카오톡에 연결된 카카오계정이 없는 경우, 카카오계정으로 로그인
    try {
        await UserApi.instance.loginWithKakaoAccount();
        print('카카오계정으로 로그인 성공');
    } catch (error) {
        print('카카오계정으로 로그인 실패 $error');
    }
  }
} else {
  try {
    await UserApi.instance.loginWithKakaoAccount();
    print('카카오계정으로 로그인 성공');
  } catch (error) {
    print('카카오계정으로 로그인 실패 $error');
  }
}

계정로그인 후 잘되는걸 확인할수있다.