На прошлой неделе мы видели общий Загрузчик файлов с помощью Vue.

Теперь давайте посмотрим, как мы можем выбрать файл с Google Диска.

Первоначальная настройка с помощью Google

Перейдите на https://console.developers.google.com. Создайте проект.

После создания вашего проекта он появится в списке. Щелкните по проекту, который вы создали.

Вы увидите это диалоговое окно.

Вам нужно будет создать две учетные данные:

  1. Ключ API
  2. Идентификатор клиента OAuth

Создание ключа API:

Создание идентификатора клиента OAuth:

Чтобы создать идентификатор клиента OAuth, необходимо сначала указать название продукта на экране согласия.

Здесь ваш экран согласия OAuth (как показано на рисунке выше), введите данные приложения, такие как:

  • Имя приложения,
  • Логотип приложения и
  • Авторизованный домен.

После настройки экрана согласия OAuth.

Перейдите к созданию идентификатора клиента OAuth.

При успешном создании идентификатора клиента OAuth. Вы получите уникальный идентификатор клиента и секретный ключ.

Теперь перейдите на экран панели инструментов и выполните следующие действия:

  • Нажмите «Включить API и службы».
  • Найдите «Google Picker API» и Включите API.

Теперь вы готовы к интеграции Google Picker с приложением Vue Js.

Установка Vue и создание нового приложения.

(Перейти к следующему разделу, если это уже сделано ..)

Установите vue-cli, если установлена ​​версия Node v8.9 или выше.

Or

Создание нового проекта.

Создайте компонент GDriveSelector и включите скрипт Google API в подключенный обработчик жизненного цикла этого компонента.

Объявите необходимые свойства данных компонента.

Определение функций для подключения Google Диска

  • Функция, которая обрабатывает Google Auth и загружает средство выбора
  • Функция, которая обрабатывает результат Google Auth
  • Функция, которая создает Picker
  • Функция обратного вызова для Picker

Обратный вызов Picker получает список выбранных файлов.

После того, как все настроено, вы готовы протестировать функцию выбора файлов Google.

Простой рабочий пример можно найти здесь.

С сделкой репо можно ознакомиться здесь.



Честное программирование
Попытка упростить React Native! www.youtube.com



Проверьте мой канал на Youtube!

Это Картик, олицетворяющий вневременной .

Если вы найдете этот пост в блоге полезным, поделитесь им с другом.

Если вы столкнетесь с какими-либо трудностями, не стесняйтесь добавлять свои комментарии.

На следующей неделе появится Dropbox Chooser API с Vue.

Следуйте Практический дизайн и следите за обновлениями.