[flutter] 플러터 카카오 로그인 구현하기

 

플러터에서 카카오 로그인을 구현하는 방법 입니다!

 

먼저 pubspec.yaml 파일을 열어서,

dependencies에

kakao_flutter_sdk 패키지를 입력하고 저장해주세요.

 

 

카카오 로그인을 구현하려면,

카카오 개발자페이지에서 앱을 등록해줘야 합니다.

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

카카오계정 로그인

 

카카오 로그인을 사용할 애플리케이션 요약 정보에 들어가서,

네이티브 앱 키를 복사해오시구요,

아래 보이는 "플랫폼"에서 Android, iOS 패키지명을 입력해주세요!

 

 

 

메인 페이지에서 네이티브 앱 키를 입력해주고,

카카오로그인 페이지를 불러오도록 합니다.

 

import 'package:findmyroad/screen/kakaoLogin.dart';
import 'package:flutter/material.dart';
import 'package:kakao_flutter_sdk/all.dart';


void main() {
  KakaoContext.clientId = '네이티브 앱 키';
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'KakaoLogin',
      home: KakaoLoginPage(),
    );
  }
}

 

kakaoLogin.dart 에서 카카오 로그인 버튼을 만들어주면 끝입니다!

 

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:kakao_flutter_sdk/all.dart';


class KakaoLoginPage extends StatefulWidget {
  @override
  _KakaoLoginPageState createState() => _KakaoLoginPageState();
}

class _KakaoLoginPageState extends State<KakaoLoginPage> {
  Future<void> _loginButtonPressed() async {
    String authCode = await AuthCodeClient.instance.request();
    print(authCode);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        minimum: const EdgeInsets.symmetric(horizontal: 16),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            SizedBox(
              width: MediaQuery.of(context).size.width,
              child: CupertinoButton(
                onPressed: _loginButtonPressed,
                color: Colors.yellow,
                child: Text(
                  '카카오 로그인',
                  style: TextStyle(
                    fontSize: 15,
                    color: Colors.black87,
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

 

 

이제 에뮬레이터를 키고 잘 돌아가는지 확인해봅니다!

너무너무 잘 돌아가네요!

SDK 를 이용한 로그인기능을 완료하려면 키 해시값이 있어야 한다고 해요.

 

 

 

 

릴리즈 키 해시와 디버그 키 해시가 또 따로 있다고 하는데,

일단은 디버그용 키 해시를 가져올게요.

터미널에서 프로젝트 루트폴더로 이동 후 아래 명령어를 입력해주세요.

그러면 디버그용 키 해시를 얻을 수 있답니다!

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

 

 

카카오 개발자 페이지에서

플랫폼 > 안드로이드 플랫폼 수정에 들어가서

키 해시에다가 터미널에서 얻은 디버그용 키 해시를 입력해줍니다.

 

 

 

 

끝입니다!

 

 

 

 코드 참고 블로그

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

Flutter - kakao 소셜로그인 구현