Vue Google Picker
На прошлой неделе мы видели общий загрузчик файлов с Vue .
Теперь давайте посмотрим, как мы можем выбрать файл с Google Диска.
Первоначальная настройка с помощью Google
Идти к https://console.developers.google.com. Создайте проект.
После создания вашего проекта он появится в списке, нажмите на созданный вами проект .
Вы увидите это диалоговое окно.
Вам нужно будет создать два учетных данных:
- API-ключ
- Идентификатор клиента OAuth
Создание идентификатора клиента OAuth:
Чтобы создать идентификатор клиента OAuth, сначала необходимо указать название продукта на экране согласия.
Здесь, на экране согласия OAuth (как показано на рисунке выше), введите данные приложения, например:
- Имя приложения,
- Логотип приложения и
- Авторизованный домен.
Приступайте к созданию идентификатора клиента OAuth.
При успешном создании идентификатора клиента OAuth. Вы получите уникальный идентификатор клиента и секретный ключ.
Теперь перейдите на экран панели инструментов и выполните следующие действия:
- Нажмите « Включить API и службы ».
- Найдите « API Google Picker » и включите API .
Установка Vue и создание нового приложения .
( Перейдите к следующему разделу, если это уже сделано.. )
Установите vue-cli, если установлен Node v8.9 или выше.
Или
Создание нового проекта.
Создайте компонент GDriveSelector и включите скрипт Google API в смонтированный крючок жизненного цикла этого компонента.
Объявите необходимые свойства данных компонента.
Определение функций для подключения Google Диска
- Функция, которая обрабатывает Google Auth и загружает средство выбора.
- Функция, которая обрабатывает результат Google Auth.
- Функция, которая создает Picker
- Функция обратного вызова для Picker
После того, как все настроено, вы готовы протестировать функцию выбора файлов Google.
Простой рабочий пример можно найти здесь .
Репо можно найти здесь .
Это Картик , представляющий Timeless .
Если вы нашли эту публикацию в блоге полезной, поделитесь ею с другом.
Если вы обнаружите какие-либо трудности, пожалуйста, не стесняйтесь добавлять свои комментарии.
На следующей неделе появится Dropbox Chooser API с Vue.
Следите за «Практическим дизайном» и следите за обновлениями.
Suggested posts
Два года в дизайне: хорошее, плохое и уродливое…
«Привет, Siri, включи Me Dive Оливии Дин». В мае 2021 года я начал стажировку в Future Academy Africa в Акуре, Нигерия.
«Этот маленький остров меняет все»
Как мы разработали Lyft Live Activity, чтобы повысить качество обслуживания пассажиров
Карьера в корне меняет правила игры Из всего, что мы делаем в Lyft, постановка пикапов между пассажирами и водителями — одна из самых сложных и важных. Успех этой хореографии зависит от того, насколько хорошо Lyft справляется со многими задачами, но важно просто держать райдеров в курсе.
Related posts
Медленная эрозия: раскрытие того, как люди угасают в своей карьере
В современном быстро меняющемся и конкурентном мире карьера играет важную роль в личностном росте, финансовой стабильности и общей удовлетворенности жизнью. Однако многие люди оказываются в безжалостном цикле застоя и неудовлетворенности, постепенно угасая в своей профессиональной жизни.
Преследование христиан: преступление на почве ненависти, о котором мы не говорим
Забудьте об исламофобии: христиане (и евреи) являются главными жертвами преступлений на почве религиозной ненависти.
Любой здравомыслящий человек знает, что в политических и медийных кругах доминируют левые, даже крайне левые, что создает дисбаланс в политическом дискурсе. В области религии этот дисбаланс хорошо виден: левые газеты и сети не спешат защищать христианскую веру.
