finpong_plus 0.1.8 
finpong_plus: ^0.1.8 copied to clipboard
Finpong Plus Widget
finpong_plus #
HectoData MyData Platform FinpongPlus
Getting Started #
- 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
1.2 앱 스키마 등록 #
-
핀퐁플러스에서 인증 앱(네이버, 카카오 등)으로 이동하여 인증 완료 후 기존 핀퐁플러스 화면으로 복귀를 위해 OS별 앱 스키마를 등록해 줍니다.
-
Android - AndrdoidManifest.xml 파일
-
사용 할 activity 태그 하위에 아래와 같이 설정합니다. ex) MainActivity
<manifest xmlns:android="http://schemas.android.com/apk/res/android"> <application ... > <activity android:name=".MainActivity" 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="사용할 앱 스킴을 입력해 주세요." /> </intent-filter> </activity> ... </application> </manifest>
-
-
IOS - info.plist 파일
-
CFBundleURLTypes에 사용할 앱 스킴을 설정합니다.
-
LSApplicationQueriesSchemes에 간편인증 앱 실행을 위한 인증 앱 스킴을 설정합니다.
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd"> <plist version="1.0"> <dict> ... <!-- 간편인증 후 돌아오기 위한 앱 스킴 등록 --> <key>CFBundleURLTypes</key> <array> <dict> <key>CFBundleTypeRole</key> <string>Editor</string> <key>CFBundleURLName</key> <string>com.finpong.finpongPlusExample</string> <key>CFBundleURLSchemes</key> <array> <string>사용할 앱 스킴을 입력해 주세요.</string> </array> </dict> </array> <!-- 간편인증을 하기 위한 앱 등록 --> <key>LSApplicationQueriesSchemes</key> <array> <string>naversearchthirdlogin</string> <string>supertoss</string> <string>finpongapp</string> <string>tauthlink</string> <string>ktauthexternalcall</string> <string>upluscorporation</string> <string>kakaotalk</string> </array> ... </dict> </plist>
-
-
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 | ||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
|
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 파일 다운로드 / 업로드 #
- 파일다운로드 & 업로드 가이드
사전 작업 : 업로드 팝업(업로드 동의/비동의 선택 팝업)을 고객사에서 제작합니다. - 웹뷰 내에서 파일데이터를 다운받고, 업로드 처리 후 업로드 결과값을 핀퐁플러스로 전달합니다.
- onCustomAction pageId값이 PA-001로 들어왔을때 고객사 업로드 팝업을 호출합니다.
- 고객사 업로드 팝업에서 동의 선택시 동의여부값을 전달합니다. finpongPlus의 fileDataConnect 함수 호출
- 다운로드 한 데이터가 전달됩니다. (pageId : FD-001)
var testData = {
isUpload:false, // 업로드 여부 N
uploadRes:'',
uploadMsg:'',
isAgree : 'Y'. // 동의 여부 Y
}
String jsonString = jsonEncode(testData);
finpongPlusController.runJavaScript('fileDataConnect',jsonString);
- 다운로드 데이터를 받아 고객사에서 업로드 처리 후 업로드 결과값을 전달합니다. finpongPlus의 fileDataConnect 함수 호출
var testData = {
isUpload:true, // 업로드 여부 Y
uploadRes:'success', // 업로드 성공 여부 코드 : 성공(success) /실패(fail)
uploadMsg:'업로드 성공하였습니다', // 업로드 결과 메세지 (성공, 실패 메세지)
isAgree : 'Y'
}
String jsonString = jsonEncode(testData);
finpongPlusController.runJavaScript('fileDataConnect',jsonString);
Metadata
1
likes
110
pub points
45%
popularity
Publisher
unverified uploader
Metadata
Finpong Plus Widget
Documentation
License
MIT (license)
Dependencies
dio, flutter, fluttertoast, freezed, freezed_annotation, json_annotation, plugin_platform_interface, url_launcher, webview_flutter
