<div id="readability-page-1" class="page"><article id="mainContent">
                <div>
                  <p><a href="/m/category/%EA%B0%9C%EB%B0%9C%28%ED%95%A9%EB%8B%88%EB%8B%A4%29/Flutter%26android%26ios"><span>개발(합니다)/Flutter&amp;android&amp;ios</span></a></p><h3>[Flutter] Kakao sdk 사용 방법(+Android)</h3>
                </div>
                <p><cite>otrodevym</cite>
                  <span> 2021. 12. 20. 00:00</span>
                </p>
                                <div>
                                <p data-ke-size="size16">카카오 로그인을 연동하는 과정에서 시행착오를 많이 겪어서 포스팅합니다.</p>
<p data-ke-size="size16">화면은 존재한다는 전제로 작성했습니다.</p>
<h2 data-ke-size="size26">1. pubspec.yaml 등록</h2>
<p data-ke-size="size16">아래 버전을 사용했습니다.</p>
<pre><code>kakao_flutter_sdk: ^0.9.0</code></pre>

<figure data-ke-mobilestyle="widthOrigin" data-origin-width="544" data-origin-height="164">
    <span data-url="https://k.kakaocdn.net/dn/p4tmu/btrodTj2VvO/m7cSttuUTKSXuwQFb6k3i0/img.png" data-lightbox="lightbox">
        <img src="https://k.kakaocdn.net/dn/p4tmu/btrodTj2VvO/m7cSttuUTKSXuwQFb6k3i0/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-origin-width="544" data-origin-height="164">
    </span>
    
</figure>

<h2 data-ke-size="size26">2. 플랫폼 생성 및 키 발급</h2>

<p data-ke-size="size16">카카오 개발자센터에서 키를 발급합니다.</p>
<p data-ke-size="size16"><a href="https://developers.kakao.com/console/app" target="_blank" rel="noopener">https://developers.kakao.com/console/app</a></p>
<figure data-ke-mobilestyle="widthOrigin" data-origin-width="1552" data-origin-height="553">
    <span data-url="https://k.kakaocdn.net/dn/b0m4nc/btrogwBUNOc/J6CQDHhYZ1JkyNGwoDdb3k/img.png" data-lightbox="lightbox">
        <img src="https://k.kakaocdn.net/dn/b0m4nc/btrogwBUNOc/J6CQDHhYZ1JkyNGwoDdb3k/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-origin-width="1552" data-origin-height="553">
    </span>
    
</figure>


<h2 data-ke-size="size26">3. 네이티브 앱 Key 등록</h2>

<p data-ke-size="size16">main.dart에 키를 주입합니다.</p>
<figure data-ke-mobilestyle="widthOrigin" data-origin-width="757" data-origin-height="139">
    <span data-url="https://k.kakaocdn.net/dn/cSm99o/btroezr8oHI/NHvlraor7vaHOe4SOE4Zw1/img.png" data-lightbox="lightbox">
        <img src="https://k.kakaocdn.net/dn/cSm99o/btroezr8oHI/NHvlraor7vaHOe4SOE4Zw1/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-origin-width="757" data-origin-height="139">
    </span>
    
</figure>

<h2 data-ke-size="size26">4. Android Hash 키 발급</h2>
<p data-ke-size="size16">hash 키가 인식이 되지 않아서 토큰이 발행되지 않아 애를 먹었습니다.</p>
<p data-ke-size="size16">아래 명령어 실행을 \android\app 에서 실행 시켜주고 android build를 합니다.</p>
<p data-ke-size="size16">android build는 안드로이드 스튜디오에서 android 폴더를 열면 자동으로 build를 합니다.</p>

<p data-ke-size="size16"><a href="https://developers.kakao.com/docs/latest/ko/getting-started/sdk-android#add-key-hash" target="_blank" rel="noopener">https://developers.kakao.com/docs/latest/ko/getting-started/sdk-android#add-key-hash</a></p>
<pre id="code_1639886621249" data-ke-language="java" data-ke-type="codeblock"><code>keytool -exportcert -alias androiddebugkey -keystore %USERPROFILE%\.android\debug.keystore -storepass android -keypass android | openssl sha1 -binary | openssl base64</code></pre>
<h2 data-ke-size="size26">5. AnroidManifest.xml 등록</h2>
<pre><code>    &lt;uses-permission android:name="android.permission.INTERNET" /&gt;</code></pre>
<p data-ke-size="size16">android:scheme에서 kakao{네이티브 키}를 입력합니다.</p>
<pre><code>        &lt;activity android:name="com.kakao.sdk.flutter.AuthCodeCustomTabsActivity"&gt;
            &lt;intent-filter android:label="flutter_web_auth"&gt;
                &lt;action android:name="android.intent.action.VIEW" /&gt;
                &lt;category android:name="android.intent.category.DEFAULT" /&gt;
                &lt;category android:name="android.intent.category.BROWSABLE" /&gt;
                &lt;data android:scheme="kakao나의 API KEY" android:host="oauth"/&gt;
            &lt;/intent-filter&gt;
        &lt;/activity&gt;</code></pre>

<h2 data-ke-size="size26">6.<span>&nbsp;</span>AnroidManifest.xml 등록</h2>

<pre id="code_1639887147562" data-ke-language="java" data-ke-type="codeblock"><code>  Future&lt;void&gt; 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);
    }
  }</code></pre>
<figure data-ke-mobilestyle="widthOrigin" data-origin-width="1202" data-origin-height="930">
    <span data-url="https://k.kakaocdn.net/dn/QwL22/btroi4ZdPfQ/oMo4lS9EiiMFAYi7PuwwX0/img.png" data-lightbox="lightbox">
        <img src="https://k.kakaocdn.net/dn/QwL22/btroi4ZdPfQ/oMo4lS9EiiMFAYi7PuwwX0/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-origin-width="1202" data-origin-height="930">
    </span>
    
</figure>
<p data-ke-size="size16">위 소스를 실행하면 토큰을 확인할 수 있습니다.</p>
            
            
                </div>
                

              </article></div>

미니 블로그 : 메모하는 습관

otrodevym

카카오 로그인을 연동하는 과정에서 시행착오를 많이 겪어서 포스팅합니다.
화면은 존재한다는 전제로 작성했습니다.
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);
    }
  }
위 소스를 실행하면 토큰을 확인할 수 있습니다.

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

댓글