La API de selector de Google es una API de JavaScript que puedes usar en tus apps web para permitir que los usuarios seleccionen o subir archivos de Google Drive. Los usuarios pueden otorgar permiso a tus apps para acceder a sus Los datos de Drive ofrecen una forma segura y autorizada de interactuar con sus archivos.
El selector de Google actúa como un elemento "File Open". diálogo para la información almacenada en Drive y cuenta con las siguientes funciones:
- Un aspecto similar al de la IU de Google Drive
- Varias vistas que muestran vistas previas y miniaturas de los archivos de Drive.
- Una ventana modal intercalada, para que los usuarios nunca abandonen la aplicación principal.
Ten en cuenta que el selector de Google no permite que los usuarios organicen, muevan ni copien archivos de una carpeta. a otro. Para hacerlo, puedes usar la API de Google Drive o la IU de Drive.
Requisitos de la aplicación
Las aplicaciones que usan el selector de Google deben cumplir con todos los Condiciones del Servicio Lo más importante es identificar correctamente en tus solicitudes.
También debes tener un proyecto de Google Cloud.Configura tu entorno
Para comenzar a usar la API de Google Picker, debes configurar tu entorno.
Habilita la API
Antes de usar las APIs de Google, debes activarlas en un proyecto de Google Cloud. Puedes activar una o más APIs en un solo proyecto de Google Cloud.
En la consola de Google Cloud, habilita la API de Google Picker.
Crea una clave de API
Una clave de API es una cadena larga que contiene letras mayúsculas y minúsculas, números,
guiones bajos y guiones, como AIzaSyDaGmWKa4JsXZ-HjGw7ISLn_3namBGewQe
Este método de autenticación se usa para acceder de forma anónima a un documento de
datos, como los archivos de Google Workspace que se comparten mediante la opción "Cualquiera en Internet
con este vínculo configuración de uso compartido. Para obtener más detalles, consulta
Autentícate mediante claves de API.
Para crear una clave de API, sigue estos pasos:
- En la consola de Google Cloud, ve a Menú > APIs y Servicios > Credenciales.
- Haz clic en Crear credenciales >. Clave de API.
- Se mostrará tu nueva clave de API.
- Haz clic en Copiar . para copiar tu clave de API y usarla en el código de tu app. La clave de API también se puede que se encuentran en la sección "Claves de API" de las credenciales de tu proyecto.
- Haz clic en Restringir clave para actualizar la configuración avanzada y limitar el uso. de tu clave de API. Para obtener más detalles, consulta Aplica restricciones de clave de API.
Autoriza credenciales para una aplicación web
Para autenticar usuarios finales y acceder a sus datos en tu app, debes hacer lo siguiente: crear uno o más IDs de cliente de OAuth 2.0. Un ID de cliente se usa con el fin de identificar una sola app para los servidores de OAuth de Google. Si tu app se ejecuta en varias plataformas debes crear un ID de cliente diferente para cada plataforma.
- En la consola de Google Cloud, ve a Menú > APIs y Servicios > Credenciales.
- Haz clic en Crear credenciales > ID de cliente de OAuth.
- Haz clic en Tipo de aplicación > Aplicación web.
- En el campo Nombre, escribe un nombre para la credencial. Este nombre solo se muestra en la consola de Google Cloud.
- Agrega URI autorizados relacionados con tu aplicación:
- Apps del cliente (JavaScript): En Orígenes autorizados de JavaScript, haz clic en Agregar URI. Luego, ingresa un URI para usar en las solicitudes del navegador. Esto identifica los dominios desde los cuales tu aplicación puede enviar solicitudes de API al servidor OAuth 2.0.
- Apps del servidor (Java, Python y más): en Authorized redirect URIs, haz clic en Add URI. Luego, ingresa un URI de extremo al que el servidor de OAuth 2.0 pueda enviar respuestas.
- Haz clic en Crear. Aparecerá la pantalla de creación del cliente de OAuth, en la que se mostrará tu nuevo ID de cliente y secreto del cliente.
Anota el ID de cliente. Los secretos del cliente no se usan para las aplicaciones web.
- Haz clic en Aceptar. La credencial creada recientemente aparece en ID de cliente de OAuth 2.0.
Picker
Para solicitar un token de acceso, consulta Cómo usar OAuth 2.0 para acceder a las APIs de Google.
Muestra el selector de Google
En el resto de esta guía, se explica cómo cargar y mostrar el selector de Google desde una aplicación web. Para Para ver el ejemplo completo, dirígete a la muestra de código del selector de Google.Carga la biblioteca del selector de Google
Para cargar la biblioteca del selector de Google, llama a gapi.load()
con el nombre de la biblioteca y una
función de devolución de llamada que se debe invocar después de una carga correcta:
<script> let tokenClient; let accessToken = null; let pickerInited = false; let gisInited = false; // Use the API Loader script to load google.picker function onApiLoad() { gapi.load('picker', onPickerApiLoad); } function onPickerApiLoad() { pickerInited = true; } function gisLoaded() { // TODO(developer): Replace with your client ID and required scopes. tokenClient = google.accounts.oauth2.initTokenClient({ client_id: 'CLIENT_ID', scope: 'SCOPES', callback: '', // defined later }); gisInited = true; } </script> <!-- Load the Google API Loader script. --> <script async defer src="https://apis.google.com/js/api.js" onload="onApiLoad()"></script> <script async defer src="https://accounts.google.com/gsi/client" onload="gisLoaded()"></script>
Reemplaza lo siguiente:
CLIENT_ID
: Es el ID de cliente de tu aplicación web.SCOPES
: Uno o más permisos de OAuth 2.0 que debes solicitar para acceder a las APIs de Google, según el nivel de acceso que necesites. Para obtener más información, consulta Alcances de OAuth 2.0 para las APIs de Google.
La biblioteca JavaScript de google.accounts.oauth2
te ayuda a solicitar el consentimiento del usuario y a obtener un token de acceso para trabajar con sus datos.
El método initTokenClient()
inicializa un nuevo cliente de token con el ID de cliente de tu aplicación web. Para obtener más información, consulta Usa el modelo de tokens.
La función onApiLoad()
carga las bibliotecas del selector de Google. El
Se llama a la función de devolución de llamada onPickerApiLoad()
después de la biblioteca del selector de Google.
se carga correctamente.
Muestra el selector de Google
La función createPicker()
verifica si se termina de cargar la API de Google Picker.
y que se cree un token de OAuth. Usa el
setAppId
para establecer la
ID de la app de Drive para permitir que la app acceda a los archivos del usuario. Luego, esta función
Crea una instancia del selector de Google y la muestra:
// Create and render a Google Picker object for selecting from Drive. function createPicker() { const showPicker = () => { // TODO(developer): Replace with your API key const picker = new google.picker.PickerBuilder() .addView(google.picker.ViewId.DOCS) .setOAuthToken(accessToken) .setDeveloperKey('API_KEY') .setCallback(pickerCallback) .setAppId(APP_ID) .build(); picker.setVisible(true); } // Request an access token. tokenClient.callback = async (response) => { if (response.error !== undefined) { throw (response); } accessToken = response.access_token; showPicker(); }; if (accessToken === null) { // Prompt the user to select a Google Account and ask for consent to share their data // when establishing a new session. tokenClient.requestAccessToken({prompt: 'consent'}); } else { // Skip display of account chooser and consent dialog for an existing session. tokenClient.requestAccessToken({prompt: ''}); } }
Para crear una instancia de selector de Google, debes crear un Picker
.
con PickerBuilder
. El
PickerBuilder
toma un View
, un token OAuth, un
de desarrollador y una función de devolución de llamada para invocar la ejecución de forma correcta (pickerCallback
).
El objeto Picker
renderiza un View
a la vez. Especifica al menos una vista,
ya sea mediante ViewId
(google.picker.ViewId.*
) o mediante la creación de una instancia de un
tipo (google.picker.*View
). Especifica la vista por tipo para obtener
control sobre cómo se renderiza la vista.
Si se agrega más de una vista al Selector de Google, los usuarios pueden cambiar de una vista a otra.
haciendo clic en una pestaña de la izquierda. Las pestañas se pueden agrupar de forma lógica con objetos ViewGroup
.
Cómo implementar la devolución de llamada del selector de Google
Se puede usar una devolución de llamada del selector de Google para reaccionar a las interacciones del usuario en el selector de Google, como
seleccionando un archivo o presionando Cancelar. La Response
transmite información sobre las selecciones del usuario.
// A simple callback implementation. function pickerCallback(data) { let url = 'nothing'; if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) { let doc = data[google.picker.Response.DOCUMENTS][0]; url = doc[google.picker.Document.URL]; } let message = `You picked: ${url}`; document.getElementById('result').innerText = message; }
La devolución de llamada recibe un objeto data
con codificación JSON. Este objeto contiene un
Action
que el usuario realiza con el selector de Google (google.picker.Response.ACTION
).
Si el usuario selecciona un elemento Document
,
el array google.picker.Response.DOCUMENTS
también es
se complete. En este ejemplo, google.picker.Document.URL
se muestra en la página principal.
Para obtener detalles sobre los campos de datos, consulta la Referencia de JSON.
Filtra tipos de archivos específicos
Usa un objeto ViewGroup
como forma de filtrar elementos específicos.
En la siguiente muestra de código, se puede ver cómo se ejecuta “Google Drive” subview muestra solo documentos y presentaciones.
let picker = new google.picker.PickerBuilder() .addViewGroup( new google.picker.ViewGroup(google.picker.ViewId.DOCS) .addView(google.picker.ViewId.DOCUMENTS) .addView(google.picker.ViewId.PRESENTATIONS)) .setOAuthToken(oauthToken) .setDeveloperKey(developerKey) .setCallback(pickerCallback) .build();Para obtener una lista de los tipos de vistas válidos, consulta
ViewId
.
Ajusta la apariencia del selector de Google
Puedes usar el objeto Feature
para activar o desactivar las funciones de varias vistas.
Para ajustar la apariencia de la ventana del Selector de Google, usa el
Función PickerBuilder.enableFeature()
o PickerBuilder.disableFeature()
. Por ejemplo, si solo tienes una vista, es posible que quieras ocultar
Panel de navegación (Feature.NAV_HIDDEN
) que les brinda a los usuarios más espacio para ver los elementos.
La siguiente muestra de código muestra un ejemplo del selector de búsqueda de una hoja de cálculo con esta función:
let picker = new google.picker.PickerBuilder() .addView(google.picker.ViewId.SPREADSHEETS) .enableFeature(google.picker.Feature.NAV_HIDDEN) .setDeveloperKey(developerKey) .setCallback(pickerCallback) .build();
Renderiza el selector de Google en otros lenguajes
Para especificar el idioma de la IU, proporciona la configuración regional a PickerBuilder
con el método setLocale(locale)
.
En el siguiente ejemplo de código, se muestra cómo establecer la configuración regional en francés:
let picker = new google.picker.PickerBuilder() .addView(google.picker.ViewId.IMAGE_SEARCH) .setLocale('fr') .setDeveloperKey(developerKey) .setCallback(pickerCallback) .build();
La siguiente es la lista de configuraciones regionales admitidas actualmente:
af am ar bg bn ca cs |
da de el en en-GB es es-419 |
et eu fa fi fil fr fr-CA |
gl gu hi hr hu id is |
it iw ja kn ko lt lv |
ml mr ms nl no pl pt-BR |
pt-PT ro ru sk sl sr sv |
sw ta te th tr uk ur |
vi zh-CN zh-HK zh-TW zu |