사용자 지정 작업 개요

• JavaScript
• Python

사용자 지정 작업은 프로그래밍 가능한 UI 구성 요소로 Frame.io에 직접 통합을 구축할 수 있는 수단입니다. 이를 통해 웹훅과 동일한 기본 이벤트 라우팅을 활용하여, 앱 내에서 사용자가 트리거할 수 있는 모든 워크플로 클래스를 지원합니다. 현재 사용자 지정 작업은 에셋에서 사용할 수 있으며, 아래 이미지와 같이 모든 에셋에서 사용할 수 있는 컨텍스트/오른쪽 클릭 드롭다운 메뉴에 표시됩니다.

에셋은 S3에 있는 파일과 Frame.io 내의 컨텍스트를 강력하게 나타내는 표현입니다. 여기에는 트랜스코드, 사용자/팀/프로젝트 컨텍스트, 메타데이터가 포함됩니다. 사용자가 에셋에서 사용자 지정 작업을 클릭하면 Frame.io는 제공된 URL로 페이로드를 보냅니다. 수신 애플리케이션은 HTTP 상태 코드로 응답하여 수신을 단순하게 확인하거나, Frame.io에 추가 UI를 렌더링할 수 있는 사용자 지정 콜백으로 응답할 수 있습니다.

사용자 지정 작업 설정

사용자 지정 작업은 developer.frame.io의 Custom Actions 영역에서 구성할 수 있습니다. Action에는 다음이 필요합니다.

클릭 - Frame.io로부터 수신하는 페이로드에 포함된 내용

사용자가 사용자 지정 작업을 클릭하면 URL 필드에 지정한 URL로 페이로드가 전송됩니다.

1
POST /your/url
2
{
3
  "action_id": "2444cccc-7777-4a11-8ddd-05aa45bb956b",
4
  "interaction_id": "aafa3qq2-c1f6-4111-92b2-4aa64277c33f",
5
  "project": {
6
    "id": "a7d6a74b-d45d-4019-9069-24651e0b9f64"
7
  },
8
  "resource": {
9
    "id": "9q2e5555-3a22-44dd-888a-abbb72c3333b",
10
    "type": "asset"
11
  },
12
  "team": {
13
    "id": "54353cd2-c6ee-4aa1-954a-ce9e19602aa9"
14
  },
15
  "type": "my.action",
16
  "user": {
17
    "id": "fb57eee0-79f2-4bc7-9b70-99fbc175175c"
18
  }
19
}

이 페이로드를 사용하여 다음을 식별할 수 있습니다.

• 어떤 사용자 지정 작업이 클릭되었는지
• 어떤 리소스가 클릭되었는지
• 어떤 사용자가 작업을 수행했는지

메시지 콜백 만들기

웹훅 이벤트에 대한 HTTP 응답에서 Frame.io UI의 시작 사용자에게 반환될 메시지를 설명하는 JSON 오브젝트를 반환할 수 있습니다. 메시지를 빌드하고 어떻게 표시되는지 확인하려면, 메시지 콜백이나 양식을 설정하고 Frame.io 웹 앱에서 어떻게 나타나는지 확인할 수 있는 Custom Action Builder를 사용해 보세요.

다음은 예제 오브젝트입니다.

1
{
2
  "title": "Success!",
3
  "description": "The thing worked! Nice."
4
}

사용자에게 다음과 같은 알림이 표시됩니다.

메시지는 작업을 수행하는 사용자에게 컨텍스트 전환을 요구하지 않으면서 가변적인 컨텍스트를 제공하는 방식으로 작업 수명 주기 루프를 닫는 간단한 방법입니다.

이는 많은 사용 사례를 만족시키기에 충분하지만, 때로는 초기 페이로드 및 Frame.io API에 대한 후속 호출이 수신 애플리케이션에 충분한 컨텍스트를 제공하지 못할 수 있습니다. 이러한 시나리오를 위해 양식 콜백도 지원합니다.

양식 콜백 만들기

프로세스를 시작하기 전에 추가 정보가 필요하다고 가정해 보겠습니다. 예를 들어 추가 세부 정보와 설정이 필요한 시스템에 콘텐츠를 업로드할 수 있습니다. 응답에서 양식을 “설명”할 수 있으며, 사용자는 이를 실제로 보게 됩니다! 그리고 작성하게 됩니다! 그러면 귀하에게 바로 다시 전송됩니다!

다음은 초기 작업을 수행하는 사용자가 작성하고 제출할 수 있도록 Frame.io UI에서 양식을 렌더링하는 예제 양식입니다.

1
{
2
  "title": "Need some more info!",
3
  "description": "Getting ready to submit this file!",
4
  "fields": [
5
    {
6
      "type": "text",
7
      "label": "Title",
8
      "name": "title",
9
      "value": "MyVideo.mp4"
10
    },
11
    {
12
      "type": "select",
13
      "label": "Captions",
14
      "name": "captions",
15
      "options": [
16
        {
17
          "name": "Off",
18
          "value": "off"
19
        },
20
        {
21
          "name": "On",
22
          "value": "on"
23
        }
24
      ]
25
    }
26
  ]
27
}

사용자가 양식을 제출하면 초기 POST와 동일한 URL에서 이벤트를 받게 됩니다.

1
POST /your/url​
2
{
3
  "type": "your-specified-event-name",
4
  "interaction_id": "the-same-id-as-before",
5
  "action_id": "unique-id-for-this-custom-action",
6
  "data":{
7
    "title": "MyVideo.mp4",
8
    "captions": "off"
9
  }
10
}

