* 해당 게시글 최하단에 아래의 2가지 형태의 예제를 구현한 github 링크를 공유해두었으니
참고하실 분들은 도움이 되셨으면 좋겠습니다.
- 단순 카카오 로그인
- 카카오 로그인 후 정보저장(Firebase) 및 자동로그인
Flutter에서 소셜 로그인을 할 수 있는 여러 가지 방법이 있는데 그 중 하나가 카카오계정 로그인이다.
Flutter에서 간단히 구현을 해볼텐데 방법은 아래와 같다.
1. pub.dev (flutter 패키지 모음) 에서 어떤 라이브러리 사용할 것인지 확인 : kakao_flutter_sdk (카카오 공식)
👉🏻 카카오에서 공식 지원하는 라이브러리를 가져다가 쓸 예정이다.
2. Flutter 에서 pubspec.yaml 의존성 추가하기
👉🏻 kakao_flutter_sdk를 가져다가 flutter에서 사용하기 위해 하는 작업이다.
3. developers.kakao.com에서 개발자등록 후 앱만들어 키 발급받기
👉🏻 카카오 개발자 사이트에서 '제 앱에서 카카오 로그인좀 쓸게요~' 카카오 로그인을 쓸 수 있는 키를 받는 작업이다.
4. 버튼 만들고 동작하도록 기능 구현하기
자, 이제 시작해보자.
1. pub.dev (flutter 패키지 모음) 에서 어떤 라이브러리 사용할 것인지 확인 : kakao_flutter_sdk (카카오 공식)
2. Flutter 에서 pubspec.yaml 의존성 추가하기
Flutter 프로젝트의 pubspec.yaml 파일에서 dependencies: 하단에 kakao_flutter_sdk: ^0.4.2 를 입력해주고
상단의 Pub get을 클릭하자.
👉🏻 현재 버전이 0.4.2일테니 향후에 버전업되면 해당 버전을 pub.dev에서 확인하고 추가하자.
(Pub get의 의미는 해당 라이브러리(kakao_flutter_sdk)를 쓸 수 있도록 다운로드 받는 과정이다.)
👨👩👧👧 kakao_flutter_sdk를 쓰려면 아래의 항목들도 다 추가해줘야 한단다.
1. dio
2. json_annotation
3. package_info
4. platform
5. shared_preferences
모두 추가하고 Pub get을 통해 다운받아주자.
👕 Android 기준 ))))))
android > app > src > build.gradle : minSdkVersion 19로 수정 =====> 현재('21.10.23) 패키지 버전에서는 21로 올려줘야 함
👚 iOS 기준 )))))) 이제 빌드를 돌려서 iOS 에뮬레이터로 실행시켜보려고 하니 아래와 같이 실행이 안 된다.
ios / Podfile 에 아래와 같이 platform: ios, '11.0' 이라고 명시해주자 (위치를 잘 맞추어 코딩하자! use_modular_headers! 밑)
자, 일단 실행은 되었다.
3. developers.kakao.com에서 개발자등록 후 앱만들어 키 발급받기
developers.kakao.com에 접속해서 우선 개발자 등록이 안되었으면 하라.
Kakao Developers
카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.
developers.kakao.com
개발자 등록이 완료되었으면 앱을 등록해보자. 아래와 같이 그냥 앱이름/회사이름 넣고 등록하면 된다. (회사이름 아무거나 해도된다)
앱을 만들었으면 눌러서 확인해보라. 저 여러 키 중 네이티브앱 키를 복사해서 사용할 것이다.
어디에 사용할 것이냐면, 방금 개발자등록/앱등록해서 얻은 키는 카카오에서 카카오계정 로그인버튼을 사용할 수 있도록
키를 제공한 것이고, 이제 그 키를 우리 개발하는 flutter 쪽에 사용하기 위해 입력해주면 된다.
그 전에 iOS 플랫폼 등록도 해야 한다. 아래처럼 플랫폼 탭으로 이동해서 iOS 플랫폼 등록을 클릭하자
번들ID를 XCode에서 찾은 후 입력하고 저장버튼 누르자
XCode에선 아래의 경로로 찾을 수 있다.
이제 좌측에 카카오 로그인 - 동의 항목에 가서 동의항목을 설정하자 (본인이 원하는 것을 설정)
그 후에 '카카오 로그인'으로 이동해서 OFF 를 ON 으로 바꿔주자
4. 구현하기
- main.dart 파일에서 아래와 같이 초기 키값을 설정하자.
import 'package:flutter/material.dart';
import 'package:kakao_flutter_sdk/all.dart';
void main() {
KakaoContext.clientId = "카카오 네이티브앱 키";
KakaoContext.javascriptClientId = "카카오 Javascript키";
runApp(MyApp());
}
👕 Android 기준 )))))) Android Manifest에 activity -> intent-filter -> data 값을 추가해주자.
👚 iOS 기준 )))))) XCode > Runner > Info > URL Types 에서 '+' 버튼을 누른 후 URL Schemes : 'kakao네이티브앱키' 를 넣어주자.
ex ) kakao0bkaej35238192h124 (문자열 kakao + 네이티브앱키)
Runner > Runner > Info.plist > Information Property Info 우측의 '+' 클릭 > KAKAO_APP_KEY 를 추가하고 네이티브앱 키를 넣어주자.
- 버튼 만들고 동작하도록 아래 소스처럼 구현했다. (다른분 소스 발췌)
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: KakaoLogin(),
);
}
}
class KakaoLogin extends StatefulWidget {
@override
_KakaoLoginState createState() => _KakaoLoginState();
}
class _KakaoLoginState extends State<KakaoLogin> {
bool _isKakaoTalkInstalled = false;
@override
void initState() {
_initKakaoTalkInstalled();
super.initState();
}
_initKakaoTalkInstalled() async {
final installed = await isKakaoTalkInstalled();
print('kakao Install : ' + installed.toString());
setState(() {
_isKakaoTalkInstalled = installed;
});
}
_issueAccessToken(String authCode) async {
try {
var token = await AuthApi.instance.issueAccessToken(authCode);
AccessTokenStore.instance.toStore(token);
print(token);
Navigator.push(context, MaterialPageRoute(
builder: (context) => Home(),
));
} catch (e) {
print(e.toString());
}
}
_loginWithKakao() async {
try{
var code = await AuthCodeClient.instance.request();
await _issueAccessToken(code);
} catch (e) {
print(e.toString());
}
}
_loginWithTalk() async {
try{
var code = await AuthCodeClient.instance.requestWithTalk();
await _issueAccessToken(code);
} catch (e) {
print(e.toString());
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('kakao login test'),
),
body: Center(
child: InkWell(
onTap: () => _isKakaoTalkInstalled ? _loginWithTalk : _loginWithKakao,
child: Container(
width: MediaQuery.of(context).size.width * 0.6,
height: MediaQuery.of(context).size.height * 0.07,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.yellow
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.chat_bubble, color: Colors.black54),
SizedBox(width: 10,),
Text(
'카카오계정 로그인',
style: TextStyle(
color: Colors.black54,
fontWeight: FontWeight.w900,
fontSize: 20
),
),
],
)
),
)
)
);
}
}
테스트 ))) Android 에뮬레이터에는 카카오톡을 사전에 설치해두었고 iOS 에뮬레이터에는 설치 안한 상태에서 로그인버튼 눌러보았다.
둘다 잘 된다. (Android는 뒷부분 캡쳐를 빼먹었네)
* 2020.08.03 추가) Android는 키 해시값을 입력해야 정상 동작한다.
#1> Hash Key란?
오픈 API(카카오API, FCM 등)을 사용하려면 해시키를 등록해야 하고, 키 해시가 등록된 앱만 SDK를 이용해 API를 호출할 수 있다.
키 해시는 특정 데이터를 해시 함수에 입력한 결과로 받은 값이다. 키 해시를 이해하기 위해서는 해시 함수에 대해 이해해야 한다.
#> 해시 함수란?
임의의 길이의 데이터를 고정된 길이의 데이터로 매핑하는 함수이다. 해시함수에 의해 얻어지는 값은 해시값, 해시코드, 해시 체크섬 또는 간단하게 해시라고 한다.
#> 키 해시의 활용
API Provider는 민감한 정보일 수도 있는 앱의 사이닝 키값이 아닌 그 값을 해시한 해시 키를 통해 인증된 사용자인지 판단한다.
해시를 통한 사용자 인증의 장점은 해시값이 노출되어도 피해가 전혀 없다.
#2> Key Hash 키 가져오기
터미널에서 홈 디렉토리로 이동 후 아래의 명령어를 실행하면 된다.
(* 아래의 명령어는 디버그 키 해시이므로 추후 릴리즈를 하는 경우 릴리즈용 키 해시를 가져오도록 설정해줘야 함)
keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore -storepass android -keypass android | openssl sha1 -binary | openssl base64
debug.keystore와 release.keystore 를 모두 수행해주고 나오는 키 해시에 대해 아래 경로에 추가해준다. (여러개인 경우 엔터키로 구분)
* 카카오개발자 > 내 애플리케이션 > 앱 설정 > 플랫폼 > Android 수정버튼 클릭 > 키 해시 추가 > 저장
* 2021.01.12 추가) 디버그모드에선 잘 되던 카카오로그인이 구글 플레이스토어에 배포 후 작동하지 않는 경우 구글 플레이스토어의 앱서명을 위에 추가한 것처럼 카카오개발자 사이트의 키 해시값에 추가로 넣어주면 잘 작동할 것이다!
* 구글 플레이 개발자 콘솔 > 배포한 앱 > 앱 서명
카카오 로그인 예제 소스 참고
- 단순 카카오 로그인
- 카카오 로그인 후 정보저장(Firebase) 및 자동 로그인
https://github.com/kyungsnim/flutter_kakao_login_example
GitHub - kyungsnim/flutter_kakao_login_example
Contribute to kyungsnim/flutter_kakao_login_example development by creating an account on GitHub.
github.com
댓글