KaKao 로그인 구현

이 글은 오준석의 생활 코딩의 유튜브 영상을 따라한 것입니다.

https://www.youtube.com/watch?v=Ar6RdDf77xQ&ab_channel=%EC%98%A4%EC%A4%80%EC%84%9D%EC%9D%98%EC%83%9D%EC%A1%B4%EC%BD%94%EB%94%A9

위 링크로 들어간다면 해당 영상을 볼 수 있습니다.

 

※참조 문서

https://developers.kakao.com/docs/latest/ko/getting-started/sdk-flutter

Kakao Developers

 

1. Kakao SDK 의존성 추가

원하는 항목의 의존성을 추가하면 된다.

 

2. 프로젝트 내의 main에 있는 runApp위에 카카오 SDK 초기화를 선언

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

 

3. kakao에 내 애플리케이션 추가

내 어플리케이션 > 애플리케이션 추가하기를 들어가면 

위와 같은 화면이 나타난다. 

앱 이름은 원하는 앱 이름으로 설정하고 사업자명도 원하는 사업자명으로 설정하면 된다.

그렇게 되면 앱 키가 발급이 된다.

 

발급된 키 값을 2번의 키값 추가 부분에 넣어준다.

 

4. 안드로이드 매니페스트에 필요 값 추가.

<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" />

        <!-- Redirect URI, "kakao${YOUR_NATIVE_APP_KEY}://oauth" 형식 -->
        <data android:scheme="kakao${YOUR_NATIVE_APP_KEY}" android:host="oauth"/>
    </intent-filter>
</activity>

위 내용을 <application> </application> 내부에 추가해 준다.

${YOUR_NATIVE_APP_KEY} 부분에는 발급받았던 키를 넣어준다.

 

5. 로그인 및 로그아웃 코드 작성

https://developers.kakao.com/docs/latest/ko/kakaologin/flutter

Kakao Developers

위 링크의 하위에 작성된 토큰 유효성 체크를 참조하여 작성된 부분이다.

 

추상 클래스에 인터페이스를 작성한다.

abstract class SocialLogin {
  Future<bool> login();
  Future<bool> logout();
}

이후 해당 인터페이스를 구현한다.

import 'package:blog/kakaoLogin/abstact/SocialLogin.dart';
import 'package:kakao_flutter_sdk_user/kakao_flutter_sdk_user.dart';

class KakaoLogin implements SocialLogin {
  @override
  Future<bool> login() async {
    try {
    //카카오톡이 설치되어있는지 확인
      bool isInstalled = await isKakaoTalkInstalled();
      if(isInstalled){
        try{
        //카카오톡으로 로그인
          await UserApi.instance.loginWithKakaoTalk();
          return true;
        } catch(error) {
          return false;
        }
      } else {
        try{
        //카카오톡 계정으로 로그인
          await UserApi.instance.loginWithKakaoAccount();
          return true;
        } catch(error) {
          return false;
        }
      }
    } catch(error) {
      return false;
    }
  }

  @override
  Future<bool> logout() async {
    try {
    //카카오톡과의 연결을 끊는다.
      await UserApi.instance.unlink();
      return true;
    } catch(error) {
      return false;
    }
  }
}

뷰 모델 작성

import 'package:blog/kakaoLogin/abstact/SocialLogin.dart';
import 'package:blog/kakaoLogin/firebase/firebase_auth_remote_data_source.dart';
import 'package:kakao_flutter_sdk_user/kakao_flutter_sdk_user.dart';

class MainViewModel {
  final firebaseAuthDataSource = FirebaseAuthRemoteDataSource();
  final SocialLogin _socialLogin;
  bool isLogined = false;
  User? user;

  MainViewModel(this._socialLogin);

  Future login() async {
    isLogined = await _socialLogin.login();
    if(isLogined) {
      user = await UserApi.instance.me();
    }
  }

  Future logout() async {
    await _socialLogin.logout();
    isLogined = false;
    user = null;
  }
}

 

메인 코드 작성

 

import 'package:blog/kakaoLogin/model/MainViewModel.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:kakao_flutter_sdk_user/kakao_flutter_sdk_user.dart';

import 'kakao_login.dart';

const KAKAO_APP_KEY = '카카오 앱 키';
void main() async {
// 키 값을 받아서 SDK를 초기화 해준다.
  kakao.KakaoSdk.init(nativeAppKey: '${KAKAO_APP_KEY}');
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: '카카오 로그인',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final viewModel = MainViewModel(KakaoLogin());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('카카오 로그인'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Image.network(viewModel.user?.kakaoAccount?.profile?.profileImageUrl ?? '이미지 없음'),
            Text('${viewModel.isLogined}'),
            ElevatedButton(
                onPressed: () async {
                  await viewModel.login();
                  setState((){});
                },
                child: const Text('Login')
            ),
            ElevatedButton(
                onPressed: () async {
                  await viewModel.logout();
                  setState((){});
                },
                child: const Text('Logout')
            )
          ],
        ),
      ),
    );
  }
}

setState로 화면이 재 랜더링 되도록 한다.