전자 서명 프로세스 추가(signature)

전자 서명 프로세스 추가(signature)

 

전자 서명 팝업 프로세스를 보기 전에 Signature Pad in Flutter 라이브러리를 설치하고 오자 (아래 링크를 참고하자) ... 간단한 사용법도 제공하고 있다.

https://www.youtube.com/watch?v=RomU9gVHxpQ

 

선언하기

// pubspec.yaml -> 패키지 선언
dependencies:
  flutter:
    sdk: flutter
    
    # The following adds the Cupertino Icons font to your application.
    # Use with the CupertinoIcons class for iOS style icons.
  
    signature: ^5.0.0
    
    ...

 

다운로드

// command -> 패키지 선언 다운로드
flutter pub get

 

[전자 서명 생성 목적]

의사 계정으로 로그인 후 서명을 작성해야 의사 페이지에 모든 기능을 이용할 수 있다.

모든 기능을 이용할 수 있는 조건은 login & file/UPLOAD_FILES에서 받는 doctor_sign_path가 null 인지 null이 아닌지로 구분한다.

 

서명을 작성 후 file/UPLOAD_FILES & master/UPDATE_BUSINESS_AUTH를 호출한다.

file/UPLOAD_FILES는 이미지 파일을 저장하며, idx와 doctor_sign_path를 받아온다.

-> idx는 master/UPDATE_BUSINESS_AUTH에서 유저정보를 업데이트할 때 사용한다.

-> doctor_sign_path는 유저정보가 업데이트되지 않은 상태(다시 로그인하지 않은 상태)에서 유저가 서명을 수정하고 싶을 때를 대비해서 받아오고 있다.

master/UPDATE_BUSINESS_AUTH는 idx를 전달하여 로그인 후 doctor_sign_path를 받아올 수 있도록 유저정보를 업데이트해 준다.

 

[전자 서명 코드]

// 컨트롤러 설정
SignatureController controller = SignatureController(
    penStrokeWidth: 3, // 굵기
    penColor: Colors.black, // 색상
);

// 이미지 저장 공간 설정
Uint8List? exportedImage;

// 저장 프로세스
void saveHandle() async {
    // 이미지 pngByte로 저장
    exportedImage = await controller.toPngBytes();

    final response = await Session().post(
        "file/UPLOAD_FILES",
        exportedImage,
    );

    if (response['status'] == 200) {
        final responseUpdate = await Session().post(
            "master/UPDATE_BUSINESS_AUTH",
            {"doctor_sign_idx": response['data']['idx']},
        );
    }
}

// 다시 작성 프로세스
void rewriteHandle() async {
    controller.clear();
}

Signature(
    controller: controller,
    width: MediaQuery.of(context).size.width,
    height: 300,
    backgroundColor: const Color.fromARGB(255, 240, 240, 240),
)

 

[추가적인 고민사항]

file/UPLOAD_FILES를 호출할 때 아래와 같이 MultipartRequest를 사용하고 있다.

headers['Content-Type'] = 'multipart/form-data';

var request = new http.MultipartRequest('POST', uri);

request.files.add(
    http.MultipartFile.fromBytes(
        'files',
        data,
        filename: 'signature.png',
        contentType: MediaType('image', 'png'),
    ),
);

var streamedResponse = await request.send();

var responseBody = await streamedResponse.stream.bytesToString();

response = http.Response(responseBody, streamedResponse.statusCode, headers: streamedResponse.headers);

 

만약 ... 파일뿐만 아니라 추가적인 데이터를 서버 쪽에 전달하고 싶을 때는 어떤 식으로 해줘야 할까?

 

... 위 와 같은 코드

var request = new http.MultipartRequest('POST', uri);

... 추가된 코드 (addData를 추가로 보내고 싶은 데이터라고 가정하자)
if(addData != null) {
  request.fields['addData'] = addData;
}

request.files.add(
    http.MultipartFile.fromBytes(
        'files',
        data,
        filename: 'signature.png',
        contentType: MediaType('image', 'png'),
    ),
);

... 위 와 같은 코드

 

위 추가된 코드처럼 request.fields 안에 원하는 데이터를 같이 보내주면 된다.

 

[결과]

Signature Pad in Flutter 라이브러리를 사용하여 pngbyte를 MultipartRequest를 통해 서버에 전달해 보았다.또한 MultipartRequest는 일반적인 post 요청과는 다르니 따로 공부할 필요가 있을 것 같다.