Selector de Google Vue
La semana pasada vimos un cargador de archivos general con Vue .
Ahora veamos cómo podemos seleccionar un archivo de Google Drive.
Configuración inicial con Google
Ir a https://console.developers.google.com. Crea un proyecto.
Después de crear su proyecto, aparecerá en la lista, haga clic en el proyecto que creó.
Verá este cuadro de diálogo.
Tendrás que crear dos credenciales:
- Clave API
- ID de cliente de OAuth
Creación de una identificación de cliente de OAuth:
Para crear una ID de cliente de OAuth, primero debe establecer un nombre de producto en la pantalla de consentimiento.
Aquí, en la pantalla de consentimiento de OAuth (como se ve en la imagen de arriba), ingrese los detalles de la aplicación, como:
- Nombre de la aplicación,
- Logotipo de la aplicación y
- Dominio autorizado.
Continúe para crear el ID de cliente de OAuth.
Al crear correctamente la identificación del cliente OAuth. Obtendrá una identificación de cliente única y una clave secreta.
Ahora ve a la pantalla del Panel y sigue los pasos:
- Haga clic en " Habilitar API y servicios ".
- Busque " API de Google Picker " y habilite la API .
Instalación de Vue y creación de una nueva aplicación .
( Pase a la siguiente sección, si ya lo hizo... )
Instale vue-cli dado que Node v8.9 o superior está instalado.
O
Creando un nuevo Proyecto.
Cree un componente GDriveSelector e incluya el script API de Google en el enlace del ciclo de vida montado de este componente.
Declare las propiedades de datos requeridas del componente.
Definición de funciones para conectar Google Drive
- La función que maneja la autenticación de Google y carga el selector.
- La función que maneja el resultado de autenticación de Google.
- La función que crea el selector.
- La función de devolución de llamada para Picker
Una vez que todo esté configurado, estará listo para probar la función Selector de archivos de Google.
Puede encontrar un ejemplo práctico sencillo aquí .
El repositorio se puede encontrar aquí .
Este es Karthik representando a Timeless .
Si encuentra útil esta publicación de blog, compártala con un amigo.
Si encuentra alguna dificultad, no dude en agregar sus comentarios.
La próxima semana llegará la API Dropbox Chooser con Vue.
Siga Diseño Práctico y esté atento.
Suggested posts
Dos años en diseño: lo bueno, lo malo y lo feo...
“Oye, Siri, toca Me Dive de Olivia Dean”. Fue en mayo de 2021 cuando comencé mi pasantía en Future Academy Africa en Akure, Nigeria.
“Esa islita lo cambia todo”
Cómo diseñamos Lyft Live Activities para mejorar la experiencia del pasajero
Un cambio de juego para los viajes compartidos De todas las cosas que hacemos en Lyft, coreografiar las recolecciones entre pasajeros y conductores es una de las más complejas y trascendentales. Lograr esta coreografía depende de que Lyft haga muchas cosas bien, pero simplemente mantener a los pasajeros al día es esencial.
Related posts
El asesinato de Jordan Neely y el problema del racismo “patriótico”
¿Puede Estados Unidos dar el paso esencial de no equiparar el comportamiento racista con ser un buen estadounidense?
[Alerta de activación: este ensayo incluye capturas de pantalla de personas que elogiaron al asesino de Jordan Neely.] Los funcionarios encargados de hacer cumplir la ley finalmente, y quizás a regañadientes, acusaron a Daniel Penny, el hombre que estranguló a Jordan Neely hasta que murió, por ese homicidio.
No más contraseñas: cómo las claves de acceso reemplazarán su contraseña
Para evitar ambigüedades se utilizarán los siguientes términos; autenticador; El teléfono móvil que se utiliza para realizar el inicio de sesión en el sitio web; El sitio web o la aplicación que el usuario está utilizando para realizar el servicio de solicitud de inicio de sesión; El proveedor que proporciona el servicio dado, por ejemplo
Conversaciones peligrosas
Si queremos seguir prosperando en este planeta, vamos a tener que tener conversaciones peligrosas. Aquellas que desafían lo que hemos hecho, lo que estamos haciendo y lo que actualmente vamos a seguir haciendo (o planeamos hacer).