메인 메뉴로 바로가기
본문으로 바로가기
헥토데이터 개발자센터
연동 가이드
본문영역
연동 가이드
시작하기
FinpongPlusLibrary
Flow Chart
Android
iOS
Flutter
React Native
Error Code List
Library 다운로드
FinpongPlusLibrary
연동 가이드
Flow Chart
Android
iOS
Flutter
React Native
※ FinpongPlusLib를 적용 하시려면 먼저 <a href="#">ClientId와 Secure Code를 발급</a> 받으셔야 합니다. --- # 1. 사전준비 ## 1.1 Gradle script 적용 방법 * 서비스 앱 프로젝트의 gradle파일에 dependency를 추가합니다. ```kotlin dependencies { ... 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.2 Android Manifest 적용 방법 * Android Manifest 파일에 아래와 같이 세팅합니다. * manifest 태그 하위에 아래 권한을 추가합니다. ```xml <!-- [FinpongPlusLib] permissions 세팅 --> <uses-permission android:name="android.permission.INTERNET" /> <!-- //[FinpongPlusLib] permissions 세팅 --> ``` * application 태그 하위에 아래 액티비티를 추가합니다. ```xml <!-- FinpongPlus activity 세팅 --> <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" 설정이 필요합니다. # 2. FinpongPlusLib 실행하기 ## 2.1 Application 에 아래의 내용을 추가합니다. * FinpongPlus를 호출합니다. * 반드시 Backend에서 미리 token을 발급 받아야 합니다. * FinpongPlus를 실행시키는 Activity에서 <u>**FinpongPlusInterface**를 implements</u> 합니다. * mode를 선택 할 수 있습니다. ```kotlin ... import io.codef.finpongpluslib.FinpongPlusInterface import io.codef.finpongpluslib.FinpongPlusManager import io.codef.finpongpluslib.utils.FinpongPlusMode class SampleActivity : AppCompatActivity(), FinpongPlusInterface { ... override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) FinpongPlusManager.setInterface(this) // 로그 노출 여부 FinpongPlusManager.showLog(true) // 핀퐁플러스 서버 선택 FinpongPlusManager.setMode(FinpongPlusMode.STAGING) // FinpongPlusManager.setMode(FinpongPlusMode.RELEASE) // 색상 설정 FinpongPlusManager.setProgressBarColor(R.color.white) // 첫실행시 프로그래스 색상 설정 FinpongPlusManager.setBackgroundColor(R.color.black) // 배경색 설정 // 버튼을 클릭 했을 때 FinpongPlus 실행 btn.setOnClickListener { FinpongPlusManager.setToken(token= "eyJ0e...QINWU") // 토큰 값 설정 FinpongPlusManager.startFinpongPlus(context= this) // context 설정 // 필요 시 context와 entry("0" = 디폴트, "1" = 설정된 페이지) 값 설정 // FinpongPlusManager.startFinpongPlus(context=this, entry="0") } ``` ## 필수(required) - **setInterface**(finpongPlusInterface :FinpongPlusInterface): FinpongPlus 이벤트를 콜백 받을 Interface를 연결 합니다. - **setMode**(finpongPlusMode :FinpongPlusMode): RELEASE, STAGING 2가지 모드를 설정 가능합니다.. - **setToken**(token :String): Backend에서 받은 Token를 설정합니다. - **startFinpongPlus**(context :Context): FinpongPlus를 실행 시킵니다. - **startFinpongPlus**(context :Context, entry :String): FinpongPlus를 실행 시키며, 초기 페이지(entry)를 설정합니다. ## 선택(optional) - **showLog**(isShow :Boolean): 핀퐁플러스의 로그의 노출 여부를 설정합니다. - **setProgressBarColor**(color :Int): FinpongPlus 실행시 보이는 ProgressBar의 색상 적용 - **setBackgroundColor**(color :Int): FinpongPlus 실행시 기본적으로 적용될 배경색을 적용 ## 2.2 entry 설명 (startFinpongPlus 호출시 파라미터) | entry | 진입 페이지 | 예시 | |---|:---:|---| | `"0"` | 기본(default) 페이지 | 업권 메인페이지 (마이보험, 마이투자) | | `"1"` | 설정된 커스텀 페이지 | 마이데이터 연동관리 페이지 | ## 2.3 setMode() 설명 | mode | 내 용 | URL| |---|:---:|---| | `STAGING` | Staging Page (개발 진행 시) | `tapi.finpong.com` | | `RELEASE` | Product Page (운영 시) | `api.finpong.com` | <!-- ## 2.2 Activity에 아래의 내용을 추가합니다. * 메인 혹은 로그인 Activity의 onActivityResult 메소드를 오버라이드 해서 PaycoLoginManager.getInstance().onActivityResult(...) 코드를 삽입하기 * 로그인의 결과를 받기 위함이기 때문에, 로그인을 호출하는 액티비티의 onActivityResult 에서 호출해야 합니다. ```java @Override protected void onActivityResult(int requestCode, int resultCode, Intent data) { super.onActivityResult(requestCode, resultCode, data); PaycoLoginManager.getInstance().onActivityResult(this, requestCode, resultCode, data); } ``` --> # 3. FinpongPlusLib 닫기 ## 3.1 아래의 내용을 추가 합니다. (닫기 이벤트) ```kotlin override fun onCloseActivity(finpongPlusActivity: Activity) { finpongPlusActivity.finish() } ``` # 4. FinpongPlusActivity에 CustomView 설정 ## 4.1 FinpongPlus화면 내부에 원하는 뷰를 설정하려면 아래 내용을 추가합니다. * startFinpongPlus 호출 전에 설정 필수 * 커스텀뷰 생성은 레이아웃을 전달하는 방법과 View 객체를 전달하는 방법 두가지로 오버로딩되어 있음 * 초기 생성시 visibility 상태는 GONE (1.0.4 이전 버전에서는 layout.xml에서 GONE설정 필요) ```kotlin // 레이아웃 전달 방법 FinpongPlusManager.setCustomView(R.layout.sample_layout, R.id.sample_btn, { // 클릭 이벤트 }) ``` ```kotlin // 뷰 객체 전달 방법 val sampleBtn = Button(this) sampleBtn.text = "sampleButton" FinpongPlusManager.setCustomView(sampleBtn) ``` ## 4.2 setCustomView 매개변수(Parameter) 설명 ```kotlin FinpongPlusManager.setCustomView(layoutId: Int, viewId: Int, onClickListener: View.OnClickListener) ``` (1) **layoutId**: 추가하고자 하는 layout.xml의 id값을 입력 (2) **viewId**: 추가한 layout 내부에 클릭이벤트를 주고자하는 view의 id 입력 (3) **onClickListener**: 추가한 뷰의 클릭이벤트 입력 ```kotlin FinpongPlusManager.setCustomView(view: View) ``` (1) **view**: 추가하고자 하는 View ## 4.3 CustomView 테스트모드 설명 ```kotlin FinpongPlusManager.setTestCustomView(isTest = true) ``` * **setTestCustomView**(isTest:Boolean): 위와 같이 생성한 customView의 초기 상태는 Gone 이므로 테스트 시 뷰 확인 필요시 true로 설정 ## 4.4 CustomView 가시성(visibility) 설명 ```kotlin FinpongPlusManager.isVisibleCustomView(state) ``` * **isVisibleCustomView**(state:String): Visibility 설정값 String "SHOW" , "HIDE" 값으로 설정 * 아래 6.1과 같이 onCustomAction에서 정의 필수 # 5. 사설인증서 호출하기 | 간편인증 기관 | type(String) | packageName | |---|:---:|---| | `네이버` | `1` | `com.nhn.android.search` | | `토스` | `3` | `viva.republica.toss` | | `핀퐁` | `4` | `com.finpong.app` | | `PASS(SKT)` | `5` | `com.sktelecom.tauth` | | `PASS(KT)` | `6` | `com.kt.ktauth` | | `PASS(LG)` | `7` | `com.lguplus.smartotp` | | `카카오` | `9` | `com.kakao.talk` | * 5.1 아래의 내용을 추가 합니다. (인증 앱의 스킴값을 받아 실행시키거나, 미설치시 설치 페이지로 이동하도록 합니다) ```kotlin override fun onOpenURIScheme(type: String, appScheme: String) { try { val intent = Intent.parseUri(appScheme, Intent.URI_INTENT_SCHEME) intent.flags = Intent.FLAG_ACTIVITY_NEW_TASK startActivity(intent) } catch (e: ActivityNotFoundException) { // 인증앱이 설치되어 있지 않아 설치유도 진행 val packageName = when (type) { "1" -> "com.nhn.android.search" // 네이버 "3" -> "viva.republica.toss" // 토스 "4" -> "com.finpong.app" // 핀퐁 "5" -> "com.sktelecom.tauth" // PASS(SKT) "6" -> "com.kt.ktauth" // PASS(KT) "7" -> "com.lguplus.smartotp" // PASS(LG) "9" -> "com.kakao.talk" // 카카오 else -> "" } if (packageName.isEmpty()) { Toast.makeText(this, "인증 오류", Toast.LENGTH_SHORT).show() return } Toast.makeText(this, "해당 앱이 설치되어 있지 않습니다. 설치 후 진행하세요", Toast.LENGTH_SHORT).show() Intent(Intent.ACTION_VIEW).apply { data = Uri.parse("market://details?id=$packageName") startActivity(this) } } } ``` # 6. FinpongPlusLib와 Application 통신하기 | pageId | param | 설명 | |---|:---:|---| | `FD-001` | `다운로드url` | `파일 다운로드 Action` | | `PA-001` | `팝업호출("SHOW"/"HIDE")` | `고객사에서 제작한 업로드 팝업 호출여부 Action` | | `VV-001` | `CustomView상태` | `추가한 CustomView의 페이지별 visibility 상태를 받아서 설정` | | `IV-001` | `CustomView상태("HIDE")` | `라이브러리 호출 후 최초 화면 로딩 완료 시 호출되는 Action.` <br> `CustomView를 통해 로딩화면 사용 시 visibility 상태를 받아서 설정` | ## 6.1 아래의 내용을 추가 합니다. (사전에 협의된 커스텀 동작 및 이벤트를 추가합니다) ```kotlin override fun onCustomAction(pageId: String, param: String, finpongPlusActivity: Activity) { //특정 제어 필요시 finpongPlusActivity 사용 (ex. 다이얼로그 생성) when (pageId) { "VV-001" -> { val state = param FinpongPlusManager.isVisibleCustomView(state) } "FD-001" -> { val downLoadUrl = param //파일다운로드 구현부 } "PA-001" -> { // 업로드 팝업 호출 } "ACT1000" -> { //ACT1000으로 액션을 받고 param으로 json 데이터를 받은경우 //val paramObj = JSONObject(param) } "ACT2000" -> { //ACT2000으로 액션을 받은경우 } "IV-001" -> { /** * FinpongPlus 로딩 뷰 Hide * 로딩 뷰 설정 시 사용하시면 됩니다.(필수 x) */ FinpongPlusManager.isVisibleCustomView(param) /** * FinpongPlus 커스텀 뷰 클릭 이벤트 설정 * 커스텀 뷰가 필요한 경우 사용하시면 됩니다.(필수 x) */ FinpongPlusManager.setCustomView(R.layout.custom_view, R.id.custom_button) { Toast.makeText(this, "커스텀 뷰 클릭 이벤트 호출", Toast.LENGTH_SHORT).show() } FinpongPlusManager.isVisibleCustomView("SHOW") } } } ``` (!) **ACT1000**: FinpongPlus의 버튼ID를 ACT1000 으로 정의 한 경우. (!) **ACT2000**: FinpongPlus의 버튼ID를 ACT2000 으로 정의 한 경우. ## 6.2 FinpongPlusLib Script 호출 ```kotlin val jsonString = "{\"data1\": 1, \"data2\": true}" FinpongPlusManager.runJavaScript("scriptName", jsonString) ``` ## 6.3 파일 다운로드 / 업로드 * 파일다운로드 & 업로드 가이드 사전 작업 : 업로드 팝업(업로드 동의/비동의 선택 팝업)을 고객사에서 제작합니다. * 웹뷰 내에서 파일데이터를 다운받고, 업로드 처리 후 업로드 결과값을 핀퐁플러스로 전달합니다. 1. onCustomAction pageId값이 PA-001로 들어왔을때 고객사 업로드 팝업을 호출합니다. 2. 고객사 업로드 팝업에서 동의 선택시 동의여부값을 전달합니다. finpongPlus의 fileDataConnect 함수 호출 <br/>* 다운로드 한 데이터가 전달됩니다. (pageId : FD-001) ```kotlin val jsonString = "{" + "\"isUpload\":false," + // 업로드 여부 N "\"uploadRes\":\"\"," + "\"uploadMsg\":\"\"," + "\"isAgree\":\"Y\"" + // 동의 여부 Y "}" FinpongPlusManager.runJavaScript("fileDataConnect", jsonString) ``` <br/> 3. 다운로드 데이터를 받아 고객사에서 업로드 처리 후 업로드 결과값을 전달합니다. finpongPlus의 fileDataConnect 함수 호출 ```kotlin val jsonString = "{" + "\"isUpload\":true," + // 업로드 여부 Y "\"uploadRes\":\"\"," + // 업로드 성공 여부 코드 : 성공(success) / 실패(fail) "\"uploadMsg\":\"\"," + // 업로드 결과 메세지 (성공, 실패 메세지) "\"isAgree\":\"Y\"" + "}" FinpongPlusManager.runJavaScript("fileDataConnect", jsonString) ``` <!-- # 7. 샘플 다운받기 * [Android 샘플 프로젝트](http://download.heenam.co.kr/finpong/source/And_finpongplus_sample.zip)를 받으세요. --> # 7. 추가 가이드 ## 7.1 의존 라이브러리 | Name | Reference | Version | License | | --- | --- | --- | --- | | conscrypt | https://github.com/google/conscrypt/ | 2.5.2 | Apache License 2.0 | ## 7.2 지원 android 최소 SDK 버전 * 21 이상 부터 지원합니다.
맨위로 이동