민감한 API Key를 APK에 포함시키지 않고 Firebase Remote Config로 관리하기 (React Native)

애플리케이션을 개발할 때, API 키와 같은 민감한 정보를 안전하게 관리하는 것은 매우 중요합니다. 특히 React Native 앱의 경우 APK 파일에 직접 API 키를 포함시키면, 사용자가 APK를 추출하여 키를 노출시킬 수 있는 위험이 있습니다. 이를 방지하기 위해 Firebase Remote Config를 활용하여 API 키를 안전하게 관리하는 방법을 소개합니다.

1. Firebase 콘솔에 접속하여 Remote Config 매개변수 추가하기

먼저, Firebase 콘솔에 접속하여 Remote Config를 설정해야 합니다.

1. Firebase 프로젝트 선택: Firebase 콘솔에 로그인한 후, API 키를 관리할 프로젝트를 선택합니다.
2. Remote Config로 이동: 왼쪽 사이드바 메뉴에서 Remote Config를 클릭합니다.
3. 매개변수 추가:
   • 새 매개변수 추가 버튼을 클릭합니다.
   • api_key와 같은 이름으로 매개변수를 생성합니다.
   • 기본 값에 실제 API 키 값을 입력합니다.
   • 저장 버튼을 클릭하여 매개변수를 저장합니다.
4. 배포: 매개변수를 설정한 후, 배포 버튼을 클릭하여 변경사항을 적용합니다.

2. React Native 앱에서 Firebase Remote Config 설정하기

Firebase 콘솔에서 매개변수를 설정한 후, React Native 애플리케이션에서 이를 불러와 사용하는 방법을 설정합니다.

2.1 Firebase 설정 및 패키지 설치

React Native 프로젝트에서 Firebase를 사용하려면 react-native-firebase 패키지를 설치해야 합니다.

npm install @react-native-firebase/app @react-native-firebase/remote-config 로 설치해줍니다 (프로젝트 루트 디렉토리)

1. Firebase 설정 파일 추가:
   • Android의 경우, google-services.json 파일을 프로젝트의 android/app 디렉토리에 추가합니다.
   • iOS의 경우, GoogleService-Info.plist 파일을 Xcode 프로젝트에 추가합니다.
2. Android 설정:
   • android/build.gradle 파일에 Google 서비스 플러그인을 추가합니다.
   •  
     buildscript { dependencies { // ... 기존 의존성 classpath 'com.google.gms:google-services:4.3.15' // 최신 버전 확인 } }
   •  
   • android/app/build.gradle 파일에 다음을 추가합니다.
   • apply plugin: 'com.google.gms.google-services'

2.2 Remote Config Context 설정

애플리케이션 전체에서 Remote Config 값을 쉽게 접근하고 관리할 수 있도록 Context를 설정합니다. 아래는 RemoteConfigContext와 RemoteConfigProvider를 설정하는 코드입니다.

// src/services/RemoteConfigContext.js

import React, { createContext, useContext, useEffect, useState } from 'react';

import remoteConfig from '@react-native-firebase/remote-config';

const RemoteConfigContext = createContext();

export const RemoteConfigProvider = ({ children }) => {

    const [configValues, setConfigValues] = useState({

        FLASK_SERVER_URL: '',           // 기본값

        GOOGLE_WEB_CLIENT_ID: '',       // 기본값

        OPENAI_API_KEY: '',             // 기본값

    });

    useEffect(() => {

        const initializeRemoteConfig = async () => {

            try {

                // Remote Config 기본값 설정

                await remoteConfig().setDefaults({

                    FLASK_SERVER_URL: '', // 기본 URL

                    GOOGLE_WEB_CLIENT_ID: '',        // 기본 클라이언트 ID

                    OPENAI_API_KEY: '',             // 기본 API 키

                });

                // Remote Config 데이터 가져오기 및 활성화

                await remoteConfig().fetchAndActivate();

                // 각각의 Remote Config 값을 가져오기

                const flaskServerUrl = remoteConfig().getValue('FLASK_SERVER_URL').asString();

                const googleWebClientId = remoteConfig().getValue('GOOGLE_WEB_CLIENT_ID').asString();

                const openAiApiKey = remoteConfig().getValue('OPENAI_API_KEY').asString();

                // 상태에 값 저장

                setConfigValues({

                    FLASK_SERVER_URL: flaskServerUrl,

                    GOOGLE_WEB_CLIENT_ID: googleWebClientId,

                    OPENAI_API_KEY: openAiApiKey,

                });

                console.log('Remote Config Initialized:', {

                    flaskServerUrl,

                    googleWebClientId,

                    openAiApiKey,

                });

            } catch (error) {

                console.error('Failed to initialize Remote Config:', error);

            }

        };

        initializeRemoteConfig();

    }, []);

    return (

        <RemoteConfigContext.Provider value={configValues}>

            {children}

        </RemoteConfigContext.Provider>

    );

};

export const useRemoteConfig = () => useContext(RemoteConfigContext);

설명:

• RemoteConfigContext를 생성하여 애플리케이션 전체에서 Remote Config 값을 접근할 수 있도록 합니다.
• RemoteConfigProvider 컴포넌트는 Remote Config를 초기화하고, 가져온 값을 상태로 관리합니다.
• useRemoteConfig 훅을 통해 쉽게 Context 값을 가져올 수 있습니다.

2.3 API Key 사용하기

Remote Config에서 불러온 API 키를 애플리케이션 내에서 사용하는 방법을 설명합니다. 아래는 SavedResultsScreen 컴포넌트에서 Remote Config 값을 사용하는 예제입니다.

가져온 API 키를 애플리케이션 내에서 사용합니다. 예를 들어, axios를 사용하여 API 요청을 보낼 때 헤더에 API 키를 추가할 수 있습니다.

 

import { useRemoteConfig } from '../services/RemoteConfigContext'; // RemoteConfigContext 사용

const SavedResultsScreen = () => {

  const { OPENAI_API_KEY } = useRemoteConfig(); // Remote Config에서 OPENAI_API_KEY 가져오기

       

 

 

const response = await axios.post(

            'https://api.openai.com/v1/chat/completions',

            {

                model: 'gpt-4o-mini',

                messages: [{ role: 'user', content: examplePrompt }],

                max_tokens: 100,

                temperature: 0.9,

                top_p: 0.9,

            },

            {

                headers: {

                    'Content-Type': 'application/json',

                    Authorization: `Bearer ${OPENAI_API_KEY}`, // 여기서 사용

                },

            }

        );