양식에 추가한 모든 사용자 지정 필드는 Frame.io에서 보낸 JSON 페이로드의 data 섹션에 나타납니다. interaction_id를 사용하여 초기 요청과 이 새로운 양식 데이터를 매핑하세요. 그리고 원한다면 메시지(또는 다른 양식)로 응답할 수도 있습니다!

Action, 양식, 메시지를 연결하여 외부 시스템의 비즈니스 로직을 통해 Frame.io에서 전체 에셋 워크플로를 효과적으로 프로그래밍할 수 있습니다.

상상력을 발휘해 보세요! 한계는 없습니다.

양식 세부 정보

메시지와 마찬가지로 양식은 양식 맨 윗부분에 렌더링되는 title 및 description 특성을 지원합니다. 그 외에도 각 양식 필드에는 다음의 기본 특성이 허용됩니다.

• type — Frame.io UI에 예상할 데이터 유형, 렌더링할 구성 요소를 알려줍니다.
• label — UI에서 필드 위 헤더로 나타납니다.
• name — 후속 페이로드에서 필드를 식별할 키입니다.
• value — 필드에 미리 채워 넣을 값입니다.

지원되는 필드 유형

텍스트 필드

추가 매개변수가 없는 간단한 텍스트 필드입니다.

1
{  
2
  "type": "text",
3
  "label": "Title",
4
  "name": "title",
5
  "value": "MyVideo.mp4"
6
}

텍스트 영역

추가 매개변수가 없는 간단한 텍스트 영역입니다.

1
{  
2
  "type": "textarea",
3
  "label": "Description",
4
  "name": "description",
5
  "value": "This video is really, really popular."
6
}

Select list Defines a picklist that the user can choose from. Must include an options list, each member of which should include a human-readable name, and a machine-parseable value.

1
{
2
  "type": "select",
3
  "label": "Captions",
4
  "name": "captions",
5
  "value": "off",
6
  "options": [
7
       {
8
         "name": "Off",
9
         "value": "off"
10
       },
11
       {
12
         "name": "On",
13
         "value": "on"
14
      }
15
   ]
16
}

**선택 목록**: 사용자가 선택할 수 있는 선택 목록을 정의합니다. options목록이 포함되어야 하며, 각 멤버에는 사람이 읽을 수 있는name과 기계가 파싱할 수 있는 value`가 포함되어야 합니다.

1
{
2
3
4
  
5
6
"type": "select",
7
8
9
  
10
11
"label": "Captions",
12
13
14
  
15
16
"name": "captions",
17
18
19
  
20
21
"value": "off",
22
23
24
  
25
26
"options": [
27
28
29
       
30
31
{
32
33
34
         
35
36
"name": "Off",
37
38
39
         
40
41
"value": "off"
42
43
44
       
45
46
},
47
48
49
       
50
51
{
52
53
54
         
55
56
"name": "On",
57
58
59
         
60
61
"value": "on"
62
63
64
      
65
66
}
67
68
69
   
70
71
]
72
73
74
75
76
}

사용자 지정 작업 및 Frame.io 권한 모델

웹훅 및 사용자 지정 작업에는 특별한 권한 모델이 있습니다. 즉, 팀이나 계정에 존재하는 특정 사용자가 아니라 팀에 속합니다. 이는 다음을 의미합니다.

• 관리자나 팀 관리자는 누구나 팀에 사용자 지정 작업을 만들 수 있습니다.
• 관리자나 팀 관리자는 누구나 팀에 존재하는 사용자 지정 작업을 수정하거나 삭제할 수 있습니다. 수정이 완료되면 모든 사용자가 변경 결과를 즉시 볼 수 있습니다.

보안

기본적으로 모든 사용자 지정 작업에는 생성 시 만들어지는 서명 키가 있습니다. 이는 구성할 수 없습니다. 이 키를 사용하여 요청이 Frame.io에서 보낸 것인지 확인할 수 있습니다.

확인

POST 요청에는 다음이 포함됩니다.

서명 검증

1. HTTP 헤더에서 서명 추출
2. 버전, 전달 시간, 요청 본문을 결합하여 서명할 메시지 만들기

• v0:timestamp:body

3. 서명 시크릿을 사용하여 HMAC SHA256 서명을 계산하세요.

• 참고: 제공된 서명 앞에는 v0= 접두사가 붙습니다. 현재 Frame.io에는 요청 서명을 위한 버전이 이 한 가지뿐입니다. 계산된 서명에 이 접두사를 추가해야 합니다.

4. 비교하세요!

1
import hmac
2
import hashlib
3
4
def verify_signature(curr_time, req_time, signature, body, secret):
5
    """
6
    Verify webhook/custom action signature
7
    :Args:
8
        curr_time (float): Current epoch time
9
        req_time (float): Request epoch time
10
        signature (str): Signature provided by the frame.io API for the given request
11
        body (str): Custom Action body from the received POST
12
        secret (str): The secret for this Custom Action that you saved when you first created it
13
    """
14
    if int(curr_time) - int(req_time) < 500:
15
        message = 'v0:{}:{}'.format(req_time, body)
16
        calculated_signature = 'v0={}'.format(hmac.new(
17
            bytes(secret, 'latin-1'),
18
            msg=bytes(message, 'latin-1'),
19
            digestmod=hashlib.sha256).hexdigest())
20
        if calculated_signature == signature:
21
            return True
22
    return False