ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • KaKao 로그인 구현
    Mobile/Flutter 2022. 5. 26. 17:15

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

    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

    카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.

    developers.kakao.com

     

    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

    카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.

    developers.kakao.com

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

     

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

    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로 화면이 재 랜더링 되도록 한다.

    댓글

Designed by Tistory.