[AVLE] Keychain을 이용한 이미지 업로드 (Dart)

etainclub (78)in SCT.암호화폐.Crypto • 3 years ago

지난 글에서 여러 포스팅 옵션을 설정하고 포스팅을 성공한 내용을 공유했었습니다.
[AVLE] Posting using AVLE Dapp

이것은 스팀 키체인을 쓴 것이 아니라 포스팅키를 사용한 것이었습니다.

AVLE에서는 포스팅키와 스팀 키체인을 지원하도록 개발되고 있는데요, 포스팅키를 입력하지 않고, 스팀키체인에 저장된 포스팅키를 이용하여 이미지를 업로드하는 부분을 구현했습니다.

이미지 업로드하는데 포스팅키가 필요하다고요? 네 그렇습니다. 우리가 잘 모르지만, 이미지를 업로드하기 위해서는 이미지 데이터를 포스팅키로 사이(sign)해야 합니다.

스팀키체인에서 이걸 담당하는 함수가 requestSignBuffer입니다. 일반적 메시지를 사닝하여 signature를 얻는 함수입니다.

AVLE 댑은 Flutter(개발언어는 Dart)로 개발되고 있는데, 스팀키체인 연동이 처음 시도되고 있어서, 개발에 시간이 걸리고 있습니다.
관련 자료도 없기 때문에 좀 애를 먹고 있습니다. 좀 늦게 알게 됏지만, 스코판 사이트 소스코드가 도움이 되고 있습니다.

이미지 선택

포스팅 페이지에서 이미지 업로드 아이콘을 클릭합합니다.

키체인이 설치되어 있다면 다음과 같이 Sign Message 창이 뜹니다.

여기서 하단의 Do not prompt ... 체크 박스를 체크하면 다음부터는 사진 업로드 사이닝을 물어보지 않고 자동으로 처리합니다.

업로드 확인

키체인을 통해서 이미지 데이터가 사이닝되고 나면 스팀 이미지 서버에 등록되고 그 결과로 이미지 주소 url이 얻어집니다. 그걸 에디터 화면에 입력하면 이미지가 표시됩니다.

이미지 sign 코드

이미지 업로드하기 위해, 데이터 빌드하는 부분과 사인하는 부분의 코드는 다음과 같습니다. 데이터 구성하는 방법이 포스팅키 방식과 조금 달라서 좀 고생했네요.

import 'dart:js' as dartJs;

_uploadImageByKeychain(
      {required String imagePath,
      required Uint8List imageBytes,
      required Uint8List hash}) {
    //// prepare message data
    final imageBuffer =
        buildImagerBuffer(prefix: 'ImageSigningChallenge', data: imageBytes);
    final jsonMessage = {
      'type': 'Buffer',
      'data': imageBuffer,
    };
    printWarning('jsonMessage: $jsonMessage');
    // sign the data using keychain
    steemKeychain.requestSignBuffer(
      username: 'etainclub',
      message: json.encode(jsonMessage),
      keyType: 'Posting',
      callback: dartJs.allowInterop(
        (response) async {
          print('requestSignBuffer response result: ${response['result']}');
          if (response['success']) {
            final signature = response['result'];
            final url = await _uploadImage(
                imagePath: imagePath,
                imageBytes: imageBytes,
                signature: signature);
            if (url != null) {
              getImageUrl(url);
            }
          } else {
            print('failed to upload image by keychain');
          }
        },
      ),
    );
  }

//
Uint8List buildImagerBuffer({required String prefix, required Uint8List data}) {
  // create a buffer
  final dataBuffer = BytesBuilder();
  // write the prefix data in the buffer
  dataBuffer.add(utf8.encode(prefix) as Uint8List);
  // add data in the buffer
  dataBuffer.add(data);
  return dataBuffer.toBytes();
}

// steem keychain
void requestSignBuffer(
      {required String username,
      required String message,
      required String keyType,
      required Function callback}) {
    try {
      js.context["steem_keychain"].callMethod('requestSignBuffer', [
        username,
        message,
        keyType,
        callback,
      ]);
    } catch (error) {
      printError('failed to requestSignBuffer. error: $error');
    }
  }

다음엔 스팀 키체인으로 포스팅하는 부분을 구현해서 보여드릴게요!