하이브리드 앱은 네이티브 앱과 웹 앱의 장점을 결합한 것입니다. 네이티브 앱은 플랫폼에 특화된 언어와 도구를 사용하여 개발되며 최고의 성능과 사용자 경험을 제공합니다. 웹 앱은 웹 기술을 기반으로 하며 여러 플랫폼에서 동작하며 유지보수 및 배포가 용이합니다.
리액트 네이티브는 네이티브 앱을 만들기 위한 자바스크립트 라이브러리로, 리액트(React) 기반으로 동작합니다. 이를 사용하면 JavaScript 및 React에 익숙한 개발자들이 iOS 및 Android용 네이티브 앱을 만들 수 있습니다.
하이브리드 앱에서는 네이티브 기능에 접근할 수 있는 웹 기술을 사용하여 앱을 개발합니다. 예를 들어, Cordova나 Ionic 같은 프레임워크를 사용하여 웹 기술을 이용하여 앱을 개발하고, 네이티브 기능에 접근할 수 있는 플러그인을 사용합니다. 이러한 방식으로 개발된 앱은 다양한 플랫폼에서 실행될 수 있으며, 개발 및 배포가 편리합니다.
따라서 하이브리드 앱을 만들 때 리액트 네이티브를 사용할 수 있습니다. 이 경우 리액트 네이티브를 사용하여 네이티브 기능에 접근하고, 웹 기술을 활용하여 앱의 UI를 개발할 수 있습니다. 이는 네이티브 앱의 성능과 사용자 경험을 유지하면서도 웹 기술의 장점을 활용할 수 있는 좋은 방법입니다.
NHN AppGuard는 이러한 수요에 맞춰 NHN AppGuard React Native 앱 보호 기능을 추가하였습니다.
그럼 지금부터 NHN AppGuard React Native에 대해 자세히 알아볼까요?
지원 환경
- React Native 0.69.12 이상
NHN AppGuard React Native SDK 다운로드
NHN AppGuard의 모든 SDK는 NHN Cloud Console에서 다운로드할 수 있습니다.
1. NHN Cloud Console에 접속하여 조직>프로젝트의 Security> NHN AppGuard 서비스로 이동합니다.
2. 앱 보호 탭을 선택합니다.
3. 상단의 SDK 다운로드를 클릭합니다.
4. React Native SDK를 클릭하여 AppGuard-ReactNative.zip 파일을 다운로드합니다.
AppGuard SDK 설정
Android SDK 설정
AppGuard SDK 의존성 설정
1. 다운로드한 AppGuard-ReactNative.zip의 압축을 해제합니다.
2. libs/android/appguard-{version}.aar 파일을 앱 프로젝트의 libs 경로로 복사합니다.
3. 앱 수준의 build.gradle 파일에 아래와 같이 의존성을 추가합니다.
dependencies {
implementation files('lib/android/appguard-0.2.0.aar')
}
iOS SDK 설정
AppGuard.xcframework 추가
React Native 프로젝트의 ios 폴더에서 xcode workspace를 열어 프로젝트 설정을 합니다.
xcode프로젝트에서 다운로드한 iOS SDK의 AppGuard.xcframework를 추가합니다.
AppGuard iOS 연동
AppGuard Header Include
iOS 앱 프로젝트의 AppDelegate.mm에서 AppGuard/Diresu.h헤더를 Import 합니다.
#import <AppGuard/Diresu.h>
AppGuard 초기화 함수 추가
AppDelegate의 (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 메소드에 다음과 같이 AppGuard초기화 함수를 호출 합니다.
[Diresu s:APPKEY :USERID :APPNAME :VERSION];
- APPKEY(NSString*): NHN AppGuard 를 사용하는 NHN Cloud 프로젝트 Appkey
- USERID(NSString*): 앱을 실행하는 사용자 ID
- APPNAME(NSString*): NHN AppGuard 를 적용하는 앱의 이름
- VERSION(NSString*): 앱의 버전
예시
AppDelegate.mm
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
self.moduleName = @"rnsample";
// You can add your custom initial props in the dictionary below.
// They will be passed down to the ViewController used by React Native.
self.initialProps = @{};
[Diresu s:APPKEY :USERID :APPNAME :VERSION]; // AppGuard Initialize
return [super application:application didFinishLaunchingWithOptions:launchOptions];
}
React Native AppGuard
React Native AppGuard 설치 및 사용
Installation
npm을 사용하여 react-native-appguard를 설치합니다.
npm install react-native-appguard
UsingReact Native 프로젝트에서 라이브러리를 import 합니다.
import Diresu from 'react-native-appguard';
Functions
Diresu.s(u: string)
User ID를 설정합니다.
매개변수
· u:string - 설정하고자 하는 User ID 입니다.
예시
Diresu.s('user123');
Diresu.i(): Promise
Device ID를 가져옵니다.
반환
· Promise - 반환된 Deivce ID와 함께 호출되는 Promise입니다.
예시
Diresu.i().then(deviceId => {
console.log('Device ID:', deviceId);
});
Diresu.p(a: boolean)
탐지 팝업 사용 활성화/비활성화를 설정합니다.
매개변수
· a - 탐지 팝업 사용 활성화(true)/비활성화(false)를 나타냅니다.
예시
// 탐지 팝업 활성화
Diresu.p(true);
// 탐지 팝업 비활성화
Diresu.p(false);
Diresu.o(c: (message: string) => void)
콜백 함수를 등록하는 데 사용합니다.
매개변수
· c: (message: string) => void - 문자열을 매개변수로 받는 콜백 함수
예시
Diresu.o((message) => {
console.log('Callback message:', message);
});
앱 보호
Android 앱 보호
Android는 아래 3가지 방식으로 보호 작업을 진행할 수 있습니다.
- AppGuard 콘솔을 이용한 앱 보호
- AppGuard Android Plugin을 이용한 앱 보호
- AppGuard CLI를 이용한 앱 보호
AppGuard 콘솔 사용 가이드
콘솔 사용과 관련된 자세한 사항은 NHN AppGuard Console 사용자 가이드를 참조하여 주시기 바랍니다.
AppGuard Android Plugin 사용 가이드
AppGuard Android Plugin과 관련된 자세한 사항은 NHN AppGuard 플러그인 가이드를 참조하여 주시기 바랍니다.
AppGuard CLI 사용 가이드
웹 콘솔을 거치지 않고 빌드 단계에 보호작업이 포함될 수 있도록 빌드 자동화를 위한 CLI(command line interface) 빌드 툴을 제공합니다. 다운로드한 SDK 파일의 CLI 폴더에 OS별(Windows, Mac, Linux) 지원 바이너리를 확인할 수 있습니다.
Windows나 *nix 계열 운영체제에 맞는 스크립트 파일(AppGuard.cmd, AppGuard.sh)을 제공합니다. 스크립트 파일을 참고해 CLI에서 실행하면 됩니다. -h 옵션을 이용해 CLI 자체에서 각 옵션의 설명을 확인할 수도 있습니다.
NHN AppGuard CLI의 옵션은 아래와 같습니다. 필수 옵션을 모두 설정해야 CLI가 동작합니다. Linux, MacOS에서 CLI 사용 시 일부 권한 문제가 있을 수 있어 실행 권한이 추가되었는지 확인해야 합니다.
ReactNative는 NHN AppGuard Android 1.11.0.0 이상부터 지원됩니다.
옵션 | 설명 | 필수 여부 | 비고 |
-v | 웹 콘솔에서 확인할 수 있는 Appkey | Y | |
-k | 키스토어 파일의 전체 경로 | Y | |
-m | 키스토어 비밀번호 | Y | |
-a | 키스토어 앨리어스명 | Y | |
-p | 키스토어 앨리어스 비밀번호 | Y | |
-n | 원본 APK 파일의 전체 경로 | Y | |
-o | 보호된 APK 파일의 다운로드 경로 | Y | |
--business --enterprise --game |
보호 기능 정책 세 가지 중 하나를 입력 - Business 정책 적용 : --business - Enterprise 정책 적용 : enterprise - Game 정책 적용 : --game |
Y | |
--protectionVersion | NHN AppGuard 버전 지정 | Y | |
--as | Google Play, 원스토어 등의 스토어 서명 방식을 사용하는 경우 앱 서명 키 (SHA-256) 입력 (최대 10개의 서명 값 전달 가능) --as 또는 --no-as 옵션 중 1개는 필수로 선택되어야 합니다 |
Y | |
--no-as | apk 또는 aab에 서명된 정보 외의 서명을 허용하지 않을 경우 --as 또는 --no-as 옵션 중 1개는 필수로 선택되어야 합니다 |
Y | |
--react-native | React Native Bundle 보호 요청 | N | 1.11.0.0 이상부터 사용 가능 |
--jsbundle | React Native의 경우 bundle 파일명 (기본 값: index.android.bundle) |
N | 1.11.0.0 이상부터 사용 가능 |
--google-automatic-integrity-protection | 글 자동 무결성 보호 기능을 사용 여부 (기본 값 : 미 사용) |
N |
CLI 사용 예시
AppGuard \
-n input.aab \
-o output_protected.aab \
-v "appkey" \
-k "keystore" \
-m "password" \
-a "key store alias" \
-p "alias password" \
--enterprise \
--protectionVersion 1.11.0.0 \
--react-native \
--jsbundle "index.android.bundle" \
--as 4c:2d:2s...(sha-256) \
--as 3f:2d:4d...(sha-256)
iOS 앱 보호
앱 보호 작업을 통해 변조 차단 기능을 강화할 수 있으며 Business 외 플랜 사용이 가능합니다. 앱 보호 작업은 플랜 선택을 하기 위해서는 필수 옵션이며, 업로드를 통한 앱 보호 작업을 수행하지 않고 SDK 만 적용하면 Business 플랜이 적용됩니다.
보호작업을 통한 보호 기능 강화
- 무결성 검증
- 코드영역 무결성 검증
- 바이너리 변조 검증
- React Native bundle 암호화, 무결성 검증
- 서명자 검증(CLI를 통한 보호작업 적용 시 적용)
- 기본 정책 적용(디바이스가 오프라인 상태 등으로 NHN AppGuard 정책서버와 통신이 불가능한 경우 적용)
- 다양한 플랜(Enterprise, Game)
- React Native 앱의 경우 Enterprise이상부터 적용이 가능합니다.
CLI를 통한 보호 적용
NHN AppGuard에서 제공하는 CLI를 이용해 앱 보호를 할 수 있습니다. 다음과 같이 AppGuard-CLI 파일이 준비되어 있는 것을 확인합니다.
- AppGuard_iOS_CLI: 앱 보호 작업 및 재서명을 수행하기 위한 CLI 프로그램
- certificate/: 앱 보호작업 시 HTTPS 통신을 위한 인증서
다음과 같이 AppGuard-CLI를 --react-native 인자와 함께 실행하여 React Native앱을 보호할 수 있습니다.
AppGuard_iOS_CLI -n "reactnativeapp.ipa" -o "output.ipa" -v "APP_KEY" --enterprise/--game --react-native
React Native앱의 bundle이름이 main.jsbundle이 아닌 경우 -jsbundle Arugment를 이용해 다음과 같이 명시할 수 있습니다.
AppGuard_iOS_CLI -n "reactnativeapp.ipa" -o "output.ipa" -v "APP_KEY" --enterprise/--game --react-native "other.jsbundle"
- Arguments
Arguments | 필수 | 설명 |
-n | O | 보호작업을 하기 위한 IPA 이름(경로) |
-o | O | 보호작업완료후사용할IPA이름 |
-v | O | NHN AppGuard 콘솔에서 사용하는 Appkey |
--enterprise --game |
O | 적용할 플랜 선택 --enterprise: Enterprise 플랜 --game: Game 플랜 |
--react-native | React Native앱일 경우 필수 | React Native 앱을 명시합니다. |
-jsbundle | X | React Native의 jsbundle파일 명을 명시합니다. 입력하지 않을 경우 main.jsbundle로 간주합니다. |
- React Native 앱의 경우 --class_obf Argument를 사용할 수 없습니다.
이제 React Native 앱 보호로 안전하게 모바일을 보호해 보세요!
'BLOG > 적용Tip' 카테고리의 다른 글
알림 설정 기능 소개 - NHN AppGuard (0) | 2024.05.14 |
---|---|
개별 차단 기능 소개 - NHN AppGuard (0) | 2024.04.18 |
[참고] NHN AppGuard 요금제가 궁금하다! (0) | 2024.02.15 |
[참고] AppKey는 어떻게 확인 하나요? (0) | 2023.10.31 |
[참고] NHN AppGuard가 잘 적용이 되었는지 어떻게 확인하나요? (0) | 2023.10.31 |