finpong_plus 0.1.1

Finpong Plus Widget

finpong_plus

HectoData MyData Platform FinpongPlus

Getting Started

Finpong Guide

• FinpongPlus를 적용 하시려면 먼저 ClientId와 Secure Code를 발급 받으셔야 합니다.

---

1. 사전준비

• package link 최신버전 확인
• 사설 인증앱에서 인증 완료 후 나의 앱으로 복귀를 위해 IOS, AOS 각 scheme값 설정 필수

1.1 pubspec.yaml 추가

• 서비스 앱 pubspec.yaml 의 dependencies에 추가합니다.

dependencies:
  finpong_plus: ^x.y.z

또는 터미널에서

$ flutter pub add finpong_plus

2. FinpongPlus 실행하기

2.1 Application 에 아래의 내용을 추가합니다.

• FinpongPlusWidget을 원하는 위치에 생성합니다.
• 반드시 token을 발급 받아야 합니다.

import 'package:finpong_plus/finpong_plus.dart';

FinpongPlusWidget(  
		  token: 'eyJ0e...QINWU',
             finpongPlusController: finpongPlusController,
		  entry: '1',  
		  serverMode: ServerMode.staging,  
		  backgorundColor: Colors.white,  
		  onUriScheme: (type, scheme) {  
		  //사설 인증서 호출 (앱스킴 실행)  
		  },  
		  onCustomAction: (pageId, params) {  
		  //사전 정의된 핀퐁플러스의 액션을 앱에서 처리를 위함  
		  },  
		  onCloseAction: () {  
		  //핀퐁플러스 닫기  
		  },  
		  onPageLoadStarted: () {  
		  //핀퐁플러스 페이지 로드 시작  
		  },  
		  onPageLoadFinished: () {  
		  //핀퐁플러스 페이지 로드 종료  
		  },  
)

필수(required)

• token :String - 발급 받은 token 값을 입력
• onUriScheme(String type, String appScheme) - 핀퐁플러스에서 사설 인증서 앱 호출
• onCustomAction(String pageId, String params) - 사전 정의된 핀퐁플러스 액션을 처리
• onCloseAction( ) - 핀퐁플러스에서 종료 이벤트 발생

선택(optional)

• entry :String - 초기 페이지를 설정 (2.2 참고)
• serverMode :ServerMode - release, staging 2가지 모드를 설정 가능 (2.3 참고)
• backgorundColor:Color - 실행시 기본적으로 적용될 배경색을 적용
• onPageLoadStarted( ) - 페이지 로드 시작 이벤트
• onPageLoadFinished( ) - 페이지 로드 종료 이벤트

2.2 entry 설명

entry	진입 페이지	예시
"0"	기본(default) 페이지	업권 메인페이지 (마이보험, 마이투자)
"1"	설정된 커스텀 페이지	마이데이터 연동관리 페이지

• 단, 해당 계정이 최초로 접근하여 약관동의를 하지 않았을 경우 entry 값과 관계없이 서비스 및 약관 동의 페이지로 이동합니다.
• 커스텀하게 추가 가능합니다.

2.3 ServerMode 설명

mode	내 용	URL
staging	Staging Page (개발 진행 시)	tapi.finpong.com
release	Product Page (운영 시)	api.finpong.com

3. 사설인증서 호출하기

Android	IOS
간편인증 기관 type(String) packageName(String) 네이버 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	간편인증 기관 type(String) appId(String) 네이버 1 393499958 토스 3 839333328 핀퐁 4 1611667407 PASS(SKT) 5 1141258007 PASS(KT) 6 1134371550 PASS(LG) 7 1147394645 카카오 9 362057947

3.1 아래의 내용을 추가 합니다. (인증 앱의 스킴값을 받아 실행시키거나, 미설치시 설치 페이지로 이동하도록 합니다)

	onUriScheme: (type, scheme) {  
		/**  
		 * todo  
		 * 앱스킴으로 해당 사설 인증앱 실행 코드 작성  
		 * 앱 미설치일 경우 설치 유도 코드 작성  
		 */
	}

• 사설 인증앱에서 인증 완료 후 나의 앱으로 복귀를 위해 IOS, AOS 각 scheme값 설정하여야 합니다.

4. FinpongPlus와 Application 통신하기

4.1 아래 내용을 추가 합니다. (사전에 협의된 커스텀 동작 및 이벤트를 추가합니다)

	onCustomAction: (pageId, params) {  
	  //사전 정의된 핀퐁플러스의 액션을 앱에서 처리  
	  switch(pageId){  
	  case 'ACT1000':  
	      //ACT1000으로 정의한 액션을 받고 param으로 json 데이터를 받음  
	  break;
	  case 'ACT2000':
	      //toDo
	  break;  
	  ...  
	  }  
	}

(!) ACT1000: FinpongPlus의 버튼ID를 ACT1000 으로 정의 한 경우.
(!) ACT2000: FinpongPlus의 버튼ID를 ACT2000 으로 정의 한 경우.

4.2 FinpongPlus Script 호출

FinpongPlusWidget 생성시 FinpongPlusController 를 생성하여 추가 해줍니다.

     FinpongPlusWidget(    
       token: 'eyJ0e...QINWU',  
	finpongPlusController: finpongPlusController,
	...

필요시 runJavaScript 실행.

     var testData = {"data1": 1, "data2": true};
     String jsonString = jsonEncode(testData);
     
     finpongPlusController.runJavaScript('scriptName',jsonString);

4.3 파일 다운로드 / 업로드

• 파일다운로드 & 업로드 가이드
  사전 작업 : 업로드 팝업(업로드 동의/비동의 선택 팝업)을 고객사에서 제작합니다.
• 웹뷰 내에서 파일데이터를 다운받고, 업로드 처리 후 업로드 결과값을 핀퐁플러스로 전달합니다.

1. onCustomAction pageId값이 PA-001로 들어왔을때 고객사 업로드 팝업을 호출합니다.
2. 고객사 업로드 팝업에서 동의 선택시 동의여부값을 전달합니다. finpongPlus의 fileDataConnect 함수 호출 다운로드 한 데이터가 전달됩니다. (pageId : FD-001)

     var testData = {
       isUpload:false,     // 업로드 여부 N
       uploadRes:'',
       uploadMsg:'',
       isAgree : 'Y'.     // 동의 여부 Y
     }

     String jsonString = jsonEncode(testData);

     finpongPlusController.runJavaScript('fileDataConnect',jsonString);

3. onCustomAction pageId값이 PA-001로 들어왔을때 고객사 업로드 팝업을 호출합니다.

      var testData = {
        isUpload:true,     // 업로드 여부 Y
        uploadRes:'success',      // 업로드 성공 여부 코드 : 성공(success) /실패(fail) 
        uploadMsg:'업로드 성공하였습니다',  // 업로드 결과 메세지 (성공, 실패 메세지)
        isAgree : 'Y'
      }
    
      String jsonString = jsonEncode(testData);
    
      finpongPlusController.runJavaScript('fileDataConnect',jsonString);