[Flutter] BoilerTemplate 로그인 정보 로컬디비 저장

매번 카카오 로그인을 하는 사람은 없다.

카카오 로그인 이후에 회원정보를 캐시에 저장해두고, 해당 정보를 사용하자

https://devboi.tistory.com/665

[Flutter] shared_preferences 사용

 

해당 글을 참고해서 shared_preferences를 사용했다.

 

우선 저장할 Profile 객체 생성

class KakaoUserProfile{
  int? id;
  String? nickname;
  String? thumbnailImageUrl;

  KakaoUserProfile(int? id,String? nickname,String? thumbnail_image_url){
    this.id = id;
    this.nickname = nickname;
    this.thumbnailImageUrl = thumbnailImageUrl;
  }
  
  Map<String, dynamic> toJson() {
    return {
      'id': this.id,
      'nickname': this.nickname,
      'thumbnailImageUrl': this.thumbnailImageUrl,
    };
  }

  factory KakaoUserProfile.fromJson(Map<String, dynamic> json) {
    return KakaoUserProfile(json['id'],json['profile.nickname'],json['profile.thumbnail_image_url']);

  }
}

 

저장 인터페이스

import 'dart:convert';

import 'package:shared_preferences/shared_preferences.dart';

import 'kakao/userprofile/kakao_profile.dart';

class LoginInterface{
  static late SharedPreferences prefs;
  final String prefix = "boiler_user_profile";

  Future init() async{
    prefs = await SharedPreferences.getInstance();
  }

  Future save(KakaoUserProfile profile) async{
    prefs.setString(prefix, jsonEncode(profile));
  }

  int? load() {
    int id = 0;
    var user_profile =  prefs.getString(prefix);
    if(user_profile == null)
      return 0;
    var jsonData = json.decode(user_profile!);
    KakaoUserProfile userProfile = KakaoUserProfile.fromJson(jsonData);
    return userProfile.id;
  }
}

save는 저장을, load는 저장된 값을 불러와서, userProfile 객체로 역직렬화 해준다.

 

import 'package:boilerflutterapp/view/widget/login/kakao/userprofile/kakao_profile.dart';
import 'package:boilerflutterapp/view/widget/login/login_interface.dart';
import 'package:boilerflutterapp/view/widget/login/social_login.dart';
import 'package:kakao_flutter_sdk_user/kakao_flutter_sdk_user.dart';

class KakaoViewModel{
  final SocialLogin _socialLogin;
  bool isLogined = false;
  User? user;
  LoginInterface interface = new LoginInterface();
  KakaoViewModel(this._socialLogin){
    interface.init();
  }
  int id =0;
  Future login() async{
    int? load_id;
    isLogined = await _socialLogin.login();
    if(isLogined){
      user = await UserApi.instance.me();
      //카카오 로그인 로드/저장
      int? userid = user?.id;
      String? thumbnailImageUrl=user?.kakaoAccount?.profile?.thumbnailImageUrl;
      String? nickname = user?.kakaoAccount?.profile?.nickname;
      load_id = interface.load();
      print("smith main load!");
      print(userid);
      //load 데이터 없는 경우
      if(load_id == null || load_id == 0){
        interface.save(new KakaoUserProfile(userid, nickname, thumbnailImageUrl));
        print("smith save!");
      }
      else{
        print("smith laod !!! ");
        print(load_id);
      }
      //페이지 이동
    }
  }
  Future logout() async{
    await _socialLogin.logout();
    isLogined = false;
    user = null;
  }
}

 

쉽게 이해하면 아래와 같다.

맨처음에 로그인을 하면, 해당 값을 일단 받아오고 load를 해서 데이터가있으면, 해당 데이터로 로그

없으면 save로 profile 값을 저장한다.

 

그런데 이상하다. 왜냐면. 맨처음에 카카오 로그인 창을 매번 눌러줘야 하기 때문이다.

이러한 작업 때문에 Splash 화면에서 해당 데이터를 세팅해서, 로그인 화면으로 갈지, 아니면 메인화면으로 갈지를 결정해야한다.

즉 해당 회원의 존재유무는 Splash 화면에서 분기 처리되어야 한다.

 

따라서, 다음에는 Splash 화면 및 분기 처리를 진행해보자

 

우선 이번 포스팅은 SharedPref를 붙이고 profile 역직렬화에 포커싱을 두었다.