Google Picker 웹 구성요소는 Google Picker API를 웹 앱에 통합하는 또 다른 방법을 제공합니다.
웹 구성요소를 사용하면 Google Drive 파일 선택을 웹 앱에 간편하게 통합할 수 있습니다. 모든 상용구 API 로드 및 인증 로직을 단일 HTML 요소로 래핑합니다. gapi 로드 로직을 작성하지 않고도 <drive-picker> 태그를
코드에 직접 삽입할 수 있습니다. 일반 HTML 및 JavaScript에서 사용할 수 있으며 프레임워크에 구애받지 않고 Svelte, Vue, Angular 등과 원활하게 작동합니다.
웹 구성요소 라이브러리에 대한 자세한 내용은
@googleworkspace/drive-picker-element를 참고하세요.
React 앱의 경우 웹 구성요소의 공식 React 래퍼 패키지인
@googleworkspace/drive-picker-react를 사용하세요.
주요 특징
- 간단한 통합: 몇 줄의 코드로 Google Picker를 웹 앱에 추가합니다.
- 프레임워크 독립적: 선택한 웹 프레임워크 (React, Vue, Angular 등)와 원활하게 작동합니다.
- 오픈소스 및 맞춤설정 가능: 코드를 자유롭게 사용할 수 있으며 특정 요구사항에 맞게 맞춤설정할 수 있습니다.
- 원활한 OAuth 지원: 사용자 인증을 자동으로 처리하여 원활한 사용자 환경을 제공합니다.
- 맞춤설정 가능한 뷰: 속성을 설정하여 필요한 파일 형식 또는 뷰만 표시하도록 Google Picker를 구성합니다.
시작하기
NPM 또는 유사한 도구를 사용하여 구성요소를 설치합니다.
npm i @googleworkspace/drive-picker-elementCDN 버전도 사용할 수 있습니다. 사용 가능한 형식 및 버전은
unpkg를 참고하세요.<script src="https://unpkg.com/@googleworkspace/drive-picker-element@latest/dist/index.iife.min.js"></script>JavaScript 파일로
@googleworkspace/drive-picker-element구성요소를 가져옵니다.import "@googleworkspace/drive-picker-element";CDN 버전을 사용하는 경우 가져오기가 필요하지 않습니다. Google Picker 라이브러리와 인증에 사용되는 Google API 클라이언트 라이브러리가 자동으로 로드되기 때문입니다.
HTML 파일에 커스텀 요소를 추가합니다.
<drive-picker> <drive-picker-docs-view></drive-picker-docs-view> </drive-picker><drive-picker/>및<drive-picker-docs-view/>속성 및 속성은@googleworkspace/drive-picker-element의 참고 문서를 참고하세요.
이벤트
<drive-picker/> 요소는 다음 커스텀 이벤트를 디스패치합니다.
| 이벤트 | 설명 |
|---|---|
picker-picked |
사용자가 항목을 하나 이상 선택하면 발생합니다. |
picker-canceled |
사용자가 '취소' 버튼을 클릭하거나 선택하지 않고 대화상자를 닫아 선택을 취소하면 발생합니다. |
picker-error |
초기화 또는 파일 선택 중에 오류가 발생하면 발생합니다. |
이벤트에 대한 자세한 내용은 NPM의
@googleworkspace/drive-picker-element
문서를 참고하세요.
이벤트 세부정보
picker-picked 이벤트의 경우 이벤트 세부정보에 전체
Google Picker
ResponseObject가 포함됩니다.
{
"type": "picker-picked",
"detail": {
"action": "PICKED",
"docs": [
{
"id": ID,
"mimeType": "application/pdf",
"name": NAME,
"url": "https://drive.google.com/file/d/ID/view?usp=drive_web",
"sizeBytes": 12345
}
]
}
}
응답 객체에서 가장 흔히 사용되는 속성은 다음과 같습니다.
action: 콜백을 트리거한 작업입니다 (예:PICKED).docs: 사용자가 선택한DocumentObject의 배열입니다. 각 객체에는 다음과 같은 속성이 포함됩니다.
picker-error 이벤트의 경우 event.detail에 실패를 설명하는 오류 객체 또는 문자열 (예: ERR_USER_NOT_AUTHENTICATED)이 포함됩니다.
예
다음 코드 샘플은 일반적인 사용 사례에 Google Picker 웹 구성요소를 사용하는 방법을 보여줍니다. 각 코드 샘플에서 다음을 바꿉니다.
PROMPT: 사용자에게 표시할 Google 계정 승인 프롬프트의 공백으로 구분된 대소문자를 구분하는 목록입니다. 자세한 내용은
TokenClientConfig.prompt를 참고하세요.ORIGIN: 선택기의 origin 매개변수입니다. 예를 들면
https://developers.google.com입니다. 자세한 내용은PickerBuilder.setOrigin메서드를 참고하세요.APP_ID: Drive 앱 ID입니다. 자세한 내용은
PickerBuilder.setAppId메서드를 참고하세요.CLIENT_ID: OAuth 2.0 클라이언트 ID입니다. 자세한 내용은 OAuth 2.0을 사용하여 Google API에 액세스하기를 참고하세요.
PDF 파일
mime-types 속성을 사용하여 PDF 파일만 표시하도록 뷰를 필터링합니다.
<drive-picker
prompt="PROMPT"
origin="ORIGIN"
app-id="APP_ID"
client-id="CLIENT_ID"
>
<drive-picker-docs-view mime-types="application/pdf"></drive-picker-docs-view>
</drive-picker>
이미지 및 동영상 파일
mime-types 속성을 사용하여 이미지 (JPEG, PNG) 및 동영상 (MP4, QuickTime) 파일만 표시하도록 뷰를 필터링합니다.
<drive-picker
prompt="PROMPT"
origin="ORIGIN"
app-id="APP_ID"
client-id="CLIENT_ID"
>
<drive-picker-docs-view mime-types="image/jpeg,image/png,video/mp4,video/quicktime"></drive-picker-docs-view>
</drive-picker>
내가 소유한 파일
owned-by-me 속성을 사용하여 현재 사용자가 소유한 파일만 표시하도록 뷰를 필터링합니다.
<drive-picker
prompt="PROMPT"
origin="ORIGIN"
app-id="APP_ID"
client-id="CLIENT_ID"
>
<drive-picker-docs-view owned-by-me="true"></drive-picker-docs-view>
</drive-picker>
제목 없는 파일 쿼리
query 속성을 사용하여 검색어 '제목 없음'과 일치하는 파일을 표시하도록 뷰를 필터링합니다.
<drive-picker
prompt="PROMPT"
origin="ORIGIN"
app-id="APP_ID"
client-id="CLIENT_ID"
>
<drive-picker-docs-view query="Untitled"></drive-picker-docs-view>
</drive-picker>
별표표시한 파일
starred 속성을 사용하여 별표표시한 파일만 표시하도록 뷰를 필터링합니다.
<drive-picker
prompt="PROMPT"
origin="ORIGIN"
app-id="APP_ID"
client-id="CLIENT_ID"
>
<drive-picker-docs-view starred="true"></drive-picker-docs-view>
</drive-picker>
관련 주제
- 속성, 이벤트, 속성에 대한 자세한 내용은 GitHub의 전체
drive-picker-element문서를 참고하세요.