[Flutter] Using Firebase Remote Config

OpenAPI 등을 사용할 때, 노출이 되면 안되는 key 값들을 사용하게 되죠.

따라서, 이 값을 안전하게 할 수 있도록 다양한 방법을 사용합니다.

이번엔 firebase에서 제공하는 remote config를 사용하는 방법을 알아보겠습니다.

Create Project

먼저, firebase에서 프로젝트를 생성합니다.

프로젝트 만들기를 누릅니다.

다음으로 사용할 이름을 입력하고 계속 버튼을 누릅니다.

이후 설정은 원하는대로 해주세요.

일단은 기본으로 하셔도 나중에 다 바꿀 수 있을거에요.

전 애널리틱스 사용하는 것으로 설정해서 계정 연동까지 해줬어요.

마지막으로 프로젝트 만들기 버튼을 누르면 끝입니다.

Integrate with Firebase

이제 flutter application과 firebase를 연결해 줍니다.

Flutter 메뉴를 선택해서 flutter application을 추가합니다.

 

안되어 있는 분들은 링크를 참고해서 진행을 해주시면 됩니다.

전 이미 다 되어있는 상태라 프로젝트만 만들었어요.

다음 명령으로 flutter 프로젝트를 생성합니다.

전 v3.23.3을 사용했어요.

$ flutter create frc_example

다음 버튼을 눌러줍니다.

프로젝트 디렉토리에서 위의 명령어를 입력해 줍니다.

설명대로 원하는 플랫폼을 선택하고 엔터를 입력하면 진행이 됩니다.

다 끝나면, 다음 버튼을 눌러줍니다.

마지막으로 flutter application에 해당 내용을 적용해 줍니다.

다음 명령으로 먼저 필요한 패키지를 설치합니다.

$ flutter pub add firebase_core

main.dart 파일을 다음과 같이 수정해 줍니다.

import 'package:flutter/material.dart';

import 'package:firebase_core/firebase_core.dart';
import 'firebase_options.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  runApp(const MyApp());
}

이제 실행을 해봅니다.

혹시 다음과 같은 에러가 발생하면 당황하지 마시고 xcode를 열어 주세요.

$ open ios/Runner.xcworkspace

그리고 이 부분의 버전을 변경해 주세요.

이제 잘 실행이 될 거에요.

☞ 사족으로 개인적으로 이 부분 때문에 고생을 좀 했습니다.
검색을 해봐도 Flutter, CocoaPod 같은 거 clear하고 재설치 하라는 식의 답변만 잔뜩이라 수십번을 재설치 하다가 제 과거 블로그를 보고 힌트를 얻어 만져보다 겨우 해결했네요. ㅠ
그래서, 도움이 되길 바라며 공유를 해 봤습니다.

콘솔로 이동 버튼을 눌러 마무리를 합니다.

Add Remote Config

이제 다시 firebase로 가서 remote config를 추가해 주겠습니다.

Remote Config 메뉴를 선택합니다.

구성 만들기를 선택합니다.

원하는 key와 value를 넣어주고 저장 버튼을 누릅니다.

여기서 끝이 아닙니다.

변경사항 게시를 해줘야 실제로 반영이 됩니다.

이제 준비가 끝났으니, flutter application에서 사용을 해야겠죠?

Use Remote Config

다음 명령으로 필요한 패키지를 설치합니다.

$ flutter pub add firebase_remote_config

이제 기본 앱을 조금 변형해서 확인을 해볼게요.

import 'package:firebase_remote_config/firebase_remote_config.dart';

class _MyHomePageState extends State<MyHomePage> {
  String _apiKey = '';

  @override
  void initState() {
    super.initState();
    _fetchRemoteConfig();
  }

  Future<void> _fetchRemoteConfig() async {
    final remoteConfig = FirebaseRemoteConfig.instance;
    await remoteConfig.fetchAndActivate();
    setState(() {
      _apiKey = remoteConfig.getString('TestKey');
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      ...
            Text(_apiKey),
      ...
    );
  }
}

변경 부분만 추가해 봤어요.

요런 식으로 가져와서 사용하면 됩니다.

원하는대로 firebase에서 설정한 값이 코드에 노출되지 않고 잘 받아와 집니다. ㅎㅎ

Wrap Up

이번에는 firebase에서 제공하는 remote config를 사용하여 비밀 key를 노출하지 않고 사용하는 방법을 살펴보았습니다.

은근 많이 사용하게 되는 기능이니 잘 사용해 보세요.