본문 바로가기

개발(합니다)/Flutter&android&ios

[Flutter] Kakao sdk 사용 방법(+Android)

반응형

카카오 로그인을 연동하는 과정에서 시행착오를 많이 겪어서 포스팅합니다.

화면은 존재한다는 전제로 작성했습니다.

1. pubspec.yaml 등록

아래 버전을 사용했습니다.

kakao_flutter_sdk: ^0.9.0

 

 

2. 플랫폼 생성 및 키 발급

 

카카오 개발자센터에서 키를 발급합니다.

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

 

 

3. 네이티브 앱 Key 등록

 

main.dart에 키를 주입합니다.

 

4. Android Hash 키 발급

hash 키가 인식이 되지 않아서 토큰이 발행되지 않아 애를 먹었습니다.

아래 명령어 실행을 \android\app 에서 실행 시켜주고 android build를 합니다.

android build는 안드로이드 스튜디오에서 android 폴더를 열면 자동으로 build를 합니다.

 

https://developers.kakao.com/docs/latest/ko/getting-started/sdk-android#add-key-hash

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

5. AnroidManifest.xml 등록

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

android:scheme에서 kakao{네이티브 키}를 입력합니다.

        <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" />
                <data android:scheme="kakao나의 API KEY" android:host="oauth"/>
            </intent-filter>
        </activity>

 

6. AnroidManifest.xml 등록

 

  Future<void> loginKakao() async {
    try {
      String authCode = await AuthCodeClient.instance.request(); // 웹 카카오 로그인
      // String kakaoCode = await AuthCodeClient.instance.requestWithTalk(); // 앱 카카오 로그인
      print("kakao Code");

      print(authCode);

      print("authToken");

      await this.kakaoAccessToken(authCode);

      print(UserApi.instance.me());
    } catch (e) {
      print(e);
    }
  }

  kakaoAccessToken(String authCode) async {
    try {
      var token = await AuthApi.instance.issueAccessToken(authCode);

      print(token);
      print('token');
    } catch (e) {
      print(e);
    }
  }

위 소스를 실행하면 토큰을 확인할 수 있습니다.

반응형