[Flutter] KaKaologin 구현

 

이 글은 카카오 로그인을 구현합니다. 

 

 

✅ 먼저 Flutter SDK를 사용하기 위한 최소 요구 사항 확인

• Flutter 2.0 이상
• Dart 2.12.0 이상
• Android Studio 3.0 이상
• Android 4.4(API 19) 이상
• iOS 11 이상

여기서 저는 시간을 조금 허비했는데 xcode 업데이트를 안해둬서 플랫폼 등록을 못했었습니다.

xcode 업데이트 방법은 appstore를 통하지 않고 직접 apple developer 공식 홈페이지에 들어가 xcode 13을 설치했습니다. 이것만 해결되고 나면 나머지는 간단합니다. (참고한 자료 : https://es1015.tistory.com/391 )

 

✅ 구현순서

1. kakao developers에 들어가 애플리케이션을 추가합니다. 

Kakao Developers

저는 앱 출시가 목적이 아닌 카카오 로그인 구현이 목적이었기 때문에 앱이름은 신경쓰지 않고 지었습니다.

출시하실 계획이 있으신 분들은 앱 이름과 사업자명이 동일해야 문제가 생기지 않는다고 합니다. 

프로젝트가 잘 생성되고 나면 앱 키가 생성됩니다. 로그인을 하기 위해서는 '네이티브 앱 키'만 알면 됩니다. 

 

2.프로젝트를 열어 pubspec.yaml 파일을 열어 kakao_flutter_sdk를 추가했습니다. 

 

3.Flutter SDK를 통해 카카오 API를 사용하기 위해 [내 애플리케이션] > 플랫폼에서 Android, iOS 플랫폼 정보를 입력합니다. 

https://developers.kakao.com/docs/latest/ko/getting-started/app#platform

Kakao Developers

4. 위의 1-3번까지 모든 것이 잘 설치.설정됐다면 초기화를 거쳐 사용할 수 있습니다. 

import 'package:kakao_flutter_sdk/common.dart';

void main() {
    ...
    KakaoSdk.init(nativeAppKey: '${YOUR_NATIVE_APP_KEY}');
    runApp(MyApp());
    ...
}

 

5.로그인을 테스트해볼 버튼을 구현하고 그 버튼을 클릭했을 때 로그인이 실행됩니다. 

class KaKaoLogin extends StatefulWidget {
  @override
  State<KaKaoLogin> createState() => _KaKaoLoginState();
}

class _KaKaoLoginState extends State<KaKaoLogin> {

  Future<OAuthToken> loginWithKakaoAccount({
    List<Prompt>? prompts,
    List<String>? channelPublicIds,
    List<String>? serviceTerms,
    String? loginHint,
    String? nonce,
  }) async {
    String codeVerifier = AuthCodeClient.codeVerifier();
    final authCode = await AuthCodeClient.instance.request(
      prompts: prompts,
      channelPublicIds: channelPublicIds,
      serviceTerms: serviceTerms,
      codeVerifier: codeVerifier,
      loginHint: loginHint,
      nonce: nonce,
    );
    final token = await AuthApi.instance
        .issueAccessToken(authCode: authCode, codeVerifier: codeVerifier);
    await TokenManagerProvider.instance.manager.setToken(token);
    return token;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('카카오로그인')),
      body: Center(
          child: ElevatedButton(
        child: const Text('kakaologin'),
        onPressed: () {
          loginWithKakaoAccount();
        },
      )),
    );
  }
}

 

6.완성된 화면

 

 

✅  참고한 자료

https://velog.io/@kmh339/Flutter-kakao-%EC%86%8C%EC%85%9C%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EA%B5%AC%ED%98%84