헥토데이터 로그인 및 헥토데이터 바로가입 개발 가이드

연동 가이드

FinpongPlusLibrary 연동 가이드

※ FinpongPlusLib를 적용 하시려면 먼저 <a href="#">ClientId와 Secure Code를 발급</a> 받으셔야 합니다.

---

# NativeModules 설정

React Native의 NativeModules를 사용하여 핀퐁플러스를 시작할 수 있습니다.
각 OS 별 라이브러리 및 NativeModules 설정 후 Method 호출하여 사용합니다. 
※ Native Modules 설정 가이드 https://reactnative.dev/docs/native-modules-intro

---

# ** 1. 사전준비 **

## 1.1  Android 설정 방법

## 1.1.1 Gradle script 적용 방법
* 서비스 앱 프로젝트의 gradle파일에 dependency를 추가합니다.

```kotlin
dependencies {
        ...
        			implementation("androidx.constraintlayout:constraintlayout:2.1.4")
                    implementation("org.conscrypt:conscrypt-android:2.5.2")
                    implementation files('libs/FinpongPlusLib-x.x.x.aar')

// Java일 경우만 추가
                    implementation "org.jetbrains.kotlin:kotlin-stdlib:{KOTLIN_VERSION}"
        ...

}
```

## 1.1.2 Android Manifest 적용 방법

* Android Manifest 파일에 아래와 같이 세팅합니다.
   * manifest 태그 하위에 아래 권한을 추가합니다.

```xml

<uses-permission android:name="android.permission.INTERNET" />

```

* application 태그 하위에 아래 액티비티를 추가합니다.

```xml

<activity android:name="io.codef.finpongpluslib.ui.FinpongPlusActivity"
 android:launchMode="singleTask"
 android:exported="true">
 <intent-filter>
 <action android:name="android.intent.action.VIEW" />
 <category android:name="android.intent.category.DEFAULT" />
 <category android:name="android.intent.category.BROWSABLE" />

<data android:scheme="{USER_SCHEME}" />
 </intent-filter>
</activity>
```
(!) **USER_SCHEME**
* 핀퐁플러스에서 인증 앱(네이버, 핀퐁 등)으로 이동하여 인증 완료 후 기존 핀퐁플러스 화면으로 복귀를 위함

(!) **API 30 이상을 타겟으로 하는 앱**
* API 30 이상을 타겟으로 하는 앱은 아래와 같이 `<queries>` 태그를 설정해주세요.

```xml
<queries>
 <package android:name="com.nhn.android.search" />
 <package android:name="viva.republica.toss" />
 <package android:name="com.finpong.app" />
 ...
</queries>
```

(!) **API 31 이상을 타겟으로 하는 앱**
* API 31 이상을 타겟으로 하는 앱에서 인텐트 필터를 사용할 경우 android:exported="true" 혹은 android:exported="false" 설정이 필요합니다.

## 1.1.3 ReactWrapperModule 클래스 생성

```kotlin

...
import com.facebook.react.bridge.ReactApplicationContext
import com.facebook.react.bridge.ReactContextBaseJavaModule
import com.facebook.react.bridge.ReactMethod
import io.codef.finpongpluslib.FinpongPlusInterface
import io.codef.finpongpluslib.FinpongPlusManager
import io.codef.finpongpluslib.utils.FinpongPlusMode

class ReactWrapperModule(
	private val context: ReactApplicationContext
): ReactContextBaseJavaModule(), FinpongPlusInterface {

override fun getName(): String {
        return "ReactWrapperModule"
    }
    
    @ReactMethod
    fun finpongPlusInit() {
        FinpongPlusManager.setInterface(this)

// 로그 노출 여부
        FinpongPlusManager.showLog(true)

// 핀퐁플러스 서버 선택
        FinpongPlusManager.setMode(FinpongPlusMode.STAGING)
//         FinpongPlusManager.setMode(FinpongPlusMode.RELEASE)

// 색상 설정
        FinpongPlusManager.setProgressBarColor(R.color.white) // 첫실행시 프로그래스 색상 설정
        FinpongPlusManager.setBackgroundColor(R.color.black)  // 배경색 설정
    }

@ReactMethod
    fun finpongPlusStart(token: String) {
        FinpongPlusManager.setToken(token)
        FinpongPlusManager.startFinpongPlus(context)

// 필요 시 context와 entry("0" = 디폴트, "1" = 설정된 페이지) 값 설정
//        FinpongPlusManager.startFinpongPlus(context=this, entry="0")
    }
    
    override fun onCloseActivity(finpongPlusActivity: Activity) {
        ...
    }

override fun onCustomAction(pageId: String, param: String, finpongPlusActivity: Activity) {
        ...
    }

override fun onOpenURIScheme(type: String, appScheme: String) {
		...
    }
}

```

## 1.1.4 ReactWrapperPackage 클래스 생성

```kotlin
class ReactWrapperPackage: ReactPackage {
 override fun createNativeModules(p0: ReactApplicationContext): List<ReactWrapperModule> {
 val modules: ArrayList<ReactWrapperModule> = ArrayList()
 modules.add(ReactWrapperModule(p0)) // 생성한 ReactWrapperModule 을 추가해 줍니다.

return modules.toList()
    }

override fun createViewManagers(p0: ReactApplicationContext): MutableList<ViewManager<View, ReactShadowNode<*>>> {
 return Collections.emptyList()
 }
}

```

