Korzystanie z komponentu internetowego selektora Google

Komponent internetowy Google Picker to dodatkowy sposób na zintegrowanie interfejsu Google Picker API z aplikacjami internetowymi.

Ten komponent internetowy upraszcza integrację wyboru plików z Dysku Google z aplikacjami internetowymi. Zawiera całą logikę wczytywania i uwierzytelniania interfejsu API w jednym elemencie HTML. Umożliwia umieszczenie tagu <drive-picker> bezpośrednio w kodzie bez konieczności pisania logiki wczytywania gapi. Można go używać w zwykłym HTML i JavaScript, a także jest niezależny od platformy, dzięki czemu bezproblemowo współpracuje z Svelte, Vue, Angular i innymi.

Więcej informacji o bibliotece komponentów internetowych znajdziesz w artykule @googleworkspace/drive-picker-element.

W przypadku aplikacji React użyj oficjalnego pakietu React wrapper komponentu internetowego: @googleworkspace/drive-picker-react.

Najważniejsze funkcje

  • Prosta integracja: dodaj Google Picker do swoich aplikacji internetowych za pomocą kilku wierszy kodu.
  • Niezależność od platformy: bezproblemowo współpracuje z dowolną platformą internetową (React, Vue, Angular itp.).
  • Oprogramowanie open source i możliwość dostosowania: kod jest dostępny bezpłatnie i można go dostosować do własnych potrzeb.
  • Bezproblemowa obsługa OAuth: automatycznie obsługuje uwierzytelnianie użytkowników, zapewniając im wygodę.
  • Widoki z możliwością dostosowania: skonfiguruj Google Picker tak, aby wyświetlał tylko te typy plików lub widoki, których potrzebujesz, ustawiając atrybuty.

Rozpocznij

  1. Zainstaluj komponent za pomocą NPM lub podobnego narzędzia:

    npm i @googleworkspace/drive-picker-element

    Dostępna jest też wersja CDN. Dostępne formaty i wersje znajdziesz w unpkg.

    <script src="https://unpkg.com/@googleworkspace/drive-picker-element@latest/dist/index.iife.min.js"></script>

  2. Zaimportuj komponenty @googleworkspace/drive-picker-element do pliku JavaScript:

    import "@googleworkspace/drive-picker-element";

    Jeśli używasz wersji CDN, import nie jest wymagany, ponieważ automatycznie wczytuje ona bibliotekę Google Picker i bibliotekę klienta Google API używaną do uwierzytelniania.

  3. Dodaj elementy niestandardowe do pliku HTML:

    <drive-picker>
    <drive-picker-docs-view></drive-picker-docs-view>
</drive-picker>

    Atrybuty i właściwości <drive-picker/> oraz <drive-picker-docs-view/> znajdziesz w dokumentacji referencyjnej @googleworkspace/drive-picker-element.

Wydarzenia

Element <drive-picker/> wysyła te zdarzenia niestandardowe:

Zdarzenie Opis
picker-picked Wywoływane, gdy użytkownik wybierze co najmniej 1 element.
picker-canceled Wywoływane, gdy użytkownik anuluje wybór, klikając przycisk Anuluj lub zamykając okno bez dokonania wyboru.
picker-error Wywoływane, gdy podczas inicjalizacji lub wyboru pliku wystąpi błąd.

Więcej informacji o zdarzeniach znajdziesz w @googleworkspace/drive-picker-element dokumentacji w NPM.

Szczegóły wydarzenia

W przypadku zd0/picker-picked zdarzenia, szczegóły zdarzenia zawierają pełny 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
      }
    ]
  }
}

Najczęściej używane właściwości w obiekcie odpowiedzi to:

  • action: działanie, które wywołało wywołanie zwrotne (np. PICKED).
  • docs: tablica obiektów DocumentObject wybranych przez użytkownika. Każdy obiekt zawiera takie właściwości jak:
    • id: unikalny identyfikator wybranego elementu.
    • mimeType: typ MIME elementu.
    • name: nazwa elementu.
    • url: adres URL, który umożliwia otwarcie elementu na Dysku.
    • sizeBytes: rozmiar wybranego elementu w bajtach. Wartość nie jest zwracana, gdy element jest przesyłany.

W przypadku zdarzenia picker-error element event.detail zawiera obiekt błędu lub ciąg znaków opisujący błąd (np. ERR_USER_NOT_AUTHENTICATED).

Przykłady

Poniższe przykłady kodu pokazują, jak używać komponentu internetowego Google Picker w typowych przypadkach użycia. W każdym przykładzie kodu zastąp te elementy:

  • PROMPT: rozdzielona spacjami lista podpowiedzi dotyczących autoryzacji konta Google, które mają być wyświetlane użytkownikowi. Więcej informacji znajdziesz w artykule TokenClientConfig.prompt.

  • ORIGIN: parametr pochodzenia dla selektora. Na przykład https://developers.google.com. Więcej informacji znajdziesz w PickerBuilder.setOrigin metodzie.

  • APP_ID: identyfikator aplikacji Dysk. Więcej informacji znajdziesz w PickerBuilder.setAppId metodzie.

  • CLIENT_ID: identyfikator klienta OAuth 2.0. Więcej informacji znajdziesz w artykule o używaniu OAuth 2.0 do korzystania z interfejsów API Google. Zobacz Using OAuth 2.0 to Access Google APIs.

Pliki PDF

Filtruje widok, aby wyświetlać tylko pliki PDF, za pomocą atrybutu mime-types.

<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>

Pliki graficzne i wideo

Filtruje widok, aby wyświetlać tylko pliki graficzne (JPEG, PNG) i wideo (MP4, QuickTime), za pomocą atrybutu mime-types.

<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>

Pliki należące do mnie

Filtruje widok, aby wyświetlać tylko pliki należące do obecnego użytkownika, za pomocą atrybutu 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>

Zapytanie o pliki bez tytułu

Filtruje widok, aby wyświetlać pliki pasujące do zapytania „Bez tytułu”, za pomocą atrybutu 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>

Pliki oznaczone gwiazdką

Filtruje widok, aby wyświetlać tylko pliki oznaczone gwiazdką, za pomocą atrybutu 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>
  • Szczegółowe informacje o atrybutach, zdarzeniach i właściwościach znajdziesz w pełnej drive-picker-element dokumentacji na GitHub.