Vue Google Picker

Illustration de : Udhaya Chandran

La semaine dernière, nous avons vu un téléchargeur de fichiers général avec Vue .

Voyons maintenant comment sélectionner un fichier sur Google Drive.

Un exemple simple déployé de sélecteur de fichiers Vue-Gdrive

Configuration initiale avec Google

Aller à https://console.developers.google.com. Créez un projet.

Après avoir créé votre projet, il sera répertorié, cliquez sur le projet que vous avez créé.

Vous verriez cette boîte de dialogue.

Vous devrez créer deux identifiants :

  1. clé API
  2. ID client OAuth
Cliquer sur la clé API génère une clé unique pour le projet.

Création d'un identifiant client OAuth :

Pour créer un identifiant client OAuth, vous devez d'abord définir un nom de produit sur l'écran de consentement.

Ici, sur votre écran de consentement OAuth (comme le montre la photo ci-dessus), entrez les détails de l'application tels que :

  • Nom de l'application,
  • Logo de l'application, et
  • Domaine autorisé.
  • Donnez le nom de votre candidature
    Un domaine autorisé qui enverra les requêtes

Continuez à créer l’identifiant client OAuth.

Ajoutez vos origines Javascript autorisées et redirigez les URI

Lors de la création réussie de l'identifiant client OAuth. Vous obtiendrez un identifiant client unique et une clé secrète.

Allez maintenant sur l’ écran Tableau de bord et suivez les étapes :

  • Cliquez sur « Activer les API et les services ».
  • Recherchez « Google Picker API » et activez l’API .

Installation de Vue et création d'une nouvelle application .

( Passer à la section suivante, si déjà fait.. )

Installez vue-cli étant donné que Node v8.9 ou supérieur est installé.

Ou

Création d'un nouveau projet.

Créez un composant GDriveSelector et incluez le script API Google sur le hook de cycle de vie monté de ce composant.

Déclarez les propriétés de données requises du composant.

Définir les fonctions de connexion à Google Drive

  • La fonction qui gère Google Auth et charge le sélecteur
  • La fonction qui gère le résultat d'authentification Google
  • La fonction qui crée le Picker
  • La fonction de rappel pour Picker

Une fois que tout est défini, vous êtes tous prêts à tester votre fonctionnalité Google File Picker.

Un exemple de travail simple peut être trouvé ici .

Le dépôt peut être trouvé ici .

C'est Karthik qui représente Timeless .

Si vous trouvez cet article de blog utile, partagez-le avec un ami.

Si vous rencontrez des difficultés, n'hésitez pas à ajouter vos commentaires.

La semaine prochaine, l'API Dropbox Chooser avec Vue.

Suivez Practical Design et restez à l’écoute.

Suggested posts

Deux ans en design - Le bon, le mauvais et le laid…

Deux ans en design - Le bon, le mauvais et le laid…

"Hey Siri, joue Me Dive d'Olivia Dean." C'était en mai 2021 lorsque j'ai commencé mon stage à la Future Academy Africa à Akure, au Nigeria.

"Cette petite île change tout"

Comment nous avons conçu les activités en direct Lyft pour améliorer l'expérience des passagers

"Cette petite île change tout"

Un changeur de jeu pour le covoiturage De toutes les choses que nous faisons chez Lyft, la chorégraphie des ramassages entre les passagers et les chauffeurs est l'une des plus complexes et des plus conséquentes. Pour réussir cette chorégraphie, Lyft doit bien faire beaucoup de choses, mais il est essentiel de simplement tenir les coureurs au courant.

Related posts

Le défi de lecture Goodreads est toxique

Le défi de lecture Goodreads est toxique

La démangeaison dans ma main s'est propagée alors que je négociais avec le libraire local pour un autre livre. Ce livre, comme les autres que j'ai achetés récemment, trouverait son trône sur ma pile «À lire» (TBR); et pourtant, je l'ai acheté.

Réseau TV Twitter

Réseau TV Twitter

Ce qui est vieux est à nouveau nouveau et ce qui était autrefois la chose brillante et scintillante semble maintenant terne. Je ne parle pas du retour des jeans JNCO parmi les enfants cool du centre-ville avec d'autres modes de la fin des années 1990.

"La fosse des Mariannes dévoilée : dévoiler les terrifiantes vérités cachées de l'abîme"

"La fosse des Mariannes dévoilée : dévoiler les terrifiantes vérités cachées de l'abîme"

Introduction :Bienvenue, courageux lecteurs, dans un voyage qui nous emmènera dans les profondeurs les plus sombres de notre planète. Dans ce blog, nous plongeons dans le monde énigmatique de la fosse des Mariannes, découvrant ses secrets cachés et découvrant les vérités effrayantes qui se cachent sous sa surface.

Learning at Work Week compte plus que vous ne le pensez

Learning at Work Week compte plus que vous ne le pensez

Nous avons souvent du mal à mettre en œuvre ce que nous savons être bon pour nous. Qu'il s'agisse de dire à un proche que nous l'aimons ou de se rappeler de parler comme un pirate, il y aura toujours ceux qui prétendent qu'un jour, une semaine ou un mois d'événements ne sont pas nécessaires parce qu'ils font déjà ces choses.