## 1.1.5 MainApplication 수정
```kotlin
class MainApplication : Application(), ReactApplication {

override val reactNativeHost: ReactNativeHost =
 object : DefaultReactNativeHost(this) {
 override fun getPackages(): List<ReactPackage> =
 PackageList(this).packages.apply {
 // Packages that cannot be autolinked yet can be added manually here, for example:
 add(ReactWrapperPackage()) // 생성한 ReactWrapperPackage 를 추가해 줍니다.
 }

override fun getJSMainModuleName(): String = "index"

override fun getUseDeveloperSupport(): Boolean = BuildConfig.DEBUG

override val isNewArchEnabled: Boolean = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED
        override val isHermesEnabled: Boolean = BuildConfig.IS_HERMES_ENABLED
      }

override val reactHost: ReactHost
    get() = getDefaultReactHost(applicationContext, reactNativeHost)

override fun onCreate() {
    super.onCreate()
    SoLoader.init(this, false)
    if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
      // If you opted-in for the New Architecture, we load the native entry point for this app.
      load()
    }
  }
}
```

## 1.2  iOS 설정 방법

## 1.2.1 다운로드 및 프로젝트에 추가
다운로드한 압축파일을 해제하면 FinpongPlusLib.xcframework 폴더가 존재합니다.
해당 xcframework를 프로젝트에 추가하고 FinpongPlusLib를 사용할 타겟을 설정합니다.

## 1.2.2 프로젝트 설정

* 타켓을 선택 한 후, General => Frameworks, Libraries, and Embed Content 에 **FinpongPlusLib.xcframework** 를 추가 합니다.
> ![img_ios-finpongplus-third-sdk-guide.png](./static/img/guide/1.2image.Framework.png)

* min target 11.0 이상으로 설정 합니다.
  * Deployment Info
> ![img_ios-webkit2-mintarget.png](./static/img/guide/1.2image.mintarget.png)

## 1.2.3 ReactWrapperModule.h 파일 생성

```objective-c
#import <React/RCTBridgeModule.h>
#import "FinpongPlusLib/FinpongPlusLib.h"

@interface ReactWrapperModule : NSObject <RCTBridgeModule, FinpongPlusDelegate> {
 FinpongPlusScreen *_finpongPlus;
}

@end

```

## 1.2.4 ReactWrapperModule.m 파일 생성

```objective-c
#import "ReactWrapperModule.h"

@implementation ReactWrapperModule

RCT_EXPORT_METHOD(finpongPlusInit)
{
  dispatch_async(dispatch_get_main_queue(),^{
    self->_finpongPlus = [[FinpongPlusScreen alloc] init];      // initialize
    self->_finpongPlus.finpongPlusDelegate = self;              // FinPongPlus 델리게이트 설정
    self->_finpongPlus.modalPresentationStyle = UIModalPresentationFullScreen;      // 전체 화면으로 설정
    
    /*
     * Codef에서 발급받은 토큰을 입력해 주세요.
     */
    
    self->_finpongPlus.mode = ModeSTAGING;  // 모드설정
    self->_finpongPlus.entry = @"0";        // 엔트리설정
    self->_finpongPlus.log = false;         // 로그출력설정
  });
  
  
  
  
}

RCT_EXPORT_METHOD(finpongPlusStart: (NSString *)token)
{
  dispatch_async(dispatch_get_main_queue(),^{
    self->_finpongPlus.codefToken = token;
    
    [[[[[UIApplication sharedApplication] delegate] window] rootViewController] presentViewController:self->_finpongPlus animated:true completion:^{
      
    }];
  });
  
}

RCT_EXPORT_MODULE(ReactWrapperModule);

- (void)onCloseScreenWithFinpongPlusScreen:(FinpongPlusScreen * _Nonnull)finpongPlusScreen {
  // FinPongPlus 뷰 컨트롤러를 종료합니다.
  [finpongPlusScreen dismissViewControllerAnimated:YES completion:nil];
}

- (void)onCustomActionWithFinpongPlusScreen:(FinpongPlusScreen * _Nonnull)finpongPlusScreen pageId:(NSString * _Nonnull)pageId param:(NSString * _Nonnull)param {
  
}

- (void)onOpenURISchemeWithFinpongPlusScreen:(FinpongPlusScreen * _Nonnull)finpongPlusScreen type:(NSString * _Nonnull)type appScheme:(NSString * _Nonnull)appScheme {
  
}

@end
```

## 1.3 OS별 설정
해당 가이드는 React Native 연동 방법에 대한 설명입니다. 
라이브러리 사용법에 대해서는 각 OS별 가이드를 참고해주시길 바랍니다.
[Android 가이드](./android.html)
[iOS 가이드](./ios.html)

# ** 2. FinpongPlus 실행하기 **

```jsx
import {
  ...
  NativeModules
} from 'react-native';

function App(): React.JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';

const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

const { ReactWrapperModule } = NativeModules;

ReactWrapperModule.finpongPlusInit();

return (
 <SafeAreaView style={backgroundStyle}>
 <StatusBar
 barStyle={isDarkMode ? 'light-content' : 'dark-content'}
 backgroundColor={backgroundStyle.backgroundColor}
 />

<View style={styles.container}>
 <TouchableOpacity activeOpacity={0.5} style={styles.button} 
 onPress={() => {
 ReactWrapperModule.finpongPlusStart("발급받은 토큰을 입력해 주세요.");
 }
 >
 <Text style={styles.text}>핀퐁플러스 시작하기</Text>
 </TouchableOpacity>
 </View>

</SafeAreaView>
 );
}
```

맨위로 이동

헥토데이터 개발자센터

본문영역

연동 가이드

FinpongPlusLibrary 연동 가